10 assuntos que todo iniciante em React deve ficar por dentro
Artigo voltado para aqueles que estão iniciando em React e estão com diversas dúvidas, sem terem um norte a seguir
Boa tarde galera!
Este post é dedicado para aqueles que estão começando com React. Muitas são as dúvidas principalmente com relação ao seu ecossistema, que como sabemos, é vasto. Juntei 10 tópicos que aprendi dentre erros e acertos, que foram e ainda são importantes em minha trajetória.
1. Antes de tudo, tenha uma boa base de JavaScript
React antes de tudo é JavaScript. Dentre JSX e componentes, há muito JavaScript para escrever testes, lógica de negócios, requisições às APIs e até middlewares em Node.js. Recomendo o curso do Fernando Daciuk, Curso JavaScript Ninja:
2. Depois de JavaScript, aí sim parta para ES6+
É importante conhecer as versões anteriores do JavaScript para entender o propósito das novas features lançadas nas versões de EcmaScript 6 adiante (já estamos na versão 8). Não faz sentido avançar para ES6 sem antes ter bons fundamentos no JavaScript em geral. Por exemplo, podemos usar Arrow Functions em vez de usar bind no construtor da classe do componente. Segue um compilado com algumas features do ES6:
3. Pense em TDD
TDD (Test Driven Development) é importante para garantir a segurança de um projeto durante a sua evolução. Conforme maior ou mais crescente é a aplicação, maior é a sua necessidade, ainda mais se tiverem diversos devs atuando. Também é importante para o próprio autor do código, pois ele identifica os bugs com muito mais agilidade, além dos testes servirem como documentação. O React conta com alguns frameworks e libs de testes, como o Jest, Enzyme e Storybook. Recomendo o curso do Willian Justen, JavaScript com TDD na Prática:
4. Pense Funcionalmente
Programação funcional não é somente uma tendência, é um padrão que facilita muito para quem está desenvolvendo ou para quem precisa evoluir uma plataforma. Código mais modularizado é mais intuitivo, além de ficar mais fácil de escrever testes. Seguindo TDD corretamente você acabará naturalmente tendo que escrever funcionalmente. Segue um bom artigo para se iniciar:
5. Não se esqueça das PropTypes, ou substitua pelas Flow Types
PropTypes são importantes e em diversos momentos são ignorados ou esquecidos. Devemos seguir o fluxo de definir o tipo do dado antes de aplicá-lo, com um fluxo parecido do TDD. É possível usar Flow Types no lugar de PropTypes, assim podendo tipar não só props, mas também parâmetros e retornos de funções, substituindo boa parte do caminho infeliz do TDD. Seguem alguns tutoriais muito bons traduzidos pelo Eduardo Rabelo:
- https://medium.com/trainingcenter/flow-fundamentos-para-desenvolvedores-javascript-9f0a1da74c4e
- https://medium.com/@oieduardorabelo/flow-fundamentos-para-react-9ba59fd42f6d
6. Pense em PWA
React e seu ecossistema com muita frequência são escolhidos para um projeto que deverá se comportar como um App. Como toda plataforma deve evoluir, melhorias e correções de bugs são frequentes, por isso temos que ter um mindset de PWA (Progressive Web Apps). Há vários cases pela web, como:
- Twitter Lite: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3
- Pinterest: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
- Tinder: https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0
- Uber: https://eng.uber.com/m-uber/
7. Redux pode ser bom também para isolar responsabilidades
Redux foi criado para evitar um emaranhado de troca de estados entre componentes que estão espalhados na hierarquia. Na maioria dos casos usar state local resolve, mas conforme uma aplicação vai crescendo, ter muita lógica principalmente de requisições em APIs dentro de componentes pode ficar confuso, então é interessante isolar essa lógica em uma Action. Redux Middlewares facilitam todo esse trabalho, como o Redux Saga que lida com side effects de requisições assíncronas. Um excelente artigo esmiuçando Redux Saga:
8. Mesmo usando Create React App, não deixe de aprender Webpack
Muitos optam por iniciar com Create React App para partir rapidamente para o React. O Facebook mesmo criou este boilerplate com este intuíto. Em grandes projetos há diversos requisitos que o Create React App pode não atender. Dar eject nele e reconfigurá-lo pode dar mais trabalho do que configurar o Webpack do zero. Fique ligado na versão 4 do Webpack que virá com praticamente zero configuração.
9. Continue sempre explorando formas de abstração de componentes
Sempre surgem novas formas interessantes e que facilitam a forma como abstraímos componentes. Uma forma muito usual é o conceito de Higher-Order Componentes (HOC), que nasceram exatamente das Higher-Order Functions. Além das HOCs, há diversas outras práticas. Alguns excelentes artigos:
- https://www.robinwieruch.de/conditional-rendering-react/
- https://www.robinwieruch.de/gentle-introduction-higher-order-components/
10. Atente-se ao GraphQL
Tente não ficar de fora das novidades referentes ao GraphQL, que é uma arquitetura que promete substituir a arquitetura REST:
… e um bônus, mas não menos importante:
11. Não abra mão de arquitetura CSS
O Webpack e o React facilitam as dores de cabeça de conflitos e especificidade de estilos com CSS Modules e Styled Components, mas isso não significa que podemos fazer como bem quisermos. Há também os estilos globais que podem estar definidas em variáveis do Sass, ou do próprio CSS mesmo. Respeitar uma arquitetura CSS como a organização do ITCSS pode ajudar muito numa evolução sustentável do projeto. Segue uma sugestão de leitura:
Conclusão
Muitos devs iniciantes decidem por um framework antes de adquirirem uma boa base do universo Front-End. Frameworks vêm e vão, mas os conceitos e as linguagens de Front estão aí há muitos anos e vão durar por mais tempo. Primeiramente estude bem fundamentos, design patterns, HTML, CSS e JavaScript. Mesmo quando estiver estudando React, lembre-se que não é só React, mas há todo um ecossistema a se levar em consideração.
Lembrando que os tópicos que levantei foram a respeito da minha trajetória individual, mas sintam-se a vontade de levantar mais sugestões nos comentários!
