一、安装 React
React 是灵活的,可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目。
创建一个单页面应用
Create React App
是开始构建新的 React 单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境,以便您可以使用最新的 JavaScript 功能,它提供了一个很好的开发体验,并可以有效优化您的应用程序, 提升开发效率。
$ npm install -g create-react-app $ create-react-app hello-world $ cd hello-world $ npm run start
上面只是创建了一个 React 应用,不需要关心也需要不处理后端逻辑或数据库; 它只是一个 React 的前端环境集成工具, 负责创建前端的开发环境,所以你可以使用它与你想要的任何后端进行交互。 它内部使用了 webpack,Babel 和 ESLint,你可以单独配置它们,来达到定制化的效果。
在已经开发的项目中使用 React
您不需要重新编写应用程序即可开始使用 React。
我们建议将 React 添加到应用程序的一小部分,例如单个小部件,以便您可以看到它是否适合您的用例。
虽然 React 可以在没有构建工具的情况下使用,但我们建议使用并设置它,以便提高生产力。 现代构建工具通常包括:
- 一个包管理器,例如
npm
- 一个打包工具,例如
webpack
- 一个编译工具,例如
Babel
安装 React
我们建议使用 Yarn 或 npm 来管理 React 前端模块的依赖。
通过 Yarn 安装:
yarn add react react-dom
通过 npm 安卓:
npm install --save react react-dom
使用 ES6 和 JSX
我们建议您使用 Babel 中的 React 配置让您在 JavaScript 代码中可以使用 ES6 和 JSX。 ES6 是一组现代 JavaScript 特性,使开发更容易,JSX 是对 React 非常有效的 JavaScript 语言的扩展。
具体请百度 Babel 如何在许多不同的构建环境中配置 Babel。首先 确保你安装了babel-preset-react
和babel-preset-es2015
,并已经在.babelrc
配置中启用它们。
使用 ES6 和 JSX 写一个 HelloWorld 的例子
我们建议使用像webpack
或Browserify
这样的打包工具,以便您可以编写模块化代码,它们可以将不同的代码模块打包捆绑到一起,用来优化的代码加载时间。
一个简单的 React 示例如下所示:
这里我使用的是 bower 来安装 react 和 react-dom。
mkdir hello-world & cd hello-world bower install react babel --save touch index.html
然后在 index.html 中写入以下内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script src="bower_components/babel/browser.js"></script> <script type="text/babel"> var doc = document; ReactDOM.render( <h1>你好,react</h1>, doc.getElementById('app') ) </script> <title>ReactDOM.render</title> </head> <body> <div id="app"></div> </body> </html>
最后在浏览器中打开这个页面,就可以看到最终效果。