Aprenda como criar um projeto react do zero em seu computador local, utilizando ferramentas essenciais como Node.js, npm e npx. Este artigo passo a passo vai te explicar as etapas, pra que você entenda os conceitos por trás do seu projeto!

O que é react e sua importância?

O react é uma biblioteca javascript muito popular atualmente para a criação de interfaces de usuário de forma eficiente e escalável.

  • Permite a criação de componentes reutilizáveis, facilitando a manutenção e organização do código
  • É uma ferramenta de código aberto mantida pelo Facebook e por uma comunidade ativa de desenvolvedores

Quais são os pré-requisitos para criar um projeto react?

Precisamos garantir que alguns programas estejam devidamente instalados em nosso computador:

  • Node.js é um interpretador de javascript essencial para trabalhar com react
  • npm é o gerenciador de pacotes do Node.js, utilizado para instalar dependências e bibliotecas
  • npx é uma ferramenta que permite executar pacotes Node sem a necessidade de instalá-los globalmente
  • VS Code é um editor de código popular e eficiente, recomendado para desenvolver projetos react

Como criar um projeto react com npx?

O primeiro passo é criarmos uma pasta para armazenar nosso projeto. Você pode criar uma pasta chamada ‘projeto-react’ no seu computador.

  • Utilize o comando npx para criar um novo projeto

Como configurar o ambiente de desenvolvimento?

Para começar a desenvolver, é necessário configurar o ambiente de desenvolvimento. No Visual Studio Code, uma das opções é arrastar a pasta recém-criada para dentro da janela do VS Code. Além disso, é importante abrir um terminal dentro da pasta do projeto, o que pode ser feito facilmente através do VS Code. Ao fazer isso, o terminal será aberto no diretório do projeto, facilitando o trabalho.

  • Arrastar a pasta do projeto para o Visual Studio Code para iniciar o desenvolvimento
  • Abrir um terminal dentro da pasta do projeto no VS Code para facilitar o trabalho

Como iniciar meu projeto com npx?

Uma das opções é utilizar o npx para criar o projeto. O comando npx create-react-app . é utilizado para baixar e configurar um projeto react completo na pasta atual. Esse comando é composto por três partes: npx, create-react-app e o ponto (indicando a pasta atual). Ao executar esse comando, o npx fará o download do create-react-app, caso não esteja instalado globalmente, e criará os arquivos necessários dentro da pasta do projeto.

  • Utilizar o npx create-react-app . para iniciar um projeto react
  • Compreender a função de cada parte do comando npx create-react-app .

Como funciona a estrutura de arquivos e pastas do projeto react?

Após a execução do comando npx create-react-app ., será gerada uma estrutura de arquivos e pastas dentro do seu projeto. É importante entender a finalidade de cada pasta e arquivo gerado, pois isso facilitará o desenvolvimento do aplicativo. A pasta node_modules contém os módulos npm necessários para o projeto, enquanto a pasta public armazena os arquivos estáticos públicos, como index.html e imagens. A pasta src é onde o desenvolvedor irá concentrar seus esforços, pois é nela que se encontram os arquivos de código fonte do app react.

  • Compreender a estrutura de arquivos e pastas gerada pelo comando npx create-react-app .
  • Focar a atenção na pasta src, onde será desenvolvida a lógica do aplicativo react

Como configurar o ambiente do projeto react?

A pasta public no projeto é destinada para incorporar recursos estáticos, como imagens e HTML base. Após a configuração do ambiente, é possível executar o projeto e visualizá-lo no navegador para garantir seu funcionamento.

  • Os arquivos da pasta public são utilizados para recursos estáticos, como imagens e HTML base.
  • A execução do projeto react no navegador permite verificar seu funcionamento.
  • O script ‘start’ definido no package.json é responsável por iniciar o projeto react.

Como executar meu projeto?

Para executar o projeto react, basta utilizar o script ‘start’ definido no package.json. Este comando iniciará o servidor de desenvolvimento na porta 3000 e abrirá automaticamente uma aba no navegador apontando para http://localhost:3000. Durante a execução, é possível visualizar uma página com o logo do react girando, título e um link, indicando que o projeto está funcionando corretamente.

  • O script ‘start’ definido no package.json inicia o servidor de desenvolvimento na porta 3000.
  • Ao executar o script, uma página com o logo do react girando, título e um link será exibida no navegador.
  • A execução pode ser verificada ao visualizar a página no navegador.

Próximos passos do seu projeto:

Ao finalizar a configuração do projeto react, é possível dar continuidade ao desenvolvimento com componentes, estilização e lógica. Com o ambiente preparado, os próximos passos envolvem o desenvolvimento de componentes visuais com JSX, CSS e interatividade com javascript, utilizando o projeto inicial como base para aplicar o aprendizado sobre react.

Veja um trecho da nossa aula sobre React:

Conclusão

Ao seguir o passo a passo, você terá um ambiente preparado para dar continuidade aos estudos e ao desenvolvimento em react!

Com um projeto inicial configurado, você estará pronto para aplicar todo o conhecimento adquirido sobre react, desenvolvendo componentes visuais com JSX, CSS e interatividade com javascript.

Continue seus estudos e aproveite o mundo empolgante que o react tem a oferecer! 🙂