跳到主要内容

安装

React 非常灵活,可以用在各种不同的项目中。可以用在新的项目里,也可以在老的项目中无痛的接入 React 而不用修改很多代码,或者重构。

想试试 React​

如果你只是对 React 比较感兴趣,想试试 React,你可以使用 CodePen。可以从 React 版本的 HelloWorld 项目开始。你不用安装任何东西。只要尝试修改里面的代码,然后看它是如何生效的。

如果你想使用自己的编辑器,可以下载这些 HTML 文件,编辑后在本地的浏览器中打开。这个代码在执行的时候做编译,速度比较慢,不要用在线上环境中。

如果想在完整的项目中使用 React,下面有两种非常流行的方法,第一使用 Create React App,或者在已经存在的项目中添加 React。

创建一个新的 React 项目​

Create React App 是用来创建一个新的 React 单页面应用最好的方式。他会配置好你的开发环境,让你可以使用所有最新的 javascript 特性,给你提供良好的开发体验,并在上线前对你的项目进行打包优化。

Npm install -g create-react-app
Create-reate-app my-app
Cd my-app
Npm start

Create React App 不会处理后端逻辑和数据库。它只创建一个前端版本,所以用它的话,你可以搭配任意的后端。它使用 babel 和 webpack 等工具来进行构建,但是不需要你做任何的配置。

当你需要上线的时候,执行 npm run build,会自动在 build 目录创建一个编译优化后的版本。你可以从 README 文档或者 User Guide 中了解更多关于Create React App 的东西。

向已存在的项目中添加 React​

你不需要重构你的项目

我们建议在项目的一小部分里使用 React,比如独立的挂件,他可以很好的适配你的情况。

尽管 React 不需要打包工具就可以使用,但是为了更高的开发效率,我们还是建议使用现代化的打包工具:

一个包管理器,比如 Yarn或者 npm。通过包管理器,你可以方便的使用和升级 React 生态系统中丰富的第三方组件包。

一个打包工具,比如 webpack 或者 Browserify。这可以让你模块化的编写代码,然后打包成小的独立文件,以优化加载时间。

一个编译工具,比如 Babel。让你可以编写最新的 Javascript 代码,又可以兼容老的浏览器。

Note:

安装好后,我们强烈建议配置生产编译流程,以保证在生产环境中使用的是优化后的 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 和 Babel 一起使用,以在 javascript 代码中支持 ES6和 JSX。ES6是最新的 javascript 特定的一个合集,可以让你开发更容易,JSX 是 javascript 语言的一个扩展,这个扩展和 React 一起使用。

这里有个文档来说明如何在各种不同的环境中配置 Babel。确保好你已经安装了 babel-preset-react 和 babel-preset-es2015两个包,并且在.babelrc 配置文件中配置好。

Hello World

我们建议使用webpack 或者 browserify 包管理器。这样可以模块化的编写代码,并打包优化加载时间。

下面是一个最小的 Reat 项目例子:

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>

当然你可以把这个代码用在任何的项目中。

开发和生产版本​

默认情况下,React 代码中包含了很多有帮助的警告信息。这些信息在开发的时候非常有帮助。

但是,这些让 React 大了很多,执行也更加慢。所以等发布项目的时候需要换成生产环境的版本。

下面有一些配置教程教你如何配置生构建过程:

Creating a Production Build with Create React App Creating a Production Build with Single-File Builds Creating a Production Build with Brunch Creating a Production Build with Browserify Creating a Production Build with Rollup Creating a Production Build with webpack

使用 CDN​

如果你不使用 npm 来管理前端文件。react 和 react-dom 也有 cdn 版本

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

下面是生产环境版本 CDN

<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>

想要加载特定版本的 react 只要替换上面的15换成想要的版本即可。

如果你使用 Bower,可以在 react 包里找到版本号。

参考​