安装React

本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊>


翻译于2017年6月26日,原文


安装React方法

React是灵活js库并能够支持多种不同的项目。可以直接使用它创建新的项目,同时支持在已有的项目下引入。

尝试React

如果仅仅对react感兴趣,可以直接使用CodePen. 就可以不需要安装任何东西,同时只需要修改代码和观看结果。尝试可以点击这里

如果想使用编辑器编辑,可以下载HTML文件。修改后,在浏览器上展示即可。但是请不要把这个使用到正式产品,因为这里使用的react是网络下载的,会比较慢。

如果想学习使用完整的应用。可以看以下内容:创建React项目或者在已有项目中引入React

创建React项目

创建新的React项目,从一个简单的页面学起是最好的学习方法。这需要设置开发环境,并使用最新的js方法、提供最新的开发体验,和优化你的项目。

npm install -g create-react-app    //安装环境
create-react-app my-app    //创建应用 应用名称my-app 最好使用正确的路径

cd my-app    //移动项目
npm start  //开始使用

React项目不需要处理后台逻辑和数据库,仅仅是用于前端。如果使用Balel和webpack,就不再需要配置其他内容。

当想要把项目部署在正式环境,使用npm run build就可以创建一个优化过的项目到build文件夹中。想要了解更多的创建项目请看ReadMeUserGuide

添加React到已有项目

不需要因为引入React而重新开项目
推荐先在项目中部门内容使用React,如individual widget

React可以不在构建工具下使用,推荐自定义设置项目,这样的效率更佳,一般情况下有以下设置内容

  • package manager,包(库)管理。如Yarn或者npm。更容易管理,安装和升级第三方包,
  • bundler,构建器。如:wabpack或者browserify。更加容易的把模块合并到一起,并且优化加载时间。
  • compiler,转换器。如:Babel。更好的支持旧版本的js语法。

安装React

安装须知:强烈推荐设置production build process确保在项目使用的最新的React。

推荐使用Yarn或者npm来管理前后台依赖。如果是初次接触包管理器,推荐使用 Yarn documentation

//安装Yarn方法
yarn init
yarn add react react-dom
//安装npm方法
npm init
npm install --save react react-dom

无论使用Yarn或者npm下载资源,都来源于npm registry

使用ES6和JSX

推荐使用Babel让ES6和JSX运行在JS代码里。ES6拥有一些列最新的JS特性,使得开发更简单。JSX是js语言扩展,更好的应用在react。

Babel setup instructions 解释了如何配置不同的构建环境。确保项目中安装了babel-preset-react
babel-preset-es2015
。文件如: .babelrc
configuration

使用ES6和JSX的Hello World

推荐使用wabpack或者browserify。更加容易的把模块合并到一起,并且优化加载时间。

//最少的React代码运行hello world
import React from 'react';
import ReactDOM from 'react-dom';

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

//代码中使用了一个ID叫root的div。
//所以html的代码中必须要有`<div id="root"></div>`

同样,可以在已有的项目中使用JS UI 库。

Learn more about integrating React with existing code.

开发版本和生产版本

默认情况下,react包含许多警告帮助来帮助开发。

需要注意:构建正式产品的时候,需要去除多余的开发版本,不然会导致包体大和运行速度慢。

使用CDN

如果不想使用npm来管理包,可以参考reactreact-dom提供的简单文件描述来配置一个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>
//生产环境的配置
<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>

如果需要添加特定的版本,只需要替换路径里面的 “15”为其他版本即可


Hello World

最简单的运行hello world方法是使用 this Hello World example code on CodePen,这个方法不需要配置任何内容。如果想使用本地编辑器,看上文。

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

就能在网页上看到Hello, world!

为了快速学习,我们需要掌握构建模块:元素和组件。掌握后就能构建复杂的项目应用。

A Note on JavaScript

React是js库,能基本掌握基础的js语言。如果还是觉得掌握有难度,推荐学习 refreshing your JavaScript knowledge

另外,还需要掌握ES6的新特性, arrow functions, classes, template literals, let
, 和 const
状态。掌握 Babel REPL来检测适配ES6。

推荐阅读更多精彩内容