react基本使用(二)

上文已经将react基本的语法过了一遍，接下来用下cli脚手架工具

1.脚手架库 create-react-app

1.官方提供了项目脚手架create-react-app
2.项目的整体技术架构为react+webpack+es6+eslint
3.使用脚手架开发项目的特点：模块化，组件化，工程化

创建项目并启动
npm install -g create-react-app
create-react-app myProject
cd myProject
npm start

2.组件之间通信的2种方式

方法一： 就是用props进行数据传递，但是这样的传递只能一层一层进行传递
        父组件向子组件进行传递-》子组件进行数据的读取
        子组件向父组件进行传递-》子组件进行调用函数
方法二：pubsub.js
        npm install pubsub.js
        组件中引入 import PubSub from pubsub-js
        PubSub.publish('方法名',传递的参数)
        PubSub.subscript('方法名',function(msg,data){
                回调里边进行事件的操作
        })

        
        

3.react-router使用说明

浏览器bom对象有一个history属性会记住我们操作的历史，进行回退前进的操作
在此我们以使用history.js对象为例--此js库对操作进行了封装，操作使用比较简单
代码示例
history.push()
history.go()
history.replace()
history.forword()
history.listen(回调)

react-router相关api
----常用组件
<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

安装使用插件npm install --save reatc-router-dom
使用
import {BrowserRouter} from 'reatc-router-dom'
代码示例：用router对整个应用进行管理
    render (
        (
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        ),
        document.getElementById('root')
    )

4.router中 NavLink 和 Route组件实现路由切换的基本使用，参考网上代码图片示例

5.可以对路由组件NavLink>进行包装--属性统一接收{...props},这个属于调优的部分自行百科 ，不做过多陈述

6.向路由组件传递数据及两种路由跳转方式

路由子组件中获取路由传递的参数
this.props.match.params
上边截图是一种路由跳转的方式
还有点击事件操作路由进行跳转
下边代码简单示例
<button onclick={()=>{this.change(传递的参数)}}></button>
change(data){
    this.props.history.push(path)
}

7.react结合的开源ui框架

常用的react界面ui库
1.国外的material-ui
2.国内的ant-design
下边简介下国内ant-d简单应用
在脚手架项目中使用
npm install antd-mobile --save
全局引入，ui的css文件
在组件内部引入使用--根据官网使用
import {Button} from 'antd-mobile'



综上全局引入全部的样式文件就增加的打包的资源
官网强烈建议，webpack打包插件配置按需打包引入
<1>下载安装包
    npm install react-app-rewired --save
    npm install babel-plugin-import--save
<2>修改默认配置
    package.json中进行修改
    "scripts":{
        "start":"react-app-rewired start",
        "build":"react-app-rewired build",
        "test":"react-app-rewired test --env=jsdom"
    }
<3>新建config-overrides.js文件
内容如下截图

8.react中状态管理redux

js库，和react配合使用。作用是管理应用中多个组件共享的状态
安装依赖包
npm install redux --save

redux作为react中比较重要的一部分 ，今天到此为止，下篇继续（三）