En este primer blog de nuestra serie dedicada a React, una poderosa biblioteca de JavaScript desarrollada por Facebook para la construcción de interfaces de usuario interactivas y eficientes, exploraremos los fundamentos de React, desde su definición hasta su aplicación práctica en proyectos del mundo real.

¿Qué es React?

React es una biblioteca de JavaScript desarrollada por Facebook que se utiliza para construir interfaces de usuario interactivas y eficientes. Es especialmente popular en el desarrollo de aplicaciones web de una sola página (SPA), donde la interfaz de usuario se actualiza de manera dinámica en respuesta a las acciones del usuario, sin necesidad de recargar la página completa.

Características

1. Componentes: React organiza la interfaz de usuario en componentes reutilizables. Estos componentes pueden contener lógica y representar diferentes partes de la interfaz de usuario.

2. Virtual DOM: React utiliza un Virtual DOM para mejorar el rendimiento. En lugar de actualizar directamente el DOM cada vez que hay un cambio, React realiza cambios en una representación virtual del DOM y luego actualiza el DOM real de manera eficiente.

3. Estado: Los componentes pueden tener un estado interno que determina cómo se ve y se comporta el componente en un momento dado. Los cambios en el estado pueden provocar actualizaciones en la interfaz de usuario.

4. JSX: React utiliza JSX (JavaScript XML), una extensión de JavaScript que permite escribir código que se parece al marcado HTML dentro de los archivos JavaScript. JSX facilita la creación y comprensión de la estructura de la interfaz de usuario.

5. Unidireccionalidad de datos: React sigue el principio de unidireccionalidad de datos, lo que significa que el flujo de datos va en una sola dirección. Esto facilita el seguimiento de los cambios y la comprensión de cómo los datos fluyen a través de la aplicación.

Ventajas de usar React

Una de las razones principales por las que React ha ganado tanta popularidad es debido a sus numerosas ventajas. Desde su rendimiento optimizado gracias al DOM virtual hasta su gran comunidad de desarrollo y abundante documentación, React ofrece una experiencia de desarrollo web sin igual.

Instalación.

1. Instalar Node.js y npm: Asegúrate de tener Node.js y npm instalados en tu sistema. Puedes descargar e instalar Node.js desde su sitio web oficial.

2. Instalar create-react-app: Abre tu terminal (en Windows, puedes usar PowerShell o el símbolo del sistema) y ejecuta el siguiente comando para instalar create-react-app globalmente en tu sistema:

                          npm install -g create-react-app
   

   Esto instalará la herramienta create-react-app de forma global, lo que te permitirá crear nuevos proyectos de React fácilmente.

3. Crear un nuevo proyecto de React: Una vez que create-react-app esté instalado, puedes crear un nuevo proyecto de React ejecutando el siguiente comando en tu terminal:

                    npx create-react-app mi-aplicación-react
   

   Reemplaza mi-aplicación-react con el nombre que desees para tu proyecto. Esto generará una estructura de directorios básica y configurará todas las dependencias necesarias para comenzar a trabajar con React.

4. Iniciar el servidor de desarrollo: Una vez que se haya creado el proyecto, navega al directorio de tu proyecto recién creado:

                              cd mi-aplicación-react
   

   Luego, puedes iniciar el servidor de desarrollo ejecutando:

                                   npm start
   

   Esto iniciará un servidor de desarrollo y abrirá automáticamente tu aplicación en tu navegador predeterminado. A partir de este punto, puedes comenzar a desarrollar tu aplicación React.

Ejemplo práctico.

Abre Visual Studio Code (o el IDE donde trabajes) y crea un nuevo proyecto de React utilizando create-react-app. Puedes hacerlo abriendo una nueva terminal dentro de Visual Studio Code y ejecutando los siguientes comandos:

                    npx create-react-app mi-aplicacion-react
                    cd mi-aplicacion-react

Esto creará una nueva carpeta llamada mi-aplicacion-react y configurará un proyecto de React dentro de ella. Asegúrate de que tienes una carpeta llamada 'npm' en C:\Users\TU-USUARIO\AppData\Roaming

Abrir el proyecto en Visual Studio Code:

Una vez que se haya creado el proyecto, puedes abrirlo en Visual Studio Code simplemente arrastrando la carpeta del proyecto a la ventana de Visual Studio Code, o utilizando el comando File > Open Folder desde el menú principal y seleccionando la carpeta del proyecto.

Editar el archivo App.js:

Dentro del proyecto abierto en Visual Studio Code, navega hasta la carpeta src y abre el archivo App.js en el editor.

Puedes ejecutar npm start para dirigirte al proyecto ya creado y ver que funciona correctamente, si lo haces, deberías ver una pagina como esta:

Crear tu primer componente React:

Dentro del archivo App.js, sigue los pasos anteriores para crear tu primer componente React. Puedes reemplazar el contenido del componente App con el siguiente código:

jsxCopy codeimport React from 'react';
function MiPrimerComponente() {
  return (
    <div>
      <h1>Hola, Mundo!</h1>
      <p>Este es mi primer componente React.</p>
    </div>
  );
}
export default MiPrimerComponente;

Renderizar el componente en el navegador:

Dentro del mismo archivo App.js, importa tu componente MiPrimerComponente y úsalo en el componente App. Guarda los cambios y asegúrate de que el servidor de desarrollo esté en funcionamiento ejecutando npm start en la terminal.

jsxCopy codeimport React from 'react';
import MiPrimerComponente from './MiPrimerComponente';
function App() {
  return (
    <div>
      <MiPrimerComponente />
    </div>
  );
}
export default App;

Ejecutar la aplicación:

Una vez que hayas guardado todos los cambios, asegúrate de que el servidor de desarrollo esté en funcionamiento ejecutando npm start en la terminal. Esto abrirá automáticamente tu aplicación en tu navegador predeterminado.

Resultado: