Ejemplo práctico de React desde cero

Ya hemos hablado bastante de React desde el punto de vista teórico, así que ahora vamos a hacer un sencillo ejercicio práctico con esta librería Javascript y partiremos de un archivo en blanco. Para no tener que instalar nada en el proyecto y mantener el código o más simple posible, usaremos el CDN que nos permite instalar distintas piezas imprescindibles para iniciar React.

ReactJS es una estupenda librería Javascript que resultará adecuada para cualquier programador con experiencia en el lenguaje, incluso más sencilla que otras alternativas como Angular 2. Sin embargo, tiene una complejidad relacionada con el hecho de usar un transpilador para convertir el lenguaje JSX usado para la creación de las vistas.

JSX permite escribir en un script Javascript código HTML sin necesidad de abrir y cerrar comillas para iniciar cadenas o interpolar variables con datos. Es muy interesante porque nos permite crear un código de las vistas más fácil de escribir, leer por el ojo humano y, en definitiva, de mantener durante todo el ciclo de vida de la aplicación.

Vamos a crear nuestro primer programa en React, donde no importa tanto el código como sí la integración de todas las librerías y herramientas necesarias para que React funcione, así como el transpilador del JSX.

Instalación

React dispone de un CDN donde podemos instalar las distintas piezas de código necesarias para iniciar la librería:

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

Por orden de aparición tenemos:

  • La librería ReactJS.
  • React-DOM que es el código que da soporte a las utilidades de JSX.
  • La herramienta Babel, que es la que hace de transpilador de JSX a Javascript.

Usando React

Ahora que tenemos instalados estos scripts somos capaces de usar React en un archivo en blanco. Para nuestro ejemplo, en el HTML, necesitamos crear una única etiqueta para conseguir anclar la vista producida desde React a un elemento de la página. Obviamente, la página puede tener tanto código HTML como necesitemos y el elemento de anclaje estar en cualquier parte de ese HTML.

<div id="elementoparareact"></div>

Y, por fin, la parte en la que usaremos Javascript para crear una vista desde React, cuyo contenido volcaremos al elemento de anclaje.

<script type="text/babel">
var vista =
<div>
<h1>React Rules</h1>
<p>Esto es un código de una vista</p>
<p>Puede parecer HTML, dentro de Javascript, pero es JSX</p>
</div>;
var elemento = document.getElementById('elementoparareact');
ReactDOM.render(vista, elemento);
</script>

El primer detalle consiste en fijarse que el script está marcado con type=”text/babel”, para que Babel lo procese antes del intérprete de Javascript.

Luego nos podemos fijar en la vista. Ahí tenemos nuestro código JSX.

Luego, la línea que hace uso de ReactDOM que nos sirve para renderizar la vista dentro del elemento de ancla.

El código completo del ejemplo se puede ver a continuación.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo básico de ReactJS desde cero</title>
</head>
<body>
<div id="elementoparareact"></div>
<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.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 vista =
<div>
<h1>React Rules</h1>
<p>Esto es un código de una vista</p>
<p>Puede parecer HTML, dentro de Javascript, pero es JSX</p>
</div>;
var elemento = document.getElementById('elementoparareact');
ReactDOM.render(vista, elemento);
</script>
</body>
</html>
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *