React>> react-family>> 返回
项目作者： Yuezi32

项目描述 ：
基于create-react-app完善的react全家桶项目架构
高级语言： JavaScript
项目地址: git://github.com/Yuezi32/react-family.git
创建时间： 2020-02-01T12:39:24Z
项目社区：https://github.com/Yuezi32/react-family
开源协议：
下载


React-Family: 基于create-react-app的项目全家桶

特性说明

  1. 支持Sass/Scss/Less/Stylus
  2. 已安装react-router-dom
  3. 已安装redux、react-redux
  4. 已安装redux-thunk
  5. 已安装immutable
  6. 已安装axios
  7. 已安装mockjs
  8. 支持浏览器Redux DevTools插件（需先在chrome应用商店添加Redux DevTools）
  9. 支持反向代理（在src/setupProxy.js中配置）

如何集成Ant Design

考虑到Ant Design不是项目必须UI库，未集成至全家桶。如需使用，请参阅我的微信公众号（卧梅又闻花）的教程《超全面详细一条龙教程！从零搭建React项目全家桶》，非常简单。

目录结构

  1.     ├─ /config               <-- eject后生成的配置目录
  2.     |  ├─ /jest
  3.     |  ├─ env.js
  4.     |  ├─ module.js
  5.     |  ├─ paths.js
  6.     |  ├─ pnpTs.js
  7.     |  ├─ webpack.config.js  <-- webpack配置文件
  8.     |  └─ webpackDevServer.config.js
  9.     ├─ /node_modules
  10.     ├─ /public
  11.     |  ├─ favicon.ico        <-- 网页图标
  12.     |  └─ index.html         <-- HTML页模板
  13.     ├─ /scripts              <-- eject后生成的脚本目录
  14.     |  ├─ build.js           
  15.     |  ├─ start.js           
  16.     |  └─ test.js
  17.     ├─ /src
  18.     |  ├─ /common            <-- 全局公用目录
  19.     |  |  ├─ /fonts          <-- 字体文件目录
  20.     |  |  ├─ /images         <-- 图片文件目录
  21.     |  |  ├─ /js             <-- 公用js文件目录
  22.     |  |  |  ├─ api.js       <-- 统一管理API地址和常量等
  23.     |  |  |  └─ commonLib.js <-- 公用js库（公用函数、常量等）
  24.     |  |  └─ /stylus         <-- 公用样式文件目录
  25.     |  |  |  ├─ frame.styl   <-- 全部公用样式（import其他css）
  26.     |  |  |  ├─ reset.styl   <-- 清零样式
  27.     |  |  |  └─ global.styl  <-- 全局公用样式
  28.     |  ├─ /components        <-- 公共模块组件目录
  29.     |  |  ├─ /header         <-- 头部导航模块（举例）
  30.     |  |  |  ├─ /store       <-- header组件的store
  31.     |  |  |  |  ├─ actionCreator.js
  32.     |  |  |  |  ├─ constants.js
  33.     |  |  |  |  ├─ index.js
  34.     |  |  |  |  └─ reducer.js
  35.     |  |  |  ├─ index.js     <-- header主文件
  36.     |  |  |  └─ header.styl  <-- header样式文件
  37.     |  |  └─ ...             <-- 其他模块
  38.     |  ├─ /pages             <-- 页面组件目录
  39.     |  |  ├─ /home           <-- home页目录（举例）
  40.     |  |  |  ├─ index.js     <-- home主文件
  41.     |  |  |  └─ home.styl    <-- home样式文件
  42.     |  |  ├─ /login          <-- login页目录（举例）
  43.     |  |  |  ├─ /store       <-- login组件的store
  44.     |  |  |  |  ├─ actionCreator.js
  45.     |  |  |  |  ├─ constants.js
  46.     |  |  |  |  ├─ index.js
  47.     |  |  |  |  └─ reducer.js
  48.     |  |  |  ├─ index.js     <-- login主文件
  49.     |  |  |  └─ login.styl   <-- login样式文件
  50.     |  |  └─ ...             <-- 其他页面
  51.     |  ├─ /store             <-- store总集目录（聚合其他组件的store）
  52.     |  |  ├─ index.js
  53.     |  |  └─ reducer.js             
  54.     |  ├─ App.js             <-- 项目主模块
  55.     |  ├─ index.js           <-- 项目入口文件
  56.     |  ├─ mock.js            <-- mock数据
  57.     |  └─ setupProxy.js      <-- 反向代理配置
  58.     ├─ README.md
  59.     ├─ package.json
  60.     └─ yarn.lock

className规范

  1. 全局公用级别（不需要模块化）的className，用G-xxx。例如G-autocut(截字)、G-color-red(文字红色)。
  2. 页面级别的className，用P-xxx。
  3. 模块级别的className，用M-xxx。

react超详细教程

该架构有超详细的教程，从零开始，逐步讲述React全家桶的一条龙服务，新手也能快速掌握。

【教程目录】

1 创建React-APP

2 精简项目

  • 2.1 删除文件

  • 2.2 简化代码

  • 2.3 使用Fragment去掉组件外层标签

3 项目目录结构

  • 3.1 引入全局公用样式

  • 3.2 支持Sass/Less/Stylus

4 路由

  • 4.1 页面构建

  • 4.2 使用react-router-dom

  • 4.3 路由跳转

5 组件引入

  • 5.1 创建header组件

  • 5.2 引入Header组件

  • 5.3 组件传参

6 React Developer Tools浏览器插件

7 Redux及相关插件

  • 7.1 安装redux

  • 7.2 安装react-redux

  • 7.3 安装redux-thunk

  • 7.4 安装浏览器Redux插件

  • 7.5 创建store

  • 7.6 复杂项目store分解

  • 7.7 对接react-redux与store

  • 7.8 启动Redux DevTools

  • 7.9 安装使用immutable

8 Mock.js安装与使用

9 解决本地开发跨域问题

10 其他常用工具

11 附赠章节：集成Ant Design

  • 11.1 安装Ant Design

  • 11.2 实现按需加载

  • 11.3 自定义主题颜色

原文及微信公众号

教程原文请关注我的公众号【卧梅又闻花】，如有问题欢迎在微信公众号私信交流。

查阅文章《超全面详细一条龙教程！从零搭建React项目全家桶》

image