©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
反应灵活，可用于各种项目。您可以使用它创建新的应用程序，但您也可以逐渐将其引入现有的代码库，而无需重写。
以下是几种开始的方法：
试试React
创建一个新应用程序
将反应添加到现有的应用程序
尝试反应
如果你只是想玩弄React，你可以使用CodePen。尝试从此Hello World示例代码开始。你不需要安装任何东西; 您可以修改代码并查看它是否有效。
如果您更喜欢使用自己的文本编辑器，还可以下载此HTML文件，对其进行编辑，然后在浏览器中从本地文件系统打开它。它的运行时代码转换很慢，所以不要在生产环境中使用它。
如果您想将其用于完整应用程序，可以采用两种流行的方式开始使用React：使用Create React App或将其添加到现有应用程序。
创建新的应用程序
创建React App是开始构建新的React单页应用程序的最佳方式。它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序的生产。你需要在你的机器上有Node> = 6。
npm install -g create-react-app create-react-app my-app cd my-app npm start
如果你有NPM 5.2.0+安装，你可以使用NPX代替。
npx create-react-app my-app cd my-app npm start
创建React App不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以将它用于任何你想要的后端。它使用诸如Babel和webpack之类的构建工具，但是使用零配置。
当您准备部署到生产环境时，运行npm run build将在build文件夹中创建应用程序的优化版本。您可以从README和用户指南中了解有关创建React应用程序的更多信息。
将反应添加到现有的应用程序
你不需要重写你的应用程序来开始使用React。
我们建议将React添加到应用程序的一小部分中，例如单个小部件，以便您可以查看它是否适合您的用例。
虽然可以在没有构建管道的情况下使用React，但我们建议将其设置为可以提高生产力。现代构建管道通常由以下部分组成：
包管理器，如纱或NPM。它可让您充分利用第三方软件包的庞大生态系统，并轻松安装或更新它们。
捆绑，如的WebPack或Browserify。它允许您编写模块化代码，并将它们组合在一起成为小包，以优化加载时间。
像Babel这样的编译器。它可以让你编写在旧版浏览器中仍然可用的现代JavaScript代码。
安装React
注意： 安装完成后，我们强烈建议设置生产构建过程以确保您在生产中使用快速版本的React。
我们建议使用Yarn或npm来管理前端依赖项。如果您对包管理员不熟悉，那么Yarn文档是开始使用的好地方。
要安装Yarn React，请运行：
yarn init yarn add react react-dom
要使用npm安装React，请运行：
npm init npm install --save react react-dom
Yarn和npm都从npm注册表下载软件包。
启用ES6和JSX
我们建议使用React with Babel让您在JavaScript代码中使用ES6和JSX。ES6是一组现代化的JavaScript特性，可以使开发变得更加简单，JSX是对与React很好地配合的JavaScript语言的扩展。
在巴别塔安装说明解释如何在许多不同的构建环境配置通天塔。确保你在你的配置中安装babel-preset-react并babel-preset-env启用它们，你很好。.babelrc
Hello World与ES6和JSX
我们建议使用像webpack或Browserify这样的打包程序，以便您可以编写模块化代码并将它们捆绑在一起，以便优化加载时间。
最小的React示例如下所示：
import React from 'react';import ReactDOM from 'react-dom';ReactDOM.render( <h1>Hello, world!</h1>,
document.getElementById('root'));此代码呈现为ID为的DOM元素root，因此您需要<div id="root"></div>HTML文件中的某处。
同样，您可以在现有应用程序内的某个DOM元素内部渲染一个React组件，该应用程序使用任何其他JavaScript UI库编写。
了解有关将React与现有代码集成的更多信息。
开发和生产版本
默认情况下，React包含许多有用的警告。这些警告在开发中非常有用。
但是，他们使React的开发版本变得更大更慢，因此您应该在部署应用程序时使用生产版本。
了解如何判断您的网站是否提供正确版本的React，以及如何最有效地配置生产构建过程：
使用创建React App创建生产版本
使用单个文件构建创建生产版本
使用brunch创建生产版本
使用Browserify创建生产版本
使用汇总创建生产版本
使用webpack创建生产版本
使用CDN
如果你不希望使用NPM来管理客户端软件包时，react和react-dom故宫的包还提供了在单个文件的分发umd文件夹，这是一个CDN托管：
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
以上版本仅用于开发，不适合生产。缩小和优化的React生产版本可在以下网址获得：
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
要加载的特定版本react和react-dom，替换16用的版本号。
如果您使用Bower，则可以通过react软件包获取React 。
为什么crossorigin属性？
如果您从CDN提供React，我们建议保留crossorigin属性设置：
<script crossorigin src="..."></script>
我们还建议验证您使用的CDN是否设置了Access-Control-Allow-Origin: *HTTP标头：
这可以在React 16及更高版本中提供更好的错误处理体验。