watak

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

以下是几种开始的方法:

  • 试试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,但我们建议将其设置为可以提高生产力。现代构建管道通常由以下部分组成:

  • 包管理器,如纱或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-preset-reactbabel-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来管理客户端软件包时,reactreact-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>

要加载的特定版本reactreact-dom,替换16用的版本号。

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

为什么crossorigin属性?

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

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

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

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

Artikel sebelumnya: Artikel seterusnya: