O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

React - Biblioteca Javascript para criação de UI

1.912 visualizações

Publicada em

Slides da Palestra sobre React.js apresentada no GuruPI

Publicada em: Tecnologia

React - Biblioteca Javascript para criação de UI

  1. 1. Biblioteca JS para criar UI por Cleiton Francisco
  2. 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. 3. O que é o React? É uma biblioteca javascript criada pelo Facebook para criação de UI.
  4. 4. Quem usa?
  5. 5. 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)
  6. 6. O que o React não é... ... uma biblioteca de templates ... uma biblioteca MVC (mais usado como V) ... somente para aplicações novas
  7. 7. Instalação Usando o CDN do Facebook:
  8. 8. Instalação Usando Bower: Mais informações: https://github.com/facebook/react#installation
  9. 9. React com Rails https://github.com/reactjs/react-rails
  10. 10. React com Rails https://github.com/reactjs/react-rails https://github.com/reactjs/react-rails/tree/0.11#configuring
  11. 11. Como funciona?
  12. 12. Componentes
  13. 13. 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
  14. 14. Ciclo de vida do Componente
  15. 15. Ciclo de vida do Componente
  16. 16. Show me the code
  17. 17. 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/
  18. 18. 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
  19. 19. 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

×