Skip to main content

安装

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 包里找到版本号。

参考