初識React
課程目標
- React簡介
- 腳手架
- hello world
- JSX語法
知識點
1.React簡介
React 起源於 Facebook 的內部項目，因爲該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站（https://www.instagram.com/）。做出來以後，發現這套東西很好用，就在2013年5月開源了（https://github.com/facebook/react）。由於 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認爲它可能是將來 Web 開發的主流工具。
官方網站：https://react.docschina.org/
英文官方網站：https://reactjs.org/
目前的版本： 16.13.1
github star數：149k (vue是164k)
npm下載量對比：https://npmcharts.com/compare/react,vue
2.腳手架
create-react-app官網：https://github.com/facebook/create-react-app
npm 從5.2版開始，增加了 npx 命令。
npx 還能避免全局安裝的模塊。
npx 將create-react-app下載到一個臨時目錄，使用以後再刪除。所以，以後再次執行上面的命令，會重新下載create-react-app。
每次使用的都是最新版本，腳手架使用的頻率並不高，一個大項目使用一次就夠了。
npx create-react-app my-app
cd my-app
npm start
3.hello world
類組件：
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<div>
hello world!
</div>
)
}
}
函數組件：
import React from 'react'
const Home = () => {
return (
<div>
hello world!
</div>
)
}
export default Home
4.JSX語法
React發明了JSX，利用HTML語法來創建虛擬DOM。
React的核心機制之一就是可以在內存中創建虛擬的DOM元素。以此來減少對實際DOM的操作從而提升性能。
JSX 即Javascript XML，它是對JavaScript 語法擴展。
我們建議在 React 中配合使用 JSX，JSX 可以很好地描述 UI 應該呈現出它應有交互的本質形式。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。
在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。
HTML 語言直接寫在 JavaScript 語言之中，這就是 JSX（JavaScript and XML） 的語法。JSX,是一種 JavaScript 的語法擴展，它允許 HTML 與 JavaScript 的混寫。JSX是facebook爲React框架開發的一套語法糖，語法糖又叫做糖衣語法，是指計算機語言中添加的某種語法，這種語法對語言的功能並沒有影響，但是更方便程序員使用，它主要的目的是增加程序的可讀性，從而減少程序代碼錯處的機會。JSX就是JS的一種語法糖，類似的還有CoffeeScript、TypeScript，最終它們都會被解析成JS才能被瀏覽器理解和執行，如果不解析瀏覽器是沒有辦法識別它們的，這也是所有語法糖略有不足的地方。
const element = <h1>Hello, world!</h1>;
上面這種看起來可能有些奇怪的標籤語法既不是字符串也不是HTML，被稱爲 JSX，JSX帶來的一大便利就是我們可以直接在JS裏面寫類DOM的結構，比我們用原生的JS去拼接字符串，然後再用正則替換等方式來渲染模板方便和簡單太多了。推薦在 React 中使用 JSX 來描述用戶界面。JSX 用來聲明 React 當中的元素， 乍看起來可能比較像是模版語言，但事實上它完全是在 JavaScript 內部實現的。
你可以任意地在 JSX 當中使用 JavaScript 表達式，在 JSX 當中的表達式要包含在大括號裏。例子如下：
const names = ['Jack', 'Tom', 'Alice'];
const element = (
<div>
{ names.map(function (name) { return <div>Hello, {name}!</div>}) }
</div>
);
在書寫 JSX 的時候一般都會帶上換行和縮進，這樣可以增強代碼的可讀性。與此同時，推薦在 JSX 代碼的外面擴上一個小括號，這樣可以防止分號自動插入的bug。
上面我們聲明瞭一個names數組，然後遍歷names數組在前面加上Hello，生成了element數組。JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員。JSX 本身其實也是一種表達式，在編譯之後，JSX 其實會被轉化爲普通的 JavaScript 對象。
授課思路
案例作業
1.閱讀官網
2.使用腳手架創建項目
3.編寫hello world頁面
4.預習加加減減