Este projeto foi desenvolvido utilizando Vite como ferramenta de build e empacotamento, em conjunto com React para construção da interface.
- Nome do pacote:
organograma - Versão: 0.0.0
- Privado: Não
Você pode executar os seguintes comandos no terminal:
| Comando | Descrição |
|---|---|
npm run dev |
Inicia o servidor de desenvolvimento |
npm run build |
Gera a versão de produção do projeto |
npm run preview |
Visualiza a build de produção localmente |
npm run lint |
Executa o ESLint para análise de código |
- Node.js: v20.19.3
- npm: 10.8.2
O projeto está estruturado da seguinte maneira:
📂 public
📂 images
🖼️ image.png
📂 prints
🖼️ image.png
📂 src
📂 components
📂 componentFolder
component.css
index.jsx
index.jsx
App.css
App.jsx
main.jsx
.gitignore
eslint.config.js
index.html
package.json
📄 README.md
vite.config.js
yarn.lock
O projeto explora diversos conceitos fundamentais do desenvolvimento com React:
🔹 Criando um projeto com Vite
🔹 StrictMode
🔹 Componentes funcionais
🔹 Componentes baseados em classe
🔹 Estados
🔹 Propriedades
🔹 Estilização mais básica com CSS
🔹 SPA (Single Page Aplication)
🔹 Listas com keys
🔹 Diferenças entre o map e o foreach
🔹 Formulário
🔹 Eventos HTML no React
🔹 Funcionamento do useState e sua importância para a re-renderização da página
🔹 Inputs controlados
🔹 Prop drilling
🔹 Renderização condicional
🔹 Depuração de código com o debugger
🔹 Fragmento nos componentes
- React Docs - Function Components
- React Docs - State: A Component's Memory
- React Docs - Passing Props to a Component
- React Docs - What is React?
- React Docs - Rendering Lists
- MDN - Array.prototype.map()
- MDN - Array.prototype.forEach()
- eventos no react
- React Docs - Strict Mode
- Vite Official Docs
- vídeo sobre o nodejs
- eventos javascript
- convenção de nomenclatura
- drop drilling


