react学习

react万物皆组件

create-react-app 在我的理解就只是安装了一个react。

就像我们的项目中只安装了vue一样，其他的vue-router啊、vuex都没有。

等于一个没有脚手架的框架。

想要路由的话需要安装react-router，想要redux的话需要安装redux

然后就出现了许多大公司开发的react脚手架集成框架。比如阿里的Umi框架。

但是我们还是得自己手写一遍完整的react项目才能体会到框架的厉害之处。

React新建页面，所有的页面都必须集成于react的Component类，并且要抛出写好的类。

再在App.js中import当作组件使用。

//login.js
class LOGIN extends Component {
  render(h) {
    return (
      <div>
        我是一个登录页面
      </div>
    )
  }
}
export default LOGIN

// App.js


import './App.css';
import Login from "@/pages/login.js"
import { Component } from 'react';
class App extends Component {
  render() {
    return (
      <Login />
    )
  }

}
export default App;

这就是最简单的一个页面展示。

下面配合react-router使用路由跳转。

要先了解react-router的原理。所有的路由都是通过地址去驱动的。不管是vue-router还是react-router，他们都是匹配当前地址的后缀（hash模式匹配#后面的，history匹配域名后面的），再去router中寻找对应的component。

这样理解了就非常简单了，我们要做的只有两步。1、配置好router；2、写好component（页面）

安装react-router-dom，npm i react-router-dom

创一个router文件夹，在router下建一个index.js来管理路由。下面修改了下页面存放的文件，我们称它为容器containers

/*
 * @Descripttion: router/index.js
 * @version:
 * @Author: dal
 * @Date: 2021-10-26 17:34:53
 * @LastEditors: dal
 * @LastEditTime: 2021-11-01 16:29:32
 */
import Login from "@/containers/login"
import Dashboard from "@/containers/dashboard"
import Personal from "@/containers/personal"
import { Route, Switch, withRouter } from 'react-router-dom';

const routes = () => {
  return (
    <Switch>
      <Route exact path={"/login"} component={Login} />
      <Route exact path={"/dashboard"} component={Dashboard} />
      <Route exact path={"/personal"} component={Personal} />

    </Switch>
  )
}
export default withRouter(routes)