Aviso justo! Esta não é uma visão rápida, direta e orientada por especialistas de como configurar essas tecnologias. Embora, no final, tenhamos sucesso em fazer tudo funcionar. Trata-se de documentar a experiência do mundo real de fazer esse tipo de trabalho. Algumas coisas funcionam facilmente, outras não. Às vezes é minha culpa. Às vezes, os documentos não são claros. Às vezes, mudanças acontecem sob nossos pés. Temos que lutar contra tudo isso.
Temos um pequeno plano aqui. O que queremos fazer é criar um projeto local que use:
- Reação: Digamos que estejamos construindo um SPA e desejemos muito trabalhar com um modelo de componentes.
- ReactDOM - Estamos construindo para a web.
- Webpack: Queremos um servidor de desenvolvimento, recarregamento de módulo ativo e uma maneira de agrupar nossas dependências de maneira produtiva.
- Babel: Podemos não precisar de muita compilação futura de JavaScript, mas precisamos de JSX, e Babel é o que o compila.
- Módulos CSS: Queremos escrever alguns CSS específicos de componentes isolados e esta é uma boa maneira de fazer isso onde nossos estilos permanecem nas folhas de estilo.
Felizmente, enquanto planejava fazer este vídeo, encontrei o artigo “Como criar um aplicativo React do zero usando o Webpack 4” de Linh Nguyen My. 12,5 mil palmas no Medium! Uau! Eu adicionei uma série de palmas a ele também, porque parece ser o único tutorial por aí que realmente cobre essa combinação super popular de amigos de uma forma acessível que realmente funciona.
Isso não quer dizer que tudo corra facilmente e sem problemas! Eu me deparo com muitos pequenos problemas ao longo do caminho. Algumas são minhas coisas com os dedos gordos. Alguns deles são erros misteriosos que aparecem quando executamos comandos que eu mal entendo. Parece que falta documentação sobre alguns recursos. Mesmo assim, resolvemos tudo no final e temos um projeto funcionando!