Hello! 今天來講講爲什麼要學習React?我第一次聽說 React 是我在美國讀研的時候，室友選了 web programming 這節課，然後遇到了關於 react 的好多問題，就是總也配置不好。我看他那個時候 React 的配置特別麻煩，要引入一堆依賴，像 bower, babel 等等… 還有文檔寫的也不清楚。有一次他剛開始做一個作業，問了我一個問題，大概是有一個組件顯示不出來，結果看了半天我也不知道是怎麼回事啊，因爲我也沒學過。後來他自己研究出來了，是因爲這個組件在使用的時候沒有大寫。我當時就覺得這個 React 好複雜呀，然後就決定，我可不學他，後來我在暑假裏面就學了 vue，但是回國之後呢，因爲某些原因我就沒有找後端的工作,轉向了前端，當時又看這個 react 已經變得特別方便了，有一個 create react app 工具，就能省好多事兒，而且 react 的生態圈又特別的龐大，就決定學了 react。因爲我覺得這個 react 開發大型的前端應用特別方便，尤其是它出了 hooks 之後。所以呢，我今天想給你分享一下。這個 react 到底是什麼東西？它有什麼好處？
React 的前世今生
以前呀，react 給自己的定位，就包括他官方文檔寫的，都是用來創建一個單頁應用的，什麼是單頁應用呢？單頁應用，就是說這個整個頁面它都沒有 URL 的跳轉。頁面的更新都是通過 JavaScript 來實現的。這樣的這個網站運行起來就像一個是一個本地的 APP 一樣。讓這個用戶的體驗更好。
但是呢，它一開始需要把所有的 js、css 還有 html 全部都加載進來, 之後的操作就是通過和服務器打交道，然後把數據取回來之後再更新需要改變的部分，而不會發生頁面的跳轉。現在 React 對自己的定位是一個 JavaScript 庫，來創建用戶界面的。從這個措辭上來看，它可以做所有跟用戶界面有關的應用，不管你是不是單頁應用還是多頁應用，是移動的 APP 還是其他，只要是用來展示用戶界面的都可以用它來做。
React 對開發有什麼好處?
組件化
使用 React 的好處呢，就是你可以創建 component，組件。然後可以把一個網站或者是應用上面的一些按鈕、菜單等這些小一點的單元做成一個組件，這些組件可以在不同的地方去重複使用。
而組件之間的變化是通過狀態來改變的，你可以把這個狀態想象成是一個觸發器的開關，只要狀態變了之後，那麼 React 就會根據這些新的狀態把這個組件在渲染一次，把它更新成新的。這個狀態是由組件內部來管理的，那麼在組件這麼一個獨立的單元裏邊，它負責自己的樣式還有狀態的改變，會使得開發很有邏輯。就不像是 jquery，如果你想改變哪個組件的狀態的話，需要先找到這個組件，然後再手動的去改變它的狀態。
效率高
React 開發效率高，就是因爲有了這些組件。記得我之前上班的時候，我拿到一個新的項目，先分析設計圖，把一些可能需要複用的組件寫好，一些不確定的就先把它寫到了相應的頁面裏面去，然後等有重複再用的時候，再把它單獨抽取出來，到最後慢慢的這些可重用的組件越來越多，在構建新頁面的時候也會越來越快，到最後就可以發展成爲一個標籤，就可以生成一個頁面。而且，這些組件可以作爲未來你自己的一個樣式庫，在開發新的項目的時候或者是開發別的像移動端的 APP 的時候可以拿過來直接就用，這樣還能保持風格的統一。
需要哪些技術才能學 React?
學習 React，你只需要掌握 html, css 還有 JavaScript 知識就行了，另外呢就是一些新特性， ES6/ES7/ES8，也需要了解一下，用的比較多的有箭頭函數，還有解構賦值，擴展運算。至於 class，因爲 React 出了 hooks 之後，基本上所有的組件都可以用函數式來寫了，所以說 class 已經變得不是那麼特別重要了。
創建第一個 React 項目
現在咱們來看一下這個怎麼創建一個 react 項目。因爲 React 創建出來的是一個 node 的工程，所以需要安裝一下 node.js， 安裝方法我在之前的視頻裏面講過。安裝完 node.js 之後，你也可以選擇性的去安裝一下 yarn，不過這個是不必要的，我個人比較習慣使用 yarn。
Create React App
接下來就是創建工程，可以使用 create-react-app 這個工具，打開你的命令行，找一個你覺得合適的文件夾，然後在裏面輸入
npx create-react-app hello-world
空格後邊是咱們這個工程的名字，比如說叫 hello-world。
等它創建完之後，運行這個項目使用：
npm start 或者是 yarn start，運行之後它會自動幫你打開一個瀏覽器，你可以看到一個 logo，還有一段話告訴咱們編輯一下 src/app.js 來看一下效果。咱們來看一下項目的目錄結構：
hello-world
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
└── yarn.lock
這裏你需要關心的就是 src 這個文件夾:
-
App.js- 他是這個 react 項目裏面的一個最頂層的組件。咱們看一下這個 App.js 的代碼：import React from "react"; import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;可以看到這個 react 的組件，是用一個函數來定義的，最後返回一些 html 的標籤，那這個 html 標籤叫做
jsx, 這個語法一開始看起來可能會很奇怪，在 js 裏面來寫 html，而且也不符合這個表現和邏輯分離的模式。其實這樣寫的話是非常容易在 html 還有 js 之間傳輸數據的，習慣了就好。最後把這個這組件 export 出去，讓index.js把它放到 id 爲 root 的 div 裏面。在組件裏使用 css 樣式的話，就直接在上邊用import把 css 樣式文件導入進來就可以了，它會自動應用裏邊的樣式。這裏注意一下，jsx 是用className來代替了 class。引用圖片的話，也只需要把圖片導入進來就可以，然後給它賦值給一個變量.在img這樣的標籤下，直接當作 src 的值就好了，在 jsx 裏邊引用 js 變量的話，需要使用大括號{}語法。 -
index.js- 是這個工程的入口文件。它裏邊就把這個 App 組件給掛載到了 id 爲 root 的 div 裏邊，通過調用ReactDOM.render()函數，它就會把 div 裏邊所有的代碼都替換成這個 App 組件生成的 html：ReactDOM.render(<App />, document.getElementById("root"));咱們可以看一下
public下邊的index.html裏，他就有一個 id 爲 root 的 div:<div id="root"></div>
咱們現在可以把 App 函數裏邊的代碼刪掉，然後返回一個簡單的組件，比如說把這個標籤改成 h1，然後裏面寫個 hello world，在保存這個頁面它就刷新了。
function App() {
return <h1>Hello World</h1>;
}
好了，現在你就創建了一個第一個 React 項目。
總結
今天給你講了一下 react 是什麼，然後它有一些什麼優點。接下來後面我會逐漸介紹它的一些特性，比如說屬性、狀態、還有事件的處理，高級的用法，組件的設計等等。現在你可以先用這個工程來自己先玩一下，看看能不能自己做出點什麼東西出來。如果有什麼其他問題，請在評論區留言，謝謝大家。