Projeto de aprendizado desenvolvido durante o curso DEVstart do LAB365 — Trilha React.
Uma jornada prática pelos fundamentos do ecossistema React moderno, construída com as ferramentas mais atuais do mercado.
Este repositório documenta minha evolução no aprendizado de React, desenvolvido como parte da Trilha 3 — React do programa DEVstart, uma formação 100% online e mão na massa oferecida pelo LAB365 / SENAI-SC.
O DEVstart é estruturado em três trilhas progressivas:
| Trilha | Conteúdo | Status |
|---|---|---|
| Trilha 1 | Lógica de Programação | ✅ Concluída |
| Trilha 2 | HTML, CSS e JavaScript | ✅ Concluída |
| Trilha 3 | React | 🚀 Em andamento — Fase 5 |
O projeto é construído de forma incremental — cada commit representa um novo conceito explorado, um novo componente criado ou uma nova funcionalidade implementada. A ideia não é ter um produto finalizado, mas sim um laboratório vivo onde aplico na prática tudo que estou aprendendo ao longo do curso.
🚧 Este projeto está em desenvolvimento ativo. Novos recursos, componentes e melhorias serão adicionados conforme avanço nas fases da Trilha React do DEVstart.
A versão mais recente da biblioteca criada pelo Meta para construção de interfaces de usuário. O React utiliza o conceito de componentes — blocos reutilizáveis de UI — e um Virtual DOM para atualizar a tela de forma eficiente.
Nesta versão, destaca-se o novo React Compiler, que otimiza automaticamente a re-renderização dos componentes, eliminando a necessidade de usar useMemo e useCallback manualmente na maioria dos casos.
Ferramenta de build de nova geração que substitui o Create React App. O Vite oferece:
- HMR (Hot Module Replacement): atualiza o navegador instantaneamente enquanto você edita o código, sem perder o estado da aplicação.
- Build ultra-rápido: utiliza o bundler Rolldown internamente, resultando em tempos de build muito menores.
- Configuração mínima: zero configuração para começar, com suporte nativo a JSX, CSS Modules e muito mais.
O projeto utiliza JavaScript moderno com sintaxe de módulos ES (type: "module"), incluindo recursos como arrow functions, destructuring, spread operator, template literals e async/await.
Estilização dos componentes com CSS puro. O projeto tem uma boa base de CSS (50% da codebase), o que reflete a atenção dedicada ao visual e layout das páginas.
Ferramenta de análise estática de código que identifica e corrige problemas automaticamente. O projeto conta com plugins específicos para React:
- eslint-plugin-react-hooks: garante que os hooks sejam usados corretamente, seguindo as regras do React.
- eslint-plugin-react-refresh: melhora a experiência com HMR no Vite.
O Babel é o transpilador JavaScript responsável por converter código JSX e ES6+ em código compatível com navegadores. Neste projeto, ele trabalha em conjunto com o babel-plugin-react-compiler, que habilita as otimizações automáticas do React 19 em tempo de compilação.
React01/
├── public/ # Arquivos estáticos (favicon, imagens públicas)
├── src/ # Código-fonte da aplicação
│ ├── main.jsx # Ponto de entrada — monta o React na DOM
│ └── App.jsx # Componente raiz da aplicação
├── index.html # HTML base — onde o React é injetado via #root
├── vite.config.js # Configurações do Vite e plugins
├── eslint.config.js # Regras de lint do projeto
└── package.json # Dependências e scripts do projeto
O fluxo de inicialização da aplicação funciona assim:
- O navegador carrega o
index.html, que possui um<div id="root">vazio e importa osrc/main.jsx. - O
main.jsxusaReactDOM.createRoot()para "plugar" o React nessediv. - O componente
App.jsxé renderizado como ponto de partida de toda a árvore de componentes.
À medida que o curso avança, os seguintes conceitos são ou serão aplicados neste projeto:
- Criação e composição de Componentes funcionais
- JSX — a sintaxe que mistura JavaScript com HTML
- Props — passagem de dados entre componentes
- State com
useState— gerenciamento de estado local - Efeitos colaterais com
useEffect - Eventos — interatividade com o usuário
- Renderização condicional e listas com
.map() - Componentização — separação de responsabilidades
- React Router — navegação entre páginas (em breve)
- Context API — gerenciamento de estado global (em breve)
- Node.js (versão 18 ou superior)
- npm (já vem com o Node.js)
# 1. Clone o repositório
git clone https://github.com/LinconlBR/React01.git
# 2. Acesse a pasta do projeto
cd React01
# 3. Instale as dependências
npm install
# 4. Inicie o servidor de desenvolvimento
npm run devApós executar npm run dev, abra http://localhost:5173 no seu navegador.
| Comando | Descrição |
|---|---|
npm run dev |
Inicia o servidor de desenvolvimento com HMR |
npm run build |
Gera a versão otimizada para produção na pasta dist/ |
npm run preview |
Pré-visualiza o build de produção localmente |
npm run lint |
Analisa o código em busca de problemas com o ESLint |
Este projeto é atualizado conforme avanço nas fases da Trilha 3 do DEVstart. Cada fase traz novos conceitos aplicados diretamente no código.
Trilha 1 — Lógica de Programação ████████████████ ✅ Concluída
Trilha 2 — HTML, CSS e JavaScript ████████████████ ✅ Concluída
Trilha 3 — React
Fase 1: Introdução ao React ████████████████ ✅ Concluída
Fase 2: Componentes e Props ████████████████ ✅ Concluída
Fase 3: Estado e Eventos ████████████████ ✅ Concluída
Fase 4: Hooks e Efeitos ████████████████ ✅ Concluída
Fase 5: Em andamento ████████░░░░░░░░ 🚀 Atual
Fase 6+: Próximas fases ░░░░░░░░░░░░░░░░ ⏳ Em breve
📍 Posição atual: Trilha 3 — React · Fase 5
Feito com dedicação por Linconl
O DEVstart é uma formação em desenvolvimento front-end 100% online, oferecida pelo LAB365, espaço de inovação do SENAI-SC. O programa cobre desde lógica de programação até React, com foco em aprendizado prático e mão na massa — ideal para quem quer entrar ou crescer na área de tecnologia.
