Cómo empezar con React JS

React JS es una biblioteca de JavaScript desarrollada por Facebook para construir interfaces de usuario (UI). Aquí te explico brevemente cómo funciona:

Componentes:

React permite la creación de componentes, que son bloques de construcción personalizados que se pueden anidar, gestionar y reutilizar en tu código.
Cada componente tiene su propio estado y propiedades (props).

Estado y Propiedades (Props):

El estado es una representación de los datos en un punto específico en el tiempo, mientras que las propiedades son configuraciones para los componentes.
Los cambios en el estado o las propiedades de un componente desencadenan una nueva renderización de este.

Virtual DOM:

React mantiene una versión ligera del DOM actual en memoria conocida como Virtual DOM.
Cuando se produce un cambio en el estado o las propiedades, React crea un nuevo Virtual DOM y lo compara con el anterior para determinar las diferencias.
Luego, solo actualiza el DOM real con estas diferencias, lo que es mucho más rápido que volver a renderizar todo el DOM.

Renderización:

React determina qué componentes necesitan ser re-renderizados comparando el nuevo Virtual DOM con el anterior, y solo actualiza las partes del DOM que han cambiado.
Eventos y Datos:

React proporciona un sistema de manejo de eventos para capturar y responder a los eventos del usuario, lo que facilita la actualización del estado de la aplicación en respuesta a las interacciones del usuario.

Herramientas y Ecosistema:

React tiene un ecosistema robusto que incluye enrutamiento, gestión de estado con Redux o Context API, y muchas otras bibliotecas y herramientas que facilitan la construcción de aplicaciones complejas.

React JS facilita la construcción de interfaces de usuario interactivas y eficientes, y es ampliamente utilizado en la industria del desarrollo web.

Cómo empezar a trabajar en React JS

Instalación de Node.js y npm:

Asegúrate de tener Node.js y npm instalados en tu máquina. Si no los tienes, descarga e instala Node.js desde su sitio web oficial, lo cual también instalará npm (Node Package Manager).

Crear un Nuevo Proyecto de React:

Utiliza Create React App (CRA), una herramienta oficial para generar esqueletos de proyectos React. Abre la terminal o línea de comandos y ejecuta:

npx create-react-app mi-aplicacion
cd mi-aplicacion

Esto creará un nuevo proyecto de React llamado “mi-aplicacion” y navegará a la carpeta del proyecto.

Explora la Estructura del Proyecto:

• Dentro de la carpeta del proyecto, encontrarás varias subcarpetas y archivos. Los más importantes son:
• src/: Donde vive el código fuente de tu aplicación.
• public/: Donde se encuentra el archivo index.html principal.
• src/index.js: El punto de entrada de tu aplicación.
• src/App.js: Un componente de React básico.

Iniciar la Aplicación:

En la línea de comandos, ejecuta:

npm start

Esto iniciará un servidor de desarrollo y abrirá tu aplicación en una nueva pestaña del navegador.

Desarrollo:

Comienza a construir tu aplicación editando los archivos en la carpeta src/.

Puedes crear nuevos componentes, importar bibliotecas y más.

Instalación de Bibliotecas Adicionales:

Si necesitas bibliotecas adicionales, como react-router-dom para el enrutamiento, instálalas con npm o yarn. Por ejemplo:

npm install react-router-dom

Depuración y Herramientas:
Instala la extensión React DevTools para tu navegador para ayudarte a depurar tu aplicación.

Construir y Desplegar:
Una vez que tu aplicación esté completa, ejecuta:

npm run build

Esto creará una versión optimizada de tu aplicación en la carpeta build/. Luego puedes desplegar esta carpeta en un servidor web o utilizar una plataforma de despliegue.

Ejemplo de rutas en React JS

Veamos un ejemplo sencillo de uso de rutas en React para una web en la que tengo un grid de fichas de personajes y al hacer clic en una de ellas se abre la ficha.

Para crear un sistema de rutas en React, normalmente se utiliza una biblioteca llamada react-router-dom. Veamos un ejemplo simplificado de cómo podrías implementar un sistema de rutas:

Instalación de react-router-dom:
Primero, necesitas instalar la biblioteca react-router-dom en tu proyecto:

<code>npm install react-router-dom</code>

Configuración de Rutas:
Configura las rutas en tu aplicación utilizando los componentes proporcionados por react-router-dom:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// Componente que renderiza el grid de fichas de personajes
const CharacterGrid = ({ characters }) => {
  return (
    <div>
      {characters.map(character => (
        <Link key={character.id} to={`/character/${character.id}`}>
          <div>{character.name}</div>
        </Link>
      ))}
    </div>
  );
};

// Componente que renderiza la ficha individual de un personaje
const CharacterDetail = ({ match }) => {
  const characterId = match.params.id;
  // Suponiendo que tienes una función fetchCharacter para obtener los datos del personaje
  const character = fetchCharacter(characterId); 
  return (
    <div>
      <h1>{character.name}</h1>
      {/* ...resto de los detalles del personaje */}
    </div>
  );
};

// Componente principal de la aplicación
const App = () => {
  const characters = []; // Suponiendo que tienes una lista de personajes
  return (
    <Router>
      <Route exact path="/" render={() => <CharacterGrid characters={characters} />} />
      <Route path="/character/:id" component={CharacterDetail} />
    </Router>
  );
};

export default App;

• Se importa BrowserRouter, Route, y Link de react-router-dom.
• Se crea un componente CharacterGrid que renderiza un grid de fichas de personajes. Cada ficha es un enlace (Link) que navega a la ruta /character/:id, donde :id es el identificador del personaje.
• Se crea un componente CharacterDetail que renderiza los detalles de un personaje individual. El identificador del personaje se obtiene de los match.params proporcionados por react-router-dom.
• Se crea un componente App que configura las rutas de la aplicación utilizando los componentes Route de react-router-dom. Se define una ruta para la página principal (/) que renderiza CharacterGrid, y una ruta para la página de detalles de personaje (/character/:id) que renderiza CharacterDetail.

El array de objetos que representa a los personajes

Cada objeto representa a un personaje y contiene un id, un name, y otra información que podrías querer mostrar en las fichas o en la página de detalles del personaje:

const characters = [
  {
    id: 1,
    name: 'Naruto Uzumaki',
    anime: 'Naruto',
    description: 'Naruto Uzumaki es un joven ninja con un sueño: convertirse en el Hokage de la Aldea Oculta de la Hoja.',
    image: 'url_de_imagen_naruto.jpg'
  },
  {
    id: 2,
    name: 'Sasuke Uchiha',
    anime: 'Naruto',
    description: 'Sasuke Uchiha es un talentoso ninja con un pasado trágico, lo que lo lleva a buscar poder a cualquier costo.',
    image: 'url_de_imagen_sasuke.jpg'
  },
  {
    id: 3,
    name: 'Luffy',
    anime: 'One Piece',
    description: 'Monkey D. Luffy es un joven pirata con el sueño de convertirse en el Rey de los Piratas y encontrar el tesoro One Piece.',
    image: 'url_de_imagen_luffy.jpg'
  },
  // ...otros personajes
];

Este array se puede utilizar en tu aplicación de React para renderizar el grid de fichas de personajes y las páginas de detalles de los personajes. Por ejemplo, podrías pasar el array characters como prop al componente CharacterGrid en el ejemplo de enrutamiento anterior.

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const characters = [
  {
    id: 1,
    name: 'Naruto Uzumaki',
    anime: 'Naruto',
    description: 'Naruto Uzumaki es un joven ninja con un sueño: convertirse en el Hokage de la Aldea Oculta de la Hoja.',
    image: 'url_de_imagen_naruto.jpg'
  },
  // ...otros personajes
];

const CharacterGrid = ({ characters }) => {
  return (
    <div>
      {characters.map(character => (
        <Link key={character.id} to={`/character/${character.id}`}>
          <div>{character.name}</div>
        </Link>
      ))}
    </div>
  );
};

const CharacterDetail = ({ match }) => {
  const characterId = match.params.id;
  const character = characters.find(char => char.id === parseInt(characterId));
  return (
    <div>
      <h1>{character.name}</h1>
      {/* ...resto de los detalles del personaje */}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Route exact path="/" render={() => <CharacterGrid characters={characters} />} />
      <Route path="/character/:id" component={CharacterDetail} />
    </Router>
  );
};

export default App;

Si decides mantener el array en un archivo separado, asegúrate de exportar el array desde ese archivo e importarlo en tu archivo principal. Por ejemplo, si el array está en un archivo llamado characters.js, tu importación se vería así:

import { characters } from './characters.js';

Y tu archivo characters.js se vería así:

export const characters = [
  // ...definición de los personajes
];

Con estos cambios, ahora estás pasando el array characters como una prop al componente CharacterGrid, y estás utilizando ese mismo array para encontrar y renderizar los detalles del personaje en el componente CharacterDetail.