开发项目之前的准备

https://www.chromefor.com/  登录此网站 下载相关crx react插件 不然要FQ

下载 React Developer Tools 谷歌插件
下载 Redux DevTools 插件

npm install axios  // 安装axios

npm install --save styled-components  安装 css.js

npm install react-transition-group --save 安装动画插件

npm install --save redux 安装redux 

npm install --save react-redux 安装react-redux 方便在react中使用redux

npm install --save-dev redux-devtools-extension  增加Redux-DevTools调试

npm install immutable  用来辅助state的 不改变state的原始值

npm install redux-immutable 用来进阶辅助 不改变state的原始值

npm install redux-thunk  安装redux 中间件 用来发送请求

npm install --save react-router-dom  安装路由

npm install react-loadable --save  异步加载组件

安装 react 脚手架
npm install -g create-react-app

然后创建一个 目录

create-react-app '项目名称'

精简目录

在src下 创建store

index.js中

reducer.js中

在App.js 中 将store 与所有组件进行关联 (

react-redux 的作用

)

组件中如何连接

增加Redux-DevTools调试

辅助不改变state的值

进阶state写法

然后就是 store的拆分.

大笔记本

index

reducer

各个小笔记本

index

reducer

actionCreators

const

header页面

// 请求 axios 所以不能用无状态组件

先安装 redux-thunk

npm install redux-thunk

配置

下面是官网

引入路由

//性能调优  防止因redux改变 底部组件重复渲染 在用了 immutable的前提下没有坑 所有的Component都改成PureComponent

如果没有用的话 性能调优就需要用到

shouldComponentUpdate 来做存储对象是否变化 的判断 是否重新渲染
 
 

react简书的更多相关文章

  1. react 简书开发笔记

    详见文章<React简书开发实战课程笔记>

  2. react简书笔记一 环境, git 和 项目 关联

    1.. 建立git项目  ( 码云, github 都可以 ), 具体步骤: https://www.cnblogs.com/andy-lehhaxm/p/10720717.html 1.1  git ...

  3. React 简书

    create-react-app   jianshu yarn add styled-components -D       利用js写css样式  样式会更高效 https://github.com ...

  4. 2. react 简书 头部(header) 图标添加

    1. 访问 iconfont 并注册 登陆 2. 进入 iconfont 头部 图标管理->我的项目 3. 点击右边的文件夹 + 号 图标 创建我的项目 输入项目名称即可 4.在 搜索框 搜索 ...

  5. 4 react 简书 引入 redux 的 combineReducers 对 redux 数据进行管理

    1. src 下的 common 下的 header 创建 store 文件夹 下创建 reducer.js # src/common/header/store/reducer.js const st ...

  6. 3 react 简书 添加 头部搜索动态效果

    1. 添加动态效果组件 yarn add react-transition-group 2. 修改 src/common/header/index.js import React, {Componen ...

  7. 2. react 简书 头部 (header) 样式编写

    1. 在 src 下 创建 common 文件下 创建 header 文件夹下 创建 index.js #src/common/header/index.js import React, {Compo ...

  8. 1. react 简书 项目初始化

    1. 创建 react 项目 npx create-react-app my-app 2. src 目录下删除 除了 index.js index.css app.js 的文件 3. 引入 style ...

  9. iOS离屏渲染简书

    更详细地址https://zsisme.gitbooks.io/ios-/content/chapter15/offscreen-rendering.html(包含了核心动画) GPU渲染机制: CP ...

随机推荐

  1. UVALive - 3211 - Now or later(图论——2-SAT)

    Problem   UVALive - 3211 - Now or later Time Limit: 9000 mSec Problem Description Input Output Sampl ...

  2. Windows将自己的代码发布到Github上

    1.在GitHub上创建一个repository 2.在自己的电脑上选择工作的文件夹使用Git Bash clone刚刚创建的repository 3.此时本地git应该已经连接了GitHub,如果没 ...

  3. SQL SERVER数据库修改是否区分大小写(转载)

    昨天去客户,发现程序无法应用,跟踪错误提示,提示的大致意思是“数据库表名和数据库字段名不存在”.查询后发现是SQL Server数据库设置了区分大小写的缘故(一般安装时,Oracle的正确安装下是默认 ...

  4. iOS开发基础-UITableView控件简单介绍

     UITableView 继承自 UIScrollView ,用于实现表格数据展示,支持垂直滚动.  UITableView 需要一个数据源来显示数据,并向数据源查询一共有多少行数据以及每一行显示什么 ...

  5. JS 字符串处理相关(持续更新)

    一.JS判断字符串中是否包含某个字符串 indexOf() indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. var str ...

  6. 第六章· Redis高可用sentinel

    sentinel介绍 sentinel实战及配置讲解 sentinel介绍 什么是sentinel? Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Mas ...

  7. 解决多线程安全问题-无非两个方法synchronized和lock 具体原理(百度-美团)

    还有其他的锁,如果想要了解,参考:JAVA锁机制-可重入锁,可中断锁,公平锁,读写锁,自旋锁, 用synchronized实现ReentrantLock 美团面试题参考:使用synchronized ...

  8. BEX5下集成FullCalendar

    实现版本 BEX5 3.6 集成前准备: 直接网上查找FullCalendar获得插件文件 fullcalendar.min.css fullcalendar.min.js fullcalendar. ...

  9. Python——Flask框架——程序的结构

    一.项目结构 |-flasky |-app Flask程序一般都保存在这里 |-templates/ |-static/ |main/ |-__init__.py |-errors.py |-form ...

  10. 【CQOI2017】【BZOJ4813】小Q的棋盘 DFS

    题目描述 有一棵树,你要从\(0\)号点开始走,你可以走\(m\)步,问你最多能经过多少个不同的点. \(n\leq 100\) 题解 出题人的做法是DP(一个简单的树形DP),但是可以直接通过一次D ...