React比较灵活，可用于各种项目。 可以使用它创建新的APP应用程序，但也可以将其引入到现有的代码库中，而无需重写。
用React尝试一下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
创建一个单页面应用程序：
创建React应用程序是开始构建新的React单页应用程序的最佳方式。 设置你的开发环境，以便可以使用最新的JavaScript功能，它也提供了良好的用户体验，并在生产时优化你的应用程序。npm install -g create-react-app create-react-app hello-world cd hello-world npm start创建React应用程序不处理后端逻辑或数据库; 它只是创建一个前端管道，所以你可以用你想要的任何后端使用它。 它在引擎下使用webpack，Babel和ESLint，它们为你而配置。
向现有程序添加React：
你不需要重新编写App即可开始使用React。建议将React添加到你的应用程序作为一小部分，例如单个小部件，以便可以看到它是否适用于你的案例。虽然React可以在没有构建管道（类似于资源管理器）的情况下使用，但建议设置它，以便提高生产力。 目前构建管道通常包括：
打包管理器：如Yarn或npm。 它允许利用第三方包的系统，并轻松地安装或更新它们。模块打包器：如webpack或Browserify。 它允许编写模块化代码，并将它们捆绑在一起成为小包以优化加载时间。编译器：如Babel,它是一个JavaScript编译器，它允许编写在旧版本浏览器中支持的现代JavaScript代码。
开始安装：
建议你使用Yarn或者npm来管理你的资源，如果你对软件包管理不熟悉的话，那么可以学一下Yarn文档。
如果你用Yarn安装React，请运行一下代码：
yarn init yarn add react react-dom
如果你用npm安装React，请运行一下代码：
npm init npm install --save react react-dom
可以从npm注册表中下载Yarn和npm软件包。
启用ES6和JSX:
我们建议使用Babel编译的React让你在JavaScript代码中使用ES6和JSX。 ES6是一组现代JavaScript特性，使开发更容易，JSX是对JavaScript语言的扩展。Babel的安装说明介绍了如何在许多不同的环境中配置Babel。 要确保你安装的babel-preset-react和babel-preset-es2015在你的.babelrc configuration中很好的使用它们。
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为root的DOM元素，因此需要在HTML文件中的任何地方编写<div id="root"></div>。
类似地，你可以在现有app中的任何其他JavaScript UI库中的DOM元素中重绘React组件。
开发和生产版本：
默认情况下，React包含了许多有用的提示，这些提示在开发中是非常有用的。可是，它们使React文件更大，速度更慢，所以当你部署你的APP应用时，要确保使用的是生产版本。Brunch
要使用Brunch创建优化的生产命令，只需将-p标志添加到build命令中即可。 有关详细信息，请参阅Brunch文档。Browserify
运行Browserify，将NODE_ENV环境变量设置为production，并使用UglifyJS作为最后一个构建步骤。Create React App
如果你使用Create React App，npm运行时将在构建文件夹中创建一个优化的应用程序。RollUp
使用rollup-plugin-replace插件和rollup-plugin-commonjs（按顺序）来删除只开发代码。Webpack
将DefinePlugin和UglifyJsPlugin包含在本指南中所描述的生产Webpack配置中。
使用CDN:
如果你不想使用npm来管理客户端软件包，那么react和react-dom npm软件包也会在CDN中的dist文件夹中提供单文件分发：
<script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
以上版本仅用于开发，不适合生产。 React的优化和优化生产版本可在以下网址获得：
要下载react和react-dom的特定版本，请将版本号替换为15。
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
如果使用Bower，React可通过react包来获得。
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
