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

前言

我是後端工程師，近期正在學習 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 state 及 props 介紹
Day5 state 及 props 的應用
Day6 Component 的三種長相
Day7 Life Cycle

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

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

環境安裝

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

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

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