Capítulo 1. Hola Mundo

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com

Empecemos el viaje hacia el dominio del desarrollo de aplicaciones con React. En este capítulo aprenderás a configurar React y a escribir tu primera aplicación web "Hola Mundo".

Configurar

Lo primero es lo primero: tienes que conseguir una copia de la biblioteca React. Hay varias formas de hacerlo. Vamos con la más sencilla, que no requiere ninguna herramienta especial y con la que podrás aprender y hackear en un abrir y cerrar de ojos.

Crea una carpeta para todo el código del libro en un lugar donde puedas encontrarlo.

Por ejemplo:

$ mkdir ~/reactbook

Crea una carpeta /react para mantener separado el código de la biblioteca React.

$ mkdir ~/reactbook/react

A continuación, tienes que añadir dos archivos: uno es el propio React, el otro es el complemento ReactDOM. Puedes obtener las últimas versiones 17.* de ambos archivos del servidor unpkg.com, de la siguiente manera:

$ curl -L https://unpkg.com/react@17/umd/react.development.js > ~/reactbook/react/react.js
$ curl -L https://unpkg.com/react-dom@17/umd/react-dom.development.js > ~/reactbook/react/react-dom.js

Ten en cuenta que React no impone ninguna estructura de directorios; eres libre de moverte a un directorio diferente o renombrar react.js como mejor te parezca.

No tienes que descargar las bibliotecas; puedes utilizarlas directamente desde unpkg.com. Sin embargo, tenerlas localmente hace posible aprender en cualquier lugar y sin conexión a Internet.

Nota

El @17 en las URL mostradas en el ejemplo anterior te proporciona una copia de la última versión de React 17, que es la actual en el momento de escribir este libro. Omite @17 para obtener la última versión disponible de React. Alternativamente, puedes especificar explícitamente la versión que necesitas, por ejemplo @17.0.2.

Hola Mundo React

Vamos a empezar con una página sencilla en tu directorio de trabajo(~/reactbook/01.01.hola.html):

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script>
      // my app's code
    </script>
  </body>
</html>
Nota

Puedes encontrar todo el código de este libro en el repositorio adjunto.

En este archivo sólo ocurren dos cosas notables:

  • Incluyes la biblioteca React y su complemento del Modelo de Objetos del Documento (DOM) (a través de las etiquetas <script src> )

  • Defines dónde debe colocarse tu aplicación en la página (<div id="app">)

Nota

Siempre puedes mezclar el contenido HTML normal de , así como otras bibliotecas JavaScript, con una aplicación React. También puedes tener varias aplicaciones React en la misma página. Todo lo que necesitas es un lugar en el DOM al que puedas apuntar con React y decir "haz tu magia aquí mismo".

Ahora vamos a añadir el código que dice "hola"-actualiza 01.01.hola.html y sustituye // my app's code por:

ReactDOM.render(
  React.createElement('h1', null, 'Hello world!'),
  document.getElementById('app')
);

Carga 01.01.hola.html en tu navegador y verás tu nueva aplicación en acción (como se muestra en la Figura 1-1).

rur2 0101
Figura 1-1. "¡Hola mundo!" en acción

Enhorabuena, ¡acabas de crear tu primera aplicación React!

La Figura 1-1 también muestra el código generado en Chrome DevTools, donde puedes ver que el contenido del marcador de posición <div id="app"> ha sido sustituido por el contenido generado por tu aplicación React.

¿Qué acaba de ocurrir?

Hay algunos puntos de interés en el código que hizo funcionar tu primera aplicación.

En primer lugar, verás el uso del objeto React. Todas las API de que tienes a tu disposición son accesibles a través de este objeto. La API es intencionadamente mínima, por lo que no hay muchos nombres de métodos que recordar.

También puedes ver el objeto ReactDOM. Sólo tiene un puñado de métodos, siendo render() el más útil. ReactDOM es responsable de renderizar la aplicación en el navegador. De hecho, puedes crear aplicaciones React y renderizarlas en distintos entornos fuera del navegador, por ejemplo en canvas, o de forma nativa en Android o iOS.

A continuación, el concepto de componentes. Construyes tu interfaz de usuario utilizando componentes y los combinas de la forma que creas conveniente. En tus aplicaciones, acabarás creando tus componentes personalizados, pero para ponerte en marcha, React proporciona envoltorios alrededor de elementos HTML DOM. Utilizas las envolturas a través de la función React.createElement. En este primer ejemplo, puedes ver el uso del elemento h1. Corresponde al <h1> en HTML y está disponible para ti mediante una llamada a React.createElement('h1').

Por último, puedes ver en el viejo acceso al DOM document.getElementById('app'). Se utiliza para indicar a React dónde debe situarse la aplicación en la página. Este es el puente que cruza desde la manipulación del DOM tal y como la conoces a la tierra de React.

Una vez que cruza el puente del DOM a React, ya no tienes que preocuparte de la manipulación del DOM, porque React hace la traducción de los componentes a la plataforma subyacente (DOM del navegador, canvas, app nativa). De hecho, no preocuparse por el DOM es una de las grandes cosas de React. Preocúpate de componer los componentes y sus datos -la carne de la aplicación- y deja que React se encargue de actualizar el DOM de la forma más eficiente. Se acabó cazar nodos del DOM, firstChild, appendChild(), etc.

Nota

No tienes que preocuparte por el DOM, pero eso no significa que no puedas hacerlo. React te proporciona "escotillas de escape" si quieres volver a la tierra del DOM por cualquier motivo que necesites.

Ahora que sabes lo que hace cada línea, echemos un vistazo al panorama general. Lo que ha ocurrido es lo siguiente: has renderizado un componente React en una ubicación DOM de tu elección. Siempre se representa un componente de nivel superior, y puede tener tantos componentes hijos (y nietos, etc.) como sea necesario. Incluso en este sencillo ejemplo, el componente h1 tiene un hijo: el texto "¡Hola mundo!

React.createElement()

Como ya sabes, puedes utilizar un número de elementos HTML como componentes React a través del método React.createElement(). Echemos un vistazo de cerca a esta API.

Recuerda que la aplicación "¡Hola mundo!" tiene este aspecto:

ReactDOM.render(
  React.createElement('h1', null, 'Hello world!'),
  document.getElementById('app')
);

El primer parámetro de createElement es el tipo de elemento que se va a crear. El segundo (que en este caso es null ) es un objeto que especifica cualquier propiedad (piensa en atributos DOM) que quieras pasar a tu elemento. Por ejemplo, puedes hacer

React.createElement(
  'h1',
  {
    id: 'my-heading',
  },
  'Hello world!'
),

El HTML generado por este ejemplo se muestra en la Figura 1-2.

rur2 0102
Figura 1-2. HTML generado por una llamada a React.createElement()

El tercer parámetro ("Hello world!" en este ejemplo) define un hijo del componente. El caso más sencillo de es sólo un hijo texto (un nodo Text en lenguaje DOM), como ves en el código anterior. Pero puedes tener tantos hijos anidados como quieras y pasarlos como parámetros adicionales. Por ejemplo

React.createElement(
  'h1',
  {id: 'my-heading'},
  React.createElement('span', null, 'Hello'),
  ' world!'
),

Otro ejemplo, esta vez con componentes anidados (resultado mostrado en la Figura 1-3) es el siguiente:

React.createElement(
  'h1',
  {id: 'my-heading'},
  React.createElement(
    'span',
    null,
    'Hello ',
    React.createElement('em', null, 'Wonderful'),
  ),
  ' world!'
),
rur2 0103
Figura 1-3. HTML generado anidando llamadas a React.createElement()

Puedes ver en la Figura 1-3 que el DOM generado por React tiene el elemento <em> como hijo de <span>, que a su vez es hijo del elemento <h1> (y hermano del nodo de texto "mundo").

JSX

Cuando empiezas a anidar componentes, acabas rápidamente con un montón de llamadas a funciones y paréntesis que debes controlar. Para facilitar las cosas, puedes utilizar la sintaxis JSX. JSX es un poco controvertida: la gente suele encontrarla repulsiva a primera vista (¡ugh, XML en mi JavaScript!), pero indispensable después.

Nota

No está muy claro qué significan las siglas JSX, pero lo más probable es que se trate de JavaScriptXML o JavaScript Syntax eXtension. El sitio oficial del proyecto de código abierto es https://facebook.github.io/jsx.

Aquí tienes el fragmento anterior, pero esta vez utilizando la sintaxis JSX:

ReactDOM.render(
  <h1 id="my-heading">
    <span>Hello <em>Wonderful</em></span> world!
  </h1>,
  document.getElementById('app')
);

Esto es mucho más legible. Esta sintaxis se parece mucho a HTML y tú ya conoces HTML. Sin embargo, no es JavaScript válido que los navegadores puedan entender. En necesitas transpilar este código para que funcione en el navegador. De nuevo, a efectos de aprendizaje, puedes hacerlo sin herramientas especiales. Necesitas la biblioteca Babel, que traduce el JavaScript de perímetro (y JSX) al JavaScript de la vieja escuela que funciona en los navegadores antiguos.

Configurar Babel

Al igual que con React, consigue una copia local de Babel:

$ curl -L https://unpkg.com/babel-standalone/babel.min.js > ~/reactbook/react/babel.js

A continuación, tienes que actualizar tu plantilla de aprendizaje para incluir Babel. Crea un archivo 01.04.hellojsx.html como éste:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React+JSX</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app">
      <!-- my app renders here -->
    </div>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/babel.js"></script>
    <script type="text/babel">
      // my app's code
    </script>
  </body>
</html>
Nota

Observa cómo <script> se convierte en <script type="text/babel">. Se trata de un truco por el que, al especificar un type no válido, el navegador ignora el código. Esto da a Babel la oportunidad de analizar y transformar la sintaxis JSX en algo que el navegador pueda ejecutar.

Hola Mundo JSX

Una vez hecho esto, vamos a probar con JSX. Sustituye la parte // my app's code del HTML anterior por:

ReactDOM.render(
  <h1 id="my-heading">
    <span>Hello <em>JSX</em></span> world!
  </h1>,
  document.getElementById('app')
);

El resultado de ejecutar esto en el navegador se muestra en la Figura 1-4.

rur2 0104
Figura 1-4. Hola mundo JSX

Sobre la transpilación

Es estupendo que hayas conseguido que JSX y Babel funcionen, pero quizá unas palabras más no te hagan daño, sobre todo si eres nuevo en Babel y en el proceso de transpilación. Si ya estás familiarizado, puedes saltarte esta parte en la que nos familiarizamos un poco con los términos JSX, Babel y transpilación.

JSX es una tecnología independiente de React y es completamente opcional. Como ves, los primeros ejemplos de este capítulo ni siquiera utilizaban JSX. Puedes optar por no acercarte nunca a JSX. Pero es muy probable que una vez que lo pruebes, no vuelvas a las llamadas a funciones.

El proceso de transpilación es un proceso de tomar el código fuente y reescribirlo para conseguir los mismos resultados pero utilizando una sintaxis que entiendan los navegadores más antiguos. Es diferente de utilizar polyfills. Un ejemplo de polyfill es añadir un método a Array.prototype como map(), que se introdujo en ECMAScript5, y hacerlo funcionar en navegadores que sólo soportan ECMAScript3. Un polyfill es una solución en la pura tierra de JavaScript. Es una buena solución cuando se añaden nuevos métodos a objetos existentes o se implementan nuevos objetos (como JSON). Pero no es suficiente cuando se introduce una nueva sintaxis en el lenguaje. Cualquier sintaxis nueva a los ojos de un navegador que no la admita es simplemente inválida y lanza un error de análisis sintáctico. No hay forma de polirrellenarla. La nueva sintaxis, por tanto, requiere un paso de compilación (transpilación) para que se transforme antes de servirse al navegador.

Transpilar JavaScript es cada vez más habitual, ya que los programadores quieren utilizar las últimas funciones de JavaScript (ECMAScript) sin esperar a que los navegadores las implementen. Si ya tienes configurado un proceso de compilación (que realiza, por ejemplo, la minificación o cualquier otra transformación del código), puedes simplemente añadirle el paso JSX. Suponiendo que no tengas un proceso de compilación, verás más adelante en el libro los pasos necesarios para configurar uno.

Por ahora, dejemos la transpilación JSX en el lado del cliente (en el navegador) y sigamos adelante con el aprendizaje de React. Ten en cuenta que esto es sólo con fines educativos y de experimentación. Las transformaciones del lado del cliente no están pensadas para sitios de producción en vivo, ya que son más lentas y consumen más recursos que servir código ya transpilado de .

Siguiente: Componentes personalizados

Llegados a este punto, ya has terminado con la aplicación básica "Hola mundo". Ahora ya sabes cómo hacerlo:

  • Configurar la biblioteca React para experimentar y aprender (en realidad sólo se trata de unas cuantas etiquetas <script> ).

  • Renderiza un componente React en una ubicación DOM de tu elección (por ejemplo, ReactDOM.render(reactWhat, domWhere))

  • Utiliza componentes integrados, que son envoltorios de elementos DOM normales (por ejemplo, React.createElement(element, attributes, content, children))

La verdadera potencia de React, sin embargo, llega cuando empiezas a utilizar componentes personalizados para construir (¡y actualizar!) la interfaz de usuario (UI) de tu aplicación. Vamos a aprender a hacerlo en el siguiente capítulo.

Get React: Up & Running, 2ª Edición now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial