react中文入门教程

React 入门教程

按照惯例，在介绍一个新技术之前总是要为它背书的，作为 React 受众在开始接触之前肯定会有一些喜闻乐见的疑问∶

● 为什么不用 Backbone?

●为什么不用 Angular?

在没有真正使用之前，其实没法评价哪一个好，没有最好的，只有最合适的，如 Why React 所说，Giveitfive minutes，希望你能克服初次遇到 JSX这种存在的偏见去尝试一下。

因为官方文档组织得比较散乱，希望本教程能成为一个不错的入门参考。

有任何问题 → Github

本文档对应 React v0.14.x，使用 ES6。

React 概览

React 的核心思想是∶ 封装组件。

各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。

React 大体包含下面这些概念∶

●组件·JSX

● Virtual DOM

● Data Flow

这里通过一个简单的组件来快速了解这些概念，以及建立起对 React 的一个总体认识。

import React,{ Component } from 'react'; 
import { render } from 'react-dom';

class HelloMessage extends Component 
   { render() {
       return <div>Hello {this.props.name}</div>;
   }
}

// 加载组件到 DOM 元素 mountNode
render(<HelloMessage name="John" />,mountNode);

组件

React 应用都是构建在组件之上。

上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是

Hello John。

props 是组件包含的两个核心概念之一，另一个是 state （这个组件没用到）。可以把 props 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name ）来定制显示这个组件。

JSX

从上面的代码可以看到将 HTML 直接嵌入了 JS 代码里面，这个就是 React提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被"表现和逻辑层分离"这种思想"洗脑"太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要"编译"输出 JS 代码才能使用的，之后就会讲到开发环境。

Virtual DOM

当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。

当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个Virtual DOM 上，React 在这个Virtual DOM 上实现了一个 diff算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

Data Flow

"单向数据绑定"是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。

开发环境配置

要搭建一个现代的前端开发环境配套的工具有很多，比如 Grunt /Gulp / Webpack/Broccoli，都是要解决前端工程化问题，这个主题很大，这里为了使用 React 我们只关注其中的两个点∶

· JSX 支持

●ES6 支持

好消息是业界领先的 ES6 编译工具 Babel 随着作者被Facebook 招入麾下，已经内置了对 JSX 的支持，我们只需要配置 Babel一个编译工具就可以了，配合 webpack 非常方便。

Webpack 配置 React 开发环境

Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

安装 Webpack∶ npm install -g webpack

Webpack 使用一个名为 webpack.config.js 的配置文件，要编译 JSX，先安装对应的 loader∶ npm install babel-loader --save-dev

假设我们在当前工程目录有一个入口文件 entry.js，React 组件放置在一个 components/ 目录下，组件被 entry.js 引用，要使用 entry.js，我们把这个文件指定输出到 dist/bundle.is ，Webpack 配置如下∶

var path = require('path');

module.exports = {
    entry: './entry.js', 
    output: {
       path: path.join(_dirname,'/dist'), 
       filename: 'bundle.js'
    }, 
    resolve: {
       extensions:['','.js','.jsx']
    }, 
    module: {
        loaders: [
          { test∶八.jsljsx$/，loaders∶【'babel'】}
        ]
    }
}

resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。

loaders 指定 babel-loader编译后缀名为 .js 或者 .jsx 的文件，这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。

监听编译∶ webpack -d -watch

更多关于 Webpack 的介绍

【下载地址】

链接：https://pan.baidu.com/s/1FBQ95WedW2zyIO-f59lOeQ

提取码：n1ot