利用create-react-app结合react-redux、react-router4构建单页应用
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构建单页应用的更多相关文章
- React构建单页应用方法与实例
React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- Redux React & Online Video Tutorials
Redux React & Online Video Tutorials https://scrimba.com/@xgqfrms https://scrimba.com/c/cEwvKNud ...
- 单页应用后退不刷新方案(vue & react)
引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...
- 单页Html及Android App供小孩学习常用汉字
为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 该简单应用 有Android APP下载 “学习常用汉字_20150910.apk” 单页Html 示例 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
随机推荐
- 新概念英语(1-61)A bad cold
新概念英语(1-61)A bad cold What is good news for Jimmy? A:Where's Jimmy? B:He's in bed. A:What's the matt ...
- Python大婶博客汇总
Python大神金星 博客:http://www.cnblogs.com/jin-xin/articles/7459977.html
- java stream 原理
java stream 原理 需求 从"Apple" "Bug" "ABC" "Dog"中选出以A开头的名字,然后从中选 ...
- linux文件访问权限(像rw-r--rw-是什么意思)
Linux的文件访问权限分为 读.写.执行三种 r:可读(4) w:可写(2)对目录来说则可新建文件 x:可执行(1)对目录来说则可进入该目录 可用 ls -l 查看文件 像上图的-rw-r--rw- ...
- Python系列之 - 装饰器
装饰器主要是用来对函数的操作,我们把定义的函数比作一个蛋糕的话,那么装饰器就是盒子,如果要吃蛋糕就先打开盒子.具体到程序中就是在函数外层又套了一层,套的那一层就是一个装饰器.这么说可能有点抽象,那么我 ...
- MySQL导致错误的语句
主键不唯一 由于表定义中创建了主键约束,因此MySQL将会确保重复主键不会被插入到数据表中. INSERT INTO person (person_id, fname, lname, gender, ...
- Linux OpenGL 实践篇-4 坐标系统
OpenGL中顶点经过顶点着色器后会变为标准设备坐标系.标准设备坐标系的各坐标的取值范围是[-1,1],超过这个范围的点将会被剔除.而这个变换的过程可描述为顶点在几个坐标系统的变换,这几个坐标系统为: ...
- web前端HTML基础
一.HTML介绍 HTML全称是(Hypertext Markup Language, HTML)又称为超级文本标记语言,它主要his一种用于创建网页的标记语言,在本质上是浏览器可以识别的规则,我们按 ...
- CentOS下安装yum
在Linux里面依次输入下面的命令: 1,下载最新的yum-3.2.28.tar.gz并解压 wget http://yum.baseurl.org/download/3.2/yum-3.2.28.t ...
- jq跨域获取json
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" ...