Como começar a sua aplicação React em poucos minutos

Baixe gratuitamente o e-book clicando aqui!

Para facilitar a criação de aplicações utilizando React, o Facebook lançou uma ferramenta que promete reduzir toda complexidade envolvida em configurar um novo projeto que utilize a tecnologia.

O projeto chamado de “ Create React App”, divulgado por Dan Abramov no blog oficial do React, permite que os desenvolvedores criem suas aplicações React com apenas um comando. Não é criado somente a estrutura básica de pastas, mas também toda a configuração de build e dependências necessárias, ou seja, comandos complexos do Babel e Webpack, usado na maior parte dos projetos, são abstraídos, permitindo ao desenvolvedor se concentrar no que realmente interessa: a sua aplicação.

No blog, Abramov diz que a motivação para a criação deste projeto é a associação que os desenvolvedores fazem do ecossistema de desenvolvimento do React com uma grande quantidade de ferramentas, principalmente Babel e Webpack, o que torna o processo de desenvolvimento lento e curva de aprendizado mais longa, principalmente quando se trata de aplicações que vão à produção.

Abramov reforça que quem já tem um processo de build que já funciona, deve mantê-lo. A ideia é que a ferramenta auxilie principalmente quem ainda não tem experiência com React.

Para o futuro há planos de adicionar mais funcionalidades, como adicionar testes. Abramov comentou que as atualizações serão feitas de forma gradual para deixar as configurações padrões mais flexíveis para cobrir mais casos de uso.

Se inscreva no nosso canal!

Para utilizá-lo, é bem simples. Inicialmente, precisamos utilizar o npm para instalar a ferramenta globalmente na nossa máquina com o comando:

Instalando o Create React App globalmente com o npm

Feito isso, você já terá o Create React App instalado na sua máquina. Agora podemos criar um projeto utilizando o comando create-react-app seguido do nome do nosso projeto:

Criando um novo projeto

Agora, se verificamos o projeto criado, podemos ver sua estrutura:

Estrutura do projeto

Ao abrirmos o package.json, iremos notar que há somente uma dependência de desenvolvimento chamada react-scripts e três scripts:

  • start: react-scripts start
  • build: react-scripts build
  • eject: react-scripts eject

O script start iniciará nossa aplicação com base nos componentes que estão no diretório src/. Na criação, ele irá conter os seguintes arquivos:

Conteúdo inicial do diretório src/

E terá a seguinte cara:

Hello World

Ao alterar qualquer um dos arquivos e salvar, eles serão recompilados automaticamente e o browser também será atualizado. Se erros forem encontrados, eles são exibidos no console.

Uma vez que o projeto está pronto para ir para produção, podemos utilizar o script build. Ele será responsável por criar o diretório build/, onde o código estará pronto para produção.

No entanto, se em algum momento você não quiser mais depender da ferramenta para o desenvolvimento da sua aplicação, você pode executar o comando eject. Ele irá remover permanentemente a configuração padrão do Create React App e criará um diretório config/ com todas as “configurações cruas” que ele utiliza por padrão. Isso significa que o seu package.json será modificado para obter as dependências do Babel, Webpack e afins.

A página oficial do projeto no GitHub possui mais informações sobre a ferramenta.

Gostou? Não se esqueça de Recomendar e Compartilhar!

Show your support

Clapping shows how much you appreciated Diego Martins de Pinho’s story.