原文地址:原文

本系列是针对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 不会处理后端逻辑或者是数据库;它只是创建了一个前端构建管道,所以你可以使用它配合任何你想使用的后端。它的底层是使用webpackBabeland 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-reactbabel-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变得很大并且很慢,所以要确保在部署应用的时候要使用生产环境版。

Brunch

想要使用Brunch创建一个优化的生产构建,只需要在构建命令中添加-p 标识。更多细节参看Brunch docs

Browserify

运行Browserify,将NODE_ENV环境变量设置成 production,使用UglifyJS作为构建的最后一步,这样只在开发环境生效的代码就会被剥离出来。

Create React App

如果使用Create React Appnpm run build 会在应用的 build文件夹下面生成一份优化后的代码。

Rollup

使用rollup-plugin-replacerollup-plugin-commonjs一起(按照顺序)移除开发专用的代码。这里有完整的设置案例。

Webpack

像这个指南描述的这样将DefinePluginUglifyJsPlugin包含到生产环境的Webpack配置中。

使用CDN

如果不想使用npm管理客户端包, react react-dom的npm包在dist文件夹下面也提供了单个文件的分发,他们托管在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>

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

<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替换为想加载版本的版本号。

如果使用Bower,React可以通过react包获取到。

React文档翻译系列(一)安装的更多相关文章

  1. React文档翻译系列(二)Hello World

    这是React文档翻译系列的第二篇,前一篇介绍了如何安装react,本篇主要介绍react的知识体系,掌握了基本的知识体系,才能更好的学习React. Hello World 开始React最简单的方 ...

  2. React文档翻译系列(三)JSX简介

    # React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...

  3. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  4. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  5. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  6. react实战系列 —— 起步(mockjs、第一个模块、docusaurus)

    其他章节请看: react实战 系列 起步 本篇我们首先引入 mockjs ,然后进入 spug 系统,接着模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划 ...

  7. react实战系列 —— 我的仪表盘(bizcharts、antd、moment)

    其他章节请看: react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿"任务计划"模块实现一个类似的一级导航页面("My任务计划") ...

  8. Robotframework-Appium系列:安装配置

    1.   Robotframework-android系列:安装配置 1.1. 安装环境 64位win10家庭中文版 1.1. 安装说明 网上robotframework-appium安装资料也不少, ...

  9. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

随机推荐

  1. 细说Asp.Net Web API消息处理管道(二)

    在细说Asp.Net Web API消息处理管道这篇文章中,通过翻看源码和实例验证的方式,我们知道了Asp.Net Web API消息处理管道的组成类型以及Asp.Net Web API是如何创建消息 ...

  2. C# 获取文件MD5与SHA1

    之前刚开始学习编程的时候,总想着自己写一些小软件小工具. 而这个就是经典的文件MD5校验,顺便加上了一个SHA1. 在网络上下载一些东西时,会有作者提供MD5值. 它的作用就在于我们可以在下载该软件后 ...

  3. JavaScript中几个相似方法对比

    一.substring与substr   substring substr 概述 返回字符串两个索引之间(或到字符串末尾)的子串 返回字符串从指定位置开始到指定长度的子串 语法 参数 indexSta ...

  4. RadAsm使用

    RadASM 命令行语法 DelCheck,Out,Command,F1[,F2[,Fx]]   DelCheck   执行命令前要清除的文件,不使用时设为0  Out      一般指定为O,所有信 ...

  5. 创建Win32图形界面应用程序

    没有什么比创建一个Win32图形界面应用程序能让Win32汇编初学者更兴奋的了! 然而,对于像我这样没有代码便会陷入困境的人来说,看到下面的代码总能让人为之一振,百余行的代码使得Win32GUI编程并 ...

  6. 细谈sass和less中的变量及其作用域

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/ 如需转载,请在文章开 ...

  7. Radis安装

    基本知识 1.Redis的数据类型: 字符串.列表(lists).集合(sets).有序集合(sorts sets).哈希表(hashs) 2.Redis和memcache相比的独特之处: (1)re ...

  8. Windows内存管理简介:

    1:连续的内存空间分配: (1)单一连续分配:只能单作业,单任务运行: 分为系统和用户区:用户区是指除了系统需外左右的内存,由于单用户,单任务,要不都被占用,要不全空   (2):固定空间分配:固定分 ...

  9. 【openstack N版】——认证服务keystone

    一. 基础环境 1.1环境介绍 linux-node1(控制节点) #系统版本 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux r ...

  10. 第十二篇 C# 将HTML 直接转成Excel

    前些天写项目的时候,客户要求用HTML表格把信息展示出来,后面还要用展示的内容要导出Excel.本来想想在后台操作的话估计是要做死了,但是经过细想,Excel能够发布成HTML,一定也可以由HTML转 ...