初結 react（當 React 版本是 ^16.2.0，當前時間 2018-01-12）

    最近一段時間在零零碎碎地看 react 。在此，向全部自學 react 的朋友點個贊。多說一句，在自學道路上必定要戒驕戒躁，堅持下來。-----由於自學過程真的是心累啊（不一樣版本的博客不一樣的說法）。。。

    下面，開始建立 React 項目。我使用的是 VS Code 編譯器。

一、建立項目

    我這裏使用 React 官網給出的 Create React App 方式建立項目。

npm install -g create-react-app //第一步：全局安裝react
create-react-app my-app //第二步：建立 項目 （my-app是項目名）

cd my-app //第三步：切換到 項目中
npm start //第四步：運行項目

    首先，若果以前沒有全局安裝過 create-react-app ，這裏須要全局安裝一下（安裝過就不須要）；

    而後，使用 create-react-app my-app  命令建立項目。其中，my-app是項目名，注意這裏項目名勿使用駝峯命名方式，可使用 ‘-’ 鏈接。(實測，有時候大寫也沒報錯，有時候報錯了) 

錯誤提示：

create-react-app myDemo 使用這條命令建立 myDemo 項目報錯，以下：
Could not create a project called "myDemo" because of npm
naming restrictions:
  *  name can no longer contain capital letters （全部的名字不能夠包含大寫字母）。

    使用 create-react-app 方式建立項目後結構以下圖所示：

          

    接着，切換到項目中，使用 npm start 命令運行項目。

            

    我當時學習的時候，到這，開始去看官網基礎知識，開始 學習 react 相關的基礎語法知識去了。等我稍微瞭解一點後準備去看別人的 demo ，發現 別人的目錄結構和個人差距比較大。並且發現，我不太好更改配置文件。而後一臉懵逼，怎麼辦？看別人的 Demo （各類配置無法改）我很差跟着後面作，本身寫 Demo 有點太早。事後也翻閱了各類資料，原來。。。。

二、優化項目目錄結構

    運行 npm run eject 命令，完成後，項目結構下出現變化：config 配置文件文件夾，裏面包含各類配置文件；scripts 文件夾包含了 json 文件中 script 包含的命令 js 文件。具體以下圖所示：

                                      

    好了，如今須要改什麼配置文件能夠找到相應的配置文件進行更改。

三、Hello World

    程序員一直有個梗「Hello world !」，那咱們就先用 React 打印出 「Hello world !」。

    咱們打開 \my-demo\src\App.js文件，在 <div className="App"></div>能添加子元素<h1>Hellow world !</h1>，保存後更新頁面（自動更新），以下圖所示：

        

    下面咱們開始簡單瞭解一下 React 的基礎語法知識。

四、React 基礎語法

    React 的基礎語法知識建議多看看 React 官網，這裏給出個傳送門。靜下新來慢慢看，一點一滴地積累。沒有什麼是看文檔看不懂的，若是真沒看懂，那就再多看幾遍。。。

    這節我也不具體介紹這些基礎知識，只是提出須要注意哪些內容。具體的，仍是參考相關文檔。

4.1 JSX介紹

    我這裏也就不作太多介紹，也能夠參考個人《02. react 初次見面---JSX簡介》 ，這裏我作了我看的時候的一些標註。做爲初學者，先能看懂 JSX代碼、能寫一點簡單的 JSX語句仍是不難的，注意 「{ }」、「( )」的使用。應該沒什麼太大問題。

4.2 元素渲染

    具體見 React 官網文檔，或者個人《03. react 初次見面---元素渲染》 。這裏主要須要知道ReactDom.render( ) 是作頁面渲染的。在 /src/index.js 中有一段代碼 ReactDOM.render(<App />, document.getElementById('root'))，它的做用是 將組件名爲 App的組件 渲染到 id爲 root 的 HTML 元素中。

4.3 組件&Props

    組件這塊須要好好看，好好理解了。可參考《04. react 初次見面---組件&Props》。這裏須要理解組件的概念以及組件的兩種定義方式（函數定義組件和 ES6 class 方式定義組件）。這裏注意組件名必須以大寫字母開頭。

    理解 props 的概念：當React遇到的元素是用戶自定義的組件，它會將JSX屬性做爲單個對象傳遞給該組件,這個對象稱之爲「props」。

4.4 State&生命週期

    可參考《05. react 初次見面---State&生命週期》。

    首先，學會須要將函數定義的組件轉換爲類組件（ES6 class方式定義的組件）。使用類就容許咱們使用其它特性，如局部狀態、生命週期鉤子函數等。

    接着，學會爲一個類添加局部狀態。

    最後，學會將生命週期方法添加到類中（最經常使用的兩個鉤子是：掛載 componentDidMount( ){....} 和 卸載  componentWillUnmount( ){....} ）。

    除此以外，瞭解一下正確使用狀態（setState( )的用法）。

4.5 事件處理

    React 的數據自頂向下流動（即 單向數據流）。

    關於事件處理，能夠參考《06.react 初次見面---事件處理》， 

4.6 其它

Tips：

    這是我去年年末寫的，因爲這小半年一直在忙別的，react 就耽擱了下來。原本想把它刪了的，既然寫了，有須要的就看看吧。對於想學、或者初學 React 的朋友能夠從我前面文章開始看。