ReactJS - Introdução e boas práticas

This presentation was created for a workshop at Sevna Startups (http://www.sevna.com.br/) presented by Guilherme Lemmi from Monitora Soluções Tecnologicas (www.monitoratec.com.br)

Transcript

2. ReactJS Introdução e boas práticas Guilherme Lemmi https://github.com/guilhermelemmi
3. O que é ReactJS • Biblioteca Javascript para a renderização de interfaces • Criado e mantido pelo Facebook • Open Source (MIT License) • Combinação de Javascript e "XML" para declarar e renderizar componentes dinâmicos
4. ReactJS - Timeline • Criado por Jordan Walke, engenheiro do Facebook • Usado no newsfeed do Facebook em 2011 • Usado no Instagram em 2012 • Tornou-se open source em 2013 • Versão atual: 16.3 (04/2018) https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
5. ReactJS - Quem usa? https://stackshare.io/react/in-stacks
6. ReactJS vs. Angular (Google Trends) https://bit.ly/2vHBvAS
7. Popularidade (State of JS) https://bit.ly/2BiICBg
8. ReactJS - Motivações Javascript puro ou jQuery • Interações com o DOM trabalhosas, confusas e com baixa performance • Projetos desestruturados e difíceis de manter (spaghetti code) Frameworks • Alta complexidade e aumento do pageload • Curva de aprendizado alta • Sintaxe incomum
9. ReactJS - Vantagens • Programação declarativa • Projetos modulares e escaláveis • Curva de aprendizado baixa (Javascript + HTML) • Open-source e com comunidade ativa
10. ReactJS - Principais características Componentes • Funções ou classes javascript que usam inputs (props), e estado interno (state) para renderizar elementos da UI usando JSX • Podem ser aninhandos indefinidamente • Expõe métodos de seu lifecycle para que seja possível implementar funcionalidades: componentWillMount, componentDidMount, ...
11. ReactJS - Principais características Componentes
12. ReactJS - Principais características JSX • Código semelhante ao XML usado para criar componentes • Trabalha com separação de responsabilidades ao invés de separação de tecnologias JSX convertido para Javascript no build
13. ReactJS - Principais características Fluxo de dados unidirecional • Dados fluem de cima para baixo • Eventos fluem de baixo para cima • “Props” são imutáveis e passadas de pais para filhos • “State” é mutável e mantêm o estado interno de cada componente
14. ReactJS - Principais características A cada renderização o React: • Salva snapshot do DOM Virtual • Altera o DOM Virtual • Cria diff entre o novo DOM Virtual e o snapshot (diffing) • Aplica no DOM real os resultados do diff (reconciliation) Virtual DOM (Representação do DOM por meio de objetos Javascript)
15. ReactJS - Ferramentas e bibliotecas complementares • Node JS (Javascript runtime environment) • NPM/Yarn (gerenciadores de dependências) • Webpack (module bundler) • Babel (transpilador de Javascript) • ESLint (JS linter) • Jest (JS unit tests) • LESS/SASS (CSS preprocessors) • React-Redux (handles React state) • React-Router (handle SPA routes)
16. ReactJS - Create React App Projeto do Facebook para reduzir código boilerplate e simplificar a configuração de uma nova aplicação React: https://github.com/facebook/create-react-app Tão simples quanto:
17. ReactJS - Criando uma aplicação do zero • Comece com um mock • Quebre a UI em uma hierarquia de componentes • Crie uma versão estática em React • Identifique o conjunto mínimo de dados capazes de representar o estado da aplicação • Defina onde manter o estado da aplicação • Implemente o fluxo de events e event handlers https://reactjs.org/docs/thinking-in-react.html
18. ReactJS - Documentação e Recursos Projeto no Github: https://github.com/guilhermelemmi/star-wars-top-trumps Documentação oficial: https://reactjs.org/docs/hello-world.html Cursos gratuitos: https://www.codecademy.com/learn/react-101 https://www.codecademy.com/learn/react-102 Cursos pagos: https://www.udemy.com/react-redux-tutorial/learn/v4/overview https://www.udemy.com/the-complete-react-web-app-developer-course/learn/v4/overview