React文档（一）安装

时间：2023-12-12 22:22:38

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

试用React

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

如果你更喜欢在本地编辑，那么你也可以下载此文件，修改它，然后在本地用浏览器打开。但是它会做一个很慢的运行时代码转换，所以不要像这样在产品中使用。

创建一个单页应用

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

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

创建React应用不需要处理后台逻辑或者数据库，它只需要建立一个前端的创建管线，所以你可以和各种不同的后台语言配合。它在底层使用了webpack，Babel和ESLint等组件，并为你配置了它们。

添加React到已存在的应用

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

我们建议添加React到应用中的一个小模块里，例如一个独立的小部件，那样你会发现在你的用例下它可以工作得很好。

虽然React不强制需要一个创建管线，但是建议创建一个那样你可以提高效率。一个最新的创建管线一般包括以下几点：

  • 一个包管理器，例如Yarn或者npm。它们可以让你利用大量的第三方包，然后很方便地安装和升级。
  • 一个打包器，例如webpack或者Browserify。它们让你在开发的时候写模块化的代码然后在完成之后打包集合成更小的包来优化载入时间。
  • 一个编译器，例如Babel。它能够让你使用js最新特效，而且兼容所有浏览器。

安装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包同样可用。

相关文章