Intodução ao React
0 gostou91 visualizações
O documento resume o que é a biblioteca JavaScript React, como surgiu no Facebook para construir interfaces de usuário, e seu amplo uso por empresas como Netflix, IMBM, Airbnb e outras. Apresenta os principais conceitos como JSX, fluxo de dados unidirecional e Virtual DOM.
Intodução ao React
- 1. João Maiorchini React A JavaScript library for building user interfaces
- 2. 1. Origem 2. O que é React? 3. Quem usa React? 4. Comunidade 5. Suporte (nativo e pwa) 6. Ecossistema 7. Controle de estado da aplicação 8. Hello World =) Cronograma 2
- 3. ● Porta JavaScript do XHP ○ XHP não resolveu problema muitas idas e voltas ao servidor ○ Engenheiro do Facebook "portou" o XHP para o JavaScript ○ Seis meses o resultado é "ReactJS". ● Primeiro uso foi no feed do Facebook em 2011 ● Instagram se junta ao Facebook Origem 3
- 4. ● Base de código do Instagram era separada do Facebook ● Exigiu extrair o React da base do código do Facebook. ● Instagram foi o primeiro uso "externo" do React (2012). ○ Tornou-se open-source em maio de 2013 durante a JSConf US ○ Apresentação do React ( https://youtu.be/GW0rj4sNH2w) Problema 4
- 5. Jordan Walke Criador do ReactJS 5 Pete Hunt
- 6. ● Uma biblioteca JavaScript open-source usada para desenvolver interfaces de usuário. ● Permite o reuso de componentes UI. ● Criar grandes aplicações web do qual os dados mudam mas sem recarregar a página. O que é ReactJS 6
- 7. ● O principal propósito do React é: ○ Ser rápido; ○ Escalável; ○ Simples. ● Corresponde a View do modelo MVC O que é ReactJS 7
- 8. JSX 8
- 9. JSX 9Sem JSX var Hello = React.createClass({ displayName: 'Hello', render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); ReactDOM.render( React.createElement(Hello, {name: "World"}), document.getElementById('container') );
- 10. JSX 10Com JSX var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') );
- 12. Virtual Document Object Model (Virtual-DOM) 12
- 14. Quem usa React? 14 E muito mais… → https://github.com/facebook/react/wiki/Sites-Using-React
- 15. Comunidade 15 ● StackOverflow → Aprox. 74050 perguntas feitas ● Fórum (oficial)→ https://discuss.reactjs.org/ ● React community no Hashnode → https://hashnode.com/n/reactjs ● Reactiflux Chat no Discord → https://discord.gg/0ZcbPKXt5bZjGY5n ● FreeNode channel → http://irc.lc/freenode/reactjs ● Redes Sociais ○ Facebook → https://www.facebook.com/react ○ Twitter → https://twitter.com/reactjs ● Canal no Slack https://react-brasil.slack.com/
- 16. Suporte 16 ● React-native → https://facebook.github.io/react-native/ ○ Ele usa o mesmo design do React para Android iOS e UWP (Universal Windows Platform) ● React PWA → https://www.reactpwa.com/ ○ Suporte para aplicações PWA (progressive web apps).
- 17. Ecossistema 17 ● Cerca de 48023 pacotes no NPM / YARN. ● react dev-tools ● code sandbox ● es7 (decorators, arrow functions, generators) ● babel
- 18. Controle de estado da aplicação 18 ● mobX ● flow
- 19. Get started - Hello World 19 npm install -g create-react-app create-react-app my-app cd my-app npm start Necessita versão recente do Node.js Instalado
- 20. Obrigado! 20 Dúvidas? REACT > (Angular && Vue.js)