React es una biblioteca para la implementación de interfaces dinámicas de forma declarativa y basada en componentes. Y como ya sabrás, es una de las bibliotecas más populares en esta área.
También podemos decir que React es una biblioteca para el manejo de estado. Para saber más acerca de este tema puedes revisar mi charla "Las Naturalezas del Estado y Cómo Domarlas" dictada para nerdear.la
Cuando estás comenzando en este mundo de React es posible que te encuentres con un sin número de desafíos que te pueden obligar a tomar diferentes direcciones e incluso desviarte de tu objetivo principal, aprender React.
Tu pregunta inicial sería:
¿Cómo creo o configuro una aplicación React desde cero?
En este artículo revisaremos diferentes formas de crear una aplicación con React, desde lo más sencillo y directo para comenzar a aprender, hasta algunas formas destinadas a crear aplicaciones en producción.
Como Probar React.
Al comenzar a aprender una nueva biblioteca o lenguaje es probable que no quieras (o no sepas aún) realizar todo un proceso de configuración, instalación de paquetes, editar archivos de configuración y demás.
El objetivo es comenzar a aprender, y la idea es poder construir algo lo más rápido posible para sentirte más cómodo y encontrar esa nueva pasión o gusto por esta nueva biblioteca.
Con React, este proceso no es distinto, y aún más, al ser una biblioteca de desarrollo de interfaces lo que quieres es poder ver resultados en el navegador prontamente.
Para este objetivo tienes dos alternativas:
Servicios o Playgrounds online
Hoy en día existen muchos "servicios" o sitios que te permiten crear aplicaciones directamente en el navegador, estos son llamados "playgrounds" te ayudarán a probar diferentes tecnologías de una forma rápida y sencilla.
Algunos de estos servicios son:
- Codesandbox: Un editor online para el desarrollo de aplicaciones. Puedes hacer prototipos e incluso desarrollar una aplicación lista para producción y hacer el despliegue directamente desde su interfaz. Simplemente crea un nuevo "sandbox", puedes usar directamente este template
- CodePen: También es un editor online, se describe así mismo como un ambiente de desarrollo social para desarrolladores y diseñadores. Es muy popular entre quienes desarrollan demos con CSS. Puedes usar este template para comenzar
- StackBlitz: Este es otro ambiente de desarrollo con variadas funcionalidades. Puedes usar este enlace para iniciar un proyecto base con React.
Agregar React a tu sitio web o crear una aplicación React.
El siguiente paso es configurar una aplicación en tu propio ambiente de desarrollo, para eso tienes dos opciones. Agregar React a "algunas" partes de una aplicación existente o crear una aplicación completamente manejada por React.
React es una biblioteca y te permite agregar funcionalidades dinámicas a un sitio web existente de forma gradual. Es decir, puedes tener zonas aisladas de tus aplicaciones configuradas como un componente React.
Luego agrega los scripts necesarios.
React se distribuye de diversas formas, una de ellas es con un <script> que puedes cargar directamente.
Si quisieras poner esta aplicación en producción tendrás que reemplazar los scripts or react.production.js y react-dom.production.js
Aquí usamos el CDN unpkg para obtener los archivos directamente desde el paquete de React publicado en NPM. (Si no sabes que es NPM, puedes leer este artículo en FreecodeCamp)
Ahora es tiempo de escribir el código de tu componente, esto lo puedes hacer directamente en tu archivo HTML agregando un nuevo tag <script> o, si el componente es relativamente complejo, crear un nuevo archivo JavaScript y cargarlo en tu archivo HTML usando <script src="./my-component.js"></script>
La segunda opción es crear una aplicación completamente manejada por React, para eso realizaremos los mismos pasos anteriores con la salvedad que crearemos un archivo HTML dedicado, por ejemplo, un nuevo archivo HTML.
Cabe destacar aquí que el código React que escribirás será utilizando la API "cruda" de React. Si lo que buscas es escribir código JSX, tendrás que agregar un nuevo script. <script src="<https://unpkg.com/babel-standalone@6/babel.min.js>"></script>
Esto agrega el "transpilador" Babel. Además, tendrás que modificar tus tags <script/> agregando el atributo type="text/babel" para indicarle a Babel que ese fragmento de código necesita ser transpilado. Si no sabes qué es Babel te recomiendo este artículo en FreecodeCamp.
Trabajar con React
Cuando ya has pasado la fase de pruebas y aprendizaje y quieres desarrollar con React de forma más adecuada utilizando todo el poder en tu ambiente de desarrollo dedicado también tienes opciones.
Estas herramientas son "toolchains” que te permiten resolver algunos problemas como: Escalabilidad, uso de bibliotecas de terceros, edición "en vivo", creación de app para producción, etc.
create-react-app
Una de las herramientas más recomendadas es CRA (create-react-app). Es incluso recomendada por el equipo de React como la solución de hecho para comenzar con el desarrollo de una SPA (Single Page Application)
En este punto es requerido tener algunos conocimientos sobre cómo trabajar con node y NPM.
CRA crea un ambiente de desarrollo completo de forma simple. Ejecuta en la consola:
En CRA se incluyen configuraciones por defecto para webpack, Babel, ESLlint, Prettier y otros. No provee herramientas para acceso a bases de datos, ni opiniones sobre cómo organizar tu código.
El comando npm start iniciará un servidor de desarrollo para trabajar en tu aplicación, este servidor de desarrollo se encargará de realizar todas las tareas de "transpilado" y transformación de tu código para que sea ejecutado por el navegador y te permitirá trabajar y ver tus cambios inmediatamente.
Cuando estés listo para desplegar tu aplicación, puedes ejecutar npm run build para crear tus archivos estáticos. Esto generará que tu código esté optimizado para que puedas publicarlo donde gustes.
Es posible que en algún momento necesites realizar algunas tareas que CRA no permite por defecto, para esto tendrás que expulsar el framework de trabajo para poder configurarlo manualmente, para esto puedes ejecutar npm run eject.
Algunos de los puntos fuertes de utilizar CRA son:
- Es la forma recomendada por el equipo tras React para crear la base de tus aplicaciones SPA .
- Cubre todas las características base que necesitas para tu trabajo, con cero configuraciones.
- Tiene una gran documentación
Vite
Vite es relativamente nuevo, pero está creciendo rápidamente. Es una solución universal que puede ser utilizada para iniciar todo tipo de proyectos frontend. Una de las características más relevantes y diferenciadoras es la gran DX (experiencia de desarrollo) ofrecida dada su velocidad y la gran optimización de sus "compilaciones".
Para comenzar solo ejecuta en la terminal
npm init @vitejs/app my-app
También puedes usar yarn o pnpm
#yarn
#pnpm
Luego selecciona el framework con el que quieres trabajar, en este caso React.
Al seleccionar esta opción (React) se creará un nuevo proyecto listo para ser utilizado. Lo interesante de Vite es la velocidad del proceso para crear tu proyecto.
Luego, ingresa al directorio creado utilizando la terminal cd my-app y ejecuta npm install para instalar las dependencias.
Al terminar la instalación de dependencias ejecuta npm run dev para iniciar el servidor de desarrollo y visita https://localhost:3000 en el navegador.
El principal problema que Vite intenta solucionar es trabajar con grandes proyectos sin ralentizar el proceso de desarrollo.
Vite hace uso de los módulos nativos de ES para así evitar hacer transformaciones extra.
Puedes ver esta lección en egghead.io para saber cómo trabajar con módulos nativos en el navegador
También te invito a leer este artículo en mi repositorio para saber más sobre "ES modules". Este contenido es parte de mi Newsletter
También hace uso de HMR (Hot Module Replacement) para los módulos ES, lo que reduce notablemente el tiempo de espera entre el tiempo que haces un cambio y este se refleja en el navegador.
Next.js y Gatsby
Estos pueden ser considerados frameworks sobre React, que ofrecen diferentes características sobre React en sí mismo.
Next.js es un framework desarrollado por Vercel que ofrece la posibilidad de crear aplicaciones estáticas o con renderizado en el servidor (SSR), incluye soluciones para el ruteo y estilos sin necesidad de configuraciones extra, tiene una gran comunidad y desarrollo activo. Se requiere del uso de un servicio Node.js ejecutándose en el servidor.
Gatsby es otro framework sobre React orientado a la creación de sitios web estáticos (SSG). Te permite escribir componentes en React y crear/renderizar páginas HTML estáticas que pueden ser servidas rápidamente por un CDN. Ofrece una capa de datos basada en GraphQL y una API para crear plugins.
Ambas opciones están orientadas al desarrollo de aplicaciones cuyos requerimientos sobrepasan a los de una SPA como SSR o SSG, o diferentes requerimientos de SEO y rendimiento.
Otros "boilerplates"
Existen otros "paquete" conocidos como "starters" o "boilerplates" que ofrecen soluciones para iniciar tu proyecto React, estos son creados por la comunidad. Algunos notables de mencionar son react-boilerplate y react-starter-kit
Conclusión
Dado que React es "sólo" una biblioteca para el manejo de interfaces y no contiene opiniones sobre cómo estructurar una aplicación, la comunidad ha creado diferentes soluciones tanto para crear SPA como para SSR y SSG.
Existen algunas herramientas recomendadas por el equipo de React que resuelven la mayoría de los problemas al iniciar un proyecto.
También es posible utilizar React de forma sencilla directamente en tu archivo HTML cuando estás comenzando.