- 博客(22)
- 收藏
- 关注
RSS订阅转载 react实战搭建简书网站，持续更新
### 创建简书项目- yarn add create-react-app 在控制台安装脚手架工具- create-react-app jianshu 在控制台使用脚手架创建jianshu项目- cd jianshu 进入项目文件夹### 添加样式管理模块- yarn add styled-components 安装样式管理模块依赖- 样式管理模块- 将css...
2019-09-10 16:12:00
743
转载 react入门系列之redux的一些补充connect ， provider
### redux的做一些补充- 安装redux add react-redux- provider 第一个核心api- 在入口src文件夹中的index.js中使用，包裹其他组件- 并在provider添加store={store}属性，这样它所包裹的组件就都可以使用store中的数据了- 怎么获取store，就要用下面这个 connect api- conne...
2019-09-06 16:08:00
118
转载 react入门系列之redux-saga中间件
### redux-saga中间件- 也是一个做异步拆分的中间件- 安装 yarn add redux-saga- import creatSagaMiddleware from 'redux-saga'- import TodoSagas from './saga'- const sagaMiddleware = creatSagaMiddleware()- const enhance...
2019-09-06 16:06:00
160
转载 react入门系列之使用redux-thunk中间件发起异步请求
### redux-thunk- redux-thunk是redux中的一个中间件- 安装命令 yarn add redux-thunk- 在store文件夹中的index.js中引入applyMiddleware，这样我们才能使用中间件- 然后再引入redux-thunk- 并在createStore中使用applyMiddleware(thunk)##...
2019-09-05 17:26:00
170
转载 react入门系列之利用axios，mockjs实现react的异步请求
### redux中发送异步请求- react项目中初始化数据一般在componentDidMount这个生命周期函数中进行- 我们没有后台接口，可以使用mockjs来拦截请求。- 这边详细的mockjs不做讲解，大家可以自行查看文档。### mockjs- yarn add mockjs 安装mockjs- 在src目录创建mock文件夹，创建mock.j...
2019-09-05 11:23:00
329
转载 react入门系列之如何拆分ui组件和容器组件
###如何拆分ui组件和容器组件- ui组件-傻瓜组件-页面渲染- 容器组件-聪明组件-页面逻辑- 我们现看看原来组件 1 /** 2 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store） 3 */ 4 5 import React, { Component, Fragmen...
2019-09-04 16:17:00
191
转载 react入门系列之生命周期钩子函数
###什么是生命周期函数1. 组件中在某个阶段会自动执行的函数。 - 比如我们执行使用render函数，在prop或者state变化时，render函数自动执行。 - 因此render函数就是一个生命周期函数。2. constructor在组件创建的时候也会自动调用。但是他不是react独有，是es6中的函数所以，我们不将他列为生命周期函数。###生命周期分为4个阶段...
2019-09-03 16:15:00
175
转载 react入门系列之使用 antd， react， redux，creat-react-app搭建todo-list升级版本
### redux简介- redux是一个配合react视图层框架使用的数据层框架- 方便大型react项目之中的复杂组件传值- 耦合性高的数据使用redux管理- redux中包含 组件，store，reducer- 1. store必须是唯一的，整个项目之中只能有一个数据存储空间- 2. store中的数据是store自己更新的，并不是reducer，这也...
2019-09-03 15:20:00
106
转载 react入门系列之虚拟DOM
### 什么是虚拟DOM#### 数据变化页面同步渲染的逻辑，这里分析三种逻辑。1. 先有数据 （state）2. 模版（render中的jsx）3. 数据 + 模版 = 生成真实Dom，来显示4. state 发生改变5. 数据 + 模版 = 生成真实Dom，替换原有的DOM- 缺陷： 第一次生成真实dom，第二次又生成一个。最后替换。非常耗性能。-...
2019-08-20 14:28:00
101
转载 react入门系列之react特点归纳
### 声明式开发- 命令式开发：原生js和jq写代码的时候，大部分代码都是在操作dom，这种开发模式就是命令式开发。- 声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。### 可以和其他框架并存- react所控制的dom就是id为root的dom，页面上...
2019-08-19 17:45:00
134
转载 react入门系列之todolist代码优化（使用react 新特性，es6语法）
代码优化1 /**2 - 今天我们通过es6语法，以及react新特性来优化我们的todo-list3 - 顺带解决上个版本的key报错问题4 */使用es6的解构赋值优化代码 1 /** 2 - 当我们需要一个对象某个属性的时候，我们可以使用解构赋值，这样在后续的代码就不需要通过原对象不停调用属性去获取了 3 - const { index ...
2019-08-17 09:35:00
125
转载 react入门系列之todolist组件拆分父子组件传值
todolist组件的拆分和父子组件传值1 /**2 - 在上一篇博客中我们做的todolist，他只有一个组件。就是App.js组件。上篇链接：https://www.cnblogs.com/boye-1990/p/11364246.html3 - 其实我们可以将input框，按钮都拆分成一个组件，每一个li也可以分成一个组件去渲染。4 - 现在我们尝试将每一个li...
2019-08-16 18:23:00
119
转载 react入门系列之使用create-react-app搭建一个todolist-dome。
第一步：安装create-react-app脚手架1 npm install -g create-react-app第二步：创建你的todo-list项目1 // 在命令行输入如下命令2 create-react-app todo-list3 //注意npm命名限制，项目名称不能含有大写字母。第三步：清除项目中不必要的文件1 /**...
2019-08-16 15:33:00
301
转载 TypeScript初识
# 什么是typeScript- typeScript是javaScript的超集，主要提供了类型系统和对ES6的支持。- typeScript的代码通过 ts编译工具 可以编译成javaScript代码，从而能在浏览器上运行。类似于java代码需要变成class文件。- ts代码 => js代码 需要编译， js代码 => ts代码 直接改后缀名为.ts即可...
2019-07-04 12:01:00
107
转载 Mac前端开发环境的搭建
一、命令行工具：iterm21 选中即复制，不用command＋c了；2 全文查找并高亮显示：command＋f3 方便的分屏显示：垂直分屏：command＋d，水平分屏：command＋shift＋d4 自定义快捷键5 强大的界面自定义，设置配色方案，透明背景，等等6 其他功能，我还没有体验到的打开全屏（Preferences - Profiles ...
2019-04-26 15:11:00
331
转载 VUE动态组件component以及<keep-alive>
component 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=...
2019-03-24 17:01:00
204
转载 git flow工作流
git flowgit 操作流程使用组长建立一个新仓库，初始化 git init -> git flow init以后可以使用git flow init 对项目进行初始化。也可以对现在的 git 仓库，再做一遍 git flow init（注意：请在 master 分支上使用）自动切换到develop分支，...
2019-03-23 09:18:00
121
转载 vue组件通讯
一、父子组件通讯 1. 父传子通过prop通讯 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-widt...
2019-03-22 21:41:00
81
转载 webpack加载器和自动打包工具
自动打包（开发时的打包）我们在使用webpack打包的时候每写一段代码都得打包一次，并且删除之前打包好的dist文件夹才能够测试效果。非常不方便。所以我们需要一个能够自动打包的工具这个东西叫做webpack-dev-server。1. npm install --save-dev webpack-dev-server--->安装资源包2. 配置3. ...
2019-02-17 15:28:00
66
转载 webpack的插件使用，以及引入vue文件的注意事项
一、html-webpack-pugin插件html-webpack-plugin插件：打包时复制根目录index.html文件到dist文件夹的插件-->1. 找到需要使用插件并安装他 命令：npm install --save-dev html-webpack-plugin2. 在webpack.config.js中引入他 const Ht...
2019-02-16 16:30:00
368
转载 webpack起步以及手动配置config文件
第一步：创建项目文件夹mkdir webpack-vue第二步：使用vscode打开文件夹，经行npm初始化npm init -y第三步：下载项目需要资源包 生产环境 vue npm install --save vue 开发环境 webpack 1. 他是基于nodeJs，所以要确保安装了n...
2019-02-16 11:51:00
207
转载 git 基本操作
- github全球最大的开源式的社交网站 代码托管网站- svn：集中式版本控制工具- svn相对来说比较笨拙，在有些情况下会是收费的- git：分布式的版本控制工具- git相对来说的好处- 1、git可以创建多个分支，svn的分支比较笨拙- 2、git在工作的时候会分为三个区域来保证代码的过渡效果- 1、工作区-...
2019-01-30 21:26:00
61
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人