react

Aprende con Ejemplos de React: ejerciciopráctico y desde cero

Ya hemos hablado bastante de las ventajas y características de Reactjs, 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 trabajar con ejemplos de React.

ReactJS es una estupenda librería Javascript que resultará adecuada para cualquier programador con experiencia en el lenguaje que, tras registrar un dominio y comprar un hosting, desee crear una web. Es 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 el primero de nuestros ejemplos de 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>

Ahora que tienes el conocimientos en tus manos, ya puedes empezar a trabajar o crear ejemplos de React por tu cuenta.

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora