Configurar aplicações que utilizam React pode ser uma tarefa árdua e complexa... Babel, Webpack, ESLint, Autoprefixer... Mas agora não mais! Com o Create React App, é possível configurar o projeto em menos de 2 minutos!
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.
Para utilizá-lo, é bem simples. Inicialmente, precisamos utilizar o npm para instalar a ferramenta globalmente na nossa máquina com o comando:
npm install -g create-react-app
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:
create-react-app hello-world
Agora, se verificamos o projeto criado, podemos ver sua estrutura:
node_modules/ src/ .gitignore README.md favicon.ico index.html package.json
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:
App.css App.js index.css index.js logo.svg
E terá a seguinte cara:
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.
Nenhum comentário:
Postar um comentário