React脚手架 & 路由

脚手架

creact react app的官方文档

以系统管理员的身份，安装该脚手架全局命令

npx create-react-app my-app //第一种方法装脚手架

npm install create-react-app -g

你就会在全局命令行里面拥有一个create-react-app命令，可以用以下命令检查是否安装成功

create-react-app -V

创建第一个项目，如果安装不成功可以考虑换这两个尝试一次yarn和cnpm

create-react-app [项目名字]
create-react-app my-app //例如这样

启动项目

cd my-app
npm start //或者 npm run start

在浏览器里面，查看该地址

http://localhost:3000/

public 单页面应用的主页（ico，index.html）
src 开发文件夹(组件，自定义模块，样式，模板)

react和vue的脚手架都是基于webpack的

路由

React-Router-DOM官方文档

type	des
实现单页面应用程序single page application(SPA)（今日头条）	不刷新整个页面，永远在一个index.html，依靠路由切换具体的场景，首次加载大部分大部分东西，后面异步加载具体要更新的内容
多页面应用程序(腾讯新闻)	页面跳转,整体刷新，资源文件重新加载

安装

安装路由模块react-router-dom

npm install react-router-dom

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

BrowserRouter和HashRouter

https://www.cnblogs.com/houjl/p/10056718.html（路由传参的三种方式）

BrowserRouter称为浏览器路由，使用的时候是url上面不带#，兼容性比较差，需要后端配合，好看

HashRouter称之为哈希路由，兼容性比较高

react-router-dom内置组件Link，Redirect 等

import { HashRouter as Router, Route, Link, Switch, Redirect, withRouter} from "react-router-dom";

嵌套路由

路由里面放路由，第一层路由/home /my

//首先在index.js文件根部注入路由
import { HashRouter as Router } from "react-router-dom";
    ReactDOM.render(
        <Router>
            <App />
        </Router>,
        document.getElementById('root')
    );

//App.js文件可设置以下路由
import { Route, Switch } from "react-router-dom";
    <Switch>
        <Route path="/home/" exact component={Home} />
        <Route path="/my" component={My}/>
	</Switch>

嵌套路由就是在Home组件里面在放一个<Route>组件，进入/home/xheader ，既加载Home组件，也加载Xheader组件；进入/home/hot路径时，既加载Home组件，也加载Hot组件

import { Route, Switch } from "react-router-dom";
<Switch>
    <Route path="/home/xheader" component={Xheader} />
    <Route path="/home/hot/" exact component={Home} />
</Switch>

注意，嵌套路由的path是要把第一层路由的路径加上

Link to跳转及传参

Link相当于<a>标签，提供跳转路由的功能

<link to = "/xxxx">

<Link to="/home">Home</Link>
<Link to={`/setting/${this.state.num}`}>setting</Link>
//<Link to="/setting/2">xheader</Link> 路由传参传定值

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/setting/:id" component={Setting} />
</Switch>

上面代码的含义为

url匹配到#/home切换到Home组件

url匹配到#/setting/x切换到Setting组件

编程式导航及传参

除了使用<Link>标签跳转路由，还可以使用路由提供给你的this.props.history.push进行跳转

<button onClick={this.tiaozhuan.bind(this)}>点我有惊喜</button>

tiaozhuan() {
    this.props.history.push(`/setting/${this.state.num}`)
    // this.props.history.push('/setting/2')  路由传值传定值
}

路由重定向

1.<Redirect> 标签
	<Redirect to={'/home'} />
2.编程式导航方式
	this.props.history.push('/home')

//例如App.js内路由重定向

import { Route, Redirect, Switch} from "react-router-dom";
render() {
    return (
        <Switch>
            <Route path="/home" component={home} />
            <Route path="/setting/:id" component={setting} />
            <Redirect to={'/home'} />
        </Switch>
        )
}

设置app页面同级路由

//若要设置与app页面同级路由，可在index.js文件设置，单页面开发不用设置

import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
ReactDOM.render(
    <Provider store={store} >
        <Router>
            <Switch>
            <Route path="/app" component={App} />
            <Route path="/header" component={Header}/>
            </Switch>
        </Router>
    </Provider>,
    document.getElementById('root')
);

withRouter

概念：组合式组件，把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上

//App.js组件中使用withRouter

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, withRouter} from "react-router-dom";

import home from './pages/Home.jsx';
import setting from './pages/Setting.jsx';

class App extends Component {
    constructor(props){
        super(props);
        this.props.history.push('/home') //路由重定向
     }

    render() {
        return (
            <div className="App">
                <Router>
                    <Switch>
                    <Route path="/home" component={home} />
                    <Route path="/setting/:id" component={setting} />
                    </Switch>
                </Router>
            </div>
        );
    }
}

export default withRouter(App);

vue-devtool和react-devtool

vue和react的调试工具

1. Clone this repo 克隆该仓库到本地

git clone https://github.com/vuejs/vue-devtools.git
cd vue-devtool

2. 安装该依赖包

npm install 

(Or yarn install if you are using yarn as the package manager)

3. 执行打包

打包插件

npm run build

4. 打开谷歌浏览器的扩展程序,打开右上角的开发者模式,点击左上角加载已加压的扩展程序，打开该shells/chrome目录，加载插件

Open Chrome extension page
Check "developer mode"
Click "load unpacked extension", and choose shells/chrome.