Manuales

Appearance

Introducción a React ​

React es una biblioteca de JavaScript desarrollada por Facebook que permite construir interfaces de usuario interactivas y reactivas. Su enfoque principal es la creación de aplicaciones modernas basadas en componentes reutilizables y eficientes, ideales para aplicaciones de una sola página (SPA).

¿Qué es React y por qué utilizarlo? ​

React se centra en simplificar el desarrollo de interfaces de usuario mediante la división de la aplicación en componentes independientes que se pueden reutilizar y combinar. Algunas razones para elegir React son:

  • Eficiencia: Utiliza un DOM virtual que optimiza las actualizaciones y mejora el rendimiento.
  • Reutilización de componentes: Facilita la organización y el mantenimiento del código.
  • Gran comunidad y ecosistema: Cuenta con una amplia gama de herramientas y bibliotecas adicionales.
  • Compatibilidad: Puede integrarse con otros frameworks y herramientas.

Características clave ​

  • Declarativo: React permite describir cómo debería lucir la interfaz en cualquier momento.
  • Basado en componentes: Todo se organiza en bloques independientes.
  • Unidireccional: Los datos fluyen en una sola dirección, lo que facilita el control de estados y eventos.

Virtual DOM: ¿Cómo optimiza React las actualizaciones del DOM? ​

El DOM (Document Object Model) representa la estructura HTML de una página. En aplicaciones tradicionales, actualizar el DOM es costoso en términos de rendimiento.

React introduce el Virtual DOM, una representación ligera del DOM real. Las actualizaciones se realizan primero en este DOM virtual, luego React compara los cambios (diferencias o "diffing") con el DOM real y actualiza solo los elementos afectados.

Beneficios del Virtual DOM ​

  • Mejor rendimiento: Actualiza solo lo necesario.
  • Menor impacto: Reduce la cantidad de operaciones en el DOM real.

Ejemplo visual:

  1. El estado cambia en la aplicación.
  2. React actualiza el Virtual DOM.
  3. Compara el Virtual DOM con el DOM real.
  4. Solo los elementos modificados son actualizados en el DOM real.

Componentes: La base del desarrollo en React ​

En React, los componentes son bloques reutilizables que representan partes de la interfaz de usuario. Pueden ser tan pequeños como un botón o tan grandes como una página entera.

Tipos de componentes ​

  1. Componentes funcionales:
    • Son funciones de JavaScript que retornan elementos React.
    • Más sencillos y eficientes.
    • Ideales para componentes sin estado (stateless) o que usen hooks para gestionar el estado.
jsx
import React from 'react';

function MyFunctionalComponent() {
  return <h1>Soy un componente funcional</h1>;
}
  1. Componentes de clase:
    • Clases de JavaScript que extienden React.Component.
    • Se utilizaban para componentes con estado antes de los hooks.
    • Más verbosos y menos comunes en proyectos modernos.
jsx
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <h1>Soy un componente de clase</h1>;
  }
}

¿Funcionales o de clase? ​

Se recomienda usar componentes funcionales con hooks, ya que son más simples, modernos y eficientes.

JSX: Integrando HTML en JavaScript ​

JSX (JavaScript XML) es una extensión de sintaxis que permite escribir código similar a HTML dentro de JavaScript. Es una forma más declarativa y legible de definir la estructura de los componentes.

Ejemplo de JSX ​

jsx
import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hola, esto es un componente con JSX</h1>
      <p>Esto es un párrafo dentro del componente</p>
    </div>
  );
}

Ventajas de JSX ​

  • Combina estructura y lógica en un solo lugar.
  • Mejor legibilidad y mantenibilidad.
  • Permite usar expresiones de JavaScript dentro de llaves {}.

Configuración del entorno de desarrollo ​

Para empezar a desarrollar con React, es necesario configurar un entorno de trabajo adecuado. Los pasos son:

Instalación de Node.js y npm ​

  1. Descarga e instala Node.js desde su sitio oficial.
  2. Verifica la instalación:
bash
node -v
npm -v

Crear un proyecto React ​

Usa create-react-app para inicializar un proyecto con todas las configuraciones necesarias:

bash
npx create-react-app mi-aplicacion-react
cd mi-aplicacion-react
npm start

Esto abre la aplicación en tu navegador predeterminado.

Estructura del proyecto ​

plaintext
mi-aplicacion-react/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── App.js
│   ├── index.js
├── package.json
  • public: Contiene archivos estáticos, como index.html.
  • src: Contiene el código fuente de la aplicación.

Creando una aplicación React simple ​

A modo de introducción, crearemos una aplicación que muestre un mensaje de bienvenida.

Modificar App.js ​

jsx
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hola, esta es mi primera aplicación React</h1>
      <p>React es poderoso y flexible.</p>
    </div>
  );
}

export default App;

Modificar index.js ​

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Ejecutar la aplicación ​

Ejecuta el comando:

bash
npm start

Esto iniciará un servidor local y abrirá la aplicación en el navegador.

Conclusiones ​

React es una herramienta poderosa para construir aplicaciones modernas. Su enfoque en componentes reutilizables y eficiente manejo del DOM la convierte en una opción popular entre desarrolladores. Con esta base, estás listo para explorar temas más avanzados como el manejo de estado, hooks, y enrutamiento.

React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para construir interfaces de usuario interactivas y reactivas. Su popularidad se debe a su enfoque en la construcción de componentes reutilizables y la gestión eficiente del DOM (Document Object Model). En esta sección, aprenderemos los conceptos fundamentales de React y cómo configurar un entorno de desarrollo para comenzar a trabajar con esta biblioteca.

1.1. Conceptos básicos de React ​

¿Qué es React y por qué utilizarlo? ​

React es una biblioteca de JavaScript de código abierto que se utiliza para crear interfaces de usuario interactivas y reactivas. Su principal objetivo es permitir el desarrollo de aplicaciones de una sola página (SPA) donde los datos pueden cambiar sin necesidad de recargar toda la página. React utiliza un enfoque basado en componentes, lo que significa que la interfaz de usuario se divide en pequeños componentes reutilizables que pueden combinarse para formar una aplicación completa.

Algunas de las razones por las que utilizar React son:

  • Eficiencia: Gracias al Virtual DOM (DOM virtual), React actualiza solo los elementos necesarios en la interfaz de usuario, lo que mejora el rendimiento y la eficiencia de la aplicación.
  • Reutilización de componentes: La arquitectura de componentes de React permite crear componentes independientes y reutilizables en diferentes partes de la aplicación.
  • Mantenimiento sencillo: Al dividir la interfaz de usuario en pequeños componentes, el mantenimiento y la depuración del código se vuelven más fáciles y manejables.

Virtual DOM: ¿Cómo React optimiza las actualizaciones del DOM? ​

El DOM (Document Object Model) es una representación en memoria del árbol de elementos HTML de una página web. Cada vez que se actualiza el estado de una aplicación, el DOM también se actualiza, lo que puede resultar costoso en términos de rendimiento.

Para mitigar este problema, React utiliza el Virtual DOM (DOM virtual). En lugar de actualizar directamente el DOM, React crea una copia virtual del DOM y realiza los cambios necesarios en esta copia. Luego, compara la copia virtual con el DOM actual para identificar exactamente qué elementos deben actualizarse. Esta comparación es más rápida que actualizar el DOM completo, lo que mejora significativamente el rendimiento de la aplicación.

Componentes: La base de desarrollo en React ​

En React, los componentes son bloques de construcción fundamentales para crear interfaces de usuario. Un componente puede ser una parte pequeña y reutilizable de la interfaz, como un botón o un formulario, o incluso una página completa.

Los componentes en React se dividen en dos tipos principales:

  • Componentes funcionales: Son funciones de JavaScript que retornan elementos React. Son más simples y fáciles de escribir. Se utilizan principalmente para componentes sin estado (stateless) que no necesitan manejar su propio estado interno.
jsx
import React from 'react';

function MyFunctionalComponent() {
  return <h1>Hola, soy un componente funcional</h1>;
}
  • Componentes de clase: Son clases de JavaScript que extienden la clase React.Component. Se utilizan para componentes con estado (stateful) que necesitan manejar su propio estado interno.
jsx
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return <h1>Hola, soy un componente de clase</h1>;
  }
}

¿Funcionales o de clase? Diferencias y uso recomendado ​

La elección entre componentes funcionales y de clase depende del tipo de componente que estemos desarrollando.

  • Componentes funcionales:

    • Ventajas:

      • Son más sencillos y fáciles de entender.
      • Mejor rendimiento, ya que no tienen el overhead de las clases.
      • Promueven el uso de Hooks, lo que facilita la gestión del estado y otros comportamientos.

    • Desventajas:

      • No pueden manejar su propio estado interno (hasta la llegada de los Hooks en versiones recientes de React).

  • Componentes de clase:

    • Ventajas:

      • Pueden manejar su propio estado interno utilizando state.
      • Soportan el ciclo de vida de los componentes, lo que permite ejecutar código en diferentes etapas de su existencia (por ejemplo, al montar o desmontar un componente).

    • Desventajas:

      • Son más verbosos y complicados de escribir.
      • Con Hooks, la mayoría de las funcionalidades que ofrecían los componentes de clase pueden implementarse en componentes funcionales.

En general, se recomienda utilizar componentes funcionales siempre que sea posible, ya que son más sencillos y promueven buenas prácticas con el uso de Hooks. Sin embargo, si necesitas manejar el estado interno o utilizar el ciclo de vida de los componentes, los componentes de clase aún son válidos.

JSX: Integrando HTML en JavaScript ​

JSX (JavaScript XML) es una extensión de sintaxis que permite integrar HTML dentro de JavaScript en React. Con JSX, podemos describir cómo debería ser la interfaz de usuario de nuestra aplicación de una manera más declarativa y fácil de leer.

Ejemplo de JSX:

jsx
import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hola, soy un componente con JSX</h1>
      <p>Esto es un párrafo dentro del componente</p>
    </div>
  );
}

En el ejemplo anterior, podemos ver cómo JSX nos permite mezclar etiquetas HTML con código JavaScript dentro de un componente funcional.

Elementos React: Creando elementos y renderizándolos en el DOM ​

En React, los componentes se definen mediante elementos React, que son objetos simples de JavaScript que describen qué debe renderizar React en el DOM.

Para crear un elemento React, utilizamos JSX o el método React.createElement().

Ejemplo con JSX:

jsx
import React from 'react';

const element = <h1>Hola, esto es un elemento React con JSX</h1>;

Ejemplo con React.createElement():

jsx
import React from 'react';

const element = React.createElement('h1', null, 'Hola, esto es un elemento React con createElement()');

Para renderizar un elemento React en el DOM, utilizamos ReactDOM.render().

jsx
import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hola, esto es un elemento React</h1>;
ReactDOM.render(element, document.getElementById('root'));

En el ejemplo anterior, renderizamos el elemento <h1> en el elemento con el ID 'root' del DOM.

1.2. Configuración del entorno de desarrollo ​

Antes de comenzar a desarrollar aplicaciones con React, es necesario configurar un entorno adecuado. A continuación, veremos cómo preparar nuestro entorno de desarrollo.

1.2.1. Instalación de Node.js y npm ​

Node.js es un entorno de ejecución de JavaScript que nos permite ejecutar código JavaScript fuera del navegador. npm (Node Package Manager) es el administrador de paquetes de Node.js y se utiliza para instalar y gestionar las dependencias de nuestros proyectos.

1.2.2. Creación de un proyecto de React ​

Para crear un nuevo proyecto de React, utilizaremos create-react-app, una herramienta que nos permite generar una estructura de proyecto inicial con todas las dependencias y configuraciones necesarias.

  1. Abre tu terminal o línea de comandos.
  2. Ejecuta el siguiente comando para crear un nuevo proyecto de React:
bash
npx create-react-app mi-aplicacion-react

Este comando generará una carpeta llamada mi-aplicacion-react con la estructura inicial del proyecto.

1.2.3. Estructura del proyecto ​

Dentro de la carpeta mi-aplicacion-react, encontrarás la siguiente estructura de carpetas y archivos:

mi-aplicacion-react/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── index.js
│   └── ...
├── package.json
├── package-lock.json
└── ...
  • node_modules: Contiene todas las dependencias del proyecto (librerías, paquetes, etc.).
  • public: Aquí se encuentra el archivo index.html, que es el punto de entrada de nuestra aplicación.
  • src: Contiene los archivos fuente de nuestra aplicación, incluyendo el componente principal (App.js) y el punto de entrada de la aplicación (index.js).
  • package.json y package-lock.json: Archivos que almacenan información sobre el proyecto y sus dependencias.

1.3. Creando una aplicación React simple ​

Vamos a crear una aplicación React simple que muestre un saludo en pantalla. Para ello, seguiremos los siguientes pasos:

1.3.1. Editar App.js ​

Dentro de la carpeta src, editaremos el archivo App.js para definir nuestro componente App.

jsx
// src/App.js
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hola, esto es mi primera aplicación React</h1>
    </div>
  );
}

export default App;

1.3.2. Editar index.js ​

A continuación, modificaremos el archivo index.js para renderizar el componente App en el DOM.

jsx
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

1.3.3. Ejecutar la aplicación ​

Finalmente, ejecutaremos nuestra aplicación React para ver el resultado.

  1. Abre tu terminal o línea de comandos.
  2. Navega hasta la carpeta mi-aplicacion-react (o el nombre que hayas dado a tu proyecto).
  3. Ejecuta el siguiente comando:
bash
npm start

Esto iniciará un servidor local y abrirá automáticamente tu aplicación en el navegador. Deberías ver el mensaje "Hola, esto es mi primera aplicación React" en pantalla.

¡Felicidades! Acabas de crear y ejecutar tu primera aplicación React. Ahora estás listo para seguir aprendiendo y construir aplicaciones más complejas.

Ejercicio: Modifica el mensaje de saludo en la aplicación para que muestre tu nombre en lugar de "mi primera aplicación React". Luego, agrega un subtítulo con un mensaje adicional debajo del saludo principal.