在线文档教程
首页 技术教程 开发文档 觅分类 ICON图标
技术教程 开发文档 觅分类 ICON图标

Installation

安装

反应灵活，可用于各种项目。您可以使用它创建新的应用程序，但您也可以逐渐将其引入现有的代码库，而无需重写。

以下是几种开始的方法：

  • 试试React

  • 创建一个新应用程序

  • 将反应添加到现有的应用程序

尝试 React

如果你只是想玩弄React，你可以使用CodePen。尝试从此Hello World示例代码开始。你不需要安装任何东西; 您可以修改代码并查看它是否有效。

如果您更喜欢使用自己的文本编辑器，还可以下载此HTML文件，对其进行编辑，然后在浏览器中从本地文件系统打开它。它的运行时代码转换很慢，所以不要在生产环境中使用它。

如果您想将其用于完整应用程序，可以采用两种流行的方式开始使用React：使用Create React App或将其添加到现有应用程序。

创建新的应用程序

创建React App是开始构建新的React单页应用程序的最佳方式。它设置了您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序的生产。你需要在你的机器上有Node> = 6。

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

cd my-app
npm start

如果你有NPM 5.2.0+安装，你可以使用NPX代替。

npx create-react-app my-app

cd my-app
npm start

创建React App不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以将它用于任何你想要的后端。它使用诸如Babel和webpack之类的构建工具，但是使用零配置。

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

将反应添加到现有的应用程序

你不需要重写你的应用程序来开始使用React。

我们建议将React添加到应用程序的一小部分中，例如单个小部件，以便您可以查看它是否适合您的用例。

虽然可以在没有构建管道的情况下使用React，但我们建议将其设置为可以提高生产力。现代构建管道通常由以下部分组成：

  • 包管理器，如Yarn或NPM。它可让您充分利用第三方软件包的庞大生态系统，并轻松安装或更新它们。

  • 捆绑，如的WebPack或Browserify。它允许您编写模块化代码，并将它们组合在一起成为小包，以优化加载时间。

  • 像Babel这样的编译器。它可以让你编写在旧版浏览器中仍然可用的现代JavaScript代码。

安装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注册表下载软件包。

启用ES6和JSX

我们建议使用React with Babel让您在JavaScript代码中使用ES6和JSX。ES6是一组现代化的JavaScript特性，可以使开发变得更加简单，JSX是对与React很好地配合的JavaScript语言的扩展。

在Babel安装说明解释如何在许多不同的构建环境配置通天塔。确保你在你的配置中安装babel-preset-react并babel-preset-env启用它们，你很好。.babelrc

Hello World与ES6和JSX

我们建议使用像webpack或Browserify这样的打包程序，以便您可以编写模块化代码并将它们捆绑在一起，以便优化加载时间。

最小的React示例如下所示：

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

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

此代码呈现为ID为的DOM元素root，因此您需要<div id="root"></div>HTML文件中的某处。

同样，您可以在现有应用程序内的某个DOM元素内部渲染一个React组件，该应用程序使用任何其他JavaScript UI库编写。

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

开发和生产版本

默认情况下，React包含许多有用的警告。这些警告在开发中非常有用。

但是，他们使React的开发版本变得更大更慢，因此您应该在部署应用程序时使用生产版本。

了解如何判断您的网站是否提供正确版本的React，以及如何最有效地配置生产构建过程：

  • 使用创建React App创建生产版本

  • 使用单个文件构建创建生产版本

  • 使用brunch创建生产版本

  • 使用Browserify创建生产版本

  • 使用汇总创建生产版本

  • 使用webpack创建生产版本

使用CDN

如果你不希望使用NPM来管理客户端软件包时，react和react-dom故宫的包还提供了在单个文件的分发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用的版本号。

如果您使用Bower，则可以通过react软件包获取React 。

为什么crossorigin属性？

如果您从CDN提供React，我们建议保留crossorigin属性设置：

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

我们还建议验证您使用的CDN是否设置了Access-Control-Allow-Origin: *HTTP标头：

这可以在React 16及更高版本中提供更好的错误处理体验。

  • 黔ICP备2021005045号