React初步
一、React是什么：
即：facebook公司開發(fā)出的基于用戶界面的javaScript框架
相關(guān)文檔：

React官網(wǎng)：https://reactjs.org/
react-router:https://reacttraining.com/react-router/web/guides/philosophy
redux:https://redux.js.org/
react官方中文文檔：https://doc.react-china.org/
redux中文文檔：http://www.redux.org.cn/
https://www.cnblogs.com/ye-hcj/p/7191153.html
運(yùn)行一個(gè)react程序
安裝react腳手架

npm install -g create-react-app 相當(dāng)于vue 腳本架安裝 npm install vue-cli -g

創(chuàng)建一個(gè)項(xiàng)目

create-react-app 項(xiàng)目名 //注意有大寫字母

create-react-app my-app

3.運(yùn)行項(xiàng)目

cd 進(jìn)入項(xiàng)目目錄 例如：cd my-app
運(yùn)行：npm start

  注：默認(rèn)監(jiān)聽端口號(hào)：3000

解壓react腳本架配置：

npm run eject   

react入口js: index.js

jsx: 相當(dāng)于html

      <div class="box">
              <h2>我是標(biāo)題</h2>
              <ul>
                    <li>列表1</li>
                     <li>列表2</li>
             </ul>
    </div>

JS對(duì)象：

    ｛
      tag:"div" ，
    attrs:{class:"box},
    children:[
            {
              tag:"h2",
              attrs:"",
              children:["我是標(biāo)題"]
           },
              {
              tag:"ul",
              attrs:"",
              children:[
                         {}


          ]
           }
   ]
 ｝

虛擬DOM:直接操作JS 對(duì)象，將最后差異結(jié)果（diff算法）最終再更新到DOM元素

react樣式處理：

     css寫法：import './header.css';

js對(duì)象寫法：

   js對(duì)象樣式文件：

                let styles={
                
                      w100:{
                          width:'100px'
                      },
                      fl:{
                          float:'left'
                      },
                      bgRed:{
                          background:"#f00",
                          height:"100px",
                          display:"flex",
                          justifyContent:"center",
                          alignItems:"center"
                      }
                };
        
export default styles;

引入js對(duì)象樣式文件：

  import styles from './style';