2018-11-27 构建一个react,redux,react-router的框架

根据之前同事构建的react,redux项目,然后自己研究构建一个,下面是自己构建项目的流程。用的是react16版本,redux4.0.1,react-router4.3.1;

1.用create-react-app命令,先构建一个初始的架子。用命令npm run eject后,需要再npm install 下,要不然会报有些模块找不到。

2.因为要跟redux和react-router结合使用,所以要安装这两个包,以及react-redux和react-router-dom。另外,要整理下框架的结构


大致的大纲

1.constant:用来存放action类型的常量

2.redux文件夹下的rootReducer是把所有的reducer整合成一个reducer,用的方法是combineReducers,configureStore创建store。

3.配置rootReducer,见下图

rootReducer内容

4,配置configureStore,如下图

configureStore内容

5.入口文件中需要的root组件的内容:

根组件的内容

6.所有文件的集合,通过react-router来跳转:

所有文件的集合

7.入口文件index:

入口文件的内容

8.至此,根据别的同事项目改变的一个框架诞生了。哈哈哈哈哈。。。

9.还忘记了,里边要想需要用到一些修饰器的,根据react的版本我安装了@babel/plugin-proposal-decorators和babel-plugin-transform-decorators-legacy;另外plugins中的配置如下

装饰器配置

10.好了,好像就这么多了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天我看了一本叫花花世界的书,从这本书里,我找到了一朵花 ,这朵花的名字叫做水仙花 ,这朵花是有毒的,但...
    子细阅读 1,644评论 0 0
  • 这是对标签不是你真实的模样这篇文章的个人理解,也就是说,这不是文章的“真实模样”,而只是我给这篇文章贴的“标签”。...
    不现若隐阅读 4,324评论 6 2
  • 第二年 Happy ending 这一年,依旧平平淡淡,但是小日子过的充实。 读书 坚持读书,做不到每天读书,但是...
    阿咘咘呀阅读 1,787评论 0 0
  • 一月吹来四月的风, 我笨拙的用尽一切才华来称赞你的美。如堕入世间的精灵迷失在骇人的帝国,你的一颦一笑怎能不...
    唐云杉阅读 1,235评论 0 0
  • 清 纳兰性德 碧海年年,试问取、冰轮为谁圆缺?吹到一片秋香,清辉了如雪。愁中看、好天良夜,知道尽成悲咽。只影而今...
    阿多不嫌多阅读 3,146评论 0 0