En este tutorial aprenderás las distintas formas posibles con las que puedes iniciar una página web que utilice React, así como las configuraciones necesarias en tu computadora para poder desarrollar con React.
Qué es React
React es una librería para el desarrollo de interfaces gráficas. Está basada en una arquitectura orientada a componentes, donde el código se separa en unidades, llamadas componentes, que encapsulan toda la funcionalidad de un elemento de tu interfaz. Se recomienda usar React para añadir interactividad a tu página web, ya sea con interacciones del usuario, o bien, actualizando información de tu página según sea necesario, sin la necesidad de recargar la página web completa. React hace que las actualizaciones a tus cambios se hagan de manera eficiente, haciendo el mínimo posible de cambios para reflejar los datos más actualizados.
Cómo usar React en una página
React no asume nada acerca de las tecnologías con las que funciona tu proyecto, por lo que existen distintas alternativas para comenzar a usar React en tu aplicación. Queda a consideración tuya decidir con cuál de estas alternativas deseas arrancar, toma en cuenta que algunas se adaptan mejor a proyectos pequeños, y otras alternativas son más bien pensadas para desarrollos más grandes.
La forma más simple y rápida de integrar React en tu sitio web es importar la librería usando la etiqueta <script>, tal como se describe en la guía para Agregar React en 1 minuto de la documentación oficial de React.
Por lo que una página, tan sencilla como sea posible, que integre React se vería de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página con React</title>
</head>
<body>
<!-- Aquí importamos las librerías -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
Una vez que has importado React, puedes comenzar a crear componentes e incrustarlos en tu página:
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script>
class HolaMundo extends React.Component{
render() {
return React.createElement('p',{},'Hola mundo');
}
}
const domContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(HolaMundo))
</script>
Y con tan solo unas líneas de código, ya tienes tu página web configurada para trabajar con React. Puedes encontrar el código completo en este repositorio de GitHub
Bundlers
La forma más común de usar React es a través de la configuración de un bundler como webpack o vite, y para usarlos necesitas conocimientos en algún bundler para configurarlo de tal manera que puedas usar React y otras dependencias comunes como Babel, JSX, entre otras.
El proceso de configuración de un bundler requiere de conocimientos intermedios-avanzados, por lo que comúnmente usamos un toolchain para el que la configuración del bundler está lista. Algunos ejemplos son:
- create-react-app
- Gatsby
- Next.js
- Entre otros
Para poder instalar y trabajar con algunos de estos bundlers, y toolchains de React, necesitas tener instalado en tu computadora Node.js y npm.
Node.js es un entorno de ejecución para JavaScript, y si antes has usado JavaScript sin preocuparte por qué o quién procesará y ejecutará tu código, seguro es porque has usado el navegador web como entorno de ejecución. Alternativamente al navegador web, Node.js nos permite ejecutar código de JavaScript en nuestra computadora.
Los bundlers como Node.js usan JavaScript con Node.js para poder procesar tu proyecto, manejar dependencias, actualizaciones, generar código para despliegue en producción, automatizaciones, y otras tareas interesantes.
Instalar Node.js
Para instalar Node.js dirígete a la página oficial: https://nodejs.org en esta página encontrarás las opciones de descarga para tu sistema operativo, la página detecta desde qué sistema operativo (Windows, Linux, o Mac) estás ingresando y ofrece la opción correspondiente.
Muy probablemente verás dos opciones de descarga que te permitirán descargar la versión LTS y la Current. ¿Cuál deberías descargar? Si estás comenzando se recomienda que uses la versión LTS, las siglas LTS corresponden a la frase Long-Time Support, que si traducimos quiere decir soporte a largo plazo, esta versión se considerá también la versión estable de Node.js, por lo que para iniciar es recomendada.
La versión Current puede contener elementos experimentales que vayan a cambiar con el tiempo, en la mayoría de los casos no deberías de tener problemas entre usar la versión Current o la versión LTS, sin embargo, si existiera algún problema de compatibilidad, arreglarlo puede ser complicado, por lo que se recomienda descargar la versión LTS.
El instalador de Node.js ofrece un asistente de seguimiento para su instalación, para el que se recomienda usar la configuración por defecto.
En uno de los pasos se incluye la opción "Add to Path" asegúrate de que esté habilitada:
Si todo sale bien el asistente finalizará con éxito:
Una vez que seguimos los pasos de instalación, deberíamos poder usar Node.js en nuestra computadora. Casi en todos los casos usamos Node.js a través de la línea de comandos, o terminal, como mejor la conozcas.
Para usuarios de Mac y sistemas basados en GNU/Linux deberán abrir el programa con nombre Terminal para ejecutar los comandos a continuación, en el caso de Windows, puedes buscar el Powershell o el cmd para ejecutar estos comandos.
La interfaz de la similar es parecida a la que muestra la siguiente imagen, en donde verás que podemos solamente escribir, esto responde a que la interacción con la terminal es a través de comandos.
En este caso escribe el siguiente comando que usa Node.js y debe responder con la versión instalada:
node -v
En mi caso responde con la versión instalada: v14.4.0, en tu caso probablemente sea una versión superior a la versión 16.
Como parte de la instalación de Node.js, también se instala npm. npm por sus siglas node package manager, es un manejador de paquetes o dependencias. Es a través de npm que podemos importar librerías externas de una biblioteca enorme, entre ellas por supuesto React.
Puedes configramr que npm está instalado para tu computadora usando el siguiente comando:
npm -v
Que debe imprimir la versión de npm instalada en tu computadora. Si llegaste a este punto y ambos comandos fueron exitosos, tu computadora está lista
create-react-app
Con Node.js y npm configurados para tu computadora, puedes usar create-react-app para arrancar un proyecto nuevo de React que venga pre-configurado con webpack como bundler. Esta alternativa es una de las más populares y usadas para trabajar con React.
Para usar create-react-app necesitas ejecutar el siguiente comando en tu línea de comandos (Terminal, cmd, Powershell):
npx create-react-app my-app
npx es un comando que, a través de npm, nos permite hacer uso de ejecutables que pertenezcan a algún paquete externo, para este escenario, usamos el ejecutable create-react-app del paquete con el mismo nombre. El último argumento del comando, que para este ejemplo es my-app se usará como nombre para el proyecto, es arbitrario por lo que puedes colocar el nombre que mejor identifique a tu proyecto, sustituye my-app por el nombre elegido para tu proyecto.
La ejecución de este comando puede tardar mientras descarga los archivos de las librerías que pre-configura create-react-app, dependiendo de la velocidad de tu internet.
Como resultado de este comando podrás se crea una carpeta con el mismo nombre del proyecto que contenga todos los archivos necesarios para comenzar a trabajar.
Para poder visualizar tu proyecto en el navegador, y que tus cambios se vean reflejados, necesitas ejecutar el comando npm start dentro de la carpeta en la que se creó tu proyecto:
cd my-app
npm start
Como resultado de este comando verás que la página se abre automáticamente en tu navegador en esta dirección: http://localhost:3000.
Ahora los cambios que hagas sobre el archivo index.js se actualizarán automáticamente para la página.
IDEs en la nube.
Si lo que deseas es comenzar a aprender, sin preocuparte por la configuración de tu entorno de trabajo, existen algunas herramientas que puedes usar a través del navegador web, y que puedes usar sin la necesidad de instalar absolutamente nada. Algunas opciones son:
A mi particularmente me gusta Stackblitz porque está basado en VisualStudio Code que es mi editor de preferencia, por lo que la experiencia es relativamente similar al usarlo en web a través de Stackblitz.
En cualquiera de estos ejemplos, sólo necesitas crear una cuenta y seleccionar la opción de iniciar un proyecto de React para poder arrancar tu proyeco, con eso estás listo para codear y seguir tus cursos y tutoriales:
Gastby y Next.js
Gatsby y Next.js son dos frameworks que te permiten desarrollar aplicaciones web usando React para las interfaces, además de servir como entorno pre-configurado para desarrollar aplicaciones con React, también ofrecen beneficios adicionales como:
- Integración con fuentes de datos
- Pre-render de las páginas en build-time o request-time
- Optimización de imágenes
- Routing
- Entre otros
Aunque son una de las opciones preferidas para hacer aplicaciones React listas para despliegue en producción, tienen la desventaja de que, además de aprender React, necesitas aprender alguno de los frameworks, por lo que no se recomiendan para iniciar con React, esta puede ser una mejor opción si ya sabes React y deseas un entorno pre-configurado listo para producción.
Conclusión
Existen distintas alternativas para desarrollar con React, cada una ofrece ventajas y desventajas que se adaptan mejor a uno y otros proyectos, también es importante considerar para qué estás usando React, y cuál es tu nivel de experiencia, según estas consideraciones podrías optar por una u otra opción.
Si conoces alguna otra opción sobre cómo usar React, déjala en los comentarios para que podamos comentarla.
En Código Facilito puedes aprender y dominar React desde 0: https://codigofacilito.com/categories/react