Slides da Palestra sobre React.js apresentada no GuruPI

1. Biblioteca JS para criar UI
por Cleiton Francisco

2. Visão geral
Algumas coisas que vamos ver aqui:
1. O que é o React?
2. Quem usa?
3. Características
4. O que o React não é
5. Instalação
6. Como funciona
7. Show me the code
8. React com outras libs JS
9. Links e Referências

3. O que é o React?
É uma biblioteca javascript criada pelo Facebook para criação de UI.

5. Quem usa?

11. Características
Alta performance
Baseado 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)

12. O que o React não é...
... uma biblioteca de templates
... uma biblioteca MVC (mais usado como V)
... somente para aplicações novas

13. Instalação
Usando o CDN do Facebook:

14. Instalação
Usando Bower:
Mais informações: https://github.com/facebook/react#installation

15. React com Rails
https://github.com/reactjs/react-rails

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

17. Como funciona?

18. Componentes

19. 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 do
componente

20. Ciclo de vida do Componente

21. Ciclo de vida do Componente

22. Show me the
code

23. 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/

24. 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

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