React初体验

React 环境安装

npm i -g create-react-app

## 创建 React 项目

create-react-app 项目名

运行 React 项目

1.进入项目根目录

cd 项目名

2. 运行

npm run start

使用 Ant D

安装

npm install antd --save

按需引入

...

项目架构

目录分层设计

推荐将静态资源文件存放至 public，无需在 src 下单独创建，因为 src 目录下 webpack 会将其打包，占用项目提及。

• public
  • assets
    • icons
    • images
• src
  • api
  • baseui
  • config
  • store
  • styles
  • routers
  • pages
  • tools
  • service
  • constant
  • components

页面架构

主界面 Layout 组件的拆分
其实按照管理系统的通用性，下面这几个组件可以单独存放在 baseui 目录下面，作为产品线的通用型基础组件

• 主页 Layout
  • SideBar
  • NavHeader
  • Content
  • NavFooter

路由的使用

之前做了差不多 5 年的 vue 开发，用 vue-router 比较爽！现在一下转 React 还有点不使用，慢慢来吧。。。

1.安装路由插件

npm i react-router-dom -D

2.配置化路由

react-router-dom 是分的灵活，支持在项目中任意地方使用标签化的形式使用路由，但这样一来路由代码会变得比较分散，所以个人还是推荐使用配置化路由。

在 src 目录下心间文件夹 routers，距离目录结构如下

• src
  • routers
  • • devRouter.js(公共路由)
  • • index.js (统一出口)

devRouter.js

import React, { Component } from 'react';
import App from '../App'
import { HashRouter, Route, Switch } from 'react-router-dom'

// 导入路由模块
import Layout from '../pages/Layout'
import Dashbord from '../pages/Dashbord'
import Nomatch from '../pages/Nomatch'
import Login from '../pages/Login'

class DevRouter extends Component {
  render () {
    return (
      <HashRouter>
        <App>
          <Route path="/layout" render={() =>
            <Layout>
              <Switch>
                <Route path="/layout/dashbord" component={Dashbord}></Route>
                {/* 404页 */}
                <Route component={Nomatch}></Route>
              </Switch>
            </Layout>
          }>
          </Route>
          {/* 登陆页 */}
          <Route path="/login" component={Login}></Route>
        </App>
      </HashRouter>
    )
  }
}

export default DevRouter

index.js

import DevRouter from './devRouter'

export default DevRouter

在 src/index.js 入口文件中引入

import React from 'react';
import ReactDOM from 'react-dom';
import "./styles/index.scss"
import Router from  "./routers"
import Layout from './pages/Layout';


ReactDOM.render(
  <React.StrictMode>
    # 主要是挂载Router
    <Router />
  </React.StrictMode>,
  document.getElementById('root')
);

细节说明

• - 类似于 vue 中
• 嵌套路由的父元素不需要 component 属性，返回一个 render 函数，在 render 函数中嵌入子路由