React-脚手架

1.安装react

　　cnpm i -g create-react-app

　　查看版本：create-react-app --version    ----出现版本号说明成功

2.安装react-脚手架

　　create-react-app 脚手架名称-(不可驼峰命名) 

　　安装完成：cd 项目文件----》npm start 启动脚手架

　　vscode自动补全html标签：　在设置json中添加如下　　　

　　"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

3.动画---直接js引入style样式

import React,{Component} from 'react'
import {CSSTransitionGroup} from 'react-transition-group'
class Tran extends Component{
    constructor(){
        super()
        this.state={
            v:true
        }
    }
    css(){
        return `
            .leo{200px;height:200px;background:black;}
            .leo-enter{
                opacity:0;
                margin-left:500px;
            }
            .leo-enter-active{
                opacity:1;
                transition:.8s;
                margin-left:0px;
            }
            .leo-leave-active{
                opacity:1;
                margin-left:0px;
            }
            .leo-leave{
                opacity:0;
                transition:.8s;
                margin-left:500px;
            }
        `
    }
    render(){
        let oDiv=[this.state.v?<div key={1} className="leo"></div>:'']
        return (<div >
                    <h2>react---动画</h2> 
                    <button onClick={this.click.bind(this)}>切换</button>
                    <style dangerouslySetInnerHTML={{__html:this.css()}}></style>
                    <CSSTransitionGroup 
                        transitionName="leo"
                        transitionEnterTimeout={1000}
                        transitionLeaveTimeout={1000}
                    > 
                       {oDiv}
                     </CSSTransitionGroup>
                </div>
            )
    }
}


export default Tran

4.react使用ui

　　react - Material / Element / Ant

　　Material 

　　　　官网： http://www.material-ui.com/

　　　　安装：npm install material-ui -S

　　　　移动端要引入：import injectTapEventPlugin from 'react-tap-event-plugin'        执行：injectTapEventPlugin();

　　　　引入 import    MuiThemeProvider   from   'material-ui/styles/MuiThemeProvider'

　　　　只要是 material 的内容的东西都放在MuiThemeProvider 标签下

　　Ant

　　　　官网： https://1x.ant.design/

　　　　安装：npm install antd -S

　　　　引入：import { DatePicker,Button } from 'antd';    import 'antd/dist/antd.css';

5.react使用antd的菜单组件出现报错  ----React.StrictMode（严格模式）

　　　　删除index.js中React.StrictMode

6.依赖包安装

　　脚手架生成出来的项目，初始时使用 cnpm install 安装依赖，后期有用到其它包时使用 cnpm install xxxx 安装时始终写不进 package.json，但是 node_modules 中已经下载成功。

　　cnpm i xxxx -S        加-S就解决了

7.react路由（react-router）

　　官网：https://reactrouter.com/core/guides/quick-start

　　安装：npm i react-router -S    

　　　　　npm i react-router-dom -S

　　引入：import { BrowserRouter as Router, Route, Link } from "react-router-dom";

　　Router:只允许放一个根元素　

                   <Router>
                         <div>
                             <Link to="/">首页    </Link>
                             <Link to="/news">新闻页</Link>
                             <Link to="/about">关于我</Link>
                             <Route path="/"  >
                                 <Index />
                             </Route>
                             <Route path="/news" component={News} />
                             <Route path="/about" component={About} />
                         </div>          
                    </Router>                        

　　　exact : 严格匹配----精准匹配。避免每个页面都渲染跟路由

　　   <Switch>标签:

　　　　　有<Switch>标签，则其中的<Route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；

　　　　　无<Switch>标签，则其中的<Route>在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的

　　　　　为了保证路由只渲染一个路径

 　　　子路由变量获取：

　　　　　　router path='/news/:变量名' -----》this.props.match

 　　　参数传递方式：

　　　　　　1.箭头函数 -> const App = ({match}) =>{}　　　　　　

　　　　　　2.function App({match}){}

 　　　无限调用router（回调地域）：自己循环链接调用自己---避免无限回调