什么是 React?
React 是 Facebook
创建的 JavaScript 库React 是一个用户界面（UI）库
React 是一个构建UI组件
的工具React 快速入门教程
这是一个快速入门教程。
在开始之前，你应该对以下内容有一个基本的了解:
完整教程:
开始 React 教程 ❯将 React 添加到 HTML 页面
本快速入门教程会将 React 添加到如下页面:
实例
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</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 是一种类似于 XML/HTML 的 JavaScript 扩展。
实例
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 组件是 JavaScript 函数。
这个例子创建了一个名为 "Welcome" 的 React 组件:
实例
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React 也可以使用 ES6 类来创建组件。
此示例使用渲染方法创建一个名为 Welcome 的 React 组件:
实例
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 创建了一个创建 React 应用程序，其中包含构建 React 应用程序所需的一切。
它是一个开发服务器，使用 Webpack 编译 React、JSX 和 ES6，自动前缀 CSS 文件。
Create React App 使用 ESLint 测试代码中的错误并发出警告。
要创建一个 Create React 应用程序，请在您的终端上运行以下代码:
实例
npx create-react-app react-tutorial
确保您拥有 Node.js 5.2 或更高版本。 否则你必须安装 npx:
实例
npm i npx
从您希望应用程序所在的位置开始创建一个文件夹:
实例
C:\Users\myUser>npx create-react-app react-tutorial
成功结果:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ react-dom@16.5.2
+ react@16.5.2
+
react-scripts@2.0.4
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ react@16.5.2
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start
