Módulo 1: Introducción a React

1.1 ¿Qué es React?

React es una biblioteca de JavaScript de código abierto utilizada para construir interfaces de usuario interactivas y reutilizables. Fue desarrollada por Facebook y es ampliamente utilizada en el desarrollo web moderno. Algunos conceptos básicos de React incluyen:

• Componentes: React se basa en la idea de componentes reutilizables. Un componente en React es como un bloque de construcción que encapsula el código, la estructura y la lógica de una parte específica de la interfaz de usuario.
• Virtual DOM: React utiliza un Virtual DOM (Documento de Objeto Modelo Virtual) para mejorar el rendimiento y eficiencia en las actualizaciones de la interfaz de usuario. En lugar de actualizar directamente el DOM del navegador, React compara el Virtual DOM con el DOM real y aplica solo los cambios necesarios.

Ejemplo de Componente en React:

import React from 'react';

class MiComponente extends React.Component {
  render() {
    return (
      <div>
        <h1>Hola desde mi componente</h1>
        <p>Este es un ejemplo de componente en React.</p>
      </div>
    );
  }
}

export default MiComponente;
  

1.2 Configuración del entorno

Instalación de Node.js y npm:

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

Para instalar Node.js y npm, sigue los siguientes pasos:

1. Descarga e instala Node.js desde https://nodejs.org/
2. Verifica que Node.js y npm se hayan instalado correctamente ejecutando los siguientes comandos en la terminal:

node -v
npm -v
  

Creación de un proyecto con Create React App:

Create React App es una herramienta que facilita la configuración inicial de un proyecto de React. Permite crear un proyecto con una estructura de archivos y configuraciones predefinidas.

Para crear un nuevo proyecto de React con Create React App, sigue estos pasos:

1. Abre la terminal y ejecuta el siguiente comando:

npx create-react-app mi-proyecto-react
  

2. Cambia al directorio del proyecto recién creado:

cd mi-proyecto-react
  

3. Inicia el servidor de desarrollo:

npm start
  

El servidor de desarrollo iniciará y podrás acceder a tu aplicación React en el navegador en la dirección http://localhost:3000.

Estructura de archivos y carpetas:

La estructura de archivos y carpetas de un proyecto creado con Create React App se verá similar a la siguiente:

mi-proyecto-react/
|-- node_modules/
|-- public/
|-- src/
|   |-- App.js
|   |-- index.js
|   |-- ...
|-- package.json
|-- README.md
|-- ...
  

• node_modules/: Contiene las dependencias instaladas para el proyecto.
• public/: Contiene archivos públicos como el archivo HTML principal y otros recursos estáticos.
• src/: Contiene los archivos fuente de la aplicación, incluyendo componentes, estilos y otros archivos.
• package.json: Archivo de configuración del proyecto que incluye información sobre dependencias y scripts.

Este es solo el comienzo de tu viaje con React. En los siguientes módulos, profundizaremos en la creación de componentes, la gestión de estados, el enrutamiento y otros conceptos esenciales para el desarrollo de aplicaciones React.