¿Qué es React? Descubre sus características, ventajas y cómo empezar a usarlo

React se ha convertido en una de las librerías más populares para el desarrollo de interfaces de usuario modernas. Gracias a su arquitectura basada en componentes y su rendimiento optimizado con el DOM Virtual, es una de las opciones más acertadas para la creación de aplicaciones web escalables y rápidas. En este artículo, vamos a explorar qué es React, sus principales características, cuándo elegirlo frente a VanillaJS y cómo instalarlo utilizando Vite.

¿Qué es React?

Así que vamos por el principio, React es una librería de JavaScript de código abierto creada por Facebook (Meta) en 2013 para desrrollar interfaces de usuario (UI) dinámicas y eficientes. Su enfoque principal es el desarrollo de aplicaciones basadas en componentes, donde cada parte de la interfaz (botones, formularios, menús) se crea como un componente reutilizable.

Características:

• DOM Virtual: Optimiza el rendimiento al actualizar solo las partes necesarias del DOM real.
• JSX: Sintaxis que mezcla HTML con JavaScript para una escritura más intuitiva.
• Unidireccionalidad: Flujo de datos en una sola dirección (del padre al hijo) vía props. Los cambios del estado se inician en el padre y se propagan hacia los hijos.

¿Por qué usar React?

Es importante tener un buen conocimiento de JavaScript antes de aprender React, ya que esta librería se basa en conceptos clave como funciones, manejo del DOM, manipulación de eventos y programación asincrónica. Incluso si ya sabes, repasar el JavaScript más usado para la gestión de componente sy renderización, esto facilitará el desarrollo eficiente con React.

1. Componentes Reutilizables: Crea una vez, úsalo en cualquier lugar de tu aplicación.
2. Alto Rendimiento: Gracias al DOM Virtual, se evitan actualizaciones que consuman recursos innecesarios.
3. Ecosistema Rico: Herramientas como React Router, Redux, Next.js…
4. Comunidad Activa: Soluciones y librerías para casi cualquier necesidad.
5. Multiplataforma: Con React Native, puedes llevar tus componentes a aplicaciones móviles.

Decalarativo vs Impertivo

En programación hay dos enfoques … imperativo y declarativo. React utiliza un enfoque declarativo, lo cual facilita el renderizado de los componentes y hace que sea más sencillo crear interfaces de usuario con él.

Imperativo

Al programar con un enfoque imperativo, escribes los pasos que deben seguirse paso a paso para llevar a cabo una tarea. Es decir, definir cada instrucción que que se debe ejecutar para manipular el DOM.

// ### VanillaJS: Contador de estrellas (imperativo)
let estrellasDescubiertas = 0;
const boton = document.querySelector('#boton-descubrir');
const contador = document.querySelector('#contador');

boton.addEventListener('click', () => {
  estrellasDescubiertas++;
  contador.textContent = `🌌 Estrellas descubiertas: ${estrellasDescubiertas}`;
});

<button id="boton-descubrir" class="boton-espacial">
  Descubrir nueva estrella
</button>
<div id="contador">🌌 Estrellas descubiertas: 0</div>

en el ejemplo se ve como tenemos que crear el botón, asignarle un evento, cuando se interactúe cambia, y aplica cierta modificación.

Declarativo

En el enfoque declarativo, el cual usa React, se describe qué se quiere lograr, en lugar del paso a paso para conseguirlo

// ### React: Contador de estrellas con el estado de React (declarativo)
function ContadorEstrellas() {
  const [estrellas, setEstrellas] = useState(0);
  
  return (
    <button 
      className="boton-espacial"
      onClick={() => setEstrellas(estrellas + 1)}
    >
      🌌 Estrellas descubiertas: 
      <span className="contador">{estrellas}</span>
    </button>
  );
}

En este caso, simplemente se describe el resultado esperado y React se encarga de gestionar los cambios en el DOM de manera eficiente.

Un enfoque declarativo por lo general aporta un código más legible, mantenible y más fácil de escalar.

React vs VanillaJS: ¿Cuándo elegir cada uno?

Antes de decidir entre React y VanillaJS, es importante entender en qué situaciones es conviene usar cada uno. React es ideal para aplicaciones dinámicas y escalables, mientras que VanillaJS es suficiente para proyectos pequeños o con requisitos simples. A continuación, una tabla comparativa entre ambos enfoques:

Instalación de React con Vite: Guía paso a paso

Requisitos

• Vamos a usar Vite para la instalción, este requiere un versión de Node.js 18+ incluso 20+
• Al instalar Node.js se instalará también npm (es el que te voy a recomendar aquí que uses), pero se puede usar también otro gestor de paquetes como yarn o pnpm.

Proceso de instalación

Abrir consola:

Iniciar la consola en el directorio donde queramos crear el proyecto

Crear proyecto:

npm create vite@latest mi-app-react -- --template react

te avisará si no tienes la última versión Vite instalada, si avisa, para proceder tendremos que introducir (y)

Navegar al directorio:

cd mi-app-react

Instalar dependencias:

npm install

Ejecutar editor (Visual Studio Code), si no lo hemos abierto ya:

code .

Iniciar servidor de desarrollo:

npm run dev

Una vez arrancado el servidor, mostrará, en consola algo así:

VITE v6.2.3  ready in 520 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Si entonces, en el navegador vamos a http://localhost:5173/ veremos lo que React está renderizando gracias al código que Vite genera

Explicación de archivos generados

Si has realizado los pasos previos, ahora tendrás una estructura igual o muy similar a esta:

mi-app-react/
├─ node_modules/   
├─ public/
├─ src/
│  ├─ assets/
│  ├─ App.css
│  ├─ App.jsx        # Componente principal
│  ├─ index.css      # Estilos globales
│  └─ main.jsx       # Punto de entrada de React
├─ .gitignore
├─ index.html        # HTML base
├─ package.json      # Dependencias/paquetes usados
└─ vite.config.js    # Configuración de Vite

Explicación de los archivos

• node_modules/: Contiene todas las dependencias del proyecto.
• public/: Archivos estáticos (imágenes, fuentes).
• src/: Código fuente de la aplicación.
  • App.jsx: Componente principal de la aplicación. El que llevará el primer component de react que incluirá todos los demás. Este será el padre del resto.

function App() {
 ...
 return (
     <>
       ...
     </>
   )
}

• main.jsx: Punto de entrada donde React se monta en el DOM.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

• index.html: Documento HTML principal.

<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

• package.json: Archivo de configuración de dependencias y scripts. Aquí además están los scripts que ejecutan el código como npm run dev que son modificables

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
},

• vite.config.js: Archivo de configuración de Vite.

Conclusión

Si bien VanillaJS es útil para proyectos pequeños, React brinda estructura y herramientas profesionales para aplicaciones escalables. Su arquitectura basada en componentes no solo mejora la legibilidad y el mantenimiento del código, sino que también facilita esa escalabilidad para poder llevar a cabo proyectos de cualquier tamaño. Además, la configuración inicial es rápida y sencilla al utilizar React con Vite para instalarlo.