Day3通过cmd开启一个react-app（本地服务器）

VanilaJs：原生js，直译：香草Js
链接： cn.redux.js.org

const和let的唯一区别就是，const不可以被更改，所以当声明变量的时候，尤其是在声明容易被更改的全局变量的时候，尽量使用const

！！！

怎么通过cmd开启一个react-app（本地服务器）
1、cd进到D:/vscode
2、创建一个文件夹demo-react-redux-1，cd进去
3、执行命令：create-react-app .
（注意有一个点,如果没有create-react-app就npm i -g create-react-app)
4、执行命令：npm start，打开完成
5、打开vscode，导入文件夹demo-react-redux-1，打开index.js App.js编辑即可

注意：如果想再次进入本地服务器编辑demo-react-redux-1，直接执行1-2-4-5即可

react代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    
  </div>
  <script src="https://cdn.bootcss.com/redux/4.0.4/redux.min.js">
    function add1(){
      store.dispatch({type:'add' , payload: 1}) //1.dispatch一个action
    }
    function add2(){
      store.dispatch({type:'add' , payload: 2})
    }
    function addIf(){
      var oldState = store.getState()
      if(oldState % 2 === 1){
        store.dispatch({type:'add' , payload: 1})
      }
    }
    function addAsync{
      setTimeout(()=>{
        store.dispatch({type:'add' , payload: 1})
      },2000)
    }
    
    function render(store){
      var app = document.querySelector('#app')
    app.innerHtml = '
    <div>
      你点击了<span id="value">${store.getState()}</span>次
      <div>
        <button id="add1" onclick="window.add1()">+1</button>
        <button id="minus1" onclick="window.add2()">+2</button>
        <button id="add1IfOdd" onclick="window.addIf()">如果为单数就+1</button>
        <button id="add1After2Sec" onclick="window.addAsync()">两秒后+1</button>
      </div>
    </div>
    '
    }
     function stateChanger(state, action){
      if(state === undefined){
        return 0
      }else{
        if(action.type === 'add'){
          var newState = state + 1
          return newState //2.根据操作生成新的state，也就是触发一个事件
        }else{
          return state
        }
      }
    }
    
    var store = Redux.createStore(stateChanger)
    render(store)
    store.subscribe(()=>{
      render(store) //接收到事件，重新render
    })
   
   
     
  </script>
</body>
</html>

react基础<Ⅲ>

react基础<Ⅲ>

Day3通过cmd开启一个react-app（本地服务器）

！！！