React

React : A JavaScript library for building user interfaces.

Just the ui

Lots of people use React as the V in MVC, Since React makes no assumptions about the rest of your technology stack. it’s easy to try it out on a small feature in an exsisting project.

virtual Dom

React abstracts wasy the DOM from you , giving a simpler programming model and better performance . React can also render on the server using Node. and it can power native apps using React Native

Data Flow

React implements one-way reactive data flow which reduces boilerplate and is easier to reason about thant traditional data binding .

Evertything is a component

When you’re in React’s world you are just building components that fit into other components. Everything is a component. Unfortunately

unmountComponentAtNode(domContainerNode)

If you are rendering React components within a single-page app, you may need to plug into the app’s view lifecycle to ensure your app will invoke unmountComponentAtNode at the appropriate time. React will not automatically clean up a tree. You need to manually call:

ReactDOM.unmountComponentAtNode(domContainerNode)

This is important and often forgotten. Forgetting to call unmountComponentAtNode will cause your app to leak memory. There is no way for us to automatically detect when it is appropriate to do this work. Every system is different.

It is not unique to the DOM. If you want to insert a React Native view in the middle of an existing iOS app you will hit similar issues.

Object Oriented Updates

HTML Tags vs. React Components

React can either render HTML tags (strings) or React components (classes).

To render an HTML tag, just use lower-case tag names in JSX:

	var myDivElement = <div className="foo" />;

	ReactDOM.render(myDivElement, document.getElementById('example'));

JSX In Depth

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.

Namespaced Component

Spread Attributes

    var component = <Component />;
    component.props.foo = x; // bad
    component.props.bar = y; // also bad


    var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

Reusable Components

Whne designing interfaces . break down the common design elements (button, form fields, layout component , etc.) into reusable components with well-defined interfaces. That way.

The next time you need to build some UI. You can write much less code. This means faster development time , fewer bugs, and fewer bytes down the wire.

Producitonizing: Precompiled JSX

npm install babel-preset-es2015 babel-preset-react babel –presets es2015,react –watch src/ –out-dir lib/
Working With the Browser

React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API. perhaps to work with a third-partly library or existing code.

Add-Ons

The React add-ons are a collection of useful utility modules for building React apps. These should be considered experimental and tend to change more often than the core.

TransitionGroups and CSSTransitionGroup
LinkedStateMixin
cloneWithProps
createFragment
update
PureRenderMixin
TestUtils
Perf

Docs

###Reference

Top-Level API
Using React from npm

We recommend using React with a CommonJS module system like browserify or webpack

Use the react and react-dom npm packages.

browserify

Browserify lets you require(‘modules’) in the browser by building up all of your dependencies.

install

npm install -g browserify

Describe

Browsers don’t have the require method defined. but Node.js does. With browserify can write code tht user require in the same way that you would use it in Node.

Here is a tutoial on how to use Browserify on the command line to bundle up a s imple file called main.js along with all of ites dependencies.

Example

main.js

	var unique = require('uniq');

	var data = [1,2,3,4,4];

	console.log(unique(data));

Install the uniq module with npm:

npm install uniq

Now recursively bundle up all the requied modules starting at main.js into a single file called bundle.js with browserify command:

browserify main.js -o bundle.js

Browserify parses the AST for require() calls to traverse the entire dependency graph of your project.

Drop a single

<script src="bundle.js"></script>

Examples

Flux

Flux Example

[Todo List] [Todo Chat]

阮一锋入门实例教程

React-UI

WebPack 打包React

Infoq React theme

Books

react-webpack-cookbook

Notes

结构与逻辑

在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。

	var CustomComponent = React.creatClass({
        render: function(){
            var $nodes = ['h','e','l','l','o'].map(function(str){
                return (<span>{str}</span>);
            });
            return (<div className="custom-component">{$nodes}</div>);
        }
    });

React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供

React主要实现了一个虚拟Dom, 通过WebPack,WebPack事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包

基于ES6 使用React Webpack Babel构建模块化JavaScript应用

Babel.js不仅支持ES6语法，它还可以编译JSX，所以我们可以在编译步骤彻底弃用标准React JSX编译器了！

现在要处理最棘手的部分——我们有了React组件，我们想使用mocha完成测试，却又不想在浏览器中运行测试（可以运行一个PhantomJS，但是它非常繁重），我们应该如何去做呢？

答案就是jsdom——基于iojs用Java实现了WHATWG的DOM和HTML标准。它比Phantom更轻量，并且满足几乎所有我们测试React所需的功能。

现在我们有了正确运行的mocha测试，我们也可以轻松获取Istanbul覆盖率检测工具并正常执行：　　istanbul cover _mocha – -R spec

React WebPack例子叼叼的,父子关系

React Compnent

g.cn, search React-UI table

A Set of React Commponents that Implement Googl’s Material Design.

Material-UI came about from our love of React and Googl’e Material Design

We’re currently using it one a project at [Call-Em-All] and plan on adding to it and making it better in the coming months.

React: Create maintainable, high-performance UI components

React-bootstrap
React-UI