Antes de comenzar la lectura: Este artículo aborda una posible forma de iniciar un proyecto React, sin embargo no es la más fácil y tampoco sería muy recomendada para una aplicación real. A nivel didáctico está bien, porque nos permite ir conociendo algunas de las piezas que forman una aplicación React, sin la envoltura de un entorno de desarrollo ni la necesidad de configurar herramienta alguna. Si estás aprendiendo React desde cero y no tienes mucha prisa, es una buena lectura para ir familiarizándote con algunas de las cosas que React dispone para desarrollar componentes y aplicaciones, como el método ReactDOM.render(). Si tienes prisa por aprender React en un entorno de desarrollo mejor preparado y más apropiado para una aplicación real, la recomendación sería comenzar tu aplicación con Create React App. Puedes ver esa introducción en el artículo de primeros pasos en React con Create React App.

Aclarado lo anterior, vamos a dar los primeros pasos con React, pero desde un proyecto completamente vacío, es decir, una página en blanco y sin la necesidad de descargar ninguna herramienta. Solo con un index.html y un poco de código.

Pero, si no es la manera más adecuada para desarrollar React, ¿Por qué explicamos cómo comenzar con React usando esta alternativa?. 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. Además, al comenzar desde un proyecto completamente en blanco, tendremos ocasión de familiarizarnos mejor con las partes de una aplicación 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 links a CDN.

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

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.

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 crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.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.

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 crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.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.