🚀 Aprende desarrollo web moderno

React.js + Next.js desde cero

Las herramientas más populares para construir páginas web rápidas, modernas y profesionales. Sin complicaciones.

Guía completa ↗

3 pasospara empezar

6 recursoscurados

Live codepara practicar

¿Por qué aprenderlos?

Son las tecnologías más usadas en la industria hoy en día

📈

Muy demandado

Miles de empresas buscan desarrolladores con estas habilidades.

⚡

Fácil de aprender

Con HTML y JavaScript básico puedes empezar hoy mismo.

🌐

Gran comunidad

Millones de recursos, tutoriales y ayuda disponible en línea.

📦

Reutilización

Crea componentes una vez y úsalos en toda tu aplicación.

React vs Next.js — ¿cuál elijo?

En realidad se usan juntos, pero aquí está la diferencia

Librería UI

React.js

Construye la interfaz visual con piezas reutilizables llamadas "componentes".

✓ Botones, formularios, listas
✓ Lógica visual interactiva
✓ Actualización automática

Framework completo

Next.js

Toma React y le agrega rutas, servidor, SEO y mucho más de forma automática.

✓ Páginas y rutas automáticas
✓ Carga ultrarrápida
✓ Listo para producción

¿Cómo empiezo?

Solo 3 pasos para tener tu primera app corriendo

Instala Node.js

Node.js es el motor que necesitas en tu computadora. Descárgalo gratis desde nodejs.org — elige la versión LTS (la más estable).

Crea tu proyecto

Abre tu terminal (cmd en Windows, Terminal en Mac/Linux) y escribe:

npx create-next-app@latest mi-proyecto

Inicia el servidor

Entra a la carpeta del proyecto e inicia la app. Luego abre tu navegador en localhost:3000.

# Entra al proyecto cd mi-proyecto # Inicia la app npm run dev

Prueba el código en vivo

Edita el código y presiona Ejecutar para ver el resultado

// Un componente básico en React
// Es como una "pieza" de tu página web

function Saludo() {
  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h2 style={{ color: "#534AB7" }}>¡Hola, mundo!</h2>
      <p>Este es mi primer componente en React 🎉</p>
    </div>
  );
}

✏️ Edita el código y prueba los cambios

Resultado

Recursos recomendados

Los mejores lugares para seguir aprendiendo

Documentaciónreact.devLa documentación oficial de React. Interactiva, clara y con ejemplos.↗ react.dev Documentaciónnextjs.org/docsGuía oficial de Next.js con tutoriales paso a paso desde cero.↗ nextjs.org/docs Gratisjavascript.infoEl mejor curso gratuito de JavaScript para prepararte antes de React.↗ javascript.info VideofreeCodeCampCursos completos de React en YouTube, en español e inglés, completamente gratis.↗ freeCodeCamp HerramientaCodeSandboxPractica React en el navegador sin instalar nada. Plantillas listas en un clic.↗ CodeSandbox HerramientaStackBlitzEditor online ultrarrápido con soporte completo para proyectos Next.js.↗ StackBlitz

Preguntas frecuentes

Lo que todos se preguntan al principio

¿Listo para aprender?

Pregúntame cualquier duda sobre React o Next.js

Ver mi primer componente ↗¿Qué proyecto hago primero? ↗