O que é esse tal de creat-react-app?

Quando eu comecei a desenvolver com o React, me perguntava sempre se não havia uma forma mais simples de iniciar o desenvolvimento sem ter que configurar o webpack. Achava um saco, perdia um bom tempo tentando fazer as coisas funcionarem. Eu realmente achava um saco. E comecei a buscar outras soluções, como configurações padrões de webpack para React, e nessas buscas achei no github, no repositório oficial do facebook o create-react-app.

Fiquei maravilhado em ter descoberto essa forma extremamente simples de iniciar meus desenvolvimento sem precisar configurar o webpack. Apesar de hoje não o utilizar mais, acho legal falar dele, pois boa parte do meu tempo e estudos do React foi baseado nele. Voltei pro webpack, descobri suas vantagens e desvantagens e na balança, pesou pro lado do webpack… A vida da voltas mesmo… haehaehaehaehaehhaehae

Mas vamos ao que importa….

O que é Create React App?

O create react app é um pacote com todas as configurações básicas do react. Com ele não é necessário configurar nada. Basta instalar ele pelo npm ou yarn e da um start. Simples né? Então vamos brincar com ele…

Para instalar basta ir no console do seu terminal e digitar o seguinte comando:

Captura de Tela 2018-03-04 às 1.55.48 PM

Ele vai rodar uma série de instalações e ja criar uma pasta com tudo que nós precisamos para fazer uma aplicação em React. Olha como fica inicialmente nosso projeto…

Captura de Tela 2018-03-04 às 1.57.13 PM.png

Ao lado temos a pasta que criamos com o my-app e dentro todos os arquivos criados pelo create react app. Vamos falar de cada uma dessas pastas e dos arquivos ali contidos. Ali no na parte de baixo, no terminal vemos a finalização da instalação e como podemos iniciar o nosso projeto.

Os arquivos gerados…

Captura de Tela 2018-03-04 às 2.00.43 PM

Na pasta public temos os arquivos que serão necessários para a hora da publicação da nossa aplicação. Por isso não vamos usar ela por enquanto. Dentro da pasta src fica de fato a aplicação a ser desenvolvida.

O arquivo index.js, contem todas as chamadas para fazer a nossa aplicação roda. Nesse arquivo é o único momento que precisamos chamar o react-dom, para imprimir os nosso componentes na tela. Temos também o arquivo App.js, nele temos a página inicial da nossa aplicação. Também temos um arquivo chamado App.test.js, onde vamos realizar todos os testes necessários para garantir que nossa aplicação está funcionando corretamente.

Agora que temos uma ideia do que temos ali… Vamos ver a aplicação rodando e ver se fazemos alguma modificação.

Rodando a aplicação

Para rodar basta digitar:

Captura de Tela 2018-03-04 às 2.08.46 PM

Rodando o yarn, uma tela no browser vai abrir e mostrar para vc essa tela…

Captura de Tela 2018-03-04 às 2.09.44 PM

Já temos nosso primeiro projeto em React funcionando… De forma extremamente simples e sem a necessidade de configurar uma série de coisas dentro do webpack. Uma coisa bem legal, sempre que você fizer uma modificação no código e salvar, ele será atualizado na tela.

Captura de Tela 2018-03-04 às 2.12.55 PM.png

 

Hoje a postagem foi curtinha, só para mostrar que podemos iniciar uma série com React caso vocês tenham interesse…

Comenta aqui… Querem uma série desenvolvendo algo com React?

Anúncios

Um pensamento sobre “O que é esse tal de creat-react-app?

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s