Creando una Aplicación Estática
Hay muchas formas de utilizar React para nuestros desarrollos, la forma más simple y básica de hacerlo es simplemente utilizando archivos estáticos, tus viejos amigos HTML, CSS y Javascript.
Revisa otras formas de crear una aplicación React en este artículo para Escuela Frontend
Para crear una aplicación React en realidad necesitas dos librerías. React, que es la librería que se encarga de manejar el DOM virtual, interpretar tus componentes y manejar el estado y luego una librería que se encargue de traducir todo eso al “lenguaje” del dispositivo que estás usando, en el caso del browser hablamos de ReactDOM.
ReactDOM es la librería responsable de comunicarse con las API del DOM y renderizar los elementos en tu pantalla.
Esta arquitectura se debe a que React puede ser utilizado en diferentes dispositivos huéspedes como dispositivos móviles por medio de React Native o incluso video con Remotion
Primeros Pasos
Para esta lección veremos como crear una aplicación estática con React desde cero, para esto necesitaremos la terminal y un editor de texto de tu elección.
🎯 Objetivos
- Crear archivos estáticos y agregar React
- Servir los archivos estático y ver que React está disponible para nuestro uso.
🏋️♂️ Ejercicios
1. Crear archivos estáticos
Como puedes notar, el directorio para esta lección corresponde sólo a algunos archivos de configuración, y eso es intencional pues será en este ejercicio que crearemos nuestros primeros archivos.
Crea un archivo base index.html en el directorio raiz.
2. Agregar React utilizando unpkg
Ahora haremos que React entre en juego, para eso utilizaremos una versión empacada lista para ser utilizada desde un CDN llamado unpkg.
Tip: El snippet de código que necesitas es
3. Explorar nuestros archivos y verificar que React está disponible
La aplicación es servida por Vite, para ejecutar y ver el resultado de tu trabajo puedes ejecutar en la terminal y seleccionar la lección corresondiente
$ npm run devDebes revisar que al cargar el archivo html React esté disponible en el scope global. Tip: utiliza las DevTools
🍬 Crédito Extra
- Escribe en tu archivo un simple console.log para identificar que
Reactestá disponible.
Transcripción
Es hora de integrar React por primera vez. Para eso configuraremos una aplicación estática. Hay muchas formas de implementar React en tu aplicación. Puedes revisar en este artículo de Escuela Frontend algunas alternativas.
Cuando creamos una aplicación React, en realidad, utilizamos dos librerías -- React, que es la librería que se encarga de manejar el DOM, y ReactDOM, que es la librería que comunica nuestros cambios con el DOM, traduce nuestro código.
Nuestro objetivo ahora es crear archivos estáticos -- la manera más sencilla es con archivos estáticos -- y servir esos archivos estáticos como una aplicación. Para eso, utilizaremos el gran servicio unpkg. Unpkg es un servicio que te permite acceder a todo el contenido de npm como si fuera un CD.
Básicamente vamos a copiar estos links. También podemos ver que esta es la forma más sencilla que la propia documentación de React aconseja, y lo llama simplemente "Agregar React a un síto web," utilizando un simple script. Luego exploraremos los archivos y verificaremos que React está disponible.