React - Biblioteca Javascript para criação de UI

1.429 visualizações

Publicada em

Slides da Palestra sobre React.js apresentada no GuruPI

Publicada em: Tecnologia
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.429
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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

×