Neste tutorial, vamos aprender como criar um projeto React JS utilizando o Vite como bundler. Vite é uma ferramenta de desenvolvimento rápida que usa a importação de módulos nativa do ES Modules para obter um tempo de inicialização extremamente rápido. Vamos ver como criar um projeto React JS do zero e também entender a estrutura do projeto.
Passo 1: Instalação do Vite
Primeiramente, você precisa ter o Node.js instalado em sua máquina. Depois de instalar o Node.js, abra o terminal e execute o seguinte comando para instalar o Vite globalmente:
npm install -g create-vitePasso 2: Criar um novo projeto React JS com Vite
Agora que o Vite está instalado, você pode criar um novo projeto React JS executando o seguinte comando no terminal:
create-vite react-nome-do-seu-projeto reactIsso criará um novo projeto React JS com o nome que você especificou. Após a criação do projeto, você pode entrar na pasta do projeto usando o seguinte comando:
cd react-nome-do-seu-projetoPasso 3: Executar o projeto
Para executar o projeto, basta executar o seguinte comando no terminal:
npm run devIsso iniciará o servidor de desenvolvimento e abrirá automaticamente o projeto em seu navegador padrão. Agora, você pode começar a desenvolver seu aplicativo React JS.
Estrutura do Projeto
Agora, vamos entender a estrutura do projeto React JS criado com Vite:
src/: Esta pasta contém todos os arquivos de código-fonte do seu projeto, incluindo componentes, páginas, estilos, etc.public/: Esta pasta contém os arquivos estáticos do seu projeto, como imagens, fontes, etc..gitignore: Este arquivo define os arquivos e pastas que devem ser ignorados pelo controle de versão Git.package.json: Este arquivo contém as dependências do projeto e os scripts de execução.vite.config.js: Este arquivo contém a configuração do Vite para o seu projeto, como plugins, otimizações, etc.index.html: Este arquivo é o ponto de entrada do seu aplicativo React JS e onde todo o conteúdo será renderizado.
Conclusão
Neste tutorial, aprendemos como criar um projeto React JS com Vite e também entendemos a estrutura do projeto. Agora você pode começar a desenvolver seu aplicativo React JS com Vite de forma rápida e eficiente. Espero que este tutorial tenha sido útil e que você tenha aprendido algo novo. Boa sorte com seu desenvolvimento React JS!
Muito boa aula Prof. Parabens
Olá professor tenho aprendido muito nessas aulas.
Thank you
Cria um video ensinando a implementar o react js no laravel , acho que é com vite, sem precisar usar o inertia
Muito boa a série. Obrigada pelo conteúdo.
O meu deu esse erro [vite] Pre-transform error: Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist?
Professor eu aprendi tanto com o do MaiaFlix Obrigado do fundo do meu coração, Você me ajudou a chegar mais perto do meu sonho. Obrigado!
Estou tentando iniciar um projeto com o comando "npx create-react-app my-app" e pra mim esta dando erro! Esse comando não está sendo mais usado?
Não sou muito de comentar em vÃdeos, mas sua didática é tão boa e simples que não posso deixar de agradecer. Obrigado pela aula!
Valeu mestre, migrei do CRA pro Vite e fiquei um pouco perdido. Seu vÃdeo é de grande ajuda pra quem está começando, vamo que vamo!
Olá, boa noite !
Nesse projeto, será consumido a API do Github, para que possamos alocar os nossos projetos na nossa página ?
O som do video ficou baixo
O CRA foi desativado na atualização na documentação. qual devo usar para iniciante next.js ou vite ?
show
Qual é o melhor para se utilizar cra x vite ?