React 入門例項教程
阿新 • • 發佈：2019-02-19
下面要講解的12個例子在各個
需要說明的是，React 可以在瀏覽器執行，也可以在伺服器執行，但是本教程只涉及瀏覽器。一方面是為了儘量保持簡單，另一方面 React 的語法是一致的，伺服器的用法與瀏覽器差別不大。
一、HTML 模板
使用 React 的網頁原始碼，結構大致如下。
其次，上面程式碼一共用了三個庫：
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
三、JSX 語法
上一節的程式碼， HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫（檢視
JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個數組，則會展開這個陣列的所有成員（檢視
四、元件
React 允許將程式碼封裝成元件（component），然後像插入普通 HTML 標籤一樣，在網頁中插入這個元件。React.createClass 方法就用於生成一個元件類（檢視
注意，元件類的第一個字母必須大寫，否則會報錯，比如
元件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如
新增元件屬性，有一個地方需要注意，就是
五、this.props.children
這裡需要注意，
Demo 子目錄，每個目錄都有一個 index.html 檔案，在瀏覽器開啟這個檔案（大多數情況下雙擊即可），就能立刻看到效果。需要說明的是，React 可以在瀏覽器執行，也可以在伺服器執行，但是本教程只涉及瀏覽器。一方面是為了儘量保持簡單，另一方面 React 的語法是一致的，伺服器的用法與瀏覽器差別不大。
Demo13 是伺服器首屏渲染的例子，有興趣的朋友可以自己去看原始碼。一、HTML 模板
使用 React 的網頁原始碼，結構大致如下。
<!DOCTYPE html>
<html>
<head>
<script src=
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上面程式碼有兩個地方需要注意。首先，最後一個 <script> 標籤的 type 屬性為 text/babel 。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不相容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。其次，上面程式碼一共用了三個庫：
react.js 、react-dom.js 和 Browser.js ，它們必須首先載入。其中，react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到伺服器完成。$ babel src --
上面命令可以將 src 子目錄的 js 檔案進行語法轉換，轉碼後的檔案全部放在 build 子目錄。二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
上面程式碼將一個 h1 標題，插入 example 節點（檢視 demo01），執行結果如下。三、JSX 語法
上一節的程式碼， HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它允許 HTML 與 JavaScript 的混寫（檢視
Demo02 ）。var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
上面程式碼體現了 JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到程式碼塊（以 { 開頭），就用 JavaScript 規則解析。上面程式碼的執行結果如下。JSX 允許直接在模板插入 JavaScript 變數。如果這個變數是一個數組，則會展開這個陣列的所有成員（檢視
demo03 ）。var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
上面程式碼的arr變數是一個數組，結果 JSX 會把它的所有成員，新增到模板，執行結果如下。四、元件
React 允許將程式碼封裝成元件（component），然後像插入普通 HTML 標籤一樣，在網頁中插入這個元件。React.createClass 方法就用於生成一個元件類（檢視
demo04）。var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
上面程式碼中，變數 HelloMessage 就是一個元件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage的一個例項（下文的"元件"都指元件類的例項）。所有元件類都必須有自己的 render 方法，用於輸出元件。注意，元件類的第一個字母必須大寫，否則會報錯，比如
HelloMessage不能寫成helloMessage。另外，元件類只能包含一個頂層標籤，否則也會報錯。var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});
上面程式碼會報錯，因為HelloMessage元件包含了兩個頂層標籤：h1和p。元件的用法與原生的 HTML 標籤完全一致，可以任意加入屬性，比如
<HelloMessage name="John"> ，就是 HelloMessage 元件加入一個 name 屬性，值為 John。元件的屬性可以在元件類的 this.props 物件上獲取，比如 name 屬性就可以通過 this.props.name 讀取。上面程式碼的執行結果如下。新增元件屬性，有一個地方需要注意，就是
class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。五、this.props.children
this.props 物件的屬性與元件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示元件的所有子節點（檢視 demo05）。var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
上面程式碼的 NoteList 元件有兩個 span 子節點，它們都可以通過 this.props.children 讀取，執行結果如下。這裡需要注意，
this.props.children 的值有三種可能：如果當前元件沒有子節點，它就是 undefined