cithegod的博客

Lists and Keys下面是JavaScript使用map()历一个数组，在React中可以使用元素列表来实现相同操作。//javascript take an array and double themconst numbers = [1,2,3,4,5];const doubled = numbers.map((number) => number * 2);console.log(d

Composition vs InheritanceReact有一个强大的结构模型，我们建议使用结构来代替继承来实现组件之间的重用。 我们将要考虑一些问题，这些问题是可以用结构来代替继承解决问题。包含一些组件并不知道他们的子元素到底是什么情况，像Sidebar或者Dialog一样都继承自boxes是很正常的一件事情。 我们建议一些组件使用特殊的children属性来传递子元素直接到他的输出。fu

Handling EventsReact元素的事件处理非常类似于对DOM元素添加事件处理，但有一部分的语法不同。 1. React事件使用camelCase来进行命名，而不是小写字母 2. JSX需要传递一个函数作为事件处理函数，而不是一个字符串。//DOM元素的事件处理函数<button onclick="activateLaser()"> Activate Lasers</but

Conditional Rendering在React中，你可以创建不同的组件，并且渲染其中的一部分，这取决于你应用的状态。 状态渲染和JavaScript中的分支运算符有一样的效果，使用JavaScript中的类似if运算符来创建元素来代表当前状态，然后让React更新UI去匹配。 我们创建了一个Greeting组件去显示，显示的结果取决于用户是否登录。//two componentsfun

Forms表单组件，比如：<input>，<textarea>和<option>和基本的组件不同，因为表单组件是需要用户进行交互的。这些组件提供了接口，用来更容易的管理表单来响应用户的交互。 有两种形式的表单组件 1. Controlled Components 2. Uncontrolled ComponentsControlled Components一个受控表单组件提供一个value属性

Lifting State Up如果，几个组件需要同时影响并且修改同一个数据，我们建议将这个共享状态进行提升，给他们最近的共同祖先。 在这个部分，我们将要创建一个温度计算器来判断水会不会在给定温度下沸腾。 我们将从一个叫做BoilingVerdict的组件开始，这个组件接收celsius温度作为属性，然后打印是否足够让水沸腾。 然后我们创建一个组件叫做Calculator，这个组件渲染一个<i

基于Koa2、mongodb/mongoose、jade的博客后台

defer & async前提在说defer和async两个script标签的属性之前，要先说一下浏览器对于页面进行加载的流程，浏览器渲染页面是基于两棵树进行的，分别是DOM树和render树，DOM树由HTML决定，HTML元素会被解析为一个个节点，自上而下形成一棵树；而render树是由CSS和DOM树决定的，每个节点在接收了CSS之后，会根据其所占据的空间，形成一棵render树，render

下面的示例项目可以从我的github上获取为什么用TypeScriptTypeScript为JavaScript这个弱类型语言添加了基本的类型检测以及对于ES6甚至ES7的一些高级语法的转移，在一定程度上相当于增强功能版的babel，现在的很多开源项目为了得到更好的项目管理和维护性能，使用了TypeScript或者Flow来为JavaScript添加强类型。 TypeScript添加了很多强类型语

state and leftcycle使用class来定义组件通过五个步骤来创建一个自动刷新的时钟： 1. 创建一个ES6 class 并且 extends React.Component 2. 添加一个空方法叫做render 3. 将函数体移动到render方法里面 4. 在render内部，使用this.props来取代props 5. 删除之前的函数声明和定义class Clock

Rendering Elements元素是React app里面的最小的一个模块，而且React中的DOM元素都是一些基本的元素，很容易进行创建，虚拟的DOM对象创建起来成本很低。将一个元素渲染到DOM中创建一个<div>标签在HTML文件当中，现在可以通过ReactDOM将这些节点添加到这个标签中，将一个虚拟的React元素渲染到DOM中，可以使用ReactDOM.render()方法const

在为DOM添加事件处理函数的时候，出现了一个DOM元素无法点击的问题， 虽然class=”share”的元素的img类型的子孙元素中的第一个元素已经设置了鼠标点击的事件处理函数，但是这个事件处理函数并不能被触发，也就是点击这个图片的时候没有反应。 第一个原因：由于需要注册事件处理函数的img元素是放在header标签里面的，但是header标签如果不进行手动设置height，那么head

bootstrap插件自带的动画都是用CSS3的过渡实现的，transition动画相比jQuery自带的动画有许多优点，这些动画比较平滑，使用起来比较方便和灵活，并且对资源的消耗比较少，但是也有缺点，比如动画完成时间等等。既然bootstrap插件采用了transition来进行动画效果修改，那么这样的方法还是很值得去学习一下的。CSS transitionCSS transition是CSS样式

bootstrap是twitter公司基于HTML5、CSS3和jQuery创建的一种前端框架，是现在使用范围比较广泛的一种前端框架，其源码对于学习前端的一些技术非常有帮助。bootstrap源码可以从bootstrap中文网（http://www.bootcss.com/）上面下载，但是安装源码需要配置Nodejs环境，安装方法可以自行百度。这个网站上面也可以下载到用于生产的精简源码。bootst

先上github地址：插件源码百度前端在几个月前发布了一个针对前端技术培训的任务：IFE（百度前端技术学院）。和几个小伙伴一起完成了部分任务，第四阶段是三个综合性的任务，博主先完成了其中的相册布局任务。写的并不是很完善，博主技术有限，大家就随便看看吧。瀑布流布局布局方式顾名思义，瀑布流布局就是相册中图片像瀑布一样，从高到低按顺序插入到相册中。如下图，一直保证下一张图片会被插入到当前最短的一道图片流

JSX In Depth最根本上，JSX仅仅提供React.createElement(component,props, ...children)函数这样的语法糖，JSX代码：//JSX代码<MyButton color="blue" shadowSize={2}> Click Me</MyButton>//编译之后的JavaScript代码React.createElement(

Refs and the DOM在标准的React数据流中，props是在父组件和其子组件中唯一的交流手段。为了修改一个子，你需要通过新的props重新渲染。然而，在很小一部分情况下，需要强制修改标准数据流外部的一些数据。子组件需要被修改成一个立即React元素，或者一个DOM元素，React为这两种情况提供了一个问题解决方案。The ref Callback AttributeReact支持一个可

Webpack+React+Typescript开发环境WebpackFaceBook的Instagram团队开发的一个前端打包工具，比起之前的一些前端自动化构建工具，比如Gulp和Grunt来说，Webpack是基于依赖来进行代码整合的。也就是必须要有一个入口文件，这个入口文件中会引入其他的脚本文件，之后webpack通过这些依赖关系将所有的文件打包，并且可以自动生成sourcemap来方便调试。

React元素之间的通信主要由下面几种方式 1、 Redux 2、 EventEmitter 3、 通过props进行通信（需要有嵌套关系）这里面先记下来比较简单的第三种，因为最近刚刚用到。子元素到父元素父子元素之间的通信主要靠props，这个方法既简单，又好用，所以可以使用这种方法的时候就直接用好了。 首先有这样的一个React DOM结构：<div className="passage"

Introducing JSXJSX中插入表达式function formatName(user) { return user.firstName+' '+user.lastName;}const user = { firstName: 'Harper', lastName: 'Perez'}const element = (<h1> Hello, {for

PromisePromise是ES6标准提供的一个异步操作的很好的语法糖，对于原本的回调函数模式进行了封装，实现了对于异步操作的链式调用。并且配上generator以及async语法糖来使用更加方便。虽然Promise当前在很多浏览器上都已经得到了支持，但是在看Promise的时候，发现对于Promise的很多地方仍然不是很了解。包括其内部的实现机制，写这个代码的目的也是在于对Promise的使用更