Se você está começando a estudar React, provavelmente já percebeu que a maior dificuldade não é instalar a ferramenta, mas entender como todos os conceitos trabalham juntos.

O que são Componentes? Para que serve o useState? Como renderizar listas? Como manipular Arrays sem modificar diretamente os dados? Como organizar um projeto React de forma correta?

Neste artigo vamos responder todas essas dúvidas construindo um projeto prático do zero.

Ao final, você terá desenvolvido uma aplicação capaz de exibir uma lista de alunos, adicionar novos itens, remover elementos, alterar informações e entender como o React atualiza automaticamente a interface sempre que o estado da aplicação é modificado.

---

Assista às aulas

🎥 Vídeo editado

🔴 Live completa

---

O que você aprenderá

Durante este projeto serão apresentados diversos conceitos fundamentais para quem deseja aprender React.

Você aprenderá:

• React
• Vite
• Componentes
• JSX
• useState
• Estado da aplicação
• Arrays
• map()
• Renderização de listas
• Eventos
• Organização de componentes
• CSS por componente
• Estrutura de projetos React

Todos esses assuntos aparecem diariamente em aplicações profissionais.

---

Criando um projeto React com Vite

Hoje o Vite é uma das maneiras mais rápidas de iniciar um projeto React.

Com poucos comandos já temos uma aplicação funcionando com Hot Reload, organização de pastas e ambiente pronto para desenvolvimento.

Após criar o projeto, o Vite gera toda a estrutura inicial, permitindo que o desenvolvedor concentre seus esforços apenas na construção da aplicação.

---

Entendendo a estrutura do React

Um dos maiores diferenciais do React é sua arquitetura baseada em componentes.

Em vez de criar uma página inteira dentro de um único arquivo, dividimos a interface em pequenas partes reutilizáveis.

Neste projeto criamos três componentes principais:

• Header
• Lista de Alunos
• Footer

Depois todos eles são reunidos dentro do componente principal (App.jsx).

Essa abordagem torna o código muito mais organizado e facilita bastante a manutenção do projeto.

---

O que é JSX?

Quando alguém começa no React costuma estranhar um detalhe:

Misturar HTML e JavaScript no mesmo arquivo.

Na verdade, isso recebe o nome de JSX (JavaScript XML).

O JSX permite escrever estruturas semelhantes ao HTML diretamente dentro do JavaScript, tornando a criação de interfaces muito mais intuitiva.

É exatamente essa tecnologia que possibilita montar componentes reutilizáveis de forma simples.

---

Trabalhando com Componentes

Cada componente possui uma responsabilidade específica.

Por exemplo:

O Header é responsável pelo cabeçalho da aplicação.

O Footer exibe o rodapé.

Já o componente ListaAlunos contém toda a lógica da aplicação.

Essa separação faz parte das boas práticas do React e permite reutilizar componentes em vários projetos diferentes.

---

Entendendo o useState

Um dos assuntos mais importantes para quem começa no React é o useState.

Ele é um Hook responsável por armazenar informações que podem mudar durante a execução da aplicação.

No nosso projeto, o estado armazena a lista de alunos.

Sempre que um aluno é adicionado, removido ou alterado, o React identifica essa mudança e atualiza automaticamente a interface.

É justamente esse comportamento que torna o React tão poderoso.

---

Manipulando Arrays

Além do React, o projeto também utiliza diversos conceitos importantes do JavaScript.

Durante a aula manipulamos Arrays realizando operações como:

• adicionar elementos;
• remover elementos;
• inserir itens no início;
• alterar posições específicas;
• criar cópias utilizando o operador Spread.

Esses conceitos aparecem constantemente em aplicações React.

Por isso é fundamental dominar também o JavaScript.

---

Renderizando listas com map()

Depois de armazenar os dados no estado, precisamos exibi-los na tela.

Para isso utilizamos o método map().

Ele percorre todos os elementos do Array e cria automaticamente um componente visual para cada aluno.

Essa é uma das formas mais utilizadas para renderizar listas dentro do React.

---

Eventos no React

Outra característica importante apresentada no projeto é o tratamento de eventos.

Cada botão executa uma função diferente.

Entre elas:

• Adicionar aluno
• Remover último aluno
• Adicionar no início
• Remover primeiro aluno
• Alterar o segundo aluno

Quando o usuário clica em um botão, o React executa a função correspondente e atualiza imediatamente a interface.

---

Organização dos arquivos

Durante o desenvolvimento também mostramos uma organização bastante utilizada em projetos React.

Cada componente possui:

• seu próprio arquivo JSX;
• seu próprio arquivo CSS;
• sua própria responsabilidade.

Essa separação facilita muito o crescimento da aplicação.

Mesmo projetos grandes continuam organizados utilizando esse padrão.

---

Por que aprender React?

O React é atualmente uma das bibliotecas JavaScript mais utilizadas para desenvolvimento de interfaces.

Empresas de todos os tamanhos utilizam React para criar sistemas web modernos, rápidos e altamente reutilizáveis.

Aprender seus conceitos fundamentais desde o início facilita muito a evolução para projetos mais complexos, como:

• sistemas administrativos;
• dashboards;
• e-commerces;
• aplicações SaaS;
• sistemas corporativos.

---

Conclusão

Neste projeto desenvolvemos uma aplicação completa utilizando React, aplicando diversos conceitos essenciais para quem está começando.

Mais importante do que decorar código é compreender como cada parte da aplicação conversa com as demais.

Quando você entende a função dos componentes, do useState, da renderização com map() e da organização do projeto, fica muito mais fácil evoluir para aplicações maiores.

Se você pretende aprender React de verdade, pratique bastante este projeto, faça modificações, adicione novas funcionalidades e experimente criar seus próprios componentes.

É dessa forma que a evolução acontece.