react脚手架---react创建项目

react脚手架

create-react-app 中文文档：
https://www.html.cn/create-react-app/docs/getting-started/

  • 方式一

cnpm i create-react-app -g
create-react-app react-app

  • 方式二

npm init react-app my-app

npm init <initializer> 在 npm 6+ 中可用

  • 方式三

yarn create react-app my-app

yarn create 在 Yarn 0.25+ 中可用

  • 方式四（推荐）

npx create-react-app react-app

(npx 来自 npm 5.2+ 或更高版本, 查看 npm 旧版本的说明)

注意：有可能不同的人创建出来的项目目录不一样，因为npm的版本不一致，但是不影响使用

运行项目

cd react-app
cnpm run start
aa7433eb456a50c42562e6183482d832.png

react项目目录结构

创建后，你的项目应如下所示：

node_modules/
public/
    favicon.ico
    index.html // ------是页面模板
src/
    App.css
    App.js
    App.test.js
    index.css
    index.js // -------js的入口文件
    logo.svg
    serviceWorker.js
    setupTests.js
.gitignore
package.json
RADEME.md
  • 疑问？webpack的配置去了哪里？

抽离配置文件

并不是必须，这个操作不可逆，一旦操作，不可以回退，如果需要对于webpack进行深度配置，可以抽离
a90347b232bbaa6d0d1521d01b0154cc.png

cnpm run eject

需要一小会
8842f1d252b3a1e633ea377bad3eb85e.png

抽离完成以后项目目录结构如下

config/
    webpack.config.js
node_modules/
public/
    favicon.ico
    index.html // ------是页面模板
scripts/
    build.js
    start.js
    test.js
src/
    App.css
    App.js
    App.test.js
    index.css
    index.js // -------js的入口文件
    logo.svg
    serviceWorker.js
    setupTests.js
.gitignore
package.json
RADEME.md

react路由

https://reacttraining.com/react-router/web/guides/quick-start

安装依赖

cnpm i react-router-dom -S

改造src的目录结构

src/
    api/
    components/
    router/
    store/
    utils/
    views/
    App.css
    App.js
    App.test.js
    index.css
    index.js // -------js的入口文件
    logo.svg
    serviceWorker.js
    setupTests.js

创建登陆以及首页

4a58acf5c7725782ed845ce3f8461604.png

  • 修改App.js如下
import React from 'react';
// HashRouter 路由形式  形如 http://localhost:3000/#/login// BrowserRouter 路由形式  形如 http://localhost:3000/login// as Router 取别名  表明配置路由  ----  顶级配置 - -- 只有1个  -- 只能有一个子元素// 每一个路由的定义都需要使用 Route 标签，配置 path属性// Router只能有一个子元素，路由规则是很多的，需要使用Switch包裹import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './views/login';
import Index from './views/index';
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/">
            <Index />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

基本后台页面

705cd81fc95d415381947c5d852a7f88.png

  • 创建 相对应的各个页面

f4d3f48e3c67abbf32df6199ae3a0e0f.png

  • 配置各个路由对应显示不同的内容页面

463a5ed1c9ce298cd48d3521ce6bcfac.png

浏览器输入不同的地址，查看路由配置的效果

  • 疑问？如果用户输入的地址是错误的呢？

  • 添加404页面
    fd1e14c0f823dd220aae59d44093ff9d.png

  • 疑问，有了404，重定向还远吗？

b42cf4a282be338e3fcd430596b754bd.png
c960126bc1d466d787cd5f4deb9a736a.png

  • 点击菜单跳转到相应的路由
    b2cf28207ff2c1b46e7ff25a65b97f61.png

de6427bbe7b24ecea322986106a9b10b.png
4028b6afe6040d65eb3b731537c10e0e.png
aff3a66b4e89484866e2375fc71f1abf.png
3d1a97999ac1acd8da9382ec058e2659.png
6efd8f902e85b011102519ce519942be.png

使用UI库改造项目

如果为抽离配置文件

https://ant.design/docs/react/use-with-create-react-app-cn

如果抽离了配置文件

cnpm i antd -S

cnpm i babel-plugin-import -D

package.json文件中添加 按需加载的代码
cdab213a6f940144c2fd4780c37e04f6.png

验证UI库

3b8242ea9393b2829657f8aace9fe27d.png
f3fca3401bde7c576bb4f6e3ed8e2530.png

基本结构

  • src/index.css 设置页面高度
    09056ad1f46fa10d3ea74ac26f6d8661.png

  • 修改src/App.js代码的结构，使用Router作为顶级标签

be99fcb49538599cce80913e12fbe60f.png

  • 找到UI库中的layout组件,选择自己合适的一个案例
    a4e86707b037d00b40b7f68f34389791.png

  • 修改src/views/index/index.jsx 页面结构
    257ba8542de55e78e3074aedc036a842.png
    3dbb32797102b1cb399f603c34807cf0.png
    de3f6e885ac700d1b2f830dc89348388.png
    复制基本的样式 src/views/index/index.css
    02a7c1c76e6dde75935cba5de6be8873.png

6b20a7661781c4407c8b2f525fc666fa.png

提取侧边栏导航

  • src/views/index/SliderMemu.jsx
    该引入的一定要引入
import React, { Component } from 'react';
import { Menu, Layout } from 'antd';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
const { Sider } = Layout
class Com extends Component {
  state = {
    collapsed: false
  }
  render () {
    return (
      <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
        <div className="logo" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">
            <UserOutlined />
            <span>nav 1</span>
          </Menu.Item>
          <Menu.Item key="2">
            <VideoCameraOutlined />
            <span>nav 2</span>
          </Menu.Item>
          <Menu.Item key="3">
            <UploadOutlined />
            <span>nav 3</span>
          </Menu.Item>
        </Menu>
      </Sider>
    )
  }
}

export default Com

  • 页面处使用导航组件
    0088d960ab7838716bc66c1663b9064f.png

  • 编辑导航

18438f02fca7e268b6a6eb9f0e5b6874.png
ea0894820abeb4f2cdb30c16fe222c8c.png

警告信息，关闭入口文件的严格模式
e40d54a2d825a1a893604e2c652f7f93.png
77e45f57da630afdf7f6d6b7a74e3536.png

将路由配置放至content区域

2b50edc6b0ef6cc2a077c005ee8ff724.png
4c1ab6c1ba405bde50d96aec9760f855.png
浏览器输入不同的路由可以看到不同的页面

配置侧边栏导航

分析： 侧边栏导航 分为 以及菜单、二级菜单、三级菜单。。。。。
注意：侧边栏导航一般都有权限的验证，不同的人看到的就是不一样的侧边栏 ----- 权限的校验

解决方案： 一定不能写死 侧边栏，可以 设计一个 模块，动态渲染侧边栏

  • 简单设计侧边栏数据

src/router/menus.js
a8c867e9b9165014e3888e92b6657162.png

  • 测试侧边栏导航
    9cfae117a639be5620b7ab1d8772fe32.png

  • 完善侧边栏数据

import {
  HomeOutlined,
  PictureOutlined,
  UnorderedListOutlined
} from '@ant-design/icons';
const menus = [
  {
    title: '首页',
    path: '/home',
    icon: HomeOutlined
  },
  {
    title: '轮播图管理',
    path: '/banner',
    icon: PictureOutlined
  },
  {
    title: '分类管理',
    path: '/category',
    icon: UnorderedListOutlined
  },
  {
    title: '产品管理',
    path: '/product',
    icon: UnorderedListOutlined
  },
  {
    title: '用户管理',
    path: '/users',
    icon: UnorderedListOutlined
  },
  {
    title: '购物车管理',
    path: '/cart',
    icon: UnorderedListOutlined
  },
  {
    title: '订单管理',
    path: '/order',
    icon: UnorderedListOutlined
  },
  {
    title: '地址管理',
    path: '/address',
    icon: UnorderedListOutlined
  }
]

export default menus;

c0b2619ab2bf2cb149fb2b7dfa29c4e2.png

  • 点击左侧的导航栏跳转路由
    548dc57c62a3862d61dffedcea122ae6.png548dc57c62a3862d61dffedcea122ae6.png

withRouter
如果打印this.props不含有history时，使用withRouter将其包含进去
a9d66969ab9ffb951f925c3456cae021.png
ecfed06265be9d53a6c4fb4628d4353f.png

编程式跳转
通过this.props.history 完成编程式跳转

5dea9244b2a49bef3bd59639fc672785.png

 

-----------------------------------------------------------文章来自吴大勋（大勋哥）链接

posted @ 2020-04-16 09:35  haccer  阅读(104)  评论(0)    收藏  举报