¿Qué es React y por qué usarlo?

React es una biblioteca de JavaScript creada por Facebook para construir interfaces de usuario interactivas. Su enfoque principal es el "componente", una unidad de código reutilizable que representa una parte de la interfaz, como un botón o una barra de navegación. Al usar React, podemos construir aplicaciones que son rápidas, fáciles de mantener y escalables.

¿Por qué usar React?

1. Componentización: Todo se divide en componentes reutilizables, facilitando el mantenimiento y actualización de la aplicación.
2. Reactivity: React actualiza la interfaz de usuario automáticamente cuando cambian los datos.
3. Comunidad y Ecosistema: React tiene una gran comunidad y muchas herramientas para ayudarnos a desarrollar aplicaciones rápidamente.
4. Rendimiento: Con su “Virtual DOM”, React actualiza solo las partes de la interfaz que cambian, lo que hace que sea más rápido.

Instalación y configuración del entorno

Para empezar a usar React, necesitamos tener Node.js instalado en nuestro sistema, ya que este incluye npm (Node Package Manager), que nos ayudará a instalar y manejar librerías. Puedes instalar Node.js descargándolo desde su sitio oficial Node.js.

1. Verificar instalación: Para verificar si Node.js está instalado correctamente, abre una terminal y ejecuta:

   1node -v

   También verifica npm con:

   1npm -v

Creación de una aplicación React con Vite

Otra opción popular para crear proyectos de React es Vite, una herramienta de desarrollo que ofrece un tiempo de carga más rápido y una configuración más ligera en comparación con Create React App.

1. Instalación con Vite: Para crear un proyecto con Vite, abre la terminal y ejecuta el siguiente comando:

   1npm create vite@latest nombre-de-tu-aplicacion -- --template react

   Esto generará un proyecto con la estructura básica para una aplicación React.

2. Moverse a la carpeta del proyecto:

   1cd nombre-de-tu-aplicacion

3. Instalar las dependencias:

   1npm install

4. Iniciar la aplicación en modo de desarrollo:

   1npm run dev

   Este comando abrirá la aplicación en el navegador, generalmente en http://localhost:5173.

Estructura de una aplicación React con Vite

La estructura de un proyecto creado con Vite es similar a la de Create React App, pero suele ser más ligera:

1. public/: Carpeta para archivos estáticos. Aquí puedes almacenar íconos, imágenes, etc., que no necesitan ser procesados por Vite.

2. src/: Carpeta principal para el código de la aplicación. Los archivos más importantes son:

   • main.jsx: Punto de entrada donde React se conecta al HTML en index.html.
   • App.jsx: Componente principal de la aplicación, donde se construye la interfaz.
   • App.css: Archivo de estilos para App.jsx.

3. node_modules/: Carpeta donde se almacenan todas las librerías y dependencias instaladas.

Creación de una aplicación React con Create React App

No recomiendo usar Create React App para proyectos nuevos, ya que Vite es una opción más moderna y rápida.

2. Create React App: Facebook creó una herramienta llamada Create React App que simplifica mucho la creación de proyectos en React. Para instalarla, ejecuta:

   1npx create-react-app nombre-de-tu-aplicacion

   Este comando crea una carpeta con todo lo necesario para comenzar a desarrollar en React.

Creación de la primera aplicación con Create React App

Una vez instalado Create React App, vamos a crear nuestra primera aplicación:

1. Abre una terminal y ejecuta el siguiente comando:

   1npx create-react-app mi-primera-app

   Esto generará una estructura de archivos y carpetas con todo lo necesario para una aplicación React básica.

2. Luego de crear el proyecto, muévete a la carpeta del proyecto:

   1cd mi-primera-app

3. Ejecuta la aplicación en modo de desarrollo:

   1npm start

   Al hacer esto, tu aplicación se abrirá automáticamente en el navegador, generalmente en http://localhost:3000.

Estructura de una aplicación React

Al abrir la carpeta del proyecto, notarás varias carpetas y archivos. Aquí te explico los principales:

1. public/: Esta carpeta contiene archivos estáticos. Aquí encontrarás index.html, que es la página HTML principal en la que React renderizará la aplicación.

2. src/: Es la carpeta principal para escribir el código de tu aplicación. Los archivos más importantes son:

   • index.js: Es el punto de entrada de la aplicación y es donde se conecta React con el archivo HTML (index.html).
   • App.js: Aquí está el componente principal de la aplicación, donde escribiremos la mayoría del código de la interfaz.
   • App.css: Archivo de estilos asociado a App.js.

3. node_modules/: Carpeta donde están todas las librerías instaladas que necesita React y que se instalaron automáticamente al crear el proyecto.

Esta estructura básica te permite empezar a escribir código y crear una interfaz interactiva de forma ordenada.

Ambas herramientas, Create React App y Vite, son opciones excelentes para comenzar a desarrollar con React. Vite es particularmente adecuado para proyectos que requieren tiempos de carga rápidos y un entorno de desarrollo más ágil. ¡Ahora puedes elegir la opción que mejor se adapte a tus necesidades y comenzar a explorar el potencial de React!