React 显示数据

通过用户界面,最基础可以做的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。 开始 让我们看一个非常简单的例子。新建一个名为 hello-react.html 的文件,代码内容如下: <!DOCTYPE html> <html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.10.0.js"></script> <script src="http://fb…

为什么使用 React

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。 我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。 简单 仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。 表达能力 (Declarative) 当数据变化了,React 概念上是类似点击了更新的按钮,但仅会更新变化的部分。 构建可组合的组件 React 都是关于构建可复用的组件。事实上,通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性,组件使代码复用、测试和关注分离(separation of concerns)更加简单。 给它5分钟的时间 React挑战了很多传统的知识,第一眼看上去可能很多想法有点疯狂…

React 入门教程

JSFiddle 开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds React JSFiddle React JSFiddle without JSX 入门教程包 (Starter Kit) 开始先下载入门教程包 下载入门教程 0.10.0 在入门教程包的根目录,创建一个含有下面代码的 helloworld.html <!DOCTYPE html> <html> <head> <script src="build/react.js"></script> <script src="build…

Chrome Developer Tools Tricks

Beautify JavaScript 很多网站的JavaScript都是压缩过的,难以阅读,以前都是用 Online JavaScript Beautifier 来解压缩。 其实Chrome内置了这个功能。 打开控制台<F12>,在Scripts这个选项下,左下角有个{}的图标(Pretty print),点一下就 可以解压缩。 快捷键 在Chrome Developer tools打开(快捷键<F12>)的情况下,按ctrl+shift+F,即可查找JavaScript源代码 在Scripts选项下,按ctrl+shift+o,查找函数名 在Scripts选项下,按ctrl+o, 查找脚本文件 忘了快捷键怎么办?想看其他快捷键肿么半? 在console界面中按?号查看帮助 XHR 在console右键,选中Log…

CSS清除浮动

Micro-Clearfix http://nicolasgallagher.com/micro-clearfix-hack/ * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use…

修复 Mac OS X 打开方式 重复项

/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -kill -r -domain local -domain system -domain user 在控制台输入上面代码,回车运行。 重启Finder(在Dock上的Finder 图标上按住control + option + 点击) Check it now …