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包来获得。