什么是 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/[email protected]/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。
请注意，<script type="text/babel"> 是使用 Babel 所需的。
什么是 JSX？
JSX 代表 **J**ava**S**cript **X**ML。
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 类来创建组件。
此示例使用 render **方法** 创建了一个名为 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 文件添加前缀。
创建 React 应用程序使用 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: 在 10.359 秒内安装了 63 个
正在 C:\Users\myUser\react-tutorial 中创建一个新的 React 应用程序。
正在安装包。这可能需要几分钟。
正在安装 react、react-dom 和 react-scripts...
+ [email protected]
+ [email protected]
+ [email protected]
从 664 位贡献者的 1732 个包中添加了并审核了 31900 个包，共计 355.501 秒
发现了 0 个漏洞 + [email protected]
成功！在 C:\Users\myUser\react-tutorial 中创建了 react-tutorial
在该目录中，您可以运行几个命令
npm start
启动开发服务器。
npm run build
将应用程序捆绑到用于生产的静态文件中。
npm test
启动测试运行器。
npm run eject
删除此工具并将构建依赖项、配置文件
和脚本复制到应用程序目录中。如果您这样做，您将无法返回！
建议您先键入
cd react-tutorial
npm start
