Compartir a través de

Tutorial: React en Windows para principiantes

  • Artículo

Si no está familiarizado con React, esta guía le ayudará a conocer algunos aspectos básicos.

Requisitos previos

Algunos términos y conceptos básicos

React es una biblioteca de JavaScript para crear interfaces de usuario.

  • Es de código abierto, lo que significa que puede contribuir mediante la notificación de problemas o solicitudes de incorporación de cambios. (Igual que en estos documentos).

  • Es declarativo, lo que significa que puede escribir el código que desee y React toma ese código declarado y realiza todos los pasos de JavaScript y DOM para obtener el resultado deseado.

  • Está basado en componentes, lo que significa que las aplicaciones se crean mediante módulos de código independientes prefabricados y reutilizables que administran su propio estado y se pueden unir mediante el marco de React, lo que permite pasar datos mediante la aplicación mientras se mantiene el estado fuera del DOM.

  • El lema de React es "Aprenda una vez, escriba en cualquier lugar". La intención es reutilizar el código y no hacer suposiciones sobre cómo se usará la interfaz de usuario de React con otras tecnologías, sino hacer los componentes reutilizables sin necesidad de volver a escribir el código existente.

  • JSX es una extensión de sintaxis para JavaScript escrita para su uso con React que se parece a HTML, pero en realidad es un archivo JavaScript que se debe compilar o traducir a JavaScript normal.

  • DOM virtual: DOM significa Document Object Model y representa la interfaz de usuario de la aplicación. Cada vez que cambia el estado de la interfaz de usuario de la aplicación, se actualiza el DOM para representar el cambio. Cuando el DOM se actualiza con frecuencia, el rendimiento se vuelve lento. Un DOM virtual es solo una representación visual del DOM, por lo que cuando cambia el estado de la aplicación, se actualiza el DOM virtual en lugar del DOM real, lo que reduce el costo de rendimiento. Es una representación de un objeto DOM, como una copia ligera.

  • Vistas: son lo que el usuario ve representado en el explorador. En React, una vista está relacionada con el concepto de elementos de representación que desea que un usuario vea en la pantalla.

  • Estado: hace referencia a los datos almacenados por las diferentes vistas. El estado normalmente se basará en quién es el usuario y en lo que está haciendo. Por ejemplo, el inicio de sesión en un sitio web puede mostrar el perfil de usuario (vista) con su nombre (estado). Los datos de estado cambiarán en función del usuario, pero la vista seguirá siendo la misma. El estado se usa para lograr la mayor parte de la interactividad del usuario con la aplicación.

  • Propiedades de componentes: es una forma de que el componente principal pase información como valor o datos (incluidos objetos, matrices y funciones) a sus componentes secundarios. Las propiedades son de solo lectura y el componente secundario no puede actualizarlas.

Pruebe a usar React en Visual Studio Code

Hay muchas maneras de crear una aplicación con React (consulte Introducción a React para obtener ejemplos). En este tutorial se explica cómo usar vite para avanzar rápidamente en la configuración de una aplicación de React en funcionamiento para que pueda verla en ejecución y centrarse en experimentar con el código, sin preocuparse de las herramientas de compilación.

  1. Use vite en Windows o WSL (consulte los requisitos previos anteriores) para crear un proyecto nuevo: npm create vite@latest hello-world -- --template react

  2. Cambie de directorios para entrar en la carpeta de la nueva aplicación: cd hello-world, instale las dependencias: npm install y, a continuación, inicie el servidor de desarrollo local: npm run dev

    La nueva aplicación Hola mundo de React se compilará y abrirá el explorador web predeterminado para mostrar que está en ejecución en http://localhost:5173.

  3. Detenga la ejecución de la aplicación de React (Ctrl+c) y abra sus archivos de código en VS Code; para ello, escriba: code .

  4. Busque el archivo src/App.jsx y busque la sección de encabezado, que contiene:

    <p>Edit <code>src/App.jsx</code> and save to test HMR</p>

    Cámbielo para que contenga:

    <p>Hello World! This is my first React app.</p>

  5. Abra la ventana del terminal e inicie el servidor de desarrollo local: npm run dev o puede usar el terminal integrado de VS Code (Ctrl + ') e iniciar el servidor de desarrollo desde allí.

    Captura de pantalla de la aplicación Hola mundo de React en el explorador

A lo largo del desarrollo de la aplicación React, puede mantener el servidor de desarrollo local en ejecución y todos los cambios se representarán inmediatamente en http://localhost:5173 en el explorador.

Estructura de archivos de la aplicación

La estructura de archivos inicial tiene este aspecto

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Para empezar, estos son los archivos y carpetas importantes que debe conocer.

index.html es el archivo en el que Vite inserta el código de la carpeta src para que el explorador lo ejecute. Este archivo no se debe editar, excepto para cambiar el título de la aplicación React.

La carpeta src es donde reside el código fuente de la aplicación React. Este es el lugar donde se crean los componentes personalizados, los archivos CSS y otros archivos de código necesarios para compilar la aplicación. Las herramientas de compilación de Vite procesan estos archivos para analizarlos y compilarlos para crear el proyecto final de React.

La carpeta public contiene todos los archivos estáticos que se atenderán directamente en el explorador. Estos archivos no se procesan mediante Vite.

Pruebe a usar React con una API

Con la misma aplicación Hola mundo que ha creado con React y ha actualizado con Visual Studio Code, vamos a intentar agregar una llamada de API para mostrar algunos datos.

  1. Empecemos de nuevo. Vamos a quitar casi todo el código reutilizable proporcionado por Vite y mantener solo nuestro código del paso anterior.

    Ahora el aspecto del archivo App.jsx debería ser similar a este:

    import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

    Captura de pantalla de la aplicación Hola mundo de React simplificada en el explorador

  2. A continuación, vamos a establecer un estado local donde podemos guardar datos desde una API. Un estado es donde se pueden almacenar los datos que se usarán en la vista.

    Para agregar un estado local, primero es necesario importar el enlace de React useState que le permite agregar la variable de estado al componente.

    También necesitamos inicializar el estado local. useState devuelve una matriz de dos valores: el estado actual y una función set. Llamaremos al estado actual como posts inicializado como una matriz vacía que más adelante podemos rellenar con datos de nuestra API mediante la función setPosts.

    Ahora el aspecto del archivo App.jsx debería ser similar a este:

    import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  3. Para llamar a una API que nos enviará datos que usaremos en nuestra aplicación de React, usaremos el método .fetch de JavaScript. La API a la que llamaremos es JSONPlaceholder, una API gratuita para probar y crear prototipos que sirve datos de marcador de posición falsos en formato JSON.

    Usamos el enlace de React useEffect para actualizar el estado posts mediante la función set.

    import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  4. Echemos un vistazo a qué tipo de datos ha guardado la API en nuestro estado posts. A continuación se muestra parte del contenido del archivo de API JSON falso. Podemos ver el formato en el que se enumeran los datos, mediante las categorías: "albumId", "id", "title", "url" y "thumbnailUrl".

    [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

  5. Para mostrar los datos de la API, ahora será necesario agregar un poco de código JSX dentro de la instrucción return() representada. Usaremos el método map() para mostrar los datos del objeto posts que hemos almacenado como claves. Cada publicación mostrará un encabezado con "ID #" y, a continuación, el valor de la clave post.id más el valor de la clave post.title de nuestros datos JSON. Seguido del cuerpo que muestra la imagen en función del valor de la clave thumbnailUrl.

    // rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;

    Aplicación de React que muestra datos de marcador de posición de una API

Recursos adicionales