ES6 是什么ES6 是新的 JavaScript 语法标准，于2015年6月发布，使用 babel 语法转换器可以支持低端的浏览器。流行的库基本都基于 ES6 构建，React 默认使用 ES6 新语法开发。 ES6语法概览 块级作用域、字符串、函数 对象扩展、解构 类、模块化等 作用域ES6 之前只有全局作用域和函数作用域，ES6 增加了块级作用域。 12345678910111213141516171819//ES6之前{ var str="Hello";}console.log(str); //Hello// ES6{ let str="Hello";}console.log(str); //ReferenceError: str is not defined//const 定义常量，无法修改const str = "Hello";st ...

官方脚手架1npm install -g create-react-app 之后在开发目录下使用命令1create-react-app demo 即可创建好开发所需的脚手架。 123cd demo npm start 执行项目。 使用create-react-app npm install redux --save安装第三方库 npm run eject弹出配置文件，可以自定义配置webpack 扩展package.json里的script字段，扩展npm run命令 工具在node环境下监听路由和响应内容，使用nodemon自动重启 123npm install -g nodemon#使用 nodemon 文件名 执行

ES6 是什么ES6 是新的 JavaScript 语法标准，于2015年6月发布，使用 babel 语法转换器可以支持低端的浏览器。流行的库基本都基于 ES6 构建，React 默认使用 ES6 新语法开发。 ES6语法概览 块级作用域、字符串、函数 对象扩展、解构 类、模块化等 作用域ES6 之前只有全局作用域和函数作用域，ES6 增加了块级作用域。 12345678910111213141516171819//ES6之前{ var str="Hello";}console.log(str); //Hello// ES6{ let str="Hello";}console.log(str); //ReferenceError: str is not defined//const 定义常量，无法修改const str = "Hello";st ...

HTMLHTML5 的新特性语义化更好的标签（header、nav、footer、aside、article、section） 音频、视频 API （audio、video） 画布（canvas）和 SVG 地理定位 拖拽释放 本地离线存储 表单控件：calendar、date、email、url、search、range。 xhtml和html的区别XHTML 是更严格更纯净的 HTML 代码（xhtml比html更加规范）。 最主要的不同： XHTML 元素必须被正确的嵌套。 XHTML 元素必须被关闭。 标签名必须用小写。 XHTML 文档必须有根元素。 <meta> 标签<meta> 标签永远位于 head 元素内部。 <meta> 标签用来描述一个HTML网页文档的属性。 <meta> 对搜索引擎的作用：最重要的是对Keywords ...

概述结构型数据库传统的数据库MySQL、SQL Server、Oracle、Access都是SQL结构型数据库。 优点：查找快、有主键的概念、从键、主从查找、映射等等的高级数据库的概念。 缺点：如果今后需要增加字段，之前的所有的条目，也要一起增加。特别耗费时间，也就是说灵活性不够。 非关系型数据库MongoDB(文档型数据库)、Redis(K-V对型数据库)，他们都是NoSQL。 非关系型数据库现在已经广泛的应用于：社交平台、APP通信记录、银行流水、电信通话详单等等。任何只需要保存，但是不需要精确查找的使用场景，都可以用非关系型数据库。 MongoDB 安装下载地址：https://www.mongodb.com/download-center#community 下载完成会安装一个bin文件夹，bin文件夹中提供的 exe文件，不要双击运行，而是应该在 cmd中运行，他们是 CLI 程 ...

Koa 就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高。本身代码只有1000多行，所有功能都通过插件实现，很符合 Unix 哲学。 起步：准备工作Koa 必须使用 7.6 以上的版本。如果你的版本低于这个要求，就要先升级 Node。 然后，克隆本文的配套示例库。 1$ git clone https://github.com/ruanyf/koa-demos.git 接着，进入示例库，安装依赖。 12$ cd koa-demos$ npm install 一、基本用法1.1 架设 HTTP 服务只要三行代码，就可以用 Koa 架设一个 HTTP 服务。 1234const Koa = require('koa');const app = new Koa();app.listen(3000); 运行这个脚本。打开浏览器，访问 http://127.0.0.1:30 ...

代码文件的组织方式1.按角色组织受 MVC “按角色组织”代码文件的影响，在Redux应用的构建中，我们把 controllers、models、views目录换成reducers、actions、components和containers。 reducers 目录包含所有Redux的reducer； actions 目录包含所有action构造函数； components 目录包含所有的傻瓜组件； containers 目录包含所有的容器组件。 虽然“按照角色组织”的方式看起来不错，但是实际上非常不利于应用的扩展。 2. 按功能组织Redux 应用适合于“按功能组织”，也就是把完成同一应用功能的代码放在一个目录下，一个应用功能包含多个角色的代码。在Redux中，不同的角色就是 reducers、actions和视图，而应用功能对应的就是用户界面上的交互模块。 拿Todo 应用为例子， ...

Redux实例来看一个最基本的Redux实现，首先看关于action对象的定义，和Flux 一样 Redux 应用习惯上把 action 类型和action 构造函数分成两个文件定义，其中定义 action 类型的 src/ActionTyp.js和 Flux版本没有任何差别，但是 src/Actions.js 文件就不大一样了，代码如下： 123456789101112131415import * as ActionTypes from './ActionTypes.js';export const increment = (counterCaption) => { return { type: ActionTypes.INCREMENT, counterCaption: counterCaption };};export c ...

Flux 简介在Flux的理念里，如果要改变界面，必须改变 Store 中的状态，如果要改变 Store的状态，必须派发一个 action 对象，这就是规矩。 Facebook 用 Flux 框架代替原有的 MVC 框架，他们提出的 Flux 框架大致结构如下： 一个 Flux 应用包含四个部分，我们先粗略了解一下： Dispatcher，处理动作分发，维持 Store之间的依赖关系； Store ，负责存储数据和处理数据相关逻辑； Action ，驱动 Dispatcher 的 JavaScript 对象； View ，视图部分，负责显示用户界面。 如果非要把 Flux 和 MVC 做一个结构对比，那么， Flux的 Dispatcher 相当于 MVC的Controller, Flux的 Store 相当于 MVC 的 Model, Flux的 View 当然就对应 MVC 的V ...

React组件的数据React 组件的数据分为两种， prop 和state ，无论 prop 或者 state 的改变，都可能引发组件的重新渲染。prop 是组件的对外接口， state 是组件的内部状态，对外用prop ，内部用 state。 React 的 prop在React 中， prop ( property 的简写）是从外部传递给组件的数据， 一个 React 组件通过定义自己能够接受的 prop 就定义了自己的对外公共接口。 每个 React 组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过 prop 来和组件对话的。 1. 给 prop 赋值我们先从外部世界来看， prop 是如何使用的，在下面的 JSX 代码片段中，就使用了 prop: 1234<SampleButtonid="sample" borderWidth={2} ...