https://react.docschina.org/docs/hello-world.htmlReact教程
二、基本使用
webpack、Vue中的一、二搭建webpack環境
（1）安裝
npm install --save react react-dom 安裝
react：用於創建組件和虛擬DOM，包括組件的生命週期。
react-dom：將組件和虛擬DOM放到頁面展示，ReactDOM.render()。
（2）導入包
接收的成員名稱必須寫爲React和ReactDOM。
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
（3）創建虛擬DOM元素
參數1：字符串，表示創建的標籤名稱；
參數2：對象（包括null），表示創建元素的屬性節點；
參數(3~N)：子節點，包括其它虛擬DOM或文本子節點。
// index.js
const myh1 = React.createElement('h1', { title: '我是h1', id: 'myh1' }, '首頁')
const mydiv = React.createElement('div', null, '外面的div', myh1) // 嵌套h1
/* <div>
'外面的div'
<h1 title="我是h1" id="myh1">首頁</h1>
</div> */
上述方式繁瑣，創建虛擬DOM元素最好的方式是寫html代碼，即JSX。
（4）渲染虛擬DOM元素
React元素都是不可變的，即當元素被創建後，無法改變其內容或屬性，一個元素代表應用界面在某一時間點的樣子。
參數1：要渲染的虛擬DOM對象
參數2：指定容器的DOM對象
// index.js
ReactDOM.render(mydiv, document.getElementById('app'))
（5）根DOM節點
使用React創建的虛擬DOM元素，會被渲染到這個指定的容器中。用React開發應用時一般只會定義一個根節點。
<!-- index.html -->
<div id="app"></div>
三、JSX簡介
JSX，一種JavaScript的語法擴展，符合XML規範（比HTML嚴格）的JavaScript。推薦在React中使用JSX來描述用戶界面。JSX不是模版語言，它完全是在JavaScript內部實現的，運行時轉爲React.createElement轉爲普通JS對象，不會直接把JSX渲染至頁面上。
可以使用babel來轉換JSX。webpack、Vue中的四搭建babel環境，npm install --save-dev @babel/preset-react，webpack.config.js中的test:/\.js$/改爲test:/\.js|.jsx$/，.babelrc中增加"presets": ["@babel/preset-react"]。
注意：
（1）書寫JSX時一般都會帶上換行和縮進，增強代碼的可讀性。
（2）推薦在JSX代碼的外面擴()，防止分號自動插入的bug。
（3）如果JSX標籤是閉合式的，那麼你需要在結尾處用/>。
（4）React DOM使用camelCase小駝峯命名來定義屬性的名稱，而不是使用HTML的屬性名稱，如class對應className，tabindex對應tabIndex，label的for屬性對應htmlFor。
（5）註釋。推薦使用{/* 註釋 */}，對於{// 註釋}後括號要換行
（6）創建DOM時，所有的節點必須有唯一的根元素。
編譯JSX代碼時，遇到<把它當作HTML代碼去編譯，遇到{}把其內部的代碼當作普通JS代碼去編譯。
1、表達式
JSX本身就是一種表達式，因爲編譯後，JSX會被轉化爲普通的JavaScript對象。可以在if或for語句使用、賦值給變量、當作參數傳入、作爲返回值等。
JavaScript表達式：可以任意地在JSX中使用JavaScript表達式，表達式包含在{}中。如2+2，user.firstName，formatName(user)等。{}中可以包含數字、字符串、對象（函數）、JSX元素等，布爾值和undefined不在界面顯示。
let a=10;
let str="Hello World!"
let flag=true;
let ud=undefined;
const h1=<h1>這是h1</h1>
const arr=[ //Warning: Each child in an array or iterator should have a unique "key" prop.
<h2>這是h2</h2>,
<h3>這是h3</h3>
]
ReactDOM.render(
<div>
{a+5}<hr />
{str}<hr />
{flag?'flag爲真':'flag爲假'}<hr />
{String(ud)}<hr />
{h1}<hr />
{arr}
</div>,
document.getElementById('app')
);
JSX屬性：使用引號來定義以字符串爲值的屬性，或使用大括號來定義以JavaScript表達式爲值的屬性。
<div tabIndex="0"></div>
<img src={user.avatarUrl} />
例，將普通字符串數組，轉爲JSX數組。
const arrStr=["毛利蘭","柯南"]
const arrJSX=arrStr.map(item=><h3>{item}</h3>) // Warning: Each child in an array or iterator should have a unique "key" prop.
2、防注入攻擊
可以放心地在JSX中使用用戶輸入。React DOM在渲染之前默認會過濾所有傳入的值，所有的內容在渲染之前都被轉換成了字符串，有效防止XSS攻擊。
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
四、組件
組件從概念上看像是函數，它可以接收任意的輸入值（props），返回一個需要在頁面上展示的React元素。
1、定義組件
組件名稱必須以大寫字母開頭。
組件的返回值只能有一個根元素。
（1）使用JavaScript函數
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
（2）使用ES6 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2、組件渲染
當React元素是用戶自定義的組件，它會將JSX屬性（也可以使用...傳遞一個對象，即多個JSX屬性）作爲單個對象傳遞給該組件，這個對象稱爲“props”。props是隻讀的。
// 通過屬性傳值
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
// 或傳遞對象
var obj={
name:"hsg",
age:25
}
ReactDOM.render(
<div>
<Welcome {...obj}></Welcome>
</div>,
document.getElementById('app')
);
3、組合與提取組件
組件可以在它的輸出中引用其它組件，讓我們用同一組件來抽象出任意層次的細節。在React應用中，按鈕、表單、對話框、整個屏幕的內容等通常都被表示爲組件。
可以將組件切分爲更小的組件，便於複用。
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
4、將組件封裝爲.jsx文件
注意使用babel轉換.jsx
// Welcome.jsx
import React from 'react'
export default function Welcome(props){
return <h1>Hello! {props.name}</h1>
}
// index.js
import Welcome from './components/Welcome.jsx' // 想省略.jsx需配置
五、State&生命週期
使用JS函數定義的組件，是無狀態組件；使用class關鍵字定義的組件，是有狀態組件。“有狀態”即有私有數據（this.state） 和 生命週期函數，運行效率比無狀態組件稍低。
1、
React中，把key添加給被forEach或map或for循環直接控制的元素