React - Biblioteca Javascript para criação de UI

Slides da Palestra sobre React.js apresentada no GuruPI

Transcript

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 J S X (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