react

React初步

一、React是什么：

  即：facebook公司开发出的基于用户界面的javaScript框架

相关文档：

   React官网：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

运行一个react程序

1. 安装react脚手架

   npm install -g create-react-app 相当于vue 脚本架安装 npm install vue-cli -g

2. 创建一个项目

   create-react-app 项目名 //注意有大写字母

create-react-app my-app

3.运行项目

   cd 进入项目目录  例如：cd my-app
  运行：npm start

      注：默认监听端口号：3000

4. 解压react脚本架配置：

       npm run eject   
   

react入口js: index.js

jsx: 相当于html

          <div class="box">
                  <h2>我是标题</h2>
                  <ul>
                        <li>列表1</li>
                         <li>列表2</li>
                 </ul>
        </div>

JS对象：

  ｛
        tag:"div" ，
        attrs:{class:"box},
        children:[
                {
                  tag:"h2",
                  attrs:"",
                  children:["我是标题"]
               },
                  {
                  tag:"ul",
                  attrs:"",
                  children:[
                             {}


              ]
               }
       ]
 ｝

虚拟DOM:直接操作JS 对象，将最后差异结果（diff算法）最终再更新到DOM元素

react样式处理：

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

js对象写法：

 js对象样式文件：
 
                    let styles={
                    
                          w100:{
                              width:'100px'
                          },
                          fl:{
                              float:'left'
                          },
                          bgRed:{
                              background:"#f00",
                              height:"100px",
                              display:"flex",
                              justifyContent:"center",
                              alignItems:"center"
                          }
                    };
            
    export default styles;

引入js对象样式文件：

import styles from './style';