2.3 Desarrollo local
La ventaja de una plataforma como CodePen, disponible en cualquier momento y lugar, y en la que puedes compartir tu código con otros desarrolladores de todo el mundo, se ve empañada por la desventaja de que la depuración en un entorno así solo es posible de forma bastante compleja. Además, necesitas una conexión a internet y no tienes forma de guardar el código fuente en un repositorio local. En la mayoría de los casos, desarrollarás tu aplicación localmente en tu ordenador. De nuevo, existen numerosas opciones. La forma más sencilla es integrar la biblioteca directamente en una página web.
En comparación con bibliotecas como Vue.js, React suele ser criticado por su dificultad inicial. Mientras que Vue.js solo requiere la inclusión de un archivo JavaScript, React parece requerir un proceso de instalación exhaustivo. Sin embargo, esto es solo parcialmente cierto.
Para usar React en una aplicación local pequeña, debes seguir un procedimiento similar al de configurar un entorno de pruebas como CodePen. Primero, crea un archivo HTML llamado index.html:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
<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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<scriptsrc="index.jsx" type="text/babel"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>Listado 2.6 Archivo index.html inicial con integración directa con React
El Listado 2.6 muestra la estructura de este archivo inicial. Primero, debe asegurarse de que las bibliotecas react y react-dom estén cargadas. Puede hacerlo a través de la red de entrega de contenido (CDN) unpkg.com. Para usar la sintaxis JSX más cómoda para compilar sus componentes, también necesita Babel, que también puede obtener de unpkg.com. Con esta configuración, finalmente puede incluir el archivo index.jsx que contiene su aplicación personalizada. En este punto, es importante que especifique el atributo type con el valor text/babel. De esta manera, Babel puede garantizar que el archivo se traduzca para que el navegador pueda interpretar el código JSX. En el body de su archivo HTML, define el contenedor en el que se montará su aplicación. La extensión de archivo .jsx indica que este archivo no es un archivo JavaScript común, sino que se usa JSX y, por lo tanto, se necesita una herramienta como Babel para la traducción.
El contenido del archivo index.jsx corresponde al código fuente que ejecutó como JavaScript en CodePen en el primer ejemplo. El Listado 2.7 lo resume de nuevo:
const Greet = ({name}) => <h1>Hello {name}!</h1>;
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<Greet name="Reader" />);Listado 2.7 Código fuente de JavaScript de la aplicación React local
Al cargar el archivo index.html localmente en su navegador, solo verá una página en blanco. Al acceder a la consola JavaScript de su navegador, verá un mensaje de error que indica que no se pudo cargar el archivo index.jsx. Esto se debe a que Babel intenta cargar este archivo mediante una solicitud asíncrona y, por razones de seguridad, estas solicitudes no pueden ejecutarse mediante file://-, sino únicamente mediante el protocolo http://.
La forma más fácil de solucionar este problema es probar su aplicación con un servidor web local.
Si ahora ejecuta http-server como se describe, llegará a su aplicación a través de http://localhost:8080, donde debería ejecutarse sin errores y debería obtener una vista como la que se muestra en la Figura 2.3.
Después de estas dos digresiones sobre la ejecución de React, en los siguientes apartados nos centraremos en la variante más utilizada para trabajar con una aplicación React: el proyecto Create React App.
Figura 2.3 Ejecución local de la aplicación React