veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Nesta aula, vamos estruturar nosso modelo de produtos e criar as rotas básicas para operações CRUD em nossa API.
Criamos um modelo para produtos com os seguintes campos:
1import { Schema, model } from "mongoose";
2const productSchema = new Schema({
3 category: { type: String, required: true },
4 brand: { type: String, required: true },
5 store: { type: String, required: true },
6 name: { type: String, required: true },
7 price: { type: Number, required: true },
8 previousPrice: { type: Number },
9 description: { type: String },
10 quantity: { type: Number, required: true }
11});
12export const Product = model("Product", productSchema);Estrutura de pastas recomendada:
Configuramos um router com os principais métodos HTTP:
1import express from "express";
2const router = express.Router();
3// GET /products - Listar produtos
4router.get("/products", (req, res) => {
5 res.status(200).json({ ok: true });
6});
7// POST /products - Criar novo produto
8router.post("/products", (req, res) => {
9 // Implementação futura
10});
11// PATCH /products/:id - Atualizar produto
12router.patch("/products/:id", (req, res) => {
13 // Implementação futura
14});
15// DELETE /products/:id - Remover produto
16router.delete("/products/:id", (req, res) => {
17 // Implementação futura
18});
19export default router;No arquivo principal (index.ts):
1import router from "./routes";
2// ... outras configurações ...
3app.use(router); // Registra todas as rotasNas próximas aulas vamos implementar:
Esta estrutura inicial proporciona uma base sólida para nosso CRUD de produtos. Algumas melhorias futuras incluem:
Lembre-se que em um projeto real, você provavelmente dividiria os modelos de categoria, marca e loja em coleções separadas com relacionamentos, mas para fins didáticos, começamos com esta estrutura simplificada.