什麼是 React？
React 是由 Facebook 建立的 JavaScript 庫。
React 是一個 使用者介面 (UI) 庫。
React 是一個用於構建 UI 元件 的工具。
React 快速入門教程
這是一個快速入門教程。
在開始之前，您應該對以下內容有基本的瞭解：
檢視完整教程
前往我們的 React 教程 ❯將 React 新增到 HTML 頁面
本快速入門教程將像這樣將 React 新增到一個頁面中：
示例
<!DOCTYPE html>
<html lang="en">
<title>測試 React</title>
<!-- 載入 React API -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- 載入 React DOM-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- 載入 Babel 編譯器 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel 程式碼在此處
</script>
</body>
</html>
什麼是 Babel？
Babel 是一個 JavaScript 編譯器，可以將標記或程式語言翻譯成 JavaScript。
使用 Babel，您可以使用 JavaScript 的最新功能 (ES6 - ECMAScript 2015)。
Babel 可用於不同的轉換。React 使用 Babel 將 JSX 轉換為 JavaScript。
請注意，使用 Babel 需要 <script type="text/babel">。
什麼是 JSX？
JSX 代表 JavaScript XML。
JSX 是 JavaScript 的 XML/HTML 類似擴充套件。
示例
const element = <h1>Hello World!</h1>
如您所見，JSX 既不是 JavaScript 也不是 HTML。
JSX 是 JavaScript 的 XML 語法擴充套件，同時具備 ES6 (ECMAScript 2015) 的全部功能。
就像 HTML 一樣，JSX 標籤可以有標籤名、屬性和子元素。如果屬性用大括號括起來，則該值是一個 JavaScript 表示式。
請注意，JSX 在 HTML 文字字串周圍不使用引號。
React DOM 渲染
ReactDOM.render() 方法用於渲染（顯示）HTML 元素
示例
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX 表示式
透過用花括號 {} 包裹，可以在 JSX 中使用表示式。
示例
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
React 元素
React 應用程式通常圍繞單個 HTML 元素 構建。
React 開發者通常稱之為 根節點（根元素）
<div id="root"></div>
React 元素 看起來像這樣：
const element = <h1>Hello React!</h1>
元素透過 ReactDOM.render() 方法進行 渲染（顯示）
ReactDOM.render(element, document.getElementById('root'));
React 元素是 不可變的。它們不能被改變。
改變 React 元素的唯一方法是每次都渲染一個新的元素
示例
function tick() {
const element = (<h1>{new Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
React 元件
React 元件是 JavaScript 函式。
此示例建立了一個名為“Welcome”的 React 元件
示例
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React 也可以使用 ES6 類來建立元件。
此示例建立了一個名為 Welcome 的 React 元件，帶有一個 render 方法
示例
class Welcome extends React.Component {
render() { return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React 元件屬性
此示例建立了一個名為“Welcome”的 React 元件，帶有屬性引數
示例
function Welcome(props) {
return <h1>Hello {props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));
React 也可以使用 ES6 類來建立元件。
此示例還建立了一個名為“Welcome”的 React 元件，帶有屬性引數
示例
class Welcome extends React.Component {
render() { return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome name="John Doe"/>, document.getElementById('root'));
JSX 編譯器
此頁面上的示例在瀏覽器中編譯 JSX。
對於生產程式碼，編譯應單獨完成。
建立 React 應用程式
Facebook 建立了一個 Create React Application，其中包含構建 React 應用程式所需的一切。
它是一個開發伺服器，使用 Webpack 編譯 React、JSX 和 ES6，並自動新增 CSS 檔案字首。
Create React App 使用 ESLint 來測試並警告程式碼中的錯誤。
要建立 Create React App，請在您的終端上執行以下程式碼：
示例
npx create-react-app react-tutorial
確保您已安裝 Node.js 5.2 或更高版本。否則，您必須安裝 npx
示例
npm i npx
從您希望應用程式所在的資料夾向上移動一個資料夾
示例
C:\Users\myUser>npx create-react-app react-tutorial
成功結果
npx: 在 10.359s 內安裝了 63 個包
在 C:\Users\myUser\react-tutorial 中建立一個新的 React 應用程式。
正在安裝軟體包。這可能需要幾分鐘。
正在安裝 react、react-dom 和 react-scripts...
+ react-dom@16.5.2
+ react@16.5.2
+ react-scripts@2.0.4
從 664 個貢獻者添加了 1732 個包，並在 355.501s 內審計了 31900 個包
發現 0 個漏洞+ react@16.5.2
成功！在 C:\Users\myUser\react-tutorial 建立了 react-tutorial
在該目錄中，您可以執行幾個命令
npm start
啟動開發伺服器。
npm run build
將應用程式打包成靜態檔案以供生產。
npm test
啟動測試執行程式。
npm run eject
移除此工具並將構建依賴項、配置檔案
和指令碼複製到應用程式目錄。如果您執行此操作，則無法撤銷！
我們建議您首先輸入：
cd react-tutorial
npm start
