React V16入門手冊（1）

時間 2019-12-04

標籤 react v16 入門手冊欄目 React 简体版

原文原文鏈接

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

開始着手學習React，就看到大佬推薦的這篇文章，由於是英文，就盡本身能力翻譯一下有錯的煩請指正。原文一共220頁A4紙，內容有點多，因此會分期更新，見諒前端

介紹

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

在本手冊裏使用了React Hooks，因此你須要使用高於等於 16.7.0-alpha.2 版本的React和ReactDom.react

若是你使用create-react-app初始化項目時，在初始化項目以後運行npm install react@16.7.0-alpha.2 react-dom@16.7.0- alpha.2程序員

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

React介紹

先來介紹一下React庫npm

什麼是React

React是一個旨在簡化開發可視化界面的Javascript庫。它由Facebook開發，並於2013年向世界發佈，並支持着不少被普遍使用的App，包括Facebook和Instagram等無數應用程序。它的主要目標是經過將UI劃分爲一組組件，使得在任什麼時候間點均可以輕鬆地構建界面及其狀態。json

爲何React這麼流行？

React席捲了整個前端開發領域，爲何？瀏覽器

比其餘框架更低的複雜性

在React出道以前，Ember.js和Angular1.X是主流框架。這兩種方法在代碼上強加了太多的約定，以致於移植現有的應用程序一點都不方便。React選擇了很是容易集成到現有項目中的方式，由於Facebook必須實現這一點，這樣才能將其引入現有代碼庫。另外，這兩個框架自己包含的內容太多了，而React只選擇實現視圖層而不是完整的MVC技術棧。bash

完美的時間

當谷歌宣佈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。

執行完以後你能看到下面的界面