Day01 : 關於這系列的 React 七天寫作松


在這時代,如果要當前端工程師,好像一定要具備前端框架的撰寫能力,畢竟除了本科系踏入前端領域外,線上課程也蓬勃發展,讓許多非本科系的人也跳進了這個領域。(包含我)

前言

我是一名資料庫開發者,工作除了針對資料庫效能調校、也會針對 Store Procedure 進行開發,工作之餘就是在前端網頁的世界中探索,近期正在學習 React,剛好看到第1屆開發者寫作松 Coder Blogathon Taiwan,我決定把我在 React 所學的紀錄在這次的鐵人賽,希望看到文章的人,能對你有幫助。

關於 React

在寫這主題時,我開始思考了撰寫 React 內容以外的事情,像是為什麼一定要用框架、為什麼這幾竄出這些前端框架,試著去思考,這幾年是不是大型網站變得相對以前普及了?舉個例子,在2010年的電商有現在這麼普及嗎?現在要網購很多選擇,你可以選擇 PCHOME、樂天、蝦皮、MOMO、露天等等,像這種大型網站,很多的商品跟訂單,如果劈頭就開始寫,光用想就是一場災難。
於是像 React 這類型的框架就出現了,React 由 Facebook 的軟體工程師Jordan Walke建立,可以透過多層組件有效的區分每個功能性的區塊,讓團隊可以很有效率的分工,也就是為什麼前端框架成為現今趨勢。

規劃

  • Day1 React介紹及建置
  • Day2 在 React 中可能會碰到的 JavaScript 觀念
  • Day3 HTML 混合 JS-JSX
  • Day4 stateprops 介紹
  • Day5 stateprops 的應用
  • Day6 Component 的三種長相
  • Day7 Life Cycle

老實說,我在學 React 的過程中,最大的挫折應該就是 JavaScript 程度太差,React 本身的東西其實不會太困難理解,但若對 JavaScript 的熟悉度低的話,許多靈活的用法可能就會卡住,另外有 ES6 的知識對學習 React 的幫助也會很大,因此我在這次的開頭會先提到我在學習過程中才學到的 JavaScript。

再來會從 React 環境中的 JSX 開始踏入這次主題中,且提到最核心的 stateprops,並應用在一些簡單的例子,而 React 最根本的就是組件,不同的組件可以結構成大組件,組件也有不一樣的寫法,而時間週期可以使你在使用 React 時有著不同時間點,讓你從中切入不同的操作。

環境安裝

想像一下,像是上面講的這些,瀏覽器真的看得懂 React 的 JSX?看得懂 ES6?瀏覽器是看不懂的,通常在開發 React 時會搭配 webpack 這樣的工具來轉換成瀏覽器能看得懂的內容,因此在建置上會花上一些學習時間,這邊就不細講一步一步的安裝流程,但還是建議嘗試自己裝過一次,這邊提供我覺得很棒的相關文章:

[筆記][React]從零到一的webpack開發環境(1)-安裝執行篇
[筆記][React]從零到一的webpack開發環境(2)-React開發篇

但 React 提供一個超方便的建置方式-Create React app(提醒:連結中 my-app 是自訂的名字)
本系列也都是使用這樣的方式,除了方便以外,也可以直接使用一些 ES6 的語法。

總結

這邊要特別提到我所參考的學習管道,其中是 Huli 在他的 Lidemy 所開設的 React 課程,我相當推薦。另外是 React.js 小書,很多很細節的觀念讓我也大開眼界。最後是官方文件,學習一個技術不看官方文件真的不行啊~(我在說我)

#React





React 七天寫作松
透過短短的七天,稍微把我對 React 的見解整理成七天份的文章,希望能對正在初學 React 的你有所幫助!

留言討論