Sinto muito pelas 1000 palavras e nenhuma imagem...
React é uma biblioteca tão fácil e prazerosa de usar que em pouco tempo se tornou muito popular e a quantidade de componentes open source explodiu, tornando a vida do desenvolvedor ainda melhor. Afinal componentes típicos da web como carousels, accordions, tabs e muitos outros estão facilmente disponíveis e de uma maneira customizável que o excelente jQuery com sua natureza imperativa jamais poderia competir com a filosofia declarativa do react.
A verdade é que essa facilidade que o react e a arquitetura redux proporcionam, acabam dando a muitos a ilusão de que já são profissionais, afinal já é possível fazer uma porrada de coisas, usando react, redux/redux-thunk, react-router.
É necessário, entretanto, procurar ir além se o que está buscando é ser realmente um profissional. E o que é um profissional? É a ética de entregar algo que o usuário vai usar sem frustrações; que desenvolvedores futuros irão compreender, usar ou modificar sem pânico; e ser eficaz, isto é, entender que problema você está procurando resolver e qual a melhor abordagem para tal.
E aqui vão alguns poucos tópicos para alcançar isso...
1. ES3 + ES5 + ES6 + ES7 + ...
Se você não conhece o mecanismo dos prototypes; não domina métodos funcionais como forEach,filter,map e reduce; não conhece iterators e generators; muito menos promises, async/await e observables, então aconselho a dar uma olhada mesmo que superficial. Por que perder tempo com os fundamentos? Muitas dessas coisas foram os blocos de construção do que veremos a seguir...
Referências: Recomendo livros do Nicholas Zackas e Kyle Simpson.
2. React Lifecycle Methods
Isso é obrigatório. Conhecer as entranhas desses métodos e a stack de chamadas de nested componentes é algo que você vai ter que conhecer ao buscar optimizações de performance e melhor momentos para manipulação do estado ou de referências aos nodes DOM.
Refs: https://developmentarc.gitbooks.io/react-indepth
3. Ref Attribute
É interessante saber quando você vai precisar das referências aos elementos DOM: https://www.robinwieruch.de/react-ref-attribute-dom-node/
4. Virtual DOM
É bom ter um entendimento superficial de como funciona a virtual DOM e sua importância.
Refs: https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/
Palestra do criador do preact, falando um pouco dentre outras coisas sobre a virtal DOM.
5. Padrões
Isso é importantíssimo. A leitura que você vai ter ao utilizar third-library components vai ser outra. Vai ser muito mais fácil e muito mais produtivo depois que você dominar os padrões. Padrões são a chave para você fazer componentes extensivos e reaproveitáveis.
https://reactpatterns.com/
https://egghead.io/courses/advanced-react-component-patterns
https://egghead.io/courses/higher-order-components-with-functional-patterns-using-recompose
https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
Excelentes vídeos do Michael Jackson e Ryan Flawrence, grandes referências no universo react:
https://www.youtube.com/watch?v=7S8v8jfLb1Q&t=2434s
https://www.youtube.com/watch?v=BcVAq3YFiuc (melhor vídeo de todos!!! - nunca escreva um HOC novamente...usando render props pattern)
https://www.youtube.com/watch?v=hEGg-3pIHlE (compound pattern - explicado de maneira brilhante)
6. Animações
Animações é algo que eventualmente você terá que fazer usando react. Existem maneiras diferentes para isso, mas sem dúvida a mais poderosa é usando a biblioteca react-motion.
Aqui está uma apresentação do criador, as motivações por detrás da biblioteca, sensacional: https://www.youtube.com/watch?v=1tavDv5hXpo
7. Styling
Aqui possibilidades não faltam, sendo ainda mais importante conhecer cada uma e seus respectivos trade-offs.
Four ways to style react components
Lembrando que uma decisão arquitetural terá impacto também
na manutenção do CSS e seu nível de reaproveitamento.
https://www.sitepoint.com/architecture-sass-project/
A diretório /components, por exemplo, deixaria de existir, colocando cada estilo do componente dentro da própria pasta do componente react específico. Ver a solução arquitetural abaixo.
8. Arquitetura de aplicações
Criar um modelo arquitetural que espelhe o nível de reaproveitamento de cada componente e indique que
componentes são afetados por cada ação. Isso é excelente e rende muitos frutos no longo prazo. Esses dois artigos mostram muito bem isso:
https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1
9. Async Management
Ok, lembra o item 1? É aqui principalmente que ele começa a pesar, justamente na parte mais importante de sua aplicação. Aqui estão os principais motivos para bugs, lentidão e quaisquer outros problemas que podem afastar o usuário da sua aplicação mais do que um aspecto visual ultrapassado. Este último é perdoável em aplicações que estão buscando seus clientes, mas bugs na manipulação de dados é algo imperdoável principalmente em aplicações financeiras, mesmo nas iniciantes.
E quais são as opções?
Ver:
4 maneiras redux-4-ways
padrões redux saga: https://medium.com/@andresmijares25/redux-saga-common-patterns-48437892e11c
demonstração rápida de código entre redux-thunk e redux-saga https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es2017-asy/34933395
curso observables: https://egghead.io/courses/up-and-running-with-redux-observable
motivação por detrás de redux-observables https://www.youtube.com/watch?v=AslncyG8whg
Ok, existem outras maneiras
10. Server Side Rendering
Server side rendenring é outro conhecimento obrigatório para profissionais. Conhecer as razões para utilizá-lo e como fazer o setup da aplicação, são na minha opinião o mais importante.
Esse é um conhecimento fácil de adquirir uma vez que você tenha uma fonte boa para tal. Este curso do Stephen Grider na Udemy faz um excelente trabalho.
11. Testing
Fazer testes em react pode parecer a princípio um assunto assustador, primeiro vem a configuração, depois aprender bibliotecas e frameworks de testes novos como Jest e Enzyme. Além disso, como diabos testar usando redux?
Bom, eu tinha todas essas dúvidas até que resolvi investigar e bom, era muito mais fácil do que eu pensava. A dificuldade novamente é achar boas fontes. O melhor mão na massa que encontrei foi este curso da udemy focado somente em testes com react.
Esse curso vai fazer você perder o medo de fazer quaisquer testes com react. Existem coisas, entretanto, que são muito mais difíceis de encontrar do que boas fontes e isso é bom senso. Bom senso e capacidade analítica para avaliar quando ou não testar um componente, que tipos de teste fazer e como fazer um componente limpo com responsabilidades bem definidas e, portanto, fáceis de testar.
Um dos artigos que vai lhe dar um caminho para o amadurecimento de tais decisões é este aqui do free codecamp.
12. GraphQL
Primeiramente, é importantíssimo entender quais são os problemas que graphQL resolve para o frontEnd.
REST APIs are REST-in-Peace APIs. Long Live GraphQL
Depois é só entrar no mundo dos graphQL clients como Apollo e Relay. Eu infelizmente, não tenho tantas fontes e exemplos de aprendizado, mas para o básico do básico o curso do Stephen Grider quebra o galho para que você passe a conhecer um pouco a extensão do seu desconhecimento sobre o assunto.
13.Type Checking
É bom estar acostumado a usar prop-types, flow ou até mesmo typescript. Usar type checking em react, lhe dá validações automáticas, não sendo necessário criar teste unitários, evitando bugs desnecessários e ainda possibilitando auto-complete em determinados editores de texto e IDEs.
14. Performance
Aqui, como falei anteriormente, conhecer os lifecycles methods vai ajudar muito. Mas um conhecimento da filosofia deep comparing vs shallow comparing é essencial para entender o que está por trás do funcionamento dos chamados Pure Components, dos ganhos de performance com componentes redux bem estruturados e dos chamados functional components.
Conhecer a biblioteca de inspeção de performace react-addons-perf também vai ajudar muito.
Aqui estão duas leituras bem interessantes sobre o assunto:
15. Progressive Web Apps e React Native
Ok, você pode ser um profissional em react sem conhecer outras plataformas, mas com certeza uma hora ou outra será esperado isso de você, então é bom começar a conhecer outras tecnologias que react permite você entrar sem maiores dificuldades.
16. Functional Programming
Um dos conceitos mais fortes do react é o fato de que para um dado estado, será renderizado sempre a mesma tela. Esse nada mais é que um conceito de funções puras. Isso facilita extremamente a inspeção de problemas na aplicação e a preparação de testes.
React, então, já trabalha tanto com paradigmas funcionais que o Facebook desenvolveu até sua própria biblioteca para trabalhar com dados de forma imutável chamada Immutable.js
O paradigma funcional tem ganhado tanto espaço que sem dúvida conhecê-lo vai lhe deixar ainda mais próximo de ser um grande profissional. Eu andei estudando Elixir e gostei muito, sem dúvidas é uma linguagem que pretendo conhecer ainda mais.
17. Reusable Components
Finalmente, é aqui que você sabe que dominou todos os outros tópicos. Se você está pronto para criar seus próprios componentes e reutilizá-los dentro do seu projeto, dentro de projetos diferentes da sua empresa ou até mesmo entre projetos pelo mundo todo.
Qualquer um desses objetivos é extremamente válido e vai fazer o seu projeto, sua empresa ou outros desenvolvedores pelo mundo economizarem tempo, portanto gerando riqueza.
Aqui você vai ter que dominar criação de documentação, testes e decisões de padrões e flexibilidade.
A melhor fonte que encontrei sobre o assunto foi Creating Reusable React Components, um curso excelente do Cory House disponível no pluralsight.
Para se ter uma idéia do conteúdo do curso e do procedimento e das avaliações necessárias para criar componentes reaproveitáveis, ver: Building a React Component Library | Part 1
Conclusão
Espero só ter começado essa listinha de referências com breves comentários sobre as motivações de conhecer esses tópicos.
Alguns eu mesmo estou procurando melhorar, uns com mais urgência que outros. À medida, então, que isso aconteça, prometo atualizar o tópico e escrever artigos específicos sobre cada item.
Que todos possamos obter sucesso em nosso objetivo de nos tornarmos melhores profissionais, sempre lembrando que o aprendizado é imenso, mas acho que foi por isso mesmo que nos tornamos desenvolvedores em primeiro lugar não é mesmo? Aprendizado contínuo. Abraço!
