Comenzar con React en un entorno vacío

  • Por
Práctica de un proyecto React básico y simplificado al máximo, mediante un entorno vacío, que comenzaremos con un archivo html en blanco.

Vamos a crear un nuevo artículo para dar los primeros pasos con React, pero desde un entorno diferente. De hecho, usaremos un entorno vacío para comenzar, es decir, una página en blanco y sin la necesidad de descargar ninguna librería. Solo con un index.html y un poco de código.

Sin embargo, cabe aclarar que no sería la manera más adecuada para desarrollar React. ¿Entonces por qué explicamos cómo comenzar con React usando esta alternativa de desarrollo?. Para responder la pregunta aclararemos el objetivo del artículo: ofrecer una vía sencilla para poner en marcha React sin las complejidades de un entorno de desarrollo avanzado. Hay personas que prefieren enfrentarse a una nueva tecnología desde un lienzo vacío, o una página en blanco, donde tengamos pocas cosas y nos sean familiares.

Nota: Si no te asusta tener un entorno complejo y prefieres código ES6 te interesa mejor ver cómo comenzar React a través de Create React App. Esa aproximación es la que vimos en el artículo Primeros pasos con React.

Además, si alguien ya tiene una estructura de aplicación y desea integrar React en ella, este artículo le dará una buena idea de cómo se podría comenzar. El problema en este caso es que React usa JSX, que requiere de un compilado por medio de Babel. A esta operación se la conoce como "transpilado", término a medio camino entre compilación y traducción. Por ese motivo al menos, para integrar Babel en un proyecto existente, estaríamos obligados a realizar una transpilación antes de poner en producción el código, lo que nos obligaría a definir nuestro entorno necesariamente.

CDN de React

Comenzaremos entonces cargando React desde el CDN, de modo que no tengamos que instalar en nuestro proyecto ninguna librería. React se ofrece con un CDN sobre el que podemos encontrar información y las versiones más actuales desde la página de descargas.

El código que deberemos usar a partir del CDN está dividido en varios scripts. Usaremos los tres siguientes:

Por orden de aparición, estos scripts sirven para lo siguiente:

  • react es la propia librería React
  • react-dom nos permite comenzar con react usando el lenguaje JSX, para escribir algo parecido a HTML / XML cuando queremos definir la salida de la aplicación
  • babel-core sirve para convertir el JSX en código Javascript compatible con todos los navegadores

Como recomendación es interesante que usemos, en la etapa de desarrollo, los archivos de React y React-DOM no minimizados. Así podrás obtener errores más claros cuando algo no funcione en tu página. Los anteriores scripts eran las versiones para desarrollo, pero en la página de descargas de React encontrarás esos mismos scripts minimizados y adecuados para entornos de producción.

Nota: Sobre JSX hemos hablado poco. Es un superset de Javascript que permite escribir código HTML dentro de un script Javascript. Es algo que se hace extraño al principio, pero que resulta muy potente. Puedes verlo inicialmente como un sistema de templating, donde de una manera clara y mantenible puedo generar salida en HTML, interpolando datos e incluso funcionalidad que viene de Javascript. Tampoco vamos a introducirnos ahora al detalle. Una de las grandes novedades de React en el panorama de desarrollo frontend es justamente el JSX.

Anclaje de la salida de React

Ahora que ya tenemos nuestras tres librerías necesarias, podemos crear un script que use react para producir una pequeña salida. Sin embargo, necesitamos algún sitio de nuestro HTML donde volcar esta salida. Este sitio será una sencilla etiqueta HTML a la que le pondremos un identificador para poder referirnos a ella.

La salida con React será inyectada en esa etiqueta. Nosotros simplemente al ejecutar React especificaremos el id que tiene el elemento donde inyectar esa salida. React se encargará de lo demás.

El código de nuestra página HTML, una vez colocados los scripts del CDN y el elemento de anclaje quedaría de esta manera.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test React desde una página en blanco</title>
</head>
<body>
  <div id="anclaje"></div>


  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
</body>
</html>

Como habrás observado, el elemento de anclaje es el DIV con id="anclaje". A continuación ya podremos poner en marcha React para hacer un sencillo "Hola mundo".

Script React

Ahora vamos con lo que todos estarán esperando ver, cómo ejecutar React para producir esa salida, que se inyectará en el elemento de anclaje. Es bien sencillo, a través del objeto ReactDOM.

ReactDOM permite hacer cosas como renderizar HTML en un lugar de la página. La gracia es que ReactDOM soporta escribir código en JSX, de modo que nos simplifica escribir HTML dentro del propio Javascript. El método que usamos de ReactDOM es render(), el cual requiere dos parámetros: 1) El JSX con el HTML a generar. 2) el objeto del DOM donde inyectar la salida.

El ejemplo podría ser algo como esto, aunque luego veremos alguna variación:

<script type="text/babel">
    var contenido = <h1>Hola Mundo!!</h1>;
    var anclaje = document.getElementById('anclaje');
    ReactDOM.render(contenido, anclaje);
</script>

El método "render" de ReactDom recibe dos parámetros. El contenido que debe renderizar y el objeto del DOM donde volcar el resultado de esa renderización. Esos dos parámetros son los que hemos generado en las variables contenido y anclaje generadas en las líneas anteriores.

Observarás, y seguramente te llamará la atención, la variable "contenido". A ella le hemos asignado algo que parece una cadena de texto con código HTML. Sin embargo, no es un string de código HTML (porque en ese caso debería ir entre comillas), sino código JSX. El JSX no se indica entre comillas, porque no es una cadena, sino código Javascript.

Como se ha dicho, conseguimos que el navegador entienda el código JSX gracias a la conversión de este script mediante babel-core. Es por ello que el script que estamos utilizando tiene un atributo type="text/babel", que indica que es un código que BabelJS debe procesar antes de que el navegador lo interprete.

Nota: Es muy importante el type="text/babel" porque si no lo pones el navegador te arrojará un error de sintaxis en el anterior código. Pero ojo, como hemos advertido antes, tampoco es la manera adecuada de trabajar con Babel, porque de este modo estaríamos poniendo la conversión del código del lado del cliente y eso es algo que se debe hacer en el proceso de despliegue. Si lo haces así como está en este ejemplo estarás obligando al navegador a dos cosas que producirán una aplicación poco optimizada: 1) descargar el código de Babel-core, con el peso que ello conlleva para la página y 2) procesar esa transpilación (traducción + compilación) del código JSX en tiempo de ejecución, haciendo el que procesado de la página sea más lento. Quizás no lo notes con una aplicación pequeña que se ejecuta en local, pero sería patente con una aplicación mayor ejecutada en remoto.

Como alternativa, veamos ahora el mismo código pero expresado de otra manera. En vez de generar variables en pasos anteriores enviamos los valores directamente al método render().

<script type="text/babel">
  ReactDOM.render(
    <h1>Hola Mundo React</h1>,
    document.getElementById('example')
  )
</script>

Ejemplo completo del hola mundo react sin setup del entorno de desarrollo

Ahora puedes ver el código de nuestra página, un archivo HTML que podrías poner en cualquier lugar de tu disco duro y ejecutar directamente con un doble clic. Sin dependencias de ningún otro paso que debas realizar para que esto funcione correctamente.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test React desde una página en blanco</title>
</head>
<body>
  <div id="anclaje"></div>


  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  <script type="text/babel">
    var contenido = <h1>Hola Mundo!!</h1>;
    var anclaje = document.getElementById('anclaje');
    ReactDOM.render(contenido, anclaje);
  </script>
</body>
</html>

Es un ejemplo de React básico, pero como hemos dicho poco apropiado por varios motivos. Además, aunque el archivo se ejecute correctamente haciendo doble clic sobre él, te conviene acceder a los ejemplos a través de un servidor web, al menos ir acostumbrándote a ello, porque más adelante las cosas no funcionarán desde file:// y sí desde http://.

Espero que te haya parecido interesante esta práctica para comenzar con ReactJS sin tener que preocuparte de la creación de un entorno de desarrollo y una carpeta de aplicación.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir