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ísticas 
4. O que o React n...
O que é o React? 
É uma biblioteca javascript criada pelo Facebook para criação de UI.
Quem usa?
Características 
Alta performance 
Baseado em "componentes" 
Apresenta o JSX (uma sintaxe XML para Javascript) 
Possui um ...
O que o React não é... 
... uma biblioteca de templates 
... uma biblioteca MVC (mais usado como V) 
... somente para apli...
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 ...
Ciclo de vida do Componente
Ciclo de vida do Componente
Show me the 
code
React com outras libs JS 
Com Angular: 
http://www.mono-software.com/blog/post/Mono/242/Improving- 
AngularJS-long-list-re...
React com outras libs JS 
Com Ember.js: 
http://discuss.emberjs.com/t/can-reactjs-be-used-as-a-view-within-emberjs/ 
3470/...
Links e Referências 
http://facebook.github.io/react/docs/tutorial.html 
http://tableless.com.br/react-javascript-reativo/...
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
Próximos SlideShares
Carregando em…5
×

React - Biblioteca Javascript para criação de UI

1.508 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.508
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
14
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

×