React 初探（十）

概述

之前已经基本完成整个项目的配置，接下来我们需要将项目目录设计一下，主要是完善 src 下的目录。我的项目地址

目录结构

创建目录

cd src
mkdir common components fetch pages redux routers

• common -> 放置图片、css 和一些工具函数
• components -> 组件目录
• fetch -> 用于 fetch 进行 AJAX 请求
• pages -> 页面目录
• redux -> redux 相关文件
• routers -> routers 相关文件

common 目录

进入 common 目录下

mkdir img style utils
touch style/_var.scss utils/util.js

将 logo.svg 移入 common/img中

common 目录结构

• img 目录 -> 存放一些图片或者 svg 文件
• style 目录 -> 公共的 css
• utils 目录 -> 存放工具函数

其中我创建了两个文件

• _var.scss -> 用于存放一些 scss 变量、混合或者 css3 动画
• util.js -> 导出一些工具函数，例如 telephoneVerfication 、idCardVerfication 和 isWeChatBrowser 等等

components 目录

进入 components 目录下

mkdir Loading
touch Loading/Loading.js Loading/Loading.scss

components 目录结构

这里我主要创建了一个 Loading 组件，可以用于加载时的等待

fetch 目录

进入 fetch 目录下

touch Api.js fetch.js

fetch 目录结构

这里我主要创建了两个文件

• Api.js -> 导出用于 AJAX 请求的方法
• fetch.js -> 用 fetch 进行 AJAX 请求

这两个文件的内容在以后会写到

pages 目录

pages 目录下主要放置页面的相关文件，例如我需要 Home 页面、Detail 页面、Login 页面和 404 页面。所以进入 pages 目录下后

mkdir Home Detail Login Error Account
touch Home/Home.js Home/Home.scss Detail/Detail.js Detail/Detail.scss Login/Login.js Login/Login.scss Error/Error.js Error/Error.scss Account/Account.js Account/Account.scss

pages 目录结构

redux 目录

进入 redux 目录下

touch actions.js actionTypes.js reducers.js store.js

redux 目录结构

这里我主要创建了四个文件

• actions.js -> 记录所有 action
• actionTypes.js -> 记录所有 action type
• reducers.js -> 初始化 state 并根据 action type 进行更新 state
• store -> 生成 store

上述四个文件的内容以后会写到

routers 目录

进入 routers 目录下

touch index.js router.config.js router.js

routers 目录结构

这里我主要创建了三个文件

• index.js -> routers 的入口文件
• router.config.js -> 这是一份路由表，包含路由地址以及是否需要校验等相关信息
• router.js -> 主要是路由守卫的功能，这个文件以后会详细说到

上述三个文件的内容以后会写到