Baixar para ler offline
Carregado porFernando Henriques
O front-end moderno e sua lib mais popular: React
O documento discute a evolução das tecnologias front-end e a popularidade crescente de React. Ele descreve como HTML, CSS e JavaScript evoluíram para atender às demandas dos usuários da web. Também explica como frameworks como Node.js e ferramentas como Webpack revolucionaram o desenvolvimento front-end e como React se tornou uma das bibliotecas mais populares para criação de componentes reutilizáveis em Single-Page Applications.
Mais conteúdo relacionado
Semelhante a O front-end moderno e sua lib mais popular: React
O front-end moderno e sua lib mais popular: React
- 1. O front-end modernoe sua lib mais popular: React
- 2. Fernando Henriques ● Desenvolvedor10+ anos ● Senior Full Stack Developer ● JavaScript, Ruby, PHP e Java ● Front-end 💓 3000 github.com/fernandohenriques
- 3. A Internet nãopara de crescer desde que entrou no ar... Fonte: https://www.statista.com/statistics/273018/number-of-internet-users-worldwide/
- 4. As tecnologias que“fazem” a Internet também não pararam de evoluir para atender as demandas constantes dos usuários
- 5. Tudo começou como HTML ★ No começo queríamos apenas que tudo funcionasse ★ Depois começamos a nos preocupar com a semântica ★ Hoje pensamos em acessibilidade e na experiência do usuário (HTML 5)
- 6. Nos primórdios... Algumas tentativasde evoluir fora das soluções nativas do browser duraram algum tempo, mas depois perderam espaço
- 7. Sites estáticos vs.Sites dinâmicos Quando o back-end passou a servir o front-end
- 8.
- 9.
- 10. Ajax: A umpasso das SPAs
- 11. O CSS tambémevoluiu ★ Pré-processadores (SASS, LESS) ★ Pós-processadores (Post-CSS) ★ Praticamente uma nova especificação com o CSS 3 (variáveis nativas, feature queries, flexbox…) ★ Design Patterns (BEM, Atomic) ★ Frameworks e libs de elements (Bootstrap, Bulma CSS…)
- 12. Mas foi oNode.js que revolucionou o front-end a partir de 2010
- 13.
- 14.
- 15. Transpilação, Babel eum universo de possibilidades ★ Modularização do código ★ Suporte às especificações mais novas do JavaScript ★ Supersets (Flow, TypeScript) ★ Outras linguagens (CoffeeScript, Elm, ClojureScript…)
- 16.
- 17. O boom domobile popularizou as APIs ★ Começou a ser definido um limite claro entre o front-end e o back-end ○ Projetos separados ○ Times separados ★ Mobile first
- 18. SPA: Single PageApplication
- 19. React.js: Uma libpara criar componentes reutilizáveis ★ Combinada com outras libs do ecossistema do React torna-se um poderoso framework para criação de SPAs ★ Não serve apenas para criar SPA (widgets e afins)
- 20. Virtual DOM: maisperformance para renderizar a tela
- 21. One Way DataFlow vs. Two Way Data Binding
- 22.
- 23. As principais libsdo ecossistema do React.js
- 24. O lifecycle doReact (por componente)
- 25. Como ficam organizadosos componentes em uma aplicação React.js? ★ Componentes globais ★ Componentes locais (por feature/componentes/screens) ★ Design Patterns ○ Atomic Design ○ Presentational and Containers components
- 26. Estrutura de um componenteno React ★ Padrão index.js ★ Imagens escopadas ★ CSS Modules ★ Testes unitários do componente ★ Código do componente em si
- 27.
- 28. Documentar os componentesé importante
- 29. SPA: não ébala de prata ★ Não usar para tudo (idealmente serve para Webapp, sites que se comportam como aplicações) ★ Em muitos cenários ainda é preciso ter Server Side Rendering ○ Posso ter SSR e continuar sendo uma SPA ○ Next.js
- 30. E o JQuery?Sobrevive, firme e forte! Fonte: https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks
- 31. Show me thecode! ★ https://github.com/fernandohenriques/desafio-mangabadigital ★ https://github.com/fernandohenriques/chat-app ★ https://github.com/fernandohenriques/petline-app
- 32.