首先要明确几件事情：

1. 本文章只适合小白， 大佬误喷
2. 要有一定的，html js es6 基础。 最好也是会有es8 的基础。但是本篇文章不会讲到es8
3. 跟着本文学习，最简单的学会react，年后找工作不是事情

搭建项目结构

首先需要装有node环境， 没有装的自行百度。

这里使用react 官方给出的create-react-app 脚手架，这一款脚手架是官方一直在维护的，小白放心使用。 脚手架安装的时候，会把一些必要的的包安装进来， 比如说react react-dom等

 // 这里在cmd命令行中安装 create-react-app 
 npm install create-react-app
 
 // 安装完之后就可以创建了
  create-react-app myapp
  这样子第一个项目就创建完成了。 

创建完成之后项目结构是这样子的。

node_modules  这个文件夹中装的都是一些的第三方包
public 这李装载着入口文件等 
src 这里就是我们要写入和改的文件夹
package.json 这个是配置文件  

剩下的文件都不需要去理会， 重点讲解一下 src 下的 index.js 文件。 首先把代码贴上来。

import React from 'react';         // 这个脚手架安装的时候就已经安装了
import ReactDOM from 'react-dom';  // 这个脚手架安装的时候就已经安装了 
import './index.css';  // 全局的css 样式文件
import App from './App';  // 显示的内容
import * as serviceWorker from './serviceWorker';  // 这个就是优化 学习可以不需要， 删除掉就可以了。

ReactDOM.render(<App />, document.getElementById('root'));  // 这个就是把 引入的文件渲染到指定的位置。 

 // 下边这一句那就是一个优化的过程
serviceWorker.unregister();

下边看上边引入的App 文件里边是什么

import React , {Component } from 'react';  // 每一个组件都需要引入 应为需要编译
import logo from './logo.svg';  
import './App.css';  // 样式  应为直接写在当前文件中通过react写法过于麻烦


// 不建议写 初学者不建议写函数形式， 应为这个涉及到了另一个技术点， 这里直接跳过说class的写法
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

// 这里是继承与 react 中的Componets类的方法
class App extends Component {
    
    // render 函数是继承与react中的Componets类的方法 需要抛出一个jsx语法的内容， 这个语法需要有根标签，通常都用 div 
    render (){
        return (
            <div>你好react</div>
        )
    }
}
export default App;

改完之后保存组件，在当前项目的根组件运行命令行 执行 npm run start react默认 会自动打开浏览器

这里说一下什么是jsx

jsx 也是一种js 的语法， 你可以通俗的理解为在js中写html

写class类时中的标签，写类明的时候， 不要写 
这样子写是不对的 应该写成 <div className="App"></div>  
应为react已经占用这个关键字， 所有react给类名的class 改为 className=“”

至于说为什么要继承react中的Component 这就是下边要讲的。

react 中的Component

在你使用 react 用class类写组建的时候，需要有render 函数来返回jsx 语法。 首先class 类是没有这个方法的，所有react写了这个Component类， Component类中有很多方法。 剩下的后边会说道

react如何像vue等框架一样，动态的改变数据， 拿到数据。

在vue中是定义到 data函数中然后return出去

在react中是定义到constructor中

vue 中使用双括号来表示当前的这个位置的数据是动态的。 而react是使用{} 单括号来表示当前括号中的数据是动态的

// 首先先介绍一点react的生命周期函数 
import React , {Component } from 'react';
import './App.css';  

class App extends Component {

    // constructor 函数是最先执行的所有也是在这个函数中去把数据注册给当前calss类
     // 此函数只会执行一遍
    constructor(props){
        super(props) // 这是里是注册父组件传递过来的参数
        this.state = {
            Totolist:[
                {name:'张三' , age：20},
                {name:'李四' , age：21},
                {name:'王五' , age：22},
                {name:'马大哈' , age：23}
              ]
        }
        conosle.log('constructor')
    }
    
    // componentWillMount函数都是在constructor执行完毕之后执行，也就是在render函数之前
    // 此函数只会执行一遍
    componentWillMount(){
         conosle.log('componentWillMount')
    }
    
    // 而render 函数则不一样， 每一次跟新之后都回重新执行
    render (){
        // 当你写所有步骤之后看这里
        
        // 这里就是把Totolist从state中解析出来。这里使用了es6的语法
        // 使用const 应为const 声明的数据首先不能被直接改变数据地址。 react也是不支持直接改变 state 中的数据， 直接改变也是引不起ui界面的变化。
        const { Totolist } = this.state; 
        
        const list = Totolist.map((item, index) => {
            return(
                // 这里和上边讲的jsx 语法一样。 但是需要注意一点， 为了react更方便的找到当前循环出来的数据，要定义key 
                <div key={index}> 
                    <div>我叫{item.name}</div>
                    <div>今年{item.age}岁</div>
                </div>
            )
        })
        return (
            <div>{list}</div>
        )
    }
    // componentDidMount函数都是在render执行完之后再去执行所以在这个函数中操作，数据，发送请求等
    // 此函数只会执行一遍
    componentDidMount(){
         conosle.log('componentDidMount')
    }
}
export default App;

怎么动态修改数据

在vue中是直接 this.数据 = 修改之后的数据。 而react中需要借助一个函数，这个函数来源于Component类。 setState见下边示例

// 首先先介绍一点react的生命周期函数 
import React , {Component } from 'react';
import './App.css';  

class App extends Component {

    // constructor 函数是最先执行的所有也是在这个函数中去把数据注册给当前calss类
    constructor(props){
        super(props) // 这是里是注册父组件传递过来的参数
        this.state = {
            Totolist:[]
        }
    }
    // 这里为什么要写箭头函数应为箭头函数中的this是继承与父元素的。 
    // 如果写普通的函数就需要在一上来执行当前class类的时候就要改变普通函数的指向，也就是在constructor中
    clickTap = (e) =>{
        let { index } = e.currentTarget.dataset; // 解构出自定义属性
        let { Totolist } = this.state;
        
        // 这里那就是修改看出来就可以了，应为没有什么实际操作的场景
        // 如果直接改变的话，react是捕捉不到数据流的改变，从而无法跟新ui界面
        Totolist[index].name = '暂无'
        this.setState({
            Totolist
        })
    }
    
    render (){
        const { Totolist } = this.state; 
        const list = Totolist.map((item, index) => {
            return(
                // onClick 是react中的click 事件， 和原生中一样不过on  
                // 后边的首字母都是需要大写 
                //  onClick={this.clickTap} 后边的大括号的this是指class类 来获取到clickTap函数
                <div key={index}
                 onClick={this.clickTap} 
                data-index={index}
                > 
                    <div  >
                    我叫{item.name}
                    </div>
                    <div>今年{item.age}岁</div>
                </div>
            )
        })
        return (
            <div>{list}</div>
        )
    }
    
    componentDidMount(){
        // 上边我定义了一个空数组然后模拟请求数据
        setTimeout(() =>{
            this.setState({
               Totolist  = [
                 {name:'张三' , age：20},
                {name:'李四' , age：21},
                {name:'王五' , age：22},
                {name:'马大哈' , age：23}]
            })
        } , 2000)
    }
}
export default App;

总结

react中的事件必须以on开头 而且功能后边的首字母要大写

react中使用动态数据，则需要使用{数据} 大括号的形式来使用

react 中的class类明则需要改成className

注册state 则需要在 constructor中注册，应为constructor是一上来第一个执行的

搞清楚1.constructor , 2.componentWillMount , 3. render , 4.componentDidMount ,这四个函数都是 依次执行 。 除了render 函数之外的三个函数，都是执行一次，render 函数是每一次数据改变都会重新执行render函数