首先看的是这个页面

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的更多相关文章

  1. React学习系列

    React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初 ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习总结(一)

    React学习总结 一.什么是React? 是Facebook公司开发的一套JS库 React的详细介绍https://www.jianshu.com/p/ae482813b791 二.老版本Reac ...

  4. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  5. windows docker 安装cloudera/quickstart

    最近需要写一个大数据的项目,但是公司没有测试环境,真是cao蛋,没办法,只能自己搭建一个测试环境,所以就在本地电脑装一个cloudera/quickstart,这个是一个单节点的大数据平台, 是clo ...

  6. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  7. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  8. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  9. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  10. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

随机推荐

  1. 如何撰写SCI论文的讨论部分?——经典结构 – 俗称“倒漏斗型。

  2. VS开发工具 不会在异常的地方停止的问题.

    启用"仅我的代码"

  3. ASP.NET Session的七点认识

    原文:http://kb.cnblogs.com/page/108689/ ASP.NET Session的使用当中我们会遇到很多的问题,那么这里我们来谈下经常出现的一些常用ASP.NET Sessi ...

  4. jQuery对象和javascript对象互换

    jquery变js var obj=$("dom"); 或 var obj=jQuery("dom"); js 变 jquery var $jobj=$(obj ...

  5. ASP.NET Excel 导入 Oracle 方法2

    先谈思路:前半部分和之前那篇日志的内容是一样的,把Excel数据导入到DataSet中,不同之处在于数据插入的方式: 本方法是拼接 INSERT INTO TABLE VALUES() 字符串,对,就 ...

  6. HDU 4572 Bottles Arrangement(找规律,仔细读题)

    题目 //找规律,123321123321123321…发现这样排列恰好可以错开 // 其中注意题中数据范围: M是行,N是列,3 <= N < 2×M //则猜测:m,m,m-1,m-1 ...

  7. NSArray block用法

    28.使用block 块遍历整个数组.这个block 需要三个参数,id obj 表示数组中的元素. NSUInteger idx 标示元素的下标, bool *stop 是一个bool类型的参数. ...

  8. 机器学习之多变量线性回归(Linear Regression with multiple variables)

    1. Multiple features(多维特征) 在机器学习之单变量线性回归(Linear Regression with One Variable)我们提到过的线性回归中,我们只有一个单一特征量 ...

  9. EOF的一点注记

    int ch; while( (ch = getchar()) != EOF ) { putchar(ch); } 执行程序,输入:we are the,然后回车.运行结果如下: [purple@lo ...

  10. iOS多线程 GCD

    iOS多线程 GCD Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法. dispatch queue分成以下三种: 1)运行在主线程的Main que ...