DEV Community: buildlogmmd

Workflow base en Next.js + TypeScript: de la historia de usuario al listado funcional

buildlogmmd — Thu, 14 Aug 2025 18:39:06 +0000

Acá te dejo mi workflow para crear un listado de productos en una app con Next.js + TypeScript:

🧩 Workflow: Crear un listado de productos

🧠 1. Definí la historia de usuario

“Como cliente, quiero ver un listado de productos con nombre y precio para poder elegir qué comprar.”

📦 2. Creá los datos simulados (mock)

📄 src/data/products.ts

export const products = [
  { id: "1", name: "Manzana", price: 500 },
  { id: "2", name: "Banana", price: 450 },
  { id: "3", name: "Zanahoria", price: 300 },
];

🧾 3. Definí el tipo o interface

📄 src/types/product.ts

export interface Product {
  id: string;
  name: string;
  price: number;
}

🧩 4. Creá el componente `ProductCard`

📄 src/components/ProductCard.tsx

import { Product } from "@/types/product";

type Props = { product: Product };

export default function ProductCard({ product }: Props) {
  return (
    <div className="border p-4 rounded shadow">
      <h2>{product.name}</h2>
      <p>${product.price}</p>
    </div>
  );
}

🖼️ 5. Mostralos en la página

📄 app/page.tsx

"use client";

import { products } from "@/data/products";
import ProductCard from "@/components/ProductCard";

export default function Home() {
  return (
    <main className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </main>
  );
}

✅ 6. Commit

git checkout -b feat/product-listing
git add .
git commit -m "feat: implement product listing with ProductCard component"

📘 Patrón mental que estás aplicando

Historia → Datos → Tipo → Componente → Página → Commit

Rendering Lists – React Docs

buildlogmmd — Sun, 20 Apr 2025 20:45:57 +0000

🔗 Rendering Lists – React Docs

✅ ¿Qué quiere enseñarte React en esta sección?

Cómo renderizar listas de elementos en JSX utilizando el método .map() y cómo asignar una key única a cada elemento renderizado.

🧠 Párrafo resumen:

“En React, para renderizar listas usás el método .map() sobre un array, devolviendo un JSX por cada ítem. Cada elemento renderizado debe tener una prop key única y estable, que ayuda a React a identificar y actualizar los elementos de forma eficiente.”

📌 React quiere que sepas sí o sí:

Usás .map() para recorrer un array y devolver JSX

const frutas = ["Manzana", "Banana", "Pera"];

return (
  <ul>
    {frutas.map((fruta) => (
      <li key={fruta}>{fruta}</li>
    ))}
  </ul>
);

La prop key es obligatoria cuando renderizás listas > Debe ser un valor único y estable (idealmente un ID, no un índice).

productos.map((p) => <li key={p.id}>{p.nombre}</li>)

La lista puede renderizarse directamente o guardarse en una variable previa

const items = productos.map((p) => <li key={p.id}>{p.nombre}</li>);
return <ul>{items}</ul>;

Conditional rendering – React Docs

buildlogmmd — Sun, 20 Apr 2025 20:43:58 +0000

🔗 Conditional rendering – React Docs

✅ ¿Qué quiere enseñarte React en esta sección?

Cómo mostrar u ocultar elementos en JSX de forma condicional usando expresiones booleanas, ternarios, lógica previa o retorno temprano.

🧠 Párrafo resumen:

“En React, el renderizado condicional te permite mostrar u ocultar elementos según una condición. Podés usar operadores ternarios, expresiones booleanas, retornos anticipados o lógica previa para decidir qué renderizar. Esto permite adaptar la UI dinámicamente según los datos.”

📌 Técnicas que React quiere que sepas:

Ternario en JSX

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

Renderizar solo si es verdadero (corte booleano)

{isNew && <p>Bienvenido/a</p>}

Return anticipado dentro del componente

if (!isLoggedIn) return <LoginScreen />;

Guardar lo que vas a renderizar en una variable previa

let contenido;
if (error) {
  contenido = <Error />;
} else {
  contenido = <Dashboard />;
}
return <div>{contenido}</div>;

Learn React - Writing Markup with JSX

buildlogmmd — Sat, 19 Apr 2025 22:13:05 +0000

Excelente, vamos con el Punto 4: Writing Markup with JSX

👉 Este punto es fundamental para escribir interfaces reales en React con fluidez.

✅ 4. Writing Markup with JSX — Lo esencial

💡 CONCEPTO CLAVE

JSX te permite escribir “HTML dentro de JavaScript”, pero con algunas diferencias clave.

✅ PARA EL DÍA A DÍA

Usás className en vez de class (porque class es palabra reservada en JS).
Todo el JSX tiene que estar dentro de un solo elemento padre.
Cerrás todas las etiquetas, incluso las que en HTML no se cierran (<img />, <input />).
JSX acepta expresiones JS entre {} pero no sentencias (como if, for).

🧩 Ejemplo aplicado a tu carrito

function ProductItem() {
  const price = 500;

  return (
    <div className="border p-4">
      <h2>Manzana</h2>
      <p>Precio: ${price}</p>
      <button>Agregar al carrito</button>
    </div>
  );
}

🔥 Todo JSX está envuelto en un <div> y usamos className.

💼 PARA ENTREVISTAS TÉCNICAS

¿Qué es JSX?

“JSX es una extensión de JavaScript que permite escribir la UI como si fuera HTML, pero con la lógica de JS integrada.”

¿Qué diferencias hay entre HTML y JSX?

Se usa className en vez de class

Las etiquetas se cierran siempre

Las expresiones JS van entre { }

🧠 FRASE PARA RECORDAR

JSX parece HTML, pero es JavaScript.

Vamos con el Punto 5: JavaScript in JSX with Curly Braces

Learn React - Importing and Exporting Components

buildlogmmd — Sat, 19 Apr 2025 22:11:00 +0000

Vamos con el Punto 3: Importing and Exporting Components

👉 Enfocado en lo que sí o sí necesitás saber para trabajo y entrevistas.

✅ 3. Importing and Exporting Components — Lo esencial

💡 CONCEPTO CLAVE

Para usar un componente en otro archivo, lo exportás desde uno y lo importás desde otro.

✅ PARA EL DÍA A DÍA

📁 Cada componente debe ir idealmente en su propio archivo.
Usás export default para que sea fácil de importar.
Usás import Nombre from "ruta" para traerlo.

📄 src/components/ProductItem.tsx

export default function ProductItem() {
  return <p>Manzana - $500</p>;
}

📄 app/page.tsx

import ProductItem from "@/components/ProductItem";

export default function Home() {
  return (
    <div>
      <h1>Carrito</h1>
      <ProductItem />
    </div>
  );
}

💼 PARA ENTREVISTAS TÉCNICAS

¿Cómo se comparten componentes entre archivos?

“Con export para exponer y import para usar. Normalmente usamos export default para un solo componente por archivo.”

¿Qué diferencia hay entre export default y export nombrado?

export default permite importar sin {}.

export nombrado requiere { Nombre } al importar.

🧠 FRASE PARA RECORDAR

Exportás para compartir, importás para usar.

Vamos con el Punto 4: Writing Markup with JSX

Learn React - Your First Component

buildlogmmd — Sat, 19 Apr 2025 22:09:03 +0000

Vamos con el Punto 2: Your First Component

👉 Enfocado en lo que sí o sí tenés que dominar para el trabajo profesional y entrevistas técnicas.

✅ 2. Your First Component — Lo esencial

💡 CONCEPTO CLAVE

Un componente es una función que devuelve JSX y empieza con mayúscula.

Es la unidad mínima de construcción en React.

✅ PARA EL DÍA A DÍA

Cada componente es una función pura (sin efectos colaterales).
Siempre empieza con mayúscula (ProductItem, no productItem).
Se puede usar dentro de otro componente (composición).

function ProductItem() {
  return <p>Manzana</p>;
}

function App() {
  return (
    <div>
      <h1>Carrito</h1>
      <ProductItem />
    </div>
  );
}

💼 PARA ENTREVISTAS TÉCNICAS

¿Qué es un componente funcional?

“Es una función en React que devuelve JSX. Debe comenzar con mayúscula y puede usarse dentro de otros componentes.”

¿Qué es composición en React?

“Es usar componentes dentro de otros, formando una UI como un árbol.”

🧩 EJEMPLO aplicado a tu carrito

function ProductItem() {
  return <p>🍌 Banana - $300</p>;
}

function ProductList() {
  return (
    <div>
      <ProductItem />
      <ProductItem />
    </div>
  );
}

🧠 FRASE PARA RECORDAR

Un componente React es una función con nombre en mayúscula que devuelve JSX. Podés usarlo como si fuera una etiqueta.

Learn React — Describing the UI

buildlogmmd — Sat, 19 Apr 2025 22:05:00 +0000

✅ Qué sí o sí tenés que saber

💡 CONCEPTO CLAVE

En React, describís la UI con funciones (componentes) que devuelven JSX.

✅ PARA EL DÍA A DÍA

Usás JSX para escribir cómo se ve la interfaz.
Cada componente React es una función que devuelve JSX.
Todo lo que quieras mostrar (texto, botones, imágenes, etc.) se escribe como JSX.
Solo puede haber un elemento padre en el return.

💼 PARA ENTREVISTAS TÉCNICAS

¿Qué es JSX?

“JSX es una extensión de JavaScript que permite describir interfaces de usuario como si fuera HTML, pero con toda la lógica de JS.”

¿Qué es un componente React?

“Es una función que devuelve JSX. Representa una parte de la interfaz.”

🧩 EJEMPLO carrito

function ProductItem() {
  return (
    <div>
      <h2>Manzana</h2>
      <p>$500</p>
      <button>Agregar al carrito</button>
    </div>
  );
}

🧠 FRASE PARA RECORDAR

Un componente React es una función que devuelve una parte de la UI usando JSX.

When to Use `type` vs `interface` in TypeScript

buildlogmmd — Sat, 19 Apr 2025 16:29:53 +0000

✅ Use `interface` when:

You’re defining data models (User, Product, Order)
You want to extend later (e.g. interface Admin extends User)
You’re working with classes
You need declaration merging (e.g. in libraries or configs)

interface Product {
  id: string;
  name: string;
}

✅ Use `type` when:

You need a union or intersection
You’re working with primitives, tuples or functions
You want to compose types (e.g. type A = B & C)
You’re defining utility types

type ID = string | number;
type ProductWithStock = Product & { stock: number };

🧭 Simple rule of thumb:

For data models → use interface

For type combinations → use type

✍️ Part of my personal cheatsheet at buildlogmmd – for fast recall in work situations.

Starting a New Project with Next.js + TypeScript

buildlogmmd — Sat, 19 Apr 2025 16:22:49 +0000

🧱 1. Create the project

npx create-next-app@latest your-project-name \
  --typescript \
  --app \
  --tailwind \
  --eslint \
  --src-dir \
  --import-alias "@/*"

This command sets up a modern and clean base including:

✅ App Router
✅ TypeScript support
✅ TailwindCSS for styling
✅ ESLint for clean code
✅ src/ as root directory
✅ @/ alias for cleaner imports

📁 2. Suggested folder structure

/app              ← routes using App Router
/src
  ├── components  ← reusable UI components
  ├── data        ← mock data
  ├── context     ← global state
  ├── hooks       ← reusable logic
  ├── types       ← TypeScript types
  └── styles      ← global styles
/public
  └── images      ← local assets

🧪 3. First commit

git init
git add .
git commit -m "chore: initialize Next.js app with TypeScript and Tailwind"

💡 This setup is ready to scale. It works for MVPs, real-world products.

✍️ Part of my devlog at buildlogmmd — clear structure, focused progress.

🧠 useState vs useContext – When to Use Each One

buildlogmmd — Sat, 19 Apr 2025 15:51:21 +0000

🔹 `useState`

Great for managing state inside one component or page
Useful for MVPs, quick tests or small apps
Easy to write, less setup
But not ideal for growing or multi-page apps

🔸 `useContext`

Lets you share state between multiple components/pages
Perfect for global things like cart, authentication, dark mode, etc.
Needs a provider, but it’s how real-world apps are built
I’m using it now to build my shopping cart the professional way

✅ Mental pattern

If the state is used in just one place → useState
If it needs to be shared → useContext

✍️ Note to myself:

This post is part of my devlog. I write to grow, to stay focused, and maybe help others too.

💻 buildlogmmd – quiet devlog, strong progress

Use tsx for development

buildlogmmd — Mon, 14 Apr 2025 11:17:27 +0000

✅ Commit

chore: use tsx for development

🛠️ Command

npm install --save-dev tsx

📄 package.json (scripts)

"scripts": {
  "dev": "tsx watch src/server.ts"
}

▶️ Run the server

npm run dev

Why we use `tsx` instead of `ts-node` or `ts-node-dev`

ts-node runs TypeScript without compiling but has no reload.
ts-node-dev adds auto-reload but doesn't work well with import/export and ESM.
tsx is fast, needs no config, and supports import, await, and "type": "module" out of the box.

We use tsx because it's simple, modern, and fully compatible with the current JavaScript module standard (ESM).

What is ESM?

ESM = ECMAScript Modules

It is the modern way to import and export code in JavaScript and TypeScript.

Key features:

Uses import / export
Requires "type": "module" in package.json
Allows await at the top level (no need for async functions)
Works in both Node.js and browsers

Example (ESM)

import express from "express";

export default app;

ESM is now the standard. tsx supports it without extra setup.

Setup Express and add /health route

buildlogmmd — Mon, 14 Apr 2025 10:41:41 +0000

Commit

chore: setup Express and add /health route

Commands

npm install express
npm install --save-dev @types/express

Files

📄 src/app.ts

import express from "express";

const app = express();

app.get("/health", (_req, res) => {
  res.status(200).json({ status: "ok" });
});

export default app;

📄 src/server.ts

import app from "./app";

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

📄 Update package.json (in "scripts")

"scripts": {
  "dev": "tsx watch src/server.ts"
}

Verification

Run the development server:

npm run dev

Open your browser or use a tool like Postman:

GET http://localhost:3001/health

Expected response:

{ "status": "ok" }

Next step:

chore: add Jest and Supertest with health route test

DEV Community: buildlogmmd

Workflow base en Next.js + TypeScript: de la historia de usuario al listado funcional

🧩 Workflow: Crear un listado de productos

🧠 1. Definí la historia de usuario

📦 2. Creá los datos simulados (mock)

🧾 3. Definí el tipo o interface

🧩 4. Creá el componente ProductCard

🖼️ 5. Mostralos en la página

✅ 6. Commit

📘 Patrón mental que estás aplicando

Rendering Lists – React Docs

✅ ¿Qué quiere enseñarte React en esta sección?

🧠 Párrafo resumen:

📌 React quiere que sepas sí o sí:

Conditional rendering – React Docs

✅ ¿Qué quiere enseñarte React en esta sección?

🧠 Párrafo resumen:

📌 Técnicas que React quiere que sepas:

Learn React - Writing Markup with JSX

✅ 4. Writing Markup with JSX — Lo esencial

💡 CONCEPTO CLAVE

✅ PARA EL DÍA A DÍA

🧩 Ejemplo aplicado a tu carrito

💼 PARA ENTREVISTAS TÉCNICAS

🧠 FRASE PARA RECORDAR

Learn React - Importing and Exporting Components

✅ 3. Importing and Exporting Components — Lo esencial

💡 CONCEPTO CLAVE

✅ PARA EL DÍA A DÍA

💼 PARA ENTREVISTAS TÉCNICAS

🧠 FRASE PARA RECORDAR

Learn React - Your First Component

✅ 2. Your First Component — Lo esencial

💡 CONCEPTO CLAVE

✅ PARA EL DÍA A DÍA

💼 PARA ENTREVISTAS TÉCNICAS

🧩 EJEMPLO aplicado a tu carrito

🧠 FRASE PARA RECORDAR

Learn React — Describing the UI

✅ Qué sí o sí tenés que saber

💡 CONCEPTO CLAVE

✅ PARA EL DÍA A DÍA

💼 PARA ENTREVISTAS TÉCNICAS

🧩 EJEMPLO carrito

🧠 FRASE PARA RECORDAR

When to Use `type` vs `interface` in TypeScript

✅ Use interface when:

✅ Use type when:

🧭 Simple rule of thumb:

Starting a New Project with Next.js + TypeScript

🧱 1. Create the project

📁 2. Suggested folder structure

🧪 3. First commit

🧠 useState vs useContext – When to Use Each One

🔹 useState

🔸 useContext

✅ Mental pattern

Use tsx for development

✅ Commit

🛠️ Command

📄 package.json (scripts)

▶️ Run the server

Why we use tsx instead of ts-node or ts-node-dev

What is ESM?

Key features:

Example (ESM)

Setup Express and add /health route

Commit

Commands

Files

Verification

🧩 4. Creá el componente `ProductCard`

✅ Use `interface` when:

✅ Use `type` when:

🔹 `useState`

🔸 `useContext`

Why we use `tsx` instead of `ts-node` or `ts-node-dev`