Loading
Fundamentos de React(14 Lecciones)
Ejercicio

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 de 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

Desafío

Para este desafío veremos cómo crear una aplicación estática con React desde cero, para esto necesitaremos la terminal y un editor de texto de tu elección.

Los objetivos son los siguientes:

  • Crear archivos estáticos y agregar React
  • Servir los archivos estático y ver que React está disponible para nuestro uso.

El desafío es el siguiente:

  • Crear archivos estáticos.
    • Crea un archivo base index.html en el directorio raiz.
  • 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
  • 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 correspondiente
$ npm run dev

Debes revisar que al cargar el archivo html React esté disponible en el scope global.

Tip: utiliza DevTools

Crédito Extra

  1. Escribe en tu archivo tu primer script y agrega un simple console.log para identificar que React está 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.