React para JavaScript (Node.js): guía completa con ejemplos

¿Qué es React y para qué sirve?

React es una biblioteca JavaScript declarativa, eficiente y flexible de código abierto para crear interfaces de usuario (UI). Fue desarrollada por ingenieros de Facebook (ahora Meta) en 2013 y desde entonces se ha convertido en una de las tecnologías frontend más populares del mundo. React permite a los desarrolladores crear aplicaciones web complejas, interactivas y escalables, dividiendo la interfaz en componentes independientes y reutilizables.

¿Para qué sirve React?

\n
• Enfoque basado en componentes: React construye la UI a partir de bloques aislados (componentes), cada uno de los cuales gestiona su propio estado. Esto simplifica el desarrollo, las pruebas y el mantenimiento del código.
\n
• Declaratividad: Tú describes cómo debe verse la UI para cada estado de la aplicación, y React actualiza y renderiza eficientemente solo los componentes que han cambiado. Esto hace que el código sea más predecible y fácil de depurar.
\n
• DOM virtual (Virtual DOM): React utiliza una copia ligera del DOM real (Document Object Model). Cuando cambia el estado de la aplicación, React primero actualiza el DOM virtual, luego lo compara con la versión anterior (diffing) y aplica el conjunto mínimo de cambios al DOM real. Esto mejora significativamente el rendimiento, especialmente en aplicaciones con actualizaciones frecuentes.
\n
• Gran comunidad y ecosistema: React tiene una de las comunidades de desarrolladores más grandes, lo que significa una gran cantidad de soluciones listas, bibliotecas, herramientas (React Router, Redux, Next.js, Gatsby) y materiales de aprendizaje.
\n
• Versatilidad: React se puede usar no solo para aplicaciones web, sino también para aplicaciones móviles (React Native), de escritorio (Electron) e incluso aplicaciones de realidad virtual (React 360).
\n

React es adecuado para proyectos de cualquier escala: desde aplicaciones simples de una sola página (SPA) hasta sistemas empresariales complejos y redes sociales.

Instalación de React (npm)

Para trabajar con React necesitarás Node.js (versión 14 o superior) y un gestor de paquetes npm (o yarn). La forma más sencilla de iniciar un nuevo proyecto es usar la herramienta oficial Create React App.

# Instalación global de Create React App (opcional)\nnpm install -g create-react-app\n\n# Creación de un nuevo proyecto con el nombre my-app\nnpx create-react-app my-app\n\n# Navegar al directorio del proyecto\ncd my-app\n\n# Iniciar el servidor de desarrollo\nnpm start

Después de ejecutar estos comandos, tu navegador se abrirá automáticamente en http://localhost:3000 con la aplicación React en funcionamiento.

Importante: npx es una herramienta que ejecuta paquetes sin instalarlos globalmente. Si tienes una versión antigua de npm (< 5.2), usa npm install -g create-react-app y luego create-react-app my-app.

Método alternativo (instalación manual):

# Crea una carpeta para el proyecto e inicializa npm\nmkdir my-react-app && cd my-react-app\nnpm init -y\n\n# Instala React y ReactDOM\nnpm install react react-dom\n\n# Instala Babel para la transpilación de JSX y Webpack para el empaquetado (requiere configuración)\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

Sin embargo, para principiantes se recomienda encarecidamente usar Create React App, ya que se encarga de toda la configuración compleja del empaquetador (Webpack, Babel).

Inicio rápido con un ejemplo de código

Después de crear el proyecto con Create React App, abre el archivo src/App.js. Este es el componente principal de tu aplicación. Vamos a crear una aplicación simple "¡Hola, Mundo!" con un botón que cambia el título.

// src/App.js\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {