React是怎么搞的？ React中，把一切东西都看成组件，而且所有组件有其状态。 什么是状态？简单来说，一个组件有多种有限的状态，但同时只能是一种状态，不过条件处罚就会变成另一种状态。学术上叫有限状态机。 具体可以参考阮老师的这篇http://www.ruanyifeng.com/blog/2013/09/finite-state_machine_for_javascript.html 从评论这
React 是近期非常热门的一个前端开发框架。 这篇文章将介绍如何使用 React 来创建用户界面，希望能够起到抛砖引玉的效果。 相对于其他框架来说，React 提供了非常少的 API， 如同 Gulp， 越是少量的 API 同时意味着越多的可能性。 正如那句名言所说： Less is more. 但是，精简的 API 不是意味着没有一定的学习成本，我们还是需要对此框架进行一定的理解。 闲话不多说
这里只讨论React的一个动画插件提供的动画机制，其他的通过自己写JS操作的动画都是一样的，和React没啥关系。 React.addons.CSSTransitionGroup 提供了一个分组动画，所谓分组动画就是指它可以对一个数组中的元素的增加和减少做一个动画。 比如我们通过一个数组来渲染一个列表，那么当列表增加或者减少的时候我们可以定义他的动画。 动画原理 React.addons.CSST
Bulid Web application use Google Maps 此文章根据Tutorialzine教程实践，具体代码可参考Github React.js 自正式发布以来，一直都是热门话题就不多讨论了，官方教程可参考React中文社区或者加入由@题叶推广的React-China社区 React组件结构设计 App : 最主要的部分，它包含用于可以由像搜索的用户执行的操作的方法，增加一个位
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西
代码结构 代码如下 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>react pagebar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" sr
前面已经写了一篇关于reactJS组件生命周期的博文，此篇博文是一个补充，增加了一些例子，有助于更好的理解reactJS组件。 初始化阶段能够使用的钩子函数(按照触发顺序)： getDefaultProps(获取实例的默认属性)————只有第一次实例的时候调用，实例之间共享引用(属性) getInitialState(获取实例的初始状态)————初始化每个实例特有的状态 必须返回一个Object或
作为任何一款HTML5的框架，基础搭建都会相对简单，但是实际项目中我们都会基于业务进行相应架构，会做部分更改，但是为了入门，我们先从最开始的进行学习。 首先我们要下载React的核心资源库，我们可以从官方网站下载，其中包括很多Demo实例，还有React几个核心文件库。 官网： https://facebook.github.io/react/downloads.html 下面我们开始创建一个ht
对于React来讲，一切都已组件形式拼接，有组件就免不了要进行用户交互，用户交互就会有交互状态，react中设定了一个state进行状态管理。 大家可以参考如下代码： var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick:
最近在学习ReactJS过程中，总会时不时的提及到虚拟dom，据说会很大强度上提升app性能，那么它的原理是什么呢，到底什么是虚拟dom： 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。 React为此引入了虚拟DOM（Virtual D
进来学习React, 下面来总结一下，主要有以下几点： ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。 可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件； 要对某些值的变化做DOM操作的，要把这些值放到state中。 为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{
自从ES6发布以来，越来越多的人开始追捧这一崭新的语法，丰富的语义化方法，简介的符号说明，吸引了很多人，虽然目前ES6的语法还不被广大浏览器支持，仍需要用babel转化使用，但是ES6仍是一个不错的选择。 那么，如果我们就想用ES6的语法定义React该如何去编写呢？ 首先我们用ES6定义个React组件尝试一下，上代码： import React, { PropTypes, Component
对于任何一个前端框架都有页面跳转，而这个跳转就一定需要路由的定义，比如Angular, Durandal等等，今天我们学习一下如果定义个路由在React中。 为了便于理解，我们同样附上一段代码，看看究竟是如何实现的： import React from 'react'
import { render, findDOMNode } from 'react-dom'
import {
browse
我学习过很多HTML5前端框架，比如AnguarJS, VUE.js Durandal, Avalon, Jquey, SAPUI5等等,对于任何一款框架都有自己的网络请求方案。 Jquery: $.get() Anguar: $http SAPUI5: 这个就更多了，比如XMLModel JSONModel ODataModel. 那个React该如何去请求网络数据呢，在这里要说明一个，Reac
在我学习React的过程当中，总会被一些名词搞得晕头转向，但是细想起来又非常简单，比如React定义的这个refs，其实就是用于获取dom的一种方式。 在React中组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生
React是基于组件的，也就是整个项目是各个组件组合到一起的，这样往往会用到通用的一些特性，这就衍生了mixin的概念。 其实，mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 es6的extend极为类似。 在mixin中写的生命周期相关的回调都会被合并，也就是他们都会执行，而不会互相覆盖掉。 比如 你在mixin中可以定义 componentD
React是基于组件的，整个项目就是各个组件拼接而成，这也是目前最主流的架构方案，组件化，react的这一个特性十分鲜明，那么react组件的组合使用也是非常简单，说多无用，我们看代码： var Child = React.createClass({
render: function(){
return(
<div>
到目前为止，我们已经学习了很多react的特性，对于表单的使用其实也没有大的区别，下面我们为了更加熟悉React, 我们纯当练习：我们看看代码吧： 我们创建一个简单form: //约束组件
var MyForm = React.createClass({
getInitialState: function () {
retur
常用Angular的开发者，一定熟悉angular的Animation的使用，其实React的动画效果原理和Angular是极其相似的。 首先，我么需要导入一个额外的库（Angular也一样哦）， <script src="../libs/react-with-addons.min.js"></script> 下面我们引入Transition插件： // 引入react-with-addons中的
学习React过程中，我们一定知道，React有两个视图，一个虚拟机DOM,也就是我们创建的Component， 另一个就是渲染到页面中的view，这也就导致我们调试过程中会有一定的障碍，所以我们尝试一下： 这是一个全新的调试工具，名字是New React Devtools， 下面我们来看一下效果吧！ 这个插件工具可以做哪些工作呢： Tree view，树形结构，可以看到和编辑所有的props，
