Diferente de trabalhar com projetos menores de vanilla HTML, CSS e JavaScript, iniciar um novo projeto React inclui alguns passos a mais para garantir que tudo seja executado corretamente. Em vez disso de tentar configurar todas as configurações necessárias por conta própria, existem ferramentas que farão isso por você. Uma das ferramentas mais populares para configurar projetos é o Vite. Vite, que significa "rápido" em francês, é uma ferramenta de build que tem como objetivo proporcionar uma experiência de desenvolvimento mais rápida para projetos web modernos. Vite pode ser usado com React, assim como com outras bibliotecas e frameworks como Vue ou Svelte. Você pode até usá-lo com projetos vanilla JavaScript. Para criar um novo projeto com Vite, você precisará usar a linha de comando. Se você está usando uma máquina Windows, então pode usar o Command Prompt ou o Windows PowerShell. Se você está usando um Mac, então pode usar o app Terminal. Caso você não tenha o Node.js instalado, que é necessário para o npm funcionar, aqui está um link para a página oficial do Node.js: https://nodejs.org. Siga as instruções de instalação e depois volte aqui para retomar sua instalação do React. Uma vez que você tenha o terminal aberto, você pode usar o seguinte comando:

npm create vite@latest my-react-app -- --template react

Este comando cria um novo projeto React chamado my-react-app usando o template React do Vite. Você pode então abrir o novo projeto e ver o código boilerplate React que o Vite forneceu para você. A grande vantagem do Vite é que ele fornecerá apenas os arquivos que são absolutamente necessários para começar o seu projeto React. Para realmente executar o projeto como está, você precisará instalar as dependências usando os seguintes comandos na linha de comando:

cd my-react-app
npm install

O comando cd my-react-app garante que você mude para o diretório correto onde seu projeto está localizado. O comando npm install é usado para instalar as dependências necessárias para executar corretamente seu projeto React. Dependências são bibliotecas ou pacotes que seu projeto React requer para funcionar corretamente, como o próprio React, ReactDOM ou outros pacotes de terceiros que fornecem funcionalidades adicionais. Executar npm install irá ler o arquivo package.json no diretório do seu projeto e instalar todas as dependências listadas lá, permitindo que você construa e execute seu app React sem faltar nenhum componente necessário. O arquivo package.json é um arquivo de configuração chave em projetos que contém metadados sobre seu projeto, incluindo seu nome, versão e dependências. Ele também define scripts, informações de licenciamento e outras configurações que ajudam a gerenciar o projeto e suas dependências. Uma vez que as dependências estejam instaladas, você deve notar uma nova pasta no seu projeto chamada node_modules. A pasta node_modules é onde todos os pacotes e bibliotecas necessários para o seu projeto são armazenados. Essa pasta contém o código real das dependências listadas no seu arquivo package.json, incluindo tanto as dependências diretas do seu projeto quanto quaisquer dependências dessas dependências. Para executar seu projeto, execute o comando npm run dev e abra uma nova aba do navegador em http://localhost:5173/. Você deve ver o template inicial que o Vite forneceu para você. Se você precisar parar o servidor local, pressione CTRL + C na linha de comando. Para realmente ver o código deste template inicial, você pode entrar no seu projeto dentro da pasta src e deverá ver o arquivo App.jsx. A partir daí você pode começar a modificar o arquivo, salvar suas alterações e ver as novas mudanças exibidas no navegador. E com isso, você está pronto para começar a construir sua aplicação React!