React文档（一）安装

时间 2019-11-11

标签 react 文档安装栏目 React 繁體版

原文原文链接

React是一个灵活的能够用于各类不一样项目的框架，你能够用它来写新应用，你也能够逐步将它引进已有的代码库而不用重写整个项目。html

试用React前端

若是你想玩一玩React，那么就去CodePen上试一试。尝试一下Hello World的React例子。不须要安装任何东西，只是修改代码而后查看结果。react

若是你更喜欢在本地编辑，那么你也能够下载此文件，修改它，而后在本地用浏览器打开。可是它会作一个很慢的运行时代码转换，因此不要像这样在产品中使用。webpack

建立一个单页应用git

建立React应用这个项目是一个最好的方式去学习如何建立一个新的单页应用。它设置好了开发环境因此你可使用最新的js特性，它提供了很好的开发体验，最优化你的应用产品。github

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

建立React应用不须要处理后台逻辑或者数据库，它只须要创建一个前端的建立管线，因此你能够和各类不一样的后台语言配合。它在底层使用了webpack，Babel和ESLint等组件，并为你配置了它们。web

添加React到已存在的应用数据库

想要使用React你不须要重写你的应用。npm

咱们建议添加React到应用中的一个小模块里，例如一个独立的小部件，那样你会发如今你的用例下它能够工做得很好。浏览器

虽然React不强制须要一个建立管线，可是建议建立一个那样你能够提升效率。一个最新的建立管线通常包括如下几点：

安装React

建议使用yarn或者npm包管理器来管理前端依赖的包。若是你没用过包管理器，那个到Tarn文档这个网站去学习相关知识。

使用Yarn安装React，运行如下命令：

yarn init
yarn add react react-dom

使用npm安装，运行如下命令：

npm init
npm install --save react react-dom

Yarn和npm都是从npm registry下载依赖包。

启用ES6和JSX

建议使用Babel来支持ES6和JS语法。ES6拥有js最新的特性，让开发更加简便，JSX是js语言的扩展，很好的兼容React。

Babel安装操做指南讲解了如何在各类不一样的环境配置Babel。确保你已经安装了babel-parset-react和babel-preset-es2015而且让他们在Babel的配置项里正常工做。

使用ES6和JSX建立Hello World程序

建议使用相似webpack和Browserify的打包工具，那么你能够将模块化代码打包成更小的包优化载入时间。

最简单的React例子就像这样：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

这段代码渲染了一个DOM元素插入了id名为root的元素里，因此你须要在你的页面里含有<div id="root"></div>。

一样的，你能够渲染一个React组件到一个DOM元素里经过引用其余js UI库。

开发和生产版本

通常默认状况下，React有不少有用的警告。这些警告在开发时有很大的帮助。可是，若是在生产环境下，它会让程序臃肿变慢，因此当你发布应用的时候确保使用生产版本。

建立React App

若是你使用Create React App项目，npm run build将会在build文件夹下建立你的应用。

webpack

经过这个指南能够了解DefinePlugin和UglifyJsPlugin插件在生产环境webpack设置中的做用。

Browserify

把NODE_ENV环境变量设置成production运行Browserify，使用UglifyJS将只在开发中使用的代码剥离出来。

Rollup

使用rollup-plugin-replace和rollup-plugin-commonjs插件来去除开发环境代码。

使用CDN

若是不想使用npm包管理器，那么可使用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>

以上是开发环境适用的版本，下面是压缩优化过的，适用于生产环境：

<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和react-dom，替换15为版本号便可。

若是你使用浏览器，React经过react包一样可用。