安装
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 仓库中下载到。