Biblioteca JS para criar UI

por Cleiton Francisco

Visão geral

Algumas coisas que vamos ver aqui:1. O que é o React?2. Quem usa?3. Características4. O que o React não é5. Instalação6. Como funciona7. Show me the code8. React com outras libs JS9. Links e Referências

O que é o React?

É uma biblioteca javascript criada pelo Facebook para criação de UI.

Quem usa?

Características

Alta performanceBaseado em "componentes"Apresenta o JSX (uma sintaxe XML para Javascript)Possui um Virtual DOM (muito mais rápido que o DOM)Pode ser executado tanto no browser quanto no servidor (node.js)

O que o React não é...

... uma biblioteca de templates

... uma biblioteca MVC (mais usado como V)

... somente para aplicações novas

Instalação

Usando o CDN do Facebook:

Instalação

Usando Bower:

Mais informações: https://github.com/facebook/react#installation

React com Rails

https://github.com/reactjs/react-rails

React com Rails

https://github.com/reactjs/react-rails

https://github.com/reactjs/react-rails/tree/0.11#configuring

Como funciona?

Componentes

States e Props

Todo componente React possui dois atributos principais:estado (state) e propriedades (props).

Toda vez que o estado de um componente é alterado, ele érenderizado.O método getInitialState é padrão para qualquer componente React.As propriedades são passadas através de atributos do objeto docomponente

Ciclo de vida do Componente

Ciclo de vida do Componente

Show me thecode

React com outras libs JS

Com Angular:http://www.mono-software.com/blog/post/Mono/242/Improving-AngularJS-long-list-rendering-performance-using-ReactJS/http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

React com outras libs JS

Com Ember.js:http://discuss.emberjs.com/t/can-reactjs-be-used-as-a-view-within-emberjs/3470/4

Com Backbone:http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html

Links e Referências

http://facebook.github.io/react/docs/tutorial.htmlhttp://tableless.com.br/react-javascript-reativo/http://pedronauck.com/reactjs/reactjs-de-forma-modular-usando-browserify-e-gulphttp://www.funnyant.com/reactjs-what-is-it/http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660http://www.webdesignermag.co.uk/tutorials/build-responsive-uis-with-facebooks-react-js/https://www.npmjs.org/package/gulp-reacthttp://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome