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. zuul入门(4)zuul的注解@EnableZuulServer和@EnableZuulProxy

    @EnableZuulServer.@EnableZuulProxy两个注解 @EnableZuulProxy简单理解为@EnableZuulServer的增强版,当Zuul与Eureka.Ribbo ...

  2. jdk的server模式修改无效(关于client和server模式)

    本机为64位操作系统,64位jdk,win10. 修改C:\Program Files\Java\jre8\lib\amd64\jvm.cfg无效. 我的文件的内容为: 原因参考如下: http:// ...

  3. Tensorflow会话Session

    转载自: http://blog.csdn.net/Hanging_Gardens/article/details/72784392 https://www.cnblogs.com/hypnus-ly ...

  4. [翻译] TensorFlow Programmer's Guide之Frequently Asked Questions(问得频率最多的几个问题)

    目录: 特点和兼容性(Features and Compatibility) 建立一个TensorFlow图(Building a TensorFlow graph) 运行一个TensorFlow计算 ...

  5. scrapy爬取全部知乎用户信息

    # -*- coding: utf-8 -*- # scrapy爬取全部知乎用户信息 # 1:是否遵守robbots_txt协议改为False # 2: 加入爬取所需的headers: user-ag ...

  6. devops基本流程

    概要 源代码管理: 工具:Subversion (SVN) Concurrent Version System (CVS) Git SCCS Revision control systems Bitb ...

  7. vue-router动态路由 刷新页面 静态资源没有加载的原因

    在做项目的时候,发现刷新页面的时候,静态路由没有加载,度娘了一圈,终于解决了. vue-router使用history模式+使用嵌套路由: 访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路 ...

  8. Python系列之 - 锁(GIL,Lock,Rlock,Event,信号量)

    python 的解释器,有很多种,但市场占有率99.9%的都是基于c语言编写的CPython.  在这个解释器里规定了GIL. In CPython, the global interpreter l ...

  9. thinkphp3.2v

    1.thinphp环境搭建 一.将thinkphp文件拿出来,对我们有用的是cof和library,其他对开发都没有作用. 在thinkphp/library/think文件夹中几个重要的文件 1.A ...

  10. [LeetCode] Split Array with Equal Sum 分割数组成和相同的子数组

    Given an array with n integers, you need to find if there are triplets (i, j, k) which satisfies fol ...