React16的简单上手之路

小伙伴想学习的可以参考技术胖的教程哦，这是我最喜欢的前端大佬，地址 http://www.jspang.com/posts/2019/05/04/new-react-base.html#

1、安装

安装脚手架： 

npm install -g create-react-app

 创建项目：

create-react-app demo01   //用脚手架创建React项目

 运行：

npm start   //预览项目，如果能正常打开，说明项目创建成功

2、项目入口文件--src--index.js

     项目编写文件--src--App.js 

3、简单的代码示例--增加和删减示例

 

父组件：

import React, { Component } from 'react';
import Child from './child.js'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }
  render() { 
    return (  
      

        
增加
        

         {this.state.list.map((item,index)=>{
            return 

         })}
        
      
    );
  }
  changeInput(e){
    this.setState({
      value:e.target.value
    })
  }
  addIn(){
    this.setState({
      list:[...this.state.list,this.state.value]
    })
  }
  deleteItem(index){
    let list =this.state.list;
    list.splice(index,1)
    this.setState({
      list:list
    })
  }
}
 
export default App;

 

子组件：

import React, { Component } from 'react';

class Child extends Component {
  render() { 
    return (  
      

         {this.props.content}
      
    );
  }
  handleClick(){
      this.props.deleteItem(this.props.index)
  }
}
 
export default Child;

4、代码解释：

（1）关于input

react是需要state来控制变量的，可以在constructor中初始化变量的值

 constructor(props) {
    super(props); //调用父类构造函数，固定写法
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }

 绑定事件，需要绑定this

changeInput(e){
    this.setState({
      value:e.target.value  //改变input的值需要用setState
    })
  }

(2) 循环数据

    {
        this.state.list.map((item,index)=>{
            return 
{item}
 //需要key值，不然控制台会报错
        })
    }
 

（3）增加数据

增加

addIn(){
    this.setState({
      list:[...this.state.list,this.state.value]
    })
  }

 

（4）删除数据--注意是不能直接操作state的

    {
        this.state.list.map((item,index)=>{
            return (
                

                    {item}
                
            )
        })
    }
 

deleteItem(index){
    let list =this.state.list;
    list.splice(index,1)
    this.setState({
      list:list
    })
 }

（5）父子组件传值

把要循环的内容展示抽出去，再引入子组件，注册使用：

子组件：

import React, { Component } from 'react';

class Child extends Component {
  render() { 
    return (  
      

        我喜欢邓紫棋
      
    );
  }
  handleClick(){
      this.props.deleteItem(this.props.index)
  }
}
 
export default Child;

 

父组件：

import React, { Component } from 'react';
import Child from './child.js' --引入

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      value:'一片紫海',
      list:['再来训练一遍','好喜欢新歌啊']

    }
  }
  render() { 
    return (  
      
 --需要嵌套一层包裹的，官方要求
        

         {this.state.list.map((item,index)=>{
            return 
 --注册
         })}
        
      
    );
  }
}
 
export default App;

 父组件传值给子组件：

  --父组件传值

      {this.props.content}  --子组件接收

子组件传值给父组件--官方规定子组件不能直接修改父组件的值，子组件可以通过调用父组件的方法来实现修改父组件的值。

 
通过deleteItem来调用父组件原来的删除事件，需要传index过去  --父

 

         {this.props.content}
 

 handleClick(){
     this.props.deleteItem(this.props.index) 子组件调用父组件的方法
 }

 

以上为一个简单的入门，整理的是技术胖的教程，具体的api之类可以自己拓展学习，本篇只是一个入门的简单梳理。