React.js

这是个前端框架？
只用过 jQuery，在查 React.js 的资料过程中，感受到了前端对还在使用 jQuery 做开发的程序员深深的怨念……希望学完 React.js 能理解吧~
React.js，现在就当它是一个做页面的库吧，刚开始接触觉得写法相当奇怪，然后用着用着就觉得，哎设计者 ~~你他娘的~~ 还真是个天才。

组件 Component

比如说，我自己写了这么一个玩意，计数器。

某天发现可以用在购物车的界面里，然后，我就需要把 HTML 标签，和对应的 js 事件全都拷贝过去，找起来可能很麻烦。后端表示，能直接把这玩意当个类（组件）使用，用的时候 new 一个，岂不美滋滋。
React.js 表示，我可能就是干这个事的。
这个计数器，就可以当做一个组件。然后觉得，在 React.js 眼里，Web页面就是组件套组件，这样开发起来不会特别零碎么，虽然 HTML 也是这样，那个写法好歹有全局感…… 算了算了，先学先学。

create-react-app

我要学React.js 啊，这是个什么玩意？
前端的发展真快，我已经不太懂这帮人在干嘛了。我曾天真的以为，现在还是在用 <script> 标签引入一个或许叫 react.js 的文件，就可以做 react 开发的时代。然而，React.js 是要配置“全家桶”的，能不能不管这个，配起来好麻烦，让我直接用呗，这就是create-react-app的作用，传说中的“脚手架”。
React.js 是Facebook的，create-react-app 也是，使用之前装好node.js 和 npm （https://nodejs.org/en/ ），windows 下安装包中自带 npm（npm 5.2.0 之后又有了npx，活到老学到老，微笑脸）。
node.js 中新建一个名称为 hello-react 的 React.js 项目的操作如下：

npx create-react-app hello-react
cd hello-react
npm start

详见 https://github.com/facebook/create-react-app
P.S. create-react-app安装过程可能极其糟心，很慢很慢，可以改一下npm的源：

npm config set registry https://registry.npm.taobao.org

然后，它甚至贴心的打开了浏览器。

Demo

可以看到 public/ 中有一个 index.html 文件，上面的欢迎页面就是它没错了，然而，你会发现 index.html 的<body> 其中只有一个 id 为 root 的 <div>。

<div id="root"></div>

页面上的东西，都是组件，他们定义在 src/ 中，我们尽肯能去掉复杂的东西，把 index.js 直接改为下面这样，直观的感受一下：

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

class HelloReact extends Component{
    render(){
        return(
            <div>hello</div>
        )
    }
}

ReactDOM.render(<HelloReact />, document.getElementById('root'));

不出所料的话，页面自动刷新并且只显示了 hello。

简答梳理一下代码，主要做了3件事。

我们引入了三个类：
React：只要使用JSX语法，就必须引入。
React.Component：就是我们之前说的组件没错了。{ Component } 这样引入，可以直接在代码中使用 Component，而不用 React.Component。
ReactDOM：用来渲染组件
定义了一个类 HelloReact：
也就是组件，继承自 Component ，有一个必须要实现的方法 render()，直接返回了一段 html ……这个语法，就是 JSX 。而这段 html 就是页面内容没错了。
调用了ReactDOM 类的 render 方法：
把上面定义的组件 <HelloReact /> 渲染到 root 上。

JSX

看起来我们的主要工作就是写组件类，在里面定义好页面，当然还有事件什么的。在这之前，很在意的一点就是，这个直接在 js 里写 html 的语法问题，比如我们在 render 方法中写了这么一段。

<div className = "title">
    <span>hello</span>
</div>

emmm... 你会发现，html 中的信息也可以用 js 写出来，只不过不直观就是了

{
    tag : div,
    attrs : { className : 'titile' },
    children : [
        {
            tag : span,
            attrs : null,
            children : [ 'hello' ]
        }
    ]
}

所以 React.js 中就支持了 html 标签的写法，然后把 JSX 转为 js 对象，再到DOM，最后渲染到页面，这样开发起来就省事多了。
可以看到上面写的是 className 并不是 html 中的 class，可以看到之前定义类的时候已经使用了js中一直保留的关键字 class，所以在 JSX 中使用了className 代替，其他的关键字以后碰到再说。

BTW，可以使用