Saltar al contenido principal
Logo de JSCamp
M04·React

Primeros pasos en React

Aprende a crear tu primer componente React sin JSX y entiende cómo funciona por debajo

midudev

Más clases y directos en YouTube

Suscribirse

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 JSXconst 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 tarjetaroot.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.