初识React，使用react做一个简单的计数器

在index.js声明一个变量，然后创建一个Div 并使它拥有一个red的类名，并且div里面会显示n的值

import React from 'react';
import ReactDOM from 'react-dom';
require('./index.css')
let n = 0
const App=React.createElement('div',{className:'red'},n)
ReactDOM.render(App,document.getElementById('root'))

此时页面显示

接着我们再继续创建一个按钮。按钮里面显示+1

const App=React.createElement('div',{className:'red'},
n,
React.createElement('button',{
  onClick:()=>{
    n+=1
  }
},'+1')
)
ReactDOM.render(App,document.getElementById('root'))

此时页面显示

但是这个时候去点击按钮 n的值并没有发生改变，我们可能应该需要重新再次渲染页面

const App=React.createElement('div',{className:'red'},
n,
React.createElement('button',{
  onClick:()=>{
    n+=1
    ReactDOM.render(App,document.getElementById('root'))
  }
},'+1')
)
ReactDOM.render(App,document.getElementById('root'))

点击之后重新渲染，发现页面并没有重新刷新，这个问题就在于React.createElement('div',{className:'red'}, n 这句话，因为初始化的时候n的值已经被确定下来了，我们需要重新重新刷新n的值，于是我尝试将App作为一个函数

const App=()=>React.createElement('div',{className:'red'},
n,
React.createElement('button',{
  onClick:()=>{
    n+=1
    ReactDOM.render(App(),document.getElementById('root'))
  }
},'+1')
)
ReactDOM.render(App(),document.getElementById('root'))

再次点击 ，n的值进行了一个改变

这样，我们就完成了一个简单的计数器