React - Versão 19.2

1 - Introdução 2 - Conceitos 3 - Configurar ambiente 4 - Criar e executar projeto 5 - Componente 6 - Fragment 7 - Imagens 8 - CSS 9 - Condicional 10 - Escolha 11 - Repetição 12 - Eventos 13 - Funções 14 - Hook useState 15 - Activity 16 - Manipular formulários (1ª parte) 17 - Manipular formulários (2ª parte) 18 - Props 19 - User Interface 20 - Considerações

4 - Criando componente

Olá pessoal, na quarta aula do treinamento de React, iremos criar e executar nosso primeiro projeto.

Siga os passos abaixo, você pode usar o Terminal do VSCode ou o Prompt de Comando/Terminal.

1º Abra o Prompt de Comando (Windows) ou Terminal (MacOS ou Linux).

2º Selecione um diretório qualquer para criar o projeto.

3º Utilize o seguinte comando: npm create vite@latest conceitos. Esse comando será utilizado para criar um novo projeto React utilizando o Vite.

Agora precisamos realizar algumas configurações:

  • Framework: React
  • Variante: JavaScript
  • Utilizar vite-rolldown: Não
  • Instalar pacotes e executar projeto: Sim

No seu terminal será exibida a URL localhost:5173. Acesse-a e veja o projeto em funcionamento.

O React trabalha com o conceito de componentes, que são blocos reutilizáveis responsáveis por montar a interface da aplicação. Cada componente pode conter lógica, estrutura e estilos, facilitando a manutenção e organização do código.

Diferente de frameworks completos, o React é uma biblioteca, o que significa que ele oferece mais liberdade para escolher outras ferramentas conforme a necessidade do projeto.

Para executar um projeto React com Vite, utilizamos o comando npm run dev, mas existem outros comandos importantes:

  • npm run dev: executa o projeto em ambiente de desenvolvimento
  • npm run build: gera a versão de produção da aplicação
  • npm run preview: executa localmente a versão de produção gerada

A estrutura de um projeto React criado com Vite é composta por:

  • node_modules: pasta com todas as dependências do projeto
  • public: arquivos públicos que não passam pelo processo de build
  • src: onde ficam os componentes, estilos e arquivos principais da aplicação
  • main.jsx: ponto de entrada da aplicação React
  • App.jsx: componente raiz da aplicação
  • .gitignore: arquivos e pastas ignorados pelo Git
  • package.json: informações do projeto e dependências utilizadas
  • package-lock.json: controle detalhado das versões das dependências
  • vite.config.js: arquivo de configuração do Vite
  • README.md: instruções básicas sobre o projeto

Acompanhe abaixo nossa quarta aula do treinamento de React no YouTube: