Antes de comenzar, debes tener en cuenta que, aunque React sea una librería de frontend, la forma habitual de utilizar React requiere ciertas herramientas que transpilan el código. Esto significa que el Javascript que escribes, se convierte a otro código Javascript, que es el que finalmente se lee en el navegador.
En este artículo vamos a ver los pasos que debes saber para prepararte para utilizar React.
Requisitos
- NodeJS instalado
- NPM, pnpm o un gestor de paquetes para NodeJS.
- React se suele usar mediante un automatizador como Vite, Webpack o similar.
Instalación
Para crear un proyecto de React de la forma más automática posible, podemos utilizar el siguiente comando con npm:
$ npm create vite@latest project-name -- --template react
Este comando crea una carpeta project-name utilizando Vite conjuntamente a una plantilla preconfigurada de React. Si este método no te sirve, puedes probar con la instalación manual.
Para crear un proyecto de React con Vite desde cero, simplemente accedemos a una terminal en nuestra carpeta de trabajo y escribimos lo siguiente:
# Creamos la carpeta project-name con vite
$ npm create vite@latest project-name
# Accedemos a dicha carpeta
$ cd project-name
# Instalamos las dependencias necesarias para React
$ npm install -D react react-dom @vitejs/plugin-react
Con estas líneas, estaremos creando una carpeta project-name con vite. Accedemos a dicha carpeta e instalamos los paquetes react, react-dom y el plugin necesario para usar React con vite.
Una vez hecho, creamos un fichero vite.config.js con el siguiente contenido:
import react from "@vitejs/plugin-react";
export default {
plugins: [react()]
}
Con ello estaremos importando el plugin de vite de React y utilizándolo con Vite. Esto nos proporcionará ciertas automatizaciones y realizará tareas automáticas transparentes al desarrollador, de modo que sea más sencillo trabajar con React.
Estructura de carpetas
Para empezar, es conveniente tener clara la estructura de carpetas que utilizaremos en nuestras aplicaciones web hechas con React. De momento, tendremos las carpetas public/ y components/ vacías, pero más adelante iremos incluyendo ficheros en su interior.
src/
|---- public/ # Carpeta de estáticos (imágenes, fuentes, sonidos...)
|---- components/ # Carpeta de componentes .jsx
|---- App.jsx # Componente principal de la App
|---- index.html # Fichero principal HTML
|---- index.jsx # Fichero principal Javascript
En estos primeros ejemplos, los ficheros index.html e index.jsx son los primeros que se leen por parte del navegador, haciendose referencia luego al fichero App.jsx, que es el componente global de la App.
El resto de componentes los iremos incluyendo en components/ e iremos ampliando la estructura de carpetas.
Primer ejemplo de React
Para trabajar con React debemos asegurarnos de que tenemos una correcta estructura de ficheros y carpetas. Lo primero, localizaremos nuestro fichero index.html (siempre será el primer archivo que el navegador lee). Una vez localizado nos aseguramos que esté cargando nuestro fichero Javascript principal:
<head>
<script type="module" src="./index.jsx"></script>
</head>
Este será el primer fichero Javascript que leerá nuestra aplicación, por lo que en él tendremos que cargar nuestra aplicación React.
En React lo normal es utilizar ficheros
.jsxen lugar de.js. Aunque el navegador no es capaz de leer este tipo de ficheros, habíamos mencionado que React (junto a Vite) convierte nuestro código fuente a un código Javascript diferente, que es el que realmente lee el navegador.
Observa el siguiente código, que es el contenido del fichero index.jsx:
import { createRoot } from "react-dom/client";
import { App } from "./App.jsx";
createRoot(document.body).render(<App />);
En este caso, realizamos varias cosas:
- 1️⃣ Importamos la función
createRoot()para definir un elemento HTML como padre principal. - 2️⃣ En ese elemento, se renderiza el componente
App.jsx(que devolverá código JSX).
El código de este fichero siempre es mu similar, por lo que no debemos preocuparnos excesivamente por él en este momento. Realmente donde empezaremos a editar código es en el fichero App.jsx.
Así pues, veamos el contenido del fichero App.jsx:
export function App() {
const name = "Manz";
return (
<div>
<h1>¡Hola, {name}!</h1>
</div>
);
}
Observa que tras el return tenemos unos paréntesis. Aunque parece que estamos devolviendo HTML, esos paréntesis contienen código JSX (una mezcla de HTML y Javascript). Este será uno de los primeros temas que veremos a continuación.
Otras formas de usar React
En este tutorial estamos utilizando React como librería mediante un popular automatizador llamado Vite. Sin embargo, no es la única forma de utilizar React hoy en día.
Create React App:
Es posible que leas que otra forma de utilizar React es mediante CRA (Create React App). Esta es una forma antigua y desaconsejada, por lo que si encuentras una guía o te aconsejan usar CRA, lo más probable es que se trate de información desactualizada. NextJS: Una de las formas más comunes de utilizar React hoy en día es utilizando NextJS. En ese caso estaríamos utilizando React como un framework, y no como una librería. Como ventaja, muchas características están automatizadas y son más sencillas, mientras que como inconveniente es que el frontend comienza a estar mezclado con backend y servicios de NextJS (u otro proveedor), generando cierta dependencia y acoplamiento a dichos servicios.
React JSX+ESM
En algunos casos muy concretos, es posible añadir Babel como librería para poder utilizar React directamente en el navegador. Generalmente, esto no es interesante para la mayoría de los desarrolladores, por lo que preferirán utilizar Vite, ya que transpila el código JSX y es más cómodo.
<script type="module" src="https://jspm.dev/@babel/standalone"></script>
<script type="text/jsx" data-type="module">
import React from "https://jspm.dev/react";
import { createRoot } from "https://jspm.dev/react-dom/client";
createRoot(document.querySelector("#app")).render(<h1>Hello, world!</h1>);
</script>
<div id="app"></div>
