React学习记录 — 1. 安装

尝试 React

在线尝试 React 或设置你的本地开发环境。

在线

如果你只是想玩玩 React，你可以使用在线的代码演示场。 在 CodePen 或CodeSandbox 上尝试 Hello World 模板。

最小化的 HTML 模板

如果你喜欢使用自己的文本编辑器，你也可以 下载这个 HTML 文件 ，编辑它，然后从浏览器的本地文件系统中打开它。 它在 运行时(runtime) 需要进行代码转换，因而很慢，所以不要在生产环境中使用它。

下一步

快速开始

• 转到 Quick Start 部分，逐步为你介绍 React 概念。

• 尝试 Tutorial 的实际操作该示例。

完整的开发环境

如果你是新的 React 用户或只是想尝试一下 React，上面的轻量级解决方案是最适合的 。

当你准备用 React 构建您的第一个应用程序时，请查看下面的安装指南。这些设置旨在帮助你在开发过程中获得丰富的开发经验，并为生产做好准备。它们包括 linting ，测试 和 内置的优化。但是，他们需要更多的时间和磁盘空间来设置和安装。

• 将 React 添加到新应用程序中：使用功能齐全的入门工具包创建新应用。
• 将 React 添加到现有的应用程序中：将 React 添加到构建系统或更大的应用程序。

将 React 添加到新的 APP 中

从一个新的 React 项目入门，最简单的方法是使用入门工具包。

注意：

本页面介绍如何设置一个单页应用，其中包括一个你所需的舒适的开发工作流程，包括 linting ，测试，生产优化等等。 像这样的功能齐全的工具需要一些时间和磁盘空间来安装。

如果你正在寻找一个轻量级的环境来尝试 React ，请查看 尝试 React 页面。一个单独的 HTML 文件 足以让你开始！

最后，如果你不是构建一个单页应用，你可以将 React 添加到你现有的构建管道中（pipeline）或者从 CDN 中引用 并且 无需构建步骤。

Create React App

Create React App 是开始构建新的 React 单页应用程序的最佳方式。它已经为你设置好了开发环境，以便您可以使用最新的 JavaScript 特性，提供不错的开发体验，并且可以优化你的生产环境应用。你需要在你的机器上安装 Node >= 6 。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

If you have npm 5.2.0+ installed, you may use npx instead.

npx create-react-app my-app

cd my-app
npm start

Create React App 不会处理后端逻辑或数据库；它只是创建一个前端构建管道（build pipeline），所以你可以使用它来配合任何你想使用的后端。它使用像 Babel 和 webpack 这样的构建工具，但是已经为你配置好了，你可以零配置使用。

当您准备好部署到生产环境中时，运行 npm run build 将在 build 文件夹中创建一个应用程序的优化构建。您可以 从其 README 和 用户指南 中了解有关 Create React App 的更多信息。

其他入门套件

我们已经创建了一个 我们官方推荐的第三方入门套件清单。

他们的重点略有不同，但都是生产就绪，维护良好的，不需要配置就可以开始。

您还可以查看社区贡献的 其他工具包 列表。

将 React 添加到现有的 APP 中

你不必为了开始使用React而重写原来的应用。

我们建议在你应用程序的一个小部分中添加 React ，例如单独的小部件，这样你可以看看它是否适用于你的用例。

虽然 React 可以在没有构建管道的情况下使用，但是我们建议你配置它，以便你提高效率。一个现代构建管道通常包括：

• 一个 包管理器(package manager) ，如 Yarn 或 npm 。它可以让您利用大量的第三方软件包生态系统，并轻松安装或更新它们。
• 一个 打包工具(bundler) ，如webpack 或 Browserify。它允许您编写模块化代码并将他们在一起，成为一个小包，以实现加载性能的优化，节省加载时间。
• 一个 编译器(compiler) ，如Babel。 它可以让你在编写现代 JavaScript 代码的同时兼容旧版本浏览器.

安装 React

注意：

一旦安装 React，我们强烈建议你将它配置为生产构建程序 ，以确保你在生产环境中使用最新版本的 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 registry 下载所需要的包。

注意：

为了防止潜在的不兼容性，所有的 react 包应该使用相同的版本 （包括 react，react-dom，react-test-renderer 等）。

启用 ES6 和 JSX

我们建议配合 Babel 使用React, 这可以使我们在 JavaScript 代码中使用 ES6 和 JSX 。 ES6 是一整套现代的 JavaScript 特性, 可以简化开发过程, JSX 是一个JavaScript 语言扩展, 可以很好地配合 React 使用。

Babel 设置说明 解释了如何在许多不同的构建环境中配置 Babel 。请确保你已经安装了babel-preset-react 和 babel-preset-es2015 ，并且已经在你的 .babelrc 配置中启用了他们，这样就准备就绪了。

使用 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')
);

这段代码会渲染到 id 为 root 的DOM元素中，所以在你的HTML文件中的某处需要<div id="root"></div>。

同样的，您可以在使用其他 Javascript UI 库所写的现有应用程序中，将一个React组件渲染到一个DOM元素上。

了解有关将 React 与现有代码集成的更多信息。

开发与生产版本

默认情况下，React会报告很多警告。这些警告在开发环境中非常有用。

不过它们会使 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 npm 包也提供了独立版本, 位于 umd目录下。请查看 CDN 页面。

CDN 链接

React 和 ReactDOM 的UMD版本可通过 CDN 获得。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

上面的版本只适合开发环境，不适合生产环境。压缩并优化后的 React 可用生产版本在：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

如果要加载指定版本的react和react-dom，只要把以上代码中的16替换为相应的版本数字即可。

为什么有 crossorigin 属性？

如果你从 CDN 引用 React，我们建议保留 crossorigin 属性设置：

<script crossorigin src="..."></script>

我们还建议验证你正在使用的 CDN 设置了 Access-Control-Allow-Origin: * HTTP标头