React学习、安装及QuickStart
首先看的是这个页面
http://www.cocoachina.com/webapp/20150721/12692.html
这里有个内容差不多的版本（精华版）：http://www.cnblogs.com/yunfeifei/p/4486125.html
一些记录：
如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。
如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。换句话说，任何UI的变化都是通过整体刷新来完成的。 而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。
借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路，你的开发过程需要知道哪条数据过来了，
如何将新的DOM结点添加到当前DOM树上； 而基于React的开发思路如下图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。
可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。
对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。 对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。 在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。
在这里下载包：http://facebook.github.io/react/downloads.html
下载好之后，解压在：/Users/baidu/Documents/Data/Work/Code/Self/reactjs/react-15.3.2
本想用WebStorm去创建一个react项目的。然后创建了一个react-starter-kit项目，但是没运行起来。
还是先处理Html文件吧。建了一个空项目，里面添加一个 react-demo.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../react-15.3.2/build/react.js"></script>
<script src="../react-15.3.2/build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var Example = React.createClass({
render:function () {
var message = 'hello here';
return React.DOM.p(null, message);
}
}); var ExampleFactory = React.createFactory(Example); ReactDOM.render(
ExampleFactory(),
document.getElementById('container')
);
</script>
</body>
</html>
但是不能直接在WebStorm里面运行，不然会报错：找不到react.js 因为没把这个js放在WebStorm运行server的窗口。
Failed to load resource: http://localhost:63342/react-15.3.2/build/react-dom.js Failed to load the server responded with a status of 404 (Not Found)
直接双击html打开，能够显示：
hello here
没找到JSXTransformer.js，所以就没有用jsx语法。
现在加上计时操作（参考React安装包里面Example目录里面的Basic例子）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../react-15.3.2/build/react.js"></script>
<script src="../react-15.3.2/build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var Example = React.createClass({
render:function () {
var elapsed = Math.round(this.props.elapsed / 100);
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0');
var message = 'hello here has been running for ' + seconds + ' seconds.';
return React.DOM.p(null, message);
}
});
// Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
var ExampleFactory = React.createFactory(Example); var start = new Date().getTime();
setInterval(function () {
ReactDOM.render(
ExampleFactory({elapsed: new Date().getTime() - start}),
document.getElementById('container')
);
}, 50); </script>
</body>
</html>
注意上面代码里面取参数的方式，定时的方式，通过Factory调用，createClass等用法。
比如，createFactory：
创建模式目的是隔离与简化创建组件的过程，模式的东西自然是可用可不用，如果需要批量创建某个组件时，可以通过工厂方法来实现：
var h = React.createFactory(Hello);
h({x:1})
h({x:2})
h({x:3})
createClass：
1. createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选：
var Hello = React.createClass({
render: function() {
return <div>Hello Taobao, Hello UED</div>;
}
}); 注：上面这个return里面其实需要加上引号的，不然报错。
双击运行，能够看到页面在动态变化：
hello here has been running for xx.x seconds.
以上，是一个简单的例子。
另外还有这篇 《React初学者入门须知》
http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know
看了一遍，没什么特别需要记录的。
React学习、安装及QuickStart的更多相关文章
- React学习系列
React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习总结（一）
React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...
- vue 和 react 学习 异同点
vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...
- windows docker 安装cloudera/quickstart
最近需要写一个大数据的项目,但是公司没有测试环境,真是cao蛋,没办法,只能自己搭建一个测试环境,所以就在本地电脑装一个cloudera/quickstart,这个是一个单节点的大数据平台, 是clo ...
- 业余学习react 学习记录
http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
随机推荐
- Lessons learned from manually classifying CIFAR-10
Lessons learned from manually classifying CIFAR-10 Apr 27, 2011 CIFAR-10 Note, this post is from 201 ...
- 2014_GCJ_A
题目链接:http://code.google.com/codejam/contest/2984486/dashboard#s=p0 最想吐槽的是想些DFS过小数据,居然写不出来,不知道我这半年的AC ...
- 用WebStorm编辑Markdown
前言[转http://blog.fens.me/webstorm-markdown/] WebStorm是一个非常高效的开发工具,特别对于Web前端的开发.Markdown流行,因为其简化了HTML的 ...
- 通过 Mesos、Docker 和 Go，使用 300 行代码创建一个分布式系统
[摘要]虽然 Docker 和 Mesos 已成为不折不扣的 Buzzwords ,但是对于大部分人来说它们仍然是陌生的,下面我们就一起领略 Mesos .Docker 和 Go 配合带来的强大破坏力 ...
- 【C++】指针数组和数组指针
首先的首先,稍微抱怨一下阿里今天的严重失误.说好的晚六点笔试,说好的务必提前半小时到场.六点十五的时候告诉闷在一个大教室里躁动的我们“今天七点半开考,大家先回去吧,七点半再过来”,满脸黑线…等到七点半 ...
- 转载：PHP,MySQL的安装与配置
本文转自:http://www.cnblogs.com/janas/archive/2012/08/27/2659240.html 一.安装配置PHP 1.下载Php的版本zip包之后,解压缩到指定目 ...
- POJ 1488
#include <iostream> #include <string> using namespace std; int main() { string s; int i; ...
- 关于com组件注册的问题
问题是这样的: 在调用摄像头的时候,用到com组件,我已经在工程中添加了com组件,但是运行的时候却报这样的错误. 解决方案:程序生成中,目标平台为Any CPU ,应该改为x86 具体原因不知道……
- 优化DB2缓冲页的大小
零部件日结无法进行下去,建议配置C:\Program Files\SQLLIB目录下的db2cli.ini文件,加入此节:[DMSCNDB]CLIPkg=5 并重启DB2试试 另外,可以在命令行处理器 ...
- 用android模拟器Genymotion定位元素
1.下载并安装android模拟器Genymotion 2.拖apk包到模拟器,双击模拟器中的apk软件包,进入应用程序 3.下载并安装android sdk 3.1 点击...\Android\an ...