React项目架构+电商项目布局及代码

目录

目录 ..................................................................................................................................................1

React 项目架构 ................................................................................................................................3

一、 react 脚手架 ...........................................................................................................................3

(一) 、yarn 安装.....................................................................................................................3

(二) 、react 安装.....................................................................................................................3

## npx create-react-app [-g] .............................................................................................3

### npm i react@17.0.0 react-dom@17.0.0 babel-standalone@6.26.0....................3

## npm i react-router-dom ...............................................................................................3

## npm install less less-loader ..........................................................................................6

## npm i echarts................................................................................................................6

二、 目录结构 ................................................................................................................................7

(一) 、react 模块开发.............................................................................................................7

(二) 、路由配置--动态路由....................................................................................................8

三、 代码及效果图 ........................................................................................................................8

(一) 、注册页面 ......................................................................................................................8

(二) 、登录页面 ......................................................................................................................8

(三) 、欢迎页面 ......................................................................................................................9

(四) 、顶部用户信息 ............................................................................................................10

(1) . menu 菜单导航栏二级导航栏路由导向，点击加载组件....................................24

(2) .商品分类 ..................................................................................................................25

(3) .uplooad 组件上传商品图片，调用单文件上传接口 ............................................26

(4) .待开发 ......................................................................................................................29

(一) 、用户模块 ....................................................................................................................29

(1).待开发 .......................................................................................................................29

四、 其它组件 ..............................................................................................................................29

(一) 、路由配置 App.js-> Router 文件夹 .............................................................................29

## 静态路由配置...........................................................................................................29

## 动态路由配置...........................................................................................................29

(二)、react 安装

## npx create-react-app [-g]

React 项目

### npm i react@17.0.0 react-dom@17.0.0 babel-standalone@6.26.0

react@17.0.0 // react 核心

react-dom@17.0.0 //负责渲染

babel-standalone@6.26.0 // es6 转 es5

降低版本

## npm i react-router-dom

路由

## npm install antd --save or yarn add antd

组件

## npm i axios

网络请求