react入门之二--开发篇

react开发篇

本系列第一篇文章我们说基础知识，主要是让大家对react能够直接上手使用，做出东西来，但是对于一些相对复杂逻辑的业务，我们就需要科学的规划和系统的使用react.

而react,毋庸置疑，和使用a2（angular2）一样,涉及到一些简单的常用的ES6的知识，当然是非常简单的，我们遇到总结到下面的第一部分就好。

一、ES6基础速查

​ 这里的ES6知识并不是告诉你准确的东西，而是让你在一分钟之内了解ES6，让你顺利的学习react,而不是耗费精力在细枝末节上，当然ES6绝对是重中之重，理解react的必备，但是这个教程是让你迅速上手出活，而不是教你原理。

直接上ES6对比ES6

​ let ->var

​ const ->var 当时不能改，常量

​ import 相当于 src

​ class ES5里面的 对象

​ arr.map函数

​ 箭头函数 直接说

([param] [, param]) => {
   statements
}

param => expression
() => { ... } // 零个参数用 () 表示；
x => { ... } // 一个参数可以省略 ()；
(x, y) => { ... } // 多参数不能省略 ()；

好，我们继续回到正题，模块化的使用react，前面我们使用过引用react库的方式，而实际项目中更常见的方式是我们通过NPM/yarn等，管理项目功能和模块，不多说我们还是从一个最简单的hello world开始。

二、react的常用子

直接上安装react和相关环境，

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

注意，很多教程是从webpack, Babel and ESLint等配置开始的，其实不用，上面的工作其实就是帮你配置这些，当然了，你如果能够了解如何配置更好，但是现在是学react所以我尽量不引人新知识，想让大家会用。

注意这个是开发过程，如果是上线 使用命令

npm run build 最后会将上线文件放到 build文件夹下

大部分时间我们是和app.js打交道，不墨迹开整。

1.先看看app.js里面写的啥？

class App extends Component{
  render(){
    return (
        <h1>hello word</h1>
    );
  } 
}

我们对比一下之前函数的写法

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

注意：推荐大家使用第一种写法，为什么？因为第一种写法有状态，函数的写法没有。后面我们会说为什么。

我们继续折腾app.js

2.下面我们说下，在react中的属性使用

class App extends Component{
  render(){
    return (
        <h1>{this.props.index}</h1>
    );
  } 
}
ReactDOM.render(
    <App index = '我是一个属性' />//注意自封闭，txt就是属性
    document.getElementById('div1');
);

3.下面说一下个对应第一个第一篇文章的状态管理。先看代码

class App extends Component{
    constructor(){
        super();//不用你理解，你只要记住一件事 super调用父类的构造器，使用this的话必须先执行它。
        this.state = {
            name:'尼古拉斯·屌·大彬哥'
        };
    }
    update(e){
        this.setState({
          name:e.target.value
        });
    }
    render(){
      return (
        <div>
          <input type = "text" onChange = {this.update.bind(this)} />
          <h1>{this.state.name}</h1>
        </div>
      );
    } 
}

4.多个组件嵌套 App 这个组件里面嵌套着 Widget

import React, { Component } from 'react';

class App extends Component{
    constructor(){
          super();//不用你理解，你只要记住一件事 super调用父类的构造器，使用this的话必须先执行它。
          this.state = {
              txt:''
          };
          this.update = this.update.bind(this);
    }
    update(e){
         this.setState({
            txt:e.target.value

         });
    }
    render(){
      return (
        <div>
          <Widget txt={this.state.txt} update={this.update} />
          <Widget txt={this.state.txt} update={this.update} />
          <Widget txt={this.state.txt} update={this.update} />
        </div>
      
      );
    } 
}
const Widget = (props) => {
  return (
      <div>
        <input type="text"
          onChange={props.update} />
        <h1>{props.txt}</h1>
      </div>
    );
}
export default App;

5.作为例子肯定少不了列表循环

class App extends Component{
    constructor(){
        super();//不用你理解，你只要记住一件事 super调用父类的构造器，使用this的话必须先执行它。
        this.state = {
            data:[
              {name:"leo",age:18},
              {name:"alice",age:19},
              {name:"blue",age:17},
            ]
        };
    }
    render(){
        let rows = this.state.data.map(person=>{
          return <PersonRow key = {person.id} data = {person} />
        });
      return (
        <ul>    
          <li>rows</li>
        </ul>
      );
    } 
}

const PersonRow = (props)=>{
  return (
    <li>{props.data.name}-----{props.data.age}</li>
  );
}

关于react的简易和总结

​ react 功能简单，技术链条很短只是一个mvc的v，相比angular2更实用，当然技术栈也不完整是个弊端，总体来说可以采用

​ 先讲ES6->react ->angular2的思路，这里要重点讲ES6，因为是目前大部分库都是基于ES6构建的。

​ 单纯使用react的例子可以讲：

​ 选项卡

​ 留言板

​ 五子棋

如果想更加实战化，推荐详细讲。

​ react、webpack、bebel 和redux。

react开发 组件化是个好的发展方向，相比angular2断崖式的更新，更稳定，推荐重点使用。

讲完这篇基本上 大家了解ES6和写一些选项卡，留言板在之类的没问题了，有同学可能会问为啥没有数据交互，已经强调过了，它是展示层，跟ajax无关。好下面我说下未来可能大火，但是目前不是很实用的React forNative.

​