1. react https://reactjs.org/docs/add-react-to-a-new-app.html npm install -g create-react-app create-react-app my-app cd my-app npm start styling: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 2.redux https://github.com/reac

一.课程导学 1.React 主要解决的是UI层的问题,应用的状态需要借助Redux等状态管理. 2.前端React  +  antd-mobile UI组件库 + Redux 状态管理库 + React-router 路由 + MongoDB + Socket.io(即时通信) + Node (express) + Axios 异步请求. 3.前端工程化:webpack4.0 + git 二.知识储备(React + Node + MongoDB + ES6) 1.

原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+:redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程

前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.React基础知识     React基础语法 import React class语法新建组件,render里直接使用 render函数返回值就是输出JSX语法,会把JSX转成js执行     React的View层语法 JS里直接写html Class里要写成className 变量用{ }包裹即可

来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&utm_medium=referral 前言   本文主要介绍facebook推出的一个类库immutable.js,以及如何将immutable.js集成到我们团队现有的react+redux架构的移动端项目中. 本文较长(5000字左右),建议阅读时间: 20 min 通过阅读本文,你可以学习到: 什么是i

在redux中使用Immutable 1.什么是Immutable? Immutable是一旦创建,就不能被更改的数据. 对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象. Immutable实现的原理是:Persistent Data Structure(持久化数据结构),   也就是数据改变时(增删改)要保证旧数据同时可用且不变 为了避免深拷贝把所有节点都复制一遍带来的性能损耗,Immutable使用了Structural Sharing(结构共享)  

一.JavaScript授课视频(适合有JS基础的) 1.IIFE 2.js中的作用域 3.闭包 4.表达式形式函数 5.回调函数和递归 资源地址:链接:https://pan.baidu.com/s/1wnl5hUVF25-eoPIXoNVm2Q 提取码:i5aa 二.MySql数据库(适合0基础) 1.mysql复习-单表查询 2.mysql复习-多表联查1 3.mysql复习-多表联查2 资源地址:链接:https://pan.baidu.com/s/1Gg01sJRYYnYWLY5hEm

此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 setState 的表现好像有点怪异,和理解中的 state 更新机制不太一样,下面我们就来简单探讨下 setState 背后的机制. 课程中的其他常见小问题请常见 React.js 开发参见问题 Q&A. 1 setState 问题的复现 我们看下面一段简单的代码,代码通过点击一个按钮,改变 state

这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源码的角度再看 React JS 中的 setState 从源码的角度看 React JS 中批量更新 State 的策略(上) 1. batchingStrategy 策略 现在我们开始来看 batchingStrategy 的策略定义. 目前 React 中 batchingStrategy 的定

在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步表现,并从源码的角度简单地了解了 React 中 setState 的设计结构以及原理. 这篇文章继上篇文章后,继续从源码的角度来了解 React 中对 State 批量更新策略的定义. 同样,源码的部分为了保证格式正常就直接截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可. 1.

在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState "诡异"表现的原因. 源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可. 1. React 中的 setState 更新逻辑代码 在更新逻辑的部分,可以看到 React 会通过 batchingStrategy.isBatc

Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await .虽然这个特性尚未正式发布,但是利用babel polyfill我们已经可以在应用中使用它了. http://www.tuicool.com/articles/B77zAbe 现在假设一个简单的React/Redux应用,我将引入 Async/Aw

React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲染 Universal (“同构”现在是公认的不准确的叫法)渲染是指在服务端与客户端使用一套代码进行渲染的技术.它所带来的优势如下: 与实现服务端渲染的传统应用相比,Universal 渲染中的客户端渲染减少了网络请求(主要是模板和静态资源的请求),提高了页面间切换的速度,可以看到页面之间的切换都是

书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文本字段一起提交给接口. 这里就有几个要注意的问题: 图片上传时最好能在前端指定图片类型,根据这个类型上传到指定的目录.比如这里是新增用户,上传用户图片,那么这里就指定类型是“user”,那么就把这个文件上传到服务器的upload/user目录中.这样方便后期维护,比如要把项目中的文件统一迁移到另外一

JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程

前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接数据库的方法等多个知识点. 源代码: https://github.com/lewis617/react-redux-tutorial/tree/master/redux-wilddog-todos 运行方法: npm install npm run build 手动打开index.html wil

今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器例子,不过我们实现了服务端渲染和state预加载. 源代码: https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/universal 虚拟API 首先,我们要模拟一个api,用于异步请求数据.代码如下

今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换react和frontend关键词来切换新闻列表,可以刷新当前新闻列表. 源代码: https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/async 异步 异步本身 这个概念,本文不详细叙述,但可以简单说一下,

上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo的官方示例代码来学习,在redux中使用撤销功能.devtools功能.以及router. 例子 这个例子是个计数器程序,包含计数器.右边的redux开发工具.还有一个路由(不过只有“/”这一个地址). 源代码: https://github.com/lewis617/react-redux-tut

reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https://developer.mozilla.org/en-US/ 这里可以搜索到相关api文档. 但是redux的官方示例中包含了这些语法的用法,我们正好可以在程序中学习这些语法.这里全部默认使用es6的写法. 例子 这是官方的todomvc的例子(https://github.com/lewis617/r