摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。
React文档翻译系列（一）安装
原文地址：原文
本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。目前为止原文文档也看的差不多了，自己的英文水平也有限，看的也是似懂非懂，但是却比在博客或者其他途径得来的零散的效果要好一些，而且原文文档是最新的，而找到的中文资料都是其他人之前翻译或者针对之前的文档写出来的一些解决方案，对更新后的内容并没有进行更新，基于这样的想法，自己也本着能够更加深入的学习，所以决定对文档进行一个大概的翻译，第一次做这些事情，不知道自己能坚持多久，也不知道自己能翻译到什么程度，错误之处还望多多指正，希望能够坚持下去。废话不多说，进入正题。
安装React是灵活的，并且可以应用到各种各样的项目中。你可以使用它创建一个新的项目，但是，你也可以在不用重新编写的前提下，逐步的将它引入到现有的代码库中。
初尝React如果你只是对React感兴趣，你完全可以使用CodePen。尝试这从这个Hello World示例开始吧。你不用安装任何东西，只需要对代码进行修改，然后看看它是否会起作用。
如果你更喜欢使用自己的文本编辑器，可以下载这个HTML文件，编辑它，然后在本地通过浏览器打开。它会执行一个缓慢的运行时代码转换，所以不要在生产环境使用它。
创建一个单页面应用Create React App（译者注：facebook提供的一个工具集）是开始创建React单页应用最好的一种方式。它已经为你设置好了开发环境，这样你就可以使用到最新的Javascript特性，提供一个良好的开发体验，并且可以优化你的生产环境应用。
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create React App 不会处理后端逻辑或者是数据库；它只是创建了一个前端构建管道，所以你可以使用它配合任何你想使用的后端。它的底层是使用Webpack，Babeland ESLint，但是已经为你配置好了。
在已有应用中加入React你不必为了开始使用React而重写原来的应用。
我们推荐你将React添加到你应用的一小部分中，比如一个个人小部件，这样你可以观察一下是否它能在你的应用场景下良好的运行。
尽管React可以在没有构建管道（build pipeline）的情况下使用，然而我们还是推荐将构建管道配置起来以便提高生产力。一个典型的现代构造管道包括下面几部分：
一个包管理器，比如Yarn或者npm。它可以让您利用庞大的第三方软件包生态系统，轻松安装或更新它们。
一个构建工具，比如Webpack或者[Browserify][]。它允许您编写模块化代码并将其捆绑在一起成为小包以优化加载时间。
一个编译器，比如Babel，它可以让您编写仍旧适用于旧版浏览器的现代JavaScript代码。
安装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下载所需要的包。
启用ES6和JSX为了在你的Javascript代码中使用ES6和JSX，我们推荐配合Babel使用React。ES6是一组可以使开发变得更简单的现代化的JavaScript特性，JSX是对React的很好的JavaScript语言的扩展。
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(
Hello, world!
,
document.getElementById("root")
);
这段代码会渲染到id为root的DOM元素中，所以在你的HTML文件中的某处需要。
类似的，你也可以在使用其他Javascript UI库所写的现有应用中的某处，将一个React组件渲染到一个DOM元素上。
开发环境版和生产环境版默认的，React包括了许多有用的警告。这些警告在开发环境中是非常有用的。然而，他们会让React变得很大并且很慢，所以要确保在部署应用的时候要使用生产环境版。
Brunch
想要使用Brunch创建一个优化的生产构建，只需要在构建命令中添加-p 标识。更多细节参看Brunch docs。
Browserify
运行Browserify，将 NODE_ENV 环境变量设置成 production，使用UglifyJS作为构建的最后一步，这样只在开发环境生效的代码就会被剥离出来。
Create React App
如果使用Create React App，npm run build 会在应用的 build文件夹下面生成一份优化后的代码。
Rollup
使用rollup-plugin-replace和rollup-plugin-commonjs一起（按照顺序）移除开发专用的代码。这里有完整的设置案例。
Webpack
像这个指南描述的这样将DefinePlugin和UglifyJsPlugin包含到生产环境的Webpack配置中。
使用CDN如果不想使用npm管理客户端包， react和 react-dom的npm包在dist文件夹下面也提供了单个文件的分发，他们托管在CDN上：
上面的版本只适合开发环境，不适合生产环境。压缩并优化后的React可用生产版本在：
如果想加载特定版本的react 和 react-dom，可以将15替换为想加载版本的版本号。
如果使用Bower，React可以通过react包获取到。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82280.html
摘要：文档翻译系列二开始最简单的方式就是在上使用示例。最小的例子如下它会在页面上渲染一个标题。接下来的几部分会逐步的介绍如何使用。我们会查验应用的构建块元素和组件。在例子中也使用了一些的语法。可以使用在线转换器查看的代码编译。 React文档翻译系列（二）Hello World Hello World 开始React最简单的方式就是在CodePen上使用Hello World示例。无需安装任...
摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。 前言 前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议： 如果对Weex App感兴趣，应该选择vue框架； 如果...
摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。 前言 前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议： 如果对Weex App感兴趣，应该选择vue框架； 如果...
摘要：文档翻译系列三简介先来看一下下面的变量声明这种有趣的标签语法既不是字符串也不是。这种形式被称作，他是的一种扩展语法。为便于阅读，我们将分隔成多行。表示对象将编译成调用。我们建议您为选择的编辑器搜索语法方案，以便和代码都能够被正确高亮的显示。 React文档翻译系列（三）JSX简介 先来看一下下面的变量声明： const element = Hello world! 这种有趣的标签语法既...
阅读 819·2019-08-30 14:05
阅读 1711·2019-08-30 11:08
阅读 3215·2019-08-29 15:41
阅读 3590·2019-08-23 18:31
阅读 1509·2019-08-23 18:29
阅读 545·2019-08-23 14:51
阅读 2102·2019-08-23 13:53
阅读 2125·2019-08-23 13:02
