Guía de introducción a React: construye tu primera interfaz de usuario desde cero

React es una biblioteca de JavaScript para construir interfaces de usuario. Fue desarrollada y es mantenida por Facebook, y se ha convertido en una de las herramientas más populares en el desarrollo frontend. Esta guía te llevará desde cero, paso a paso, para comprender los conceptos básicos de React y construir una interfaz de usuario simple.

¿Por qué elegir React?

React tiene las siguientes ventajas:

• Componentización: React descompone la interfaz de usuario en componentes independientes y reutilizables. Esto facilita el mantenimiento y la comprensión del código.
• Declarativo: React utiliza un estilo de programación declarativo, lo que significa que solo necesitas describir lo que quieres presentar, y React se encarga automáticamente de las actualizaciones y el renderizado.
• Eficiente: React utiliza un DOM virtual y un algoritmo diff inteligente, lo que le permite actualizar la interfaz de usuario de manera eficiente, reduciendo el renderizado innecesario.
• Gran soporte de la comunidad: React tiene una gran comunidad y un rico ecosistema, puedes encontrar una gran cantidad de tutoriales, bibliotecas y herramientas para ayudarte a desarrollar.
• Capacidad multiplataforma: React Native te permite usar React para desarrollar aplicaciones móviles nativas (iOS y Android).

Preparación

Antes de comenzar, debes asegurarte de tener las siguientes herramientas instaladas en tu computadora:

• Node.js: Node.js es un entorno de tiempo de ejecución de JavaScript que se utiliza para ejecutar herramientas de desarrollo de React. Puedes descargarlo e instalarlo desde https://nodejs.org/.
• npm o yarn: npm (Node Package Manager) y yarn son administradores de paquetes de JavaScript que se utilizan para instalar y administrar las dependencias de React. Normalmente, npm se instala junto con Node.js. yarn se puede instalar desde https://yarnpkg.com/.

Crea tu primera aplicación React

Usaremos create-react-app para crear rápidamente un proyecto React.

1. Crear con npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Crear con yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Después de ejecutar los comandos anteriores, create-react-app creará automáticamente un directorio llamado my-first-react-app e inicializará un proyecto React en ese directorio. El comando npm start o yarn start iniciará el servidor de desarrollo, y puedes visitar http://localhost:3000 en tu navegador para ver tu aplicación React.

Estructura de directorios

La estructura de directorios del proyecto creado por create-react-app es la siguiente:

my-first-react-app/
├── node_modules/         # Librerías de las que depende el proyecto
├── public/               # Recursos estáticos (por ejemplo, archivos HTML)
│   ├── index.html        # Archivo HTML de entrada de la aplicación
│   └── ...
├── src/                  # Código fuente de React
│   ├── App.css           # Estilos CSS del componente App
│   ├── App.js            # Componente App
│   ├── App.test.js       # Archivo de pruebas del componente App
│   ├── index.css         # Estilos CSS globales
│   ├── index.js          # Archivo JavaScript de entrada de la aplicación
│   ├── logo.svg          # Logo de React
│   └── ...
├── .gitignore            # Archivo de ignorados de Git
├── package.json          # Metadatos y dependencias del proyecto
├── README.md             # Documentación del proyecto
└── yarn.lock             # Archivo de bloqueo de versiones de dependencias (si se usa yarn)

Entendiendo los Componentes de React

Una aplicación React está construida con componentes. Los componentes son bloques de código independientes y reutilizables que se utilizan para renderizar partes específicas de la interfaz de usuario.

En el archivo src/App.js, puedes ver un componente App predeterminado:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Explicación del código:

• import React from 'react'; Importa la librería React.
• function App() { ... } Define un componente de función llamado App.
• return ( ... ) Devuelve una expresión JSX que describe el contenido que debe renderizar el componente.
• export default App; Exporta el componente App para que pueda ser utilizado en otros archivos.

JSX (JavaScript XML)

JSX es una extensión de la sintaxis de JavaScript que te permite escribir código similar a HTML dentro de tu código JavaScript. En el ejemplo anterior, ... es una expresión JSX. El código JSX es transformado por Babel en código JavaScript estándar para que el navegador pueda entenderlo.

Modificando el Componente App

Vamos a modificar el componente App para crear un contador simple.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Contador

      Contador actual: {count}

      +
      -
    
  );
}

export default App;

Modificaciones:

• import React, { useState } from 'react'; Importa el Hook useState. useState es un Hook de React que se utiliza para agregar estado en componentes de función.
• const [count, setCount] = useState(0); Usa el Hook useState para crear una variable de estado llamada count e inicializarla a 0. setCount es una función utilizada para actualizar el estado count.
• const increment = () => { setCount(count + 1); }; Define una función llamada increment que se utiliza para incrementar el estado count en 1.
• const decrement = () => { setCount(count - 1); }; Define una función llamada decrement que se utiliza para decrementar el estado count en 1.
• Contador actual: {count} Muestra el valor del estado count en la página. {count} es una expresión JSX que se utiliza para insertar variables de JavaScript en el código JSX.
• + y - Crea dos botones, enlazando las funciones increment y decrement respectivamente. onClick es un manejador de eventos que se utiliza para ejecutar la función especificada cuando se hace clic en el botón.

Después de guardar el archivo src/App.js, el navegador se actualizará automáticamente y verás un contador simple. Al hacer clic en el botón "+" se incrementará el conteo, al hacer clic en el botón "-" se reducirá el conteo.

Usando estilos CSS

Puedes usar CSS para embellecer tu aplicación React. create-react-app soporta CSS Modules y archivos CSS normales.

Usando CSS Modules:

CSS Modules te permite crear estilos CSS independientes para cada componente, evitando conflictos de estilo. Para usar CSS Modules en un componente, necesitas crear un archivo que termine en .module.css.

Por ejemplo, crea un archivo llamado App.module.css y agrega los siguientes estilos CSS:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Luego, importa CSS Modules en el archivo src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importa CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Usar el objeto styles para referenciar las clases CSS */}
      

# Contador

      Contador actual: {count}

      +
      -
    
  );
}

export default App;

Usando archivos CSS normales:

También puedes usar archivos CSS normales para definir estilos globales. En el archivo src/index.css, puedes definir estilos globales.

Por ejemplo, agrega el siguiente estilo CSS:

body {
  font-family: sans-serif;
}

Este estilo se aplicará al elemento body de toda la aplicación.

Próximos pasos

¡Felicidades, has completado tu primera aplicación React! A continuación, puedes aprender más sobre React, por ejemplo:

• Comunicación entre componentes: Aprende cómo hacer que diferentes componentes se comuniquen entre sí.
• Manejo de formularios: Aprende cómo crear y manejar formularios.
• Enrutamiento: Aprende cómo usar React Router para crear aplicaciones de varias páginas.
• Redux o Context API: Aprende cómo administrar el estado de la aplicación.
• Hooks: Profundiza en los React Hooks, como useEffect, useContext, etc.

Recuerda, React es una tecnología que requiere práctica y aprendizaje constantes. ¡Te deseo un feliz aprendizaje!