React 导读（一）

前言

写这篇文章的主要目标是让初学者更快的上手 React 的项目开发，能有一个循循渐进的理解过程。须要有必定的 JavaScript 基础和 NPM 的使用经验。很少说了，下面会按这个顺序进行介绍：

1. React 如何编写 Hello World!
2. React 中三个最基础、最重要的东西
3. React 中的 JSX
4. 你的第一个 Web 组件
5. React 中最开始须要关注的生命周期
6. React 一个组件集合的简单交互
7. React 开始一个项目的一点建议
8. React 简单的项目结构组织

开始前须要安装的环境：node.js、yarn

1、React 如何编写 Hello World!

1.使用脚手架直接避开环境搭建的问题

// 安装脚手架
➜ npm install -g create-react-app

2.使用脚手架建立项目

// react-study 是项目的根文件夹
➜ create-react-app react-study

// 执行后的第一行提示语，会提示建立的完整路径
Creating a new React app in /Users/lulin/Desktop/react-study.

// 安装成功后会提示下面的内容
Success! Created react-study at /Users/lulin/Desktop/react-study
Inside that directory, you can run several commands:

// 使用 yarn 启动项目
yarn start
    Starts the development server.
// 要发布项目的时候运行
yarn build
    Bundles the app into static files for production.
// 作测试的时候执行，目前没用
yarn test
    Starts the test runner.
// 能够自定义配置，目前也不用
yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:
  cd react-study
  yarn start

Happy hacking!

3.使用 Visual Studio Code 打开 react-study

先只须要关注 src 目录中的 index.js，以下：

├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js // 代码的入口文件
│   ├── logo.svg
│   └── registerServiceWorker.js

4.修改 index.js

删除 index.js 中全部的内容，贴如下代码运行：

import React from 'react';
import ReactDOM from 'react-dom';

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

ReactDOM.render 方法2个参数，第一个参数就是要渲染的界面结构或者一个 React 组件，第二个参数是要把这个结构渲染到真实网页 DOM 的什么位置。因此这份代码的结果就是在 id=root 的DOM节点下渲染出来 Hello World!。

2、React 中三个最基础、最重要的东西

一中介绍了 React 可以渲染一个 HTML 到指定的 DOM 中，可是 React 发明出来主要不是作这个事情的，由于这个事情能够直接经过 原生 JavaScript 的 innerHTML 也能实现。

React 主要做用能够认为是如下几点：
(1) 使用数据来驱动界面更新；
(2) 使用单向变化的数据来让 BUG 更好调试一点；
(3) 更方便、更声明式的编写 Web 组件；

那么这节主要介绍三个东西：
(1) state
(2) props
(3) setState 方法

若是要实现一个简单的加法器，这三个东西已经能够很好实现：

根据上面标的数字：
(1) this.state 里面有一个属性叫 count，这个属性可以经过 this.setState 方法从新传入一个对象来从新赋值。赋值的同时 render() 方法中 this.state.count 也会跟随自动变化，最后体现到网页上。这就是 state 属性的做用。
(2) this.setState() 方法接收一个新对象来从新赋值 this.state。
(3) this.setState() 也接收一个函数，这个回调函数这里我默认有一个 prevState 参数，表示以前的 this.state 的值，这个函数的返回值就是最新的 this.state。

你们还应该注意 button 上绑定的 onClick 事件，这就是跟 DOM 上直接绑定事件的写法同样(目前先这样理解)，不过须要都写成驼峰标识。

那么 state 和 setState 都介绍了，props 又是什么呢？你能够暂时理解成一个组件外面传递的属性。
仍是以计数器的代码为例子，简单修改一下：

class Counter extends React.Component {
    state = {
        count: 0
    };
    // 加 1
    onAdd() {
        this.setState({
            count: this.state.count + 1
        });
    }
    // 减 1
    onSub() {
        this.setState(prevState => {
            return {
                count: prevState.count - 1
            };
        });
    }
    render() {
        return (
            <div>
                {/* 这里的 this.props 属性 */}
                <h1>{this.props.name}</h1>
                <button onClick={this.onSub.bind(this)}>-</button>
                <span>{this.state.count}</span>
                <button onClick={this.onAdd.bind(this)}>+</button>
            </div>
        );
    }
}

// Counter 组件传了一个 name 属性
ReactDOM.render(
    <Counter name="计数器" />,
    document.getElementById('root')
);

这里注意代码中的注释，应该很直观了，咱们在组件上添加的属性，都能在组件里面经过 this.props 属性获取到，拿一个其余方式来比喻，就至关于函数的参数，参数传递进函数，函数内部可使用。可是不一样的是 this.props 在组件内部是只读的。

看到这里，其实你已经可以使用 React 来构造一个网页了，是否是很简单，就三个东西，加上一个 ReactDOM.render 方法。固然，若是 ES6 不熟悉的话可能仍是麻烦，可是这是必需要去学习和克服的，由于目前已是主流并且是进入了规范的东西。

3、React 中的 JSX

接触 React 你确定会问为何要用 JSX，JSX 究竟是什么。其实非官方的我只想这么解释，就是一个编写视图的模版而已，语法也不复杂，列下：
(1) 基本上是使用原始的 HTML；
(2) 事件绑定方法使用驼峰方式；
(3) 要插入 JavaScript 代码须要 {} 包裹，里面的代码就是原生的 JavaScript 代码；
(4) 避开一些 JavaScript 关键字，好比：class 要写成 className。

上面第二节的计数器中，render() 方法就是编写 JSX 的主要位置，其实 JSX 能够编写在 React 代码中的任意位置，可是推荐不要写得太过于零散。

其实理解这几点就已经足够了，具体能够看一下官方文档 JSX-简介

JSX 最终编译后也就是原生的 JavaScript 代码

4、你的第一个 Web 组件

学习了上面这些知识后，其实咱们就已经可以封装一个简单的组件的，第一个我这里先以 CheckBox 为例子，比较简单也很经常使用，应该比较适合。先来分析下这个小组件最基础的功能：就是点击选中和取消选中，模拟的话能够经过换图来实现，就是切换 DOM class。那么咱们开始动手吧！

class CheckBox extends React.Component {
    state = {
        checked: false // 默认没有选中
    };
    // 交替(选中/没有选中)的状态
    onClickCheckbox() {
        this.setState(prevState => {
            return {
                checked: !prevState.checked
            };
        });
    }
    render() {
        const checkboxClassArr = ['ui-checkbox'];
        // 若是选中，就添加一个 checked class 来给 css 作样式
        if(this.state.checked) {
            checkboxClassArr.push('checked');
        }

        // 组合最后的 class 结果
        const checkboxClass = checkboxClassArr.join(' ');

        return (
            <div onClick={this.onClickCheckbox.bind(this)}>
                {/* 这里模拟图标 */}
                <span className={checkboxClass}>
                    <i className="icon-checkbox"></i>
                </span>
                {/* 这里模拟图标内容 */}
                <span>{this.state.checked ? '选中' : '没有选中'}</span>
            </div>
        );
    }
}

这样一个简单的组件就已经完成了！效果以下：

今天就写到这里睡觉吧～能够动手试试，来点感受哦～这基本是最经常使用的一些概念和意义了，有兴趣能够提早阅读中文官方文档，已经改版体验好多了，慢慢读下来应该很好理解。