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:

v22.5.1

• Verifica la instalación de npm ejecutando:

npm -v

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

10.8.2

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:

Primero, asegúrate 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

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.

Configurar y ejecutar el proyecto:

• Navega al directorio del proyecto:

cd my-react-app

• Instala las dependencias del proyecto:

npm install

• Inicia el servidor de desarrollo:

npm run dev

• Vite iniciará un servidor de desarrollo y te proporcionará una URL local (por defecto http://localhost:5173) donde podrás ver tu aplicación React en funcionamiento.

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":

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

export default App;

Iniciar el servidor de desarrollo:

• Una vez realizadas las modificaciones, inicia el servidor de desarrollo con:

npm run dev

• 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 una página con el mensaje "Hola Mundo".

Estructura de un proyecto React

Cuando creas un proyecto React utilizando Vite, la estructura de carpetas generada es bastante simple y optimizada para empezar rápidamente con el desarrollo. Una estructura típica de un proyecto React con Vite sería la siguiente:

my-react-app/
├── node_modules/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── ExampleComponent.jsx
│   ├── 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/: Carpeta donde puedes guardar tus componentes React. En este ejemplo, contiene ExampleComponent.jsx, que es un componente de ejemplo.
• App.jsx: Componente principal de la aplicación. Es común que este archivo contenga la estructura básica de la aplicación.
• 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. Generalmente contiene la carpeta node_modules/, entre otras.
• index.html: Archivo HTML base del proyecto. Es la plantilla que se utiliza para insertar la aplicación React. Vite usa este archivo para arrancar la aplicación.
• package.json: Archivo que contiene información sobre el proyecto y sus dependencias. También define los scripts disponibles para automatizar tareas como iniciar el servidor de desarrollo o construir la aplicación para producción.
• vite.config.js: Archivo de configuración de Vite. Aquí puedes personalizar el comportamiento del servidor de desarrollo, los alias de las rutas, el proceso de construcción, entre otros.
• README.md: Archivo de documentación del proyecto. Es un buen lugar para describir el propósito del proyecto, cómo configurarlo y cómo usarlo.