Tutorial React: Instalar React y crear nuevo proyecto

Instalación de Node.js y npm

Para trabajar con React, es necesario tener instalados Node.js y npm (Node Package Manager). Node.js es un entorno de ejecución para JavaScript que permite ejecutar código JavaScript en el lado del servidor, mientras que npm es el gestor de paquetes de Node.js que facilita la instalación y gestión de dependencias.

Descarga e instalación de Node.js:

• Accede a la página oficial de Node.js: https://nodejs.org/.
• Descarga la versión LTS (Long Term Support) recomendada para la mayoría de los usuarios. En este caso, asegúrate de que sea compatible con la ultima versión de React.

• Sigue las instrucciones del instalador para tu sistema operativo (Windows, macOS, o Linux). El instalador incluirá npm automáticamente.

Verificación de la instalación:

• Una vez completada la instalación, abre una terminal o línea de comandos.
• Verifica la instalación de Node.js ejecutando el siguiente comando:

node -v

• Deberías ver la versión de Node.js instalada, por ejemplo:

• Verifica la instalación de npm ejecutando:

npm -v

Deberías ver la versión de npm instalada, por ejemplo:

Introducción a Vite

Vite es una herramienta moderna para construir proyectos web que proporciona un entorno de desarrollo rápido y eficiente. Vite se centra en ofrecer una experiencia de desarrollo optimizada con un servidor de desarrollo rápido y una compilación optimizada para producción. Para trabajar con React, Vite es una excelente opción debido a su configuración mínima y su compatibilidad con las últimas características de JavaScript.

A continuación, se explica cómo configurar un proyecto React utilizando Vite:

Instalación de Vite:

Despues de asegurarnos de tener Node.js y npm instalados y actualizados según la sección anterior.

• Abre una terminal y ejecuta el siguiente comando para instalar Vite:

npm create vite@latest

• Durante el proceso de instalación, Vite te pedirá que selecciones un nombre para tu proyecto y el framework que deseas usar. Selecciona React y luego (el lenguaje que desee usar Ej: Javascript o Typescript) + SWC (una opción más rápida para la compilación de JavaScript).

Por ejemplo, primero seleccionamos React:

A continuación seleccionamos el lenguaje, por ejemplo JavaScript para estos primeros proyectos, a futuro exploraremos también con TypeScript:

Tras seleccionar estas dos opciones se crea un proyecto y nos dice las instrucciones para ejecutarlo:

cd my-react-app
npm install
npm run dev

npm install: nos instalara las dependencias necesarias para que el proyecto funcione, una vez termine de cargar y la terminal nos vuelva a permitir escribir, escribimos el siguiente comando..

npm run dev: iniciara el servidor de desarrollo local y nos saldra lo siguiente:

Por defecto nos abre el proyecto en el puerto :5173. Si damos Ctrl+clic izqdo se nos abrira en el navegador la plantilla base del proyecto.

Nota: my-react-app es el nombre del proyecto, utiliza el nombre que hayas escrito.

Estructura del proyecto:

• Una vez completada la instalación, Vite generará la estructura básica del proyecto. La estructura típica de un proyecto React con Vite es la siguiente:

• public/index.html: El punto de entrada HTML del proyecto.
• src/App.jsx: El componente raíz de la aplicación React.
• src/main.jsx: El punto de entrada JavaScript/JSX del proyecto.
• vite.config.js: El archivo de configuración de Vite.

Beneficios de usar Vite con React:

• Arranque rápido: Gracias a ESBuild, Vite proporciona tiempos de arranque extremadamente rápidos incluso en proyectos grandes.
• Hot Module Replacement (HMR): Vite permite recargar solo los módulos que han cambiado sin recargar toda la página, lo que mejora la experiencia de desarrollo.
• Configuración mínima: Vite requiere una configuración mínima para empezar a trabajar, permitiéndote concentrar más en el código de tu aplicación.
• Compatibilidad con ESModules: Vite utiliza ESModules para la importación de dependencias, lo que permite un desarrollo más moderno y eficiente.

Generar el Hola Mundo en el proyecto de React

Modificar el componente App.jsx:

• Abre src/App.jsx y edita el contenido para mostrar un mensaje "Hola Mundo", no te preocupes por el contenido previo, puedes borrarlo sin problema y dejar solo lo siguiente dentro de la función App():

function App() {
  return (
    <div>
      <h1>Hola Mundo</h1>
    </div>
  );
}

export default App;

Iniciar el servidor de desarrollo:

• Si no lo tienes abierto aun, una vez realizadas las modificaciones, inicia el servidor de desarrollo con:

npm run dev

• Como ya hemos comentado, Vite iniciará un servidor de desarrollo y te proporcionará una URL local, normalmente http://localhost:5173, donde podrás ver tu aplicación React en funcionamiento.

Verificar la aplicación:

• Abre un navegador web y navega a http://localhost:5173. Deberías ver en la página el mensaje "Hola Mundo".

Estructura de un proyecto React

Cuando creas un proyecto React utilizando Vite, la estructura de carpetas generada inicialmente es bastante simple:

my-react-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Sin embargo, para organizar mejor proyectos que aprovechen Server y Client Components (funcionalidad que ha evolucionado significativamente en React 19 convirtiéndose en una característica central), se recomienda evolucionar esta estructura básica a una más organizada como la siguiente (que deberás crear manualmente):

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── ui/ # Componentes reutilizables
│   │   ├── server/ # Server Components
│   │   └── client/ # Client Components
│   ├── app/ # Estructura de componentes por ruta (opcional)
│   ├── hooks/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

• node_modules/: Contiene todos los módulos y dependencias instaladas mediante npm. Esta carpeta se genera automáticamente cuando instalas las dependencias del proyecto.
• public/: Esta carpeta contiene archivos estáticos que no pasan por el proceso de empaquetado de Vite. Todo lo que esté en esta carpeta se copia tal cual en la carpeta de salida final. El archivo favicon.ico es un ejemplo de un archivo que típicamente se coloca aquí.
• src/: Es la carpeta principal donde se encuentran los archivos de código fuente de la aplicación React.
  • assets/: Carpeta para almacenar imágenes, íconos, y otros archivos estáticos que se importan directamente en los componentes de React.
  • components/: Esta carpeta no se crea automáticamente, pero es recomendable crearla para organizar los componentes React. Con la arquitectura moderna, suele subdividirse en:
    • ui/: Componentes de interfaz de usuario reutilizables (botones, tarjetas, etc.)
    • server/: Server Components que se ejecutan y renderizan completamente en el servidor. Por defecto, todos los componentes son Server Components a menos que se especifique lo contrario.
    • client/: Client Components que incluyen la directiva 'use client' al inicio del archivo.
  • app/: Carpeta opcional para organizar componentes según la estructura de rutas de la aplicación.
  • hooks/: Carpeta para almacenar hooks personalizados (no incluida por defecto).
  • App.jsx: Componente principal de la aplicación que viene predefinido en el proyecto inicial.
  • main.jsx: Punto de entrada de la aplicación. Aquí es donde React se monta en el DOM. Vite usa este archivo para iniciar la aplicación.
  • index.css: Archivo CSS principal para los estilos globales de la aplicación.
• .gitignore: Archivo de configuración que indica qué archivos o carpetas deben ser ignorados por Git.
• index.html: Archivo HTML base del proyecto. Es la plantilla que se utiliza para insertar la aplicación React.
• package.json: Archivo que contiene información sobre el proyecto y sus dependencias.
• vite.config.js: Archivo de configuración de Vite.
• README.md: Archivo de documentación del proyecto.