Skip to content

fridaythx/react-app-starter-v3

Repository files navigation

使用

运行 npm installyarn installs(推荐安装yarn,比npm更快,缓存)

开发环境:

npm run dev

第一次运行如果报错,命令行输入 rs 然后回车,或运行npm run dev 之前执行下 npm run compile:server:dev

生产环境:

npm run build && npm start

开发工具及插件

vscode,建议安装eslint插件进行代码格式化

配置说明

服务器配置文件 /config/index.js

默认开发环境访问端口3000,生产环境访问端口8080

代码样例

新的代码样例会push到github的库中,此库作为模版库。 github地址:https://github.com/Alieas-PC/react-app-starter.git

目录

  • build 构建所需要的配置文件
  • client 客户端代码
    • component 公用组件
    • module 页面模块
    • routes client路由
    • util 工具类
  • config 后台的配置文件
  • html html模板
  • server 服务端代码
    • middleware koa中间件
    • router server路由
    • util 工具类

如何开发一个新页面

页面

  1. 在 client/module 目录下创建一个子目录,目录名称为模块名称。
  2. 在该模块目录下创建 Container.js 文件,这个 Container.js 就是我们的页面。具体参见 welcome 模块
  3. 在 client/routes/index.js 中为新的 Container.js 增加路由,写法参见其他路由配置
  4. 启动应用在 http://localhost:3000/你配置的路由地址 看效果

异步请求

此框架中我们使用 redux 管理 react 组件中的状态,使用 redux-saga 控制异步流程。

  1. 在模块目录下创建 action.js,reducer.js,saga.js 文件
  2. 将模块的 reducer.js 配置到 client 目录下的 reducer.js,saga.js 配置到 client 下的saga.js(使用fork函数)
  3. 代码参考 welcome 模块下的请求代码

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published