Introducción a los Componentes de React

Introducción

En este laboratorio, aprenderá el concepto fundamental de los componentes en React. Los componentes son fragmentos de código independientes y reutilizables. Sirven el mismo propósito que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML (a través de JSX) para ser renderizado en la pantalla. Nos centraremos en la creación de un simple "componente funcional".

Creará un nuevo componente en su propio archivo, lo exportará y luego lo importará y renderizará dentro del componente principal App.

Crear componente funcional en el nuevo archivo Hello.jsx

En este paso, creará su primer componente de React. Es una práctica común colocar cada componente en su propio archivo para mantener el código organizado y reutilizable. Crearemos un nuevo archivo para un componente llamado Hello.

Primero, preparemos el entorno de desarrollo. Los archivos del proyecto han sido creados para usted en el directorio my-app. Necesita navegar a este directorio, instalar las dependencias necesarias e iniciar el servidor de desarrollo.

Abra una terminal en el WebIDE (puede usar el menú: Terminal > New Terminal) y ejecute los siguientes comandos uno por uno:

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

Después de ejecutar el último comando, el servidor de desarrollo se iniciará. Puede ver la aplicación en ejecución haciendo clic en la pestaña Web 8080 en la interfaz de LabEx. A lo largo de este laboratorio, puede cambiar a esta pestaña para ver sus cambios.

En el explorador de archivos del WebIDE a la izquierda, navegue al directorio my-app/src. Haga clic derecho en la carpeta src y seleccione "New File". Nombre el nuevo archivo Hello.jsx.

Ahora, agregue el siguiente código a su archivo recién creado my-app/src/Hello.jsx. Este código define un componente funcional simple.

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

Analicemos este código:

• function Hello(): Esta es una función estándar de JavaScript. En React, los componentes funcionales son simplemente funciones de JavaScript. Por convención, los nombres de los componentes siempre comienzan con una letra mayúscula.
• return <h1>...</h1>;: La función devuelve JSX. JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que se parece mucho a HTML. Es lo que usamos para describir cómo debe verse la interfaz de usuario.

Exportar por defecto la función del componente

En este paso, hará que el componente Hello esté disponible para su uso en otras partes de su aplicación. Para ello, necesita exportarlo desde el archivo Hello.jsx.

Hay dos tipos principales de exportaciones en los módulos de JavaScript: exportaciones nombradas (named exports) y exportaciones por defecto (default exports). Para este laboratorio, utilizaremos una exportación por defecto, que es común para los componentes cuando un archivo solo exporta una cosa.

Agregue la siguiente línea al final de su archivo my-app/src/Hello.jsx:

export default Hello;

Su archivo my-app/src/Hello.jsx completo debería verse ahora así:

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

Esta declaración export default convierte la función Hello en la exportación principal de este archivo, permitiendo que otros archivos la importen.

Importar el componente en App.jsx usando una declaración import

En este paso, importará el componente Hello en el componente principal de la aplicación, App.jsx, para poder utilizarlo.

En el explorador de archivos del WebIDE, busque y abra el archivo my-app/src/App.jsx.

Para utilizar el componente Hello, primero debe importarlo. Agregue la siguiente declaración import en la parte superior del archivo my-app/src/App.jsx, antes de la definición de la función App:

import Hello from "./Hello.jsx";

Esta línea le indica a JavaScript que importe la exportación por defecto del archivo Hello.jsx (que se encuentra en el mismo directorio, de ahí ./) y la asigne a una variable llamada Hello.

Después de agregar la importación, la parte superior de su archivo my-app/src/App.jsx se verá algo así (las otras importaciones pueden ser ligeramente diferentes):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... resto del archivo

Renderizar el componente importado dentro del return de App

En este paso, renderizará el componente Hello dentro del componente App. Una vez que un componente es importado, puede usarlo dentro de JSX como una etiqueta HTML normal.

En el archivo my-app/src/App.jsx, localice la declaración return dentro de la función App. El código existente es el contenido por defecto de Vite. Puede reemplazarlo todo con su nuevo componente.

Modifique la función App para eliminar el contenido por defecto y renderizar el componente <Hello /> en su lugar.

Su función App debería verse así:

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

Aquí, <Hello /> es cómo se renderiza el componente Hello. <> y </> se llaman Fragment; le permiten agrupar una lista de hijos sin agregar nodos adicionales al DOM.

Su archivo my-app/src/App.jsx completo debería verse ahora así:

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

Nota: Hemos eliminado las importaciones no utilizadas y la lógica de estado para mayor claridad.

Guardar archivos y comprobar el renderizado actualizado en el navegador

En este paso, verá el resultado de su trabajo.

Asegúrese de haber guardado todos sus cambios tanto en my-app/src/Hello.jsx como en my-app/src/App.jsx. Puede guardar un archivo presionando Ctrl+S o Cmd+S.

El servidor de desarrollo de Vite que inició en la introducción utiliza Hot Module Replacement (HMR), lo que significa que detecta automáticamente los cambios en los archivos y actualiza la aplicación en el navegador sin necesidad de una recarga completa de la página.

Cambie a la pestaña Web 8080 en la interfaz de LabEx. Ahora debería ver el texto "Hello from the Hello component!" mostrado en la página. Este contenido se está renderizando desde su nuevo componente Hello.

Si no ve los cambios, intente hacer clic en el botón de recargar en la barra de direcciones de la pestaña del navegador.

¡Felicitaciones, ha creado, exportado y renderizado con éxito su primer componente de React!

Resumen

En este laboratorio, aprendió el flujo de trabajo básico para crear y usar componentes en una aplicación React. Este enfoque modular es un principio fundamental del desarrollo de React.

Ha logrado con éxito:

• Crear un nuevo componente funcional en un archivo dedicado (Hello.jsx).
• Usar export default para hacer que el componente esté disponible para otras partes de la aplicación.
• Usar import para incorporar el componente en el archivo principal App.jsx.
• Renderizar el componente importado utilizando la sintaxis de etiqueta JSX (<Hello />).

Este patrón de crear, exportar e importar componentes es fundamental para construir aplicaciones React grandes y mantenibles.