初学react

1、主要是src目录下的文件；
index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

引入react 和reactDOM文件，再引入app.js文件，该文件是个组件；
然后讲所有组件通过index.js挂载到public下面的index.html文件上。

如何挂载？

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

其中app为你的组件，root是在index.html里的一个div的id;

如何写组件呢？

在src下面新建一个js文件，例如App.js（记住要大写）

import  React, {Component}  from 'react'

class App extends Component {
        render(){
              return{
                  <div>测试随大神答案是</div>
  }
}
export default App

注意：return里面和template一样，需要一个最外层的div;
当然也可以不用套div，只需要将div变为Fragment(碎片)，在审查元素时，就会有最外层的div了

在组件中如何绑定数据和添加方法

import  React, {Component}  from 'react'

class App extends Component {

       constructor (props){
              super(props)
              this.state={
                   inputValue:'jspang'
                   list:[]
}
}
        render(){
              return{
                 <input   value={this.state.inputValue}  onChange={this.inputChange.bind(this)}/>
  }

   inputChange(e){
              this.setState({
                   inputValue:e.target.value
})
}
}
export default App

注意：其中数据绑定时，需要使用大括号（只要是使用js，就需要使用大括号），其中onChange后面的bind(this),是用来在下面的方法里的指向问题

如何使用循环

利用上面的List;
render(){
     retrun {
            <div>{
                     this.state.list.map(  (item ,index) =>{
                        return  <div key={index+item}>{item}</div>
                       })
            </div>
               }
           }

注意事项

比如说想要删除list的某个项
不能直接操作 this.state.list.splice(index,1)
而是要写 let list = this.state.list
list.splice(index,1)
然后再
this.setState({
list:list
})

不然会出问题，而且找不到