React V16入門手冊（1）

Little heaven發表於2019-01-18
React

原文medium.freecodecamp.org/the-react-h…

開始著手學習React，就看到大佬推薦的這篇文章，因為是英文，就儘自己能力翻譯一下有錯的煩請指正。原文一共220頁A4紙，內容有點多，所以會分期更新，見諒

介紹

這本React手冊遵循二八原則：用20%的時間學習80%的內容

在本手冊裡使用了React Hooks，所以你需要使用高於等於 16.7.0-alpha.2 版本的React和ReactDom.

如果你使用create-react-app初始化專案時，在初始化專案之後執行npm install react@16.7.0-alpha.2 react-dom@16.7.0- alpha.2

我希望你能在你閱讀完本手冊後能達到一個目標：學會React的基礎

React介紹

先來介紹一下React庫

什麼是React

React是一個旨在簡化開發視覺化介面的Javascript庫。它由Facebook開發，並於2013年向世界釋出，並支援著很多被廣泛使用的App，包括Facebook和Instagram等無數應用程式。 它的主要目標是通過將UI劃分為一組元件，使得在任何時間點都可以輕鬆地構建介面及其狀態。

為什麼React這麼流行？

React席捲了整個前端開發領域，為什麼？

比其他框架更低的複雜性

在React出道之前，Ember.js和Angular1.X是主流框架。這兩種方法在程式碼上強加了太多的約定，以至於移植現有的應用程式一點都不方便。React選擇了非常容易整合到現有專案中的方式，因為Facebook必須實現這一點，這樣才能將其引入現有程式碼庫。另外，這兩個框架本身包含的內容太多了，而React只選擇實現檢視層而不是完整的MVC技術棧。

完美的時間

當谷歌宣佈Angular2.X時，宣稱Angular1.X並不能平滑升級到Angular2.X，這兩個就像不同的框架一樣，所以想要從Angular1.X升級到Angular2.X就得重構專案。因為這一點，再加上React承諾說能帶來執行速度的提升，所以很多程式設計師就迫不及待的嘗試。

Facebook的支援

如果一個專案最終成功，得到Facebook的支援顯然也會讓它受益。Facebook目前對React非常感興趣，並看到了它開源的價值，這對所有在自己專案中使用React的開發者來說都是一個巨大的優勢。

React學起來容易嗎？

雖然我說React要比其他框架簡單，但是深入學習React的話還是挺有難度的，難的主要原因是要與React搭配使用的技術，比如Redux,GraphQL等等。

React本身有一個非常小的API，你至少需要理解4個概念才能開始:

  • Components
  • JSX
  • State
  • Props

上面這些（甚至更多）都會在手冊中一一解釋

如何安裝React

如何在你的電腦上安裝React?

React是一個庫，所以說安裝這個詞會有點奇怪，倒不如說“設定”更貼切。在你的app或者網頁中有很多方式可以設定React

直接在網頁裡引入

最簡單的方法是直接將React JavaScript檔案新增到頁面中。當React應用與單個頁面上的元素進行互動，而不是實際控制整個導航時，這是最好的選擇。

下面的例子中，你在body的最後新增了兩個script標籤

<html>
...
    <body>
    ...
        <script
        src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js" 
        crossorigin>
        </script>
        <script
        src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
        crossorigin>
        </script>
    </body>
</html>
複製程式碼

在這裡我們引入兩個庫（React和React Dom），是為什麼呢？因為React是百分之的獨立於瀏覽器的，你也可以在瀏覽器之外使用React（比如用React Native開發移動應用時，也能用React），因此需要React Dom來操作dom。

在引入Javascript檔案後，你需要為react，在html裡新增script標籤，才能使用JSX語法，下面兩種方式都可以

//在app.js裡寫JSX
<script src="app.js"></script>
<!-- or -->

//直接在標籤內寫JSX
<script>
//my app
</script>

複製程式碼

如果要使用JSX，你還需要引入Babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
複製程式碼

引入後要在之前寫的script標籤裡新增type="text/babel"才會生效，如下：

<script src="app.js" type="text/babel"></script>

複製程式碼

現在你可以在你的app.js裡寫JSX的程式碼了。

const Button = () => {
return <button>Click me!</button>
}
ReactDOM.render(<Button />, document.getElementById('root'))

複製程式碼

演示程式碼地址： glitch.com/edit/#!/rea…

用官方腳手架create-react-app（推薦）

create-react-app旨在讓你能快速構建一個React專案，任何React應用都可以使用create-react-app來生成一個單頁頁面。

首先你需要安裝npm和node （地址：nodejs.org/en/）就不多說了 然後執行

npx create-react-app todolist
複製程式碼

npx是npm 5.2之後才有的工具，npx會下載create-react-app，然後解壓安裝，然後執行create-react-app todolist,然後再把create-react-app從系統中刪除。這樣你就永遠能夠使用最新的create-react-app，不會在電腦裡存放著過時的create-react-app。

執行完之後你能看到下面的介面

React V16入門手冊（1）

create-react-app會在資料夾內建立相應的檔案結構，檔名就是todolist（自己取的） package.json也同樣生成了，只需要安裝指示，進入相應的資料夾，執行npm start就可以啟動專案了

如圖

React V16入門手冊（1）

開啟瀏覽器進入http://localhost:3000/就能看到最開始的介面了。

除了 npm start , create-react-app這兩個命令之外，還有下面一些命令

  • npm run build ：要在構建資料夾中構建準備部署到伺服器的React應用程式檔案
  • npm test：執行Jest測試包
  • npm eject ：彈出配置檔案 何時用npm eject？create-react-app已經做了很多工作了，但你想要完成更多的工作時，就要彈出配置檔案來自己配置。

因為create-react-app 是為了滿足大部分人的需求和有限的配置，當你有一些獨特的需求時，就需要自己來配置一些內容了。

當你使用npm eject時，你的頁面就不會自動更新了，但你可以在Babel和Webpack配置中獲得更大的靈活性。

eject時是不可逆的，當你執行後你會獲得兩個新的資料夾，配置和指令碼。你就可以開始自由的編輯他們了。

下節預告：下節我們將學習在學習React之前需要了解的JS語法及一些知識

相關文章