Logo de JSCamp

Primeros pasos en React

En esta clase vamos a crear nuestra primera aplicación React desde cero. Por defecto, React recomienda instalar un framework para crear proyectos, pero nosotros vamos a hacerlo desde cero, paso a paso y de forma incremental.

Creando nuestro primer archivo React

Crea un nuevo archivo react.html en la carpeta de nuestro proyecto:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <!-- Aquí React renderizará nuestra aplicación -->
    <div id="root"></div>

    <!-- Cargar React y ReactDOM desde CDN -->
    <script type="module">
      import React from 'https://esm.sh/react?dev'
      import ReactDOM from 'https://esm.sh/react-dom/client?dev'

      // Crear un elemento h1 con React.createElement
      const titulo = React.createElement(
        'h1', // Tipo de elemento
        { style: { color: '#09f' } }, // Props (atributos)
        '¡Hola React!' // Contenido (children)
      )

      // Renderizar en el DOM
      const rootEl = document.querySelector('#root')
      const root = ReactDOMClient.createRoot(rootEl)
      root.render(titulo)
    </script>
  </body>
</html>

Abre este archivo en tu navegador y verás un título azul que dice “¡Hola React!”.

¿Qué está pasando aquí?

Vamos a desglosar cada parte del código:

1. Importamos React desde un CDN

import React from 'https://esm.sh/react?dev'
import ReactDOM from 'https://esm.sh/react-dom/client?dev'
  • Cargamos React y ReactDOM desde el CDN esm.sh
  • react es la biblioteca principal con la lógica de componentes
  • react-dom/client es el encargado de renderizar React en el navegador
  • No necesitamos instalar nada, todo funciona directamente en el navegador
  • El ?dev al final activa el modo desarrollo para mejores mensajes de error

💡 Nota: Esto es solo para aprender. En proyectos reales usaremos herramientas como Vite o Next.js que gestionan esto automáticamente.

2. Creamos un elemento con React.createElement

const titulo = React.createElement(
  'h1', // ¿Qué elemento? (h1, div, p, etc.)
  { style: { color: '#09f' } }, // ¿Qué propiedades? (className, style, etc.)
  '¡Hola React!' // ¿Qué contenido?
)

Esta función tiene tres parámetros:

  1. Tipo de elemento - El tag HTML que queremos crear ('h1', 'div', 'button', etc.)
  2. Props (propiedades) - Un objeto con los atributos del elemento (className, style, onClick, etc.)
  3. Children (hijos) - El contenido del elemento (texto, otros elementos, etc.)

Ejemplo equivalente en HTML puro:

<h1 style="color: #09f">¡Hola React!</h1>

3. Lo renderizamos en el DOM

const rootEl = document.querySelector('#root')
const root = ReactDOMClient.createRoot(rootEl)
root.render(titulo)
  • Seleccionamos el elemento con id="root" donde queremos renderizar
  • Creamos un root de React con createRoot()
  • Llamamos a render() para mostrar nuestro elemento React en el DOM

¿Por qué React.createElement es importante?

Nunca escribirás React.createElement a mano en el futuro, pero es fundamental entenderlo porque:

  • 🔍 Más adelante aprenderemos que JSX se convierte en createElement - El JSX es solo azúcar sintáctica
  • 🐛 Ayuda a debuguear errores - Entenderás mejor los mensajes de error
  • 🧠 Comprendes React más profundamente - Sabes qué pasa por debajo

Creando elementos más complejos

Ahora vamos a crear una estructura más elaborada. Añade este código después del anterior:

// Crear una tarjeta de empleo sin JSX
const tarjetaEmpleo = React.createElement(
  'article',
  { className: 'job-listing-card' },
  React.createElement('h3', null, 'Desarrollador Frontend'),
  React.createElement('small', null, 'TechCorp | Madrid'),
  React.createElement('p', null, 'Buscamos desarrollador con experiencia en React'),
  React.createElement('button', { className: 'button-apply-job' }, 'Aplicar')
)

// Renderizar la tarjeta
root.render(tarjetaEmpleo)

Estructura de elementos anidados

Cuando tienes múltiples hijos, puedes pasarlos como argumentos adicionales:

React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Título'),
  React.createElement('p', null, 'Párrafo'),
  React.createElement('button', null, 'Botón')
)

Equivalente en HTML:

<div class="container">
  <h1>Título</h1>
  <p>Párrafo</p>
  <button>Botón</button>
</div>

Como ves, con React.createElement el código se vuelve muy verboso y difícil de leer. Por eso existe JSX, que lo veremos próximamente.

Props: null vs objeto vacío

En el segundo parámetro de createElement puedes pasar:

  • null - Si no necesitas props
  • {} - Objeto vacío (equivalente a null)
  • { className: 'card' } - Props específicas
React.createElement('h1', null, 'Sin props')
React.createElement('h1', {}, 'Sin props también')
React.createElement('h1', { className: 'title' }, 'Con props')

Propiedades comunes en React

Algunas props importantes que usarás:

className (no class)

React.createElement('div', { className: 'container' }, 'Contenido')

⚠️ Usamos className en lugar de class porque class es una palabra reservada en JavaScript.

style

React.createElement('h1', { style: { color: 'red', fontSize: '24px' } }, 'Título rojo')

💡 Los estilos se pasan como un objeto JavaScript. Las propiedades CSS en kebab-case (font-size) se convierten a camelCase (fontSize).

onClick y eventos

React.createElement('button', { onClick: () => alert('¡Clic!') }, 'Haz clic')

📝 Los eventos en React usan camelCase: onClick, onChange, onSubmit, etc.

¿Por qué crear elementos así?

Te estarás preguntando: “¿Por qué no simplemente usar HTML?”

Buena pregunta. Comparemos:

JavaScript puro (lo que hacíamos antes):

const titulo = document.createElement('h1')
titulo.textContent = '¡Hola!'
titulo.style.color = 'blue'
document.body.appendChild(titulo)

React con createElement:

const titulo = React.createElement('h1', { style: { color: 'blue' } }, '¡Hola!')
root.render(titulo)

Ventajas de React:

  • ✅ Declarativo - Describes QUÉ quieres, no CÓMO hacerlo
  • ✅ Más fácil de mantener - Todo en un solo lugar
  • ✅ React gestiona el DOM - Tú solo describes la UI
  • ✅ Actualizaciones eficientes - React solo cambia lo necesario

Lo que hemos aprendido por ahora…

En esta clase has aprendido:

  • 🎯 Cómo cargar React desde un CDN
  • 🏗️ Qué es React.createElement y cómo funciona
  • 📦 Cómo renderizar elementos en el DOM con ReactDOM
  • 🔑 La diferencia entre className, style y otras props
  • 🌳 Cómo crear estructuras de elementos anidados

En la siguiente clase veremos JSX, que hace todo esto mucho más simple y legible. Pero ahora entiendes qué pasa por debajo, lo cual es fundamental.

💡 Recuerda: JSX es solo azúcar sintáctica. Al final, todo se convierte en React.createElement.