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

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

引入react 和reactDOM文件，再引入app.js文件，該文件是個(gè)組件；
然后講所有組件通過index.js掛載到public下面的index.html文件上。

如何掛載？

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

其中app為你的組件，root是在index.html里的一個(gè)div的id;

如何寫組件呢？

在src下面新建一個(gè)js文件，例如App.js（記住要大寫）

import  React, {Component}  from 'react'

class App extends Component {
        render(){
              return{
                  <div>測試隨大神答案是</div>
  }
}
export default App

注意：return里面和template一樣，需要一個(gè)最外層的div;
當(dāng)然也可以不用套div，只需要將div變?yōu)镕ragment(碎片)，在審查元素時(shí)，就會(huì)有最外層的div了

在組件中如何綁定數(shù)據(jù)和添加方法

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

注意：其中數(shù)據(jù)綁定時(shí)，需要使用大括號（只要是使用js，就需要使用大括號），其中onChange后面的bind(this),是用來在下面的方法里的指向問題

如何使用循環(huán)

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

注意事項(xiàng)

比如說想要?jiǎng)h除list的某個(gè)項(xiàng)
不能直接操作 this.state.list.splice(index,1)
而是要寫 let list = this.state.list
list.splice(index,1)
然后再
this.setState({
list:list
})

不然會(huì)出問題，而且找不到