1.创建项目:

  a.全局安装create-react-app: npm  install  create-react-app  -g

b.执行create-react-app  my-projectName创建自己的项目,完成之后npm run  start即可启动项目。

2.引入组件库、插件配置等:

  a.执行npm install  antd-mobile  --save安装组件库

  b.执行npm install  babel-plugin-import  --save安装按需加载插件

  c.执行npm  run  eject  弹出个性化配置,在package.json中的babel配置项添加按需加载插件配置:

    

3.引入redux、react-redux

  a.执行npm install  redux  --save安装redux

  b.执行npm install  redux-thunk安装thunk插件,使redux可处理异步操作

  c.执行npm install  react-redux  --save安装react-redux简化参数传递

  d.执行npm  install  babel-plugin-transform-decorators-legacy --save-dev安装此插件支持connect的装饰器写法

 

4.引入react-router4

  a.执行npm  install  react-router-dom  --save

   

利用create-react-app结合react-redux、react-router4构建单页应用的更多相关文章

  1. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  2. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  3. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  4. Redux React & Online Video Tutorials

    Redux React & Online Video Tutorials https://scrimba.com/@xgqfrms https://scrimba.com/c/cEwvKNud ...

  5. 单页应用后退不刷新方案(vue & react)

    引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...

  6. 单页Html及Android App供小孩学习常用汉字

    为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...

  7. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  8. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  9. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

随机推荐

  1. JSON(一)——JSON与JavaScript的关系

    JSON是一种轻量级的数据交换格式,全称--JavaScript 对象表示法(JavaScript Object Notation). 类比XML,你可以把JSON看作是一种存储数据的格式类型,一种数 ...

  2. Python入门之函数的嵌套/名称空间/作用域/函数对象/闭包函数

    本篇目录: 一.函数嵌套 二.函数名称空间与作用域 三.函数对象 四.闭包函数 ============================================================ ...

  3. ICC_lab总结——ICC_lab5:布线&&数字集成电路物理设计学习总结——布线

    字丑,禁止转载! 这里将理论总结和实践放在一起了. 布线的理论总结如下所示: 下面是使用ICC进行实践的流程: 本次的布线实验主要达成的目标是: ·对具有时钟树布局后的设计进行可布线性检查 ·完成布线 ...

  4. Intent 的两种主要使用方法

    首先建立两个activity界面 Activity1如下 public class MainActivity extends AppCompatActivity { private Button bt ...

  5. uvalive 3213 Ancient Cipher

    https://vjudge.net/problem/UVALive-3213 题意: 输入两个字符串,问是否可以由第一个字符串的每个字符一一映射得到第二个字符串,字符是可以随意移动的. 思路: 统计 ...

  6. ASC学习笔记

    TCL:(Tool Command Language), a computer programming languagecharm++:基于C++的面向对象的并行编程语言.Charm++ is a p ...

  7. 字典的update方法

    >>> dict = {"name":"zara", "age": 7} >>> dict2 = {&q ...

  8. [转]scrapy中的request.meta

    作者:知乎用户链接:https://www.zhihu.com/question/54773510/answer/146971644 meta属性是字典,字典格式即{'key':'value'},字典 ...

  9. JAVA_扫雷游戏(布置地雷)

    1.要为扫雷游戏布置地雷,扫雷游戏的扫雷面板可以用二维int数组表示.如某位置为地雷,则该位置用数字-1表示, 如该位置不是地雷,则暂时用数字0表示. 编写程序完成在该二维数组中随机布雷的操作,程序读 ...

  10. Vue练手项目(包含typescript版本)

    本项目的git仓库https://github.com/lznism/xiachufang-vue 对应的使用typescript实现的版本地址https://github.com/lznism/xi ...