14-Archivos JSX en React

  Introducción a JSX

En React, JSX es una extensión de sintaxis que nos permite escribir código similar a HTML dentro de archivos JavaScript. Esto es una gran ventaja sobre el JavaScript tradicional donde teníamos que escribir HTML como strings.

¿Qué veremos en este tutorial?

  1. Diferencias entre JavaScript tradicional y JSX

  2. Cómo crear y trabajar con archivos .jsx

  3. Estructura básica de un proyecto React

  4. Renderizado de componentes

1. De JavaScript Tradicional a JSX

JavaScript tradicional (sin React)

javascript
// Teníamos que escribir HTML como strings
const elemento = '<div class="contenedor"><h1>Hola Mundo</h1></div>';
document.getElementById('root').innerHTML = elemento;

Con JSX en React

jsx
// ¡Podemos escribir HTML directamente!
const elemento = (
  <div className="contenedor">
    <h1>Hola Mundo</h1>
  </div>
);

ReactDOM.createRoot(document.getElementById('root')).render(elemento);

Ventajas de JSX:

  • Auto-completado de código

  • Mejor detección de errores

  • Más legible

  • Integración con herramientas de desarrollo

2. Configuración Inicial del Proyecto React

Estructura de archivos inicial:

text
mi-proyecto-react/
├── public/
│   └── index.html
├── src/
│   ├── index.jsx
│   ├── App.jsx
│   └── index.css
└── package.json

Archivo public/index.html

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App React</title>
</head>
<body>
    <!-- Punto de entrada de nuestra aplicación -->
    <div id="root"></div>
</body>
</html>

3. El Archivo Principal: index.jsx

jsx
// Importamos las dependencias necesarias
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';  // Importamos estilos
import App from './App';  // Importamos nuestro componente principal

// 1. Capturamos el elemento raíz del HTML
const rootElement = document.getElementById('root');

// 2. Creamos la raíz de React
const root = ReactDOM.createRoot(rootElement);

// 3. Renderizamos nuestra aplicación
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Explicación paso a paso:

Paso 1: Importamos React y ReactDOM

  • React: La biblioteca principal

  • ReactDOM: Para interactuar con el DOM

  • createRoot: Nueva API en React 18+ para crear la raíz

Paso 2: Encontramos el contenedor en el HTML

  • Usamos document.getElementById('root') para encontrar nuestro div con id "root"

Paso 3: Creamos y renderizamos

  • ReactDOM.createRoot() crea el punto de entrada

  • .render() muestra nuestro contenido

Importante: <React.StrictMode> es un wrapper que ayuda a detectar problemas potenciales durante el desarrollo.

4. Cambiando la Extensión a .jsx

¿Por qué usar .jsx en lugar de .js?

  1. Claridad: Indica que el archivo contiene JSX

  2. Herramientas: Mejor soporte en editores de código

  3. Convención: Estándar en la comunidad React

Cómo renombrar:

text
Antes: index.js
Después: index.jsx

Nota: Después de cambiar la extensión, debemos reiniciar el servidor de desarrollo:

bash
# Presiona Ctrl+C en la terminal
npm start
# O
yarn start

5. Creando Nuestro Primer Componente: App.jsx

jsx
// App.jsx
import React from 'react';
import './App.css';  // Podemos importar estilos específicos

// Definimos nuestro componente principal
function App() {
  return (
    <div className="app-container">
      <h1>¡Bienvenido a React!</h1>
      <p>Este es mi primer componente JSX</p>
      <button onClick={() => alert('¡Hola!')}>
        Haz clic aquí
      </button>
    </div>
  );
}

// Exportamos el componente
export default App;

6. Diferencias Clave entre HTML y JSX

HTML tradicionalJSX en React
classclassName
forhtmlFor
onclickonClick
style="color: red;"style={{color: 'red'}}
Comentarios <!-- -->{/* Comentario */}

Ejemplo de estas diferencias:

jsx
function EjemploDiferencias() {
  return (
    <div className="contenedor" style={{ backgroundColor: '#f0f0f0' }}>
      <label htmlFor="nombre">Nombre:</label>
      <input id="nombre" type="text" />
      
      {/* Este es un comentario en JSX */}
      <button onClick={() => console.log('Click!')}>
        Presionar
      </button>
    </div>
  );
}

7. Ejercicio Práctico: Crear un Componente JSX

Paso 1: Crea un nuevo archivo Saludo.jsx

jsx
// Saludo.jsx
import React from 'react';

function Saludo({ nombre }) {
  return (
    <div className="saludo-card">
      <h2>¡Hola, {nombre}!</h2>
      <p>Bienvenido al mundo de JSX y React</p>
      <small>Fecha: {new Date().toLocaleDateString()}</small>
    </div>
  );
}

export default Saludo;

Paso 2: Úsalo en App.jsx

jsx
// App.jsx actualizado
import React from 'react';
import Saludo from './Saludo';
import './App.css';

function App() {
  const usuarios = ['Ana', 'Carlos', 'María', 'Juan'];

  return (
    <div className="app-container">
      <h1>Lista de Saludos</h1>
      
      {usuarios.map((usuario, index) => (
        <Saludo key={index} nombre={usuario} />
      ))}
      
      <div className="contenedor-extra">
        <p>Este es un ejemplo de cómo JSX nos permite mezclar JavaScript y HTML</p>
      </div>
    </div>
  );
}

export default App;

8. Consejos y Buenas Prácticas

Estructura de Carpetas Recomendada:

text
src/
├── components/     # Componentes reutilizables
│   ├── Button.jsx
│   ├── Card.jsx
│   └── Header.jsx
├── pages/          # Páginas completas
│   ├── Home.jsx
│   └── About.jsx
├── App.jsx         # Componente principal
└── index.jsx       # Punto de entrada

Reglas de JSX:

  1. Solo un elemento padre: Cada componente debe retornar un solo elemento

  2. Cerrar todas las etiquetas: Las etiquetas deben cerrarse explícitamente

  3. className en lugar de class: Para atributos CSS

  4. Expresiones JavaScript: Usar {} para incluir JavaScript

Ejemplo de múltiples elementos:

jsx
// ❌ INCORRECTO
function ComponenteIncorrecto() {
  return (
    <h1>Título</h1>
    <p>Párrafo</p>
  );
}

// ✅ CORRECTO
function ComponenteCorrecto() {
  return (
    <div>
      <h1>Título</h1>
      <p>Párrafo</p>
    </div>
  );
}

// ✅ También correcto (usando Fragment)
function ComponenteConFragment() {
  return (
    <>
      <h1>Título</h1>
      <p>Párrafo</p>
    </>
  );
}

9. Solución de Problemas Comunes

Problema 1: Error después de cambiar a .jsx

Solución: Reinicia el servidor de desarrollo

bash
Ctrl + C
npm start

Problema 2: El componente no se muestra

Verifica:

  1. ¿Exportaste el componente? export default Componente

  2. ¿Importaste correctamente? import Componente from './Componente'

  3. ¿Estás usando el componente? <Componente />

Problema 3: Errores de sintaxis JSX

Recuerda:

  • Las etiquetas deben cerrarse: <img />, <input />

  • Usar className no class

  • Las expresiones JavaScript van entre {}

10. Resumen Final

JSX transforma la forma en que escribimos interfaces en JavaScript:

  1. Mezcla HTML y JavaScript de forma natural

  2. Componentes reutilizables como bloques de construcción

  3. Sintaxis más clara y fácil de mantener

  4. Mejor experiencia de desarrollo con herramientas modernas

Próximos pasos recomendados:

  1. Aprender sobre props y state

  2. Explorar hooks como useState y useEffect

  3. Crear componentes más complejos

  4. Aprender sobre enrutamiento con React Router

Recursos Adicionales

¡Felicidades! Ahora comprendes los fundamentos de JSX en React. Sigue practicando creando más componentes y explorando las posibilidades que ofrece esta poderosa herramienta.

Comentarios

Publicar un comentario

Entradas más populares de este blog

11. Creando un proyecto react con create-react-app

    ¡Vamos a crearnos ahora nuestros proyectos de realidad! Vamos a ver dos formas. La primera va a ser con el clásico  Create React App , que, por cierto, tiene una gran ventaja: encontrarás muchísimos proyectos inicializados con esta herramienta. Es decir, podrás acceder a bastantes códigos fuente que usan este tipo de creación. Esta es la forma que también  React nos recomienda  para arrancar. Podemos verlo en su documentación oficial, donde se explica paso a paso cómo crear un proyecto con esta herramienta. Paso a paso: Creamos una carpeta raíz  para almacenar todos nuestros proyectos. Yo la llamé "React intensivo". Abrimos  Visual Studio Code  (nueva ventana) y arrastramos la carpeta dentro. Así usamos la interfaz gráfica, aunque también se puede hacer directamente por consola. Una vez dentro de la carpeta, abrimos una  nueva terminal  en VS Code. Según la documentación de React, el comando es: bash npx create-react-app < nombre-...
Leer más

29. useEffect

  Tutorial: 29. useEffect en React Introducción a useEffect useEffect es uno de los Hooks más importantes en React que nos permite ejecutar efectos secundarios en nuestros componentes funcionales. Los efectos secundarios son operaciones que pueden incluir peticiones a APIs, suscripciones, manipulación del DOM, etc. 1. Sintaxis Básica La sintaxis básica de useEffect es: javascript useEffect (() => {    // Código a ejecutar }, []) // Array de dependencias Ejemplo visual de la sintaxis: text useEffect(()=>{},[]) 2. Ejemplo Práctico: Sistema de Likes Vamos a construir un componente de likes para entender cómo funciona useEffect : javascript import { useState , useEffect } from "react" ; export function Prueba () {    const [ likes , setLikes ] = useState ( 0 );       const darLike = () => {      setLikes ( likes + 1 );    };       // useEffect ejecutando darLike un...
Leer más

38. 4 Routers

  Tutorial 38.4: Implementando Router en nuestra App de Películas Introducción a React Router Ahora que tenemos nuestra aplicación mostrando películas, necesitamos implementar navegación entre diferentes vistas. Vamos a crear rutas para: Ver la lista de películas (página principal) Ver el detalle de cada película Otras vistas futuras (búsqueda, favoritos, etc.) Paso 1: Estructura de carpetas Primero, vamos a organizar nuestro proyecto con una estructura más profesional: text src/ ├── assets/ ├── components/ │   ├── ContextMovieCard.jsx │   └── MovieCard.jsx ├── data/ ├── pages/ │   └── LandingPage.jsx ├── routers/ │   └── routes.jsx ├── App.css ├── App.jsx ├── index.css └── main.jsx Paso 2: Instalar React Router DOM Abrimos una terminal en nuestro proyecto 1-peliculas y ejecutamos: bash cd 1 -peliculas yarn add react-router-dom O con npm: bash npm install react-router-dom Paso 3: Crear componentes básicos MovieCard.jsx (Componente individual de película) j...
Leer más