Introducción a React
¿Qué es React?
React es una biblioteca de JavaScript desarrollada por Facebook (ahora Meta) en 2013 que permite construir interfaces de usuario basadas en componentes. Su función principal es automatizar la sincronización entre los datos de la aplicación (el estado que cambia con la interacción del usuario) y lo que se renderiza en la pantalla (el HTML).
Es importante aclarar que React se define como una biblioteca (librería), no como un framework:
- Una biblioteca, brinda herramientas específicas para resolver problemas concretos (en este caso, construir interfaces)
- Un framework, Te exige una estructura completa con reglas estrictas sobre cómo organizar tu código en carpetas.
React mantiene una copia de la página en memoria (Virtual DOM) para re-renderizar partes del HTML en tiempo real cada vez que el estado cambia, sin necesidad de recargar nada.
El Concepto Central de React es: "Funciones que devuelven HTML"
En estas primeras clases usaremos React desde el CDN. Luego, aprenderemos a empaquetar un proyecto de React usando Node.js y Vite y por último usaremos componentes de React dentro de Astro (islas).
Usar React mediante CDN
Para utilizar React usando el CDN, se crea un archivo .html y se incluyen los scripts de React, ReactDOM y Babel.
- React es la biblioteca principal con la lógica de componentes
- ReactDOM es el encargado de renderizar React en el navegador
- Babel es un traductor (transpilador) de JavaScript que transforma las funciones de React (JSX) a código que el navegador entiende.
Mi primer programa usando React
Copia y pega el siguiente programa en tu ordenador:
Mi primer programa en React (index.html)
Como se puede apreciar React envía una (o varias) funciones de JavaScript (JSX) que se ejecutan directamente en el navegador del usuario y van "dibujando" y modificando el HTML en tiempo real.
Para separar el HTML del código de React:
Mi primer programa en React (HTML)
IMPORTANTE
-
Se debe configurar el script como módulo con Babel
<script type="text/babel" data-type="module" src="app.jsx"></script> -
Para probar archivos con
import/exportodata-type="module"localmente en el navegador, se necesita necesita abrir el archivo a través de un servidor local sencillo (como la extensión "Live Server" de VS Code), ya que los navegadores bloquean peticiones de módulos locales bajo el protocolofile://
Mi primer programa en React (JSX)
Para ir estudiando todos los temas de React, haremos una aplicación to-do list paulatinamente, a la que iremos agregando poco a poco instrucciones que permitirán comprender paso a paso cómo maneja React los componentes, la jerarquización de componentes, las props, los estados, compartir estados, y las puertas de escape.
Inicialmente la haremos utilizando el CDN, luego la haremos independientemente, y por último la haremos en Astro + React para agregar persistencia.