柯晓楠

前言大家好，我是一名前端开发者，同时也是一位前端技术爱好者，可以说我是特别喜欢前端开发这个工作，这也是我从业这么多年的动力。废话不多说，我们这套专栏主要是对React框架从基础入门到实战开发，做一个由浅入深的讲解。希望通过我的分享，可以让大家有所收获。互联网发展到今天，前端成为了互联网开发技术中比较重要的独立分支。在早期的互联网项目开发中，主要是由后端起着主导作用，前端的操作仅仅局限于DOM区...

基础：Webpack实现前端工程化引言在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的...

1. 安装Node.jsWebpack实际是用Node.js写的，所以要先安装Node.js环境。而且Node.js中集成了NPM包管理，我们在后面用到的很多模块都需要使用NPM下载。首先进入Node.js的官网，选择对应系统下载安装包，对于 windows 用户，直接下载安装包安装即可，如果是 Macos 用户，推荐使用 brew 进行安装。Node.js有很多版本，包括稳定版和开...

1、 JSX 语法基础React 使用 JSX 来替代常规的JavaScript。JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。JSX 有以下优点：JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；它是类型安全的，在编译过程中就能发现错误；使用 JSX 编写模板更加简单快速。**JSX 语法的本质：**并不是直接把 JSX 渲染...

1、props属性react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。props属性的特点：1.每个组件对象都会有props（properties的...

1、组件生命周期的三个阶段Mounting（加载阶段）Updating（更新阶段）Unmounting（卸载阶段）2、旧的生命周期Mounting（加载阶段：涉及6个钩子函数）constructor()加载的时候调用一次，可以初始化stategetDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性。getInitial...

1、父组件传值子组件在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。父组件向子组件传值，通过props，将父组件的state传递给了子组件。父组件代码片段：constructor(props){ super(props) this.state={ message:"i am from parent"...

1.创建 Todolist.js 组件import React from 'react';class TodoList extends React.Component{ //构造方法 constructor(props){ super(props); this.state = { list: [ 'learn html', ...

1、React路由介绍1.1、单页面应用单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面优点：加载速度快，用户体验比较好缺点：第一次加载比传统要慢一点不利seo页面相对复杂返回键1.2、安装react-router-dom在项目命令行中，执行cnpm install react-router-dom -S下载到生产环境的依赖中。在组件中通过...

1、什么是ReduxRedux 是React生态中重要的组成部分。很多人都说，简单的应用可以不用此工具。但是我个人认为，中小型应用使用的话，可以使文件结构更加规范，代码可读性更强。因为React提出将展示组件与容器组件分离的思想，所以降低了React 与Redux之间的耦合度。Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux...

1、Redux-thunk中间件第一步 安装redux-thunk中间件npm install redux-thunk第二步 在store中引入thunk组件import {createStore,applyMiddleware } from 'redux';import Reducer from './Reducer';import thunk from 'redux-thunk'...

第一步 安装react-reduxnpm install react-redux第二步 创建store和reducerstore.js文件import {createStore } from 'redux';import reducer from './reducer';const store = createStore(reducer);export default stor...

在使用 create-react-app 创建项目时，项目依赖包的下载速度非常慢，可能你的npm在使用外网下载，我们可以把默认的下载地址改成淘宝镜像。操作方法：更换npm源：npm config set registry https://registry.npm.taobao.org检查是否更换成功：npm config get registry执行完检查命令后，如果显示 https://registry.npm.taobao.org 该地址就表示配置成功了，然后再使用 create-rea

1、React环境搭建实现React开发的三种方式：（1）使用CDN的方式<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- 生产环境中不建议使用 --><sc

1、redux中间件简介1.1、什么是redux中间件redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。通俗来说，redux中间件就是对dispatch的功能做了扩展。先来看一下传统的redux执行流程：图