Ediciones ENI Editorial | líder en informática
Empezar bien con React
Conceptos básicos de JavaScript
JavaScript ha evolucionado mucho y ya no se limita únicamente a los navegadores. En esta sección, vamos a ver los elementos utilizados con frecuencia en el contexto de una aplicación React.
No vamos a cubrir todo el lenguaje, sino que nos centraremos en los puntos importantes. Este capítulo pretende ser teórico, con algunos ejemplos que ayudaran a comprender el funcionamiento de React, JavaScript y el navegador.
Es importante señalar que esta sección puede servir como un recordatorio o introducción a los conceptos importantes de JavaScript, pero no será suficiente si nunca ha practicado el lenguaje antes. En este caso, puede valer la pena comenzar con una verdadera introducción a JavaScript para dominar rápidamente React.
1. El DOM (Document Object Model)
Este importante concepto se aplica al entorno del navegador web. El DOM es la interfaz de programación que permite modificar un documento web. Se trata de un árbol en el que se encuentran los elementos presentes en una página. Cada elemento de este árbol es un nodo, también conocido como DOM tree. El nodo raíz en el contexto de una página web es la etiqueta <html> y tiene dos hijos directos <head> y <body>.
El DOM no es el tema principal de este libro. Sin embargo, necesita saber cómo usar los métodos básicos para seguirlo fácilmente. Cuanto más sepa cómo funciona el DOM, mejor entenderá lo que hace React.
El DOM nos permite interactuar con los elementos de una página web mediante su API. De este modo se pueden seleccionar todos los enlaces presentes en una página:
document.querySelectorAll('a') //Devuelve todos los nodos <a>. Manipular el DOM directamente puede ser tedioso cuando se tienen muchos elementos que modificar y es necesario sincronizarlo todo con una fuente de datos. En la actualidad, cuando se utiliza un framework o una biblioteca web, a menudo se puede abstraerse de la tarea de modificar y sincronizar el DOM. Ya no es necesario que los desarrolladores consulten el DOM directamente para seleccionar o modificar los elementos, pero esto es lo que React hace en segundo plano.
Esta capa de abstracción toma la forma de un paquete llamado ReactDOM, que pronto descubriremos con explicaciones detalladas.
Sin embargo, te invito a profundizar...
Prerequisitos, conceptos y herramientas para desarrollar
1. Instalación de las herramientas necesarias
a. NodeJS
NodeJS, con su gestor de paquetes npm (Node Package Manager), nos permitirá ejecutar todas las demás herramientas que se utilizarán para el desarrollo. Este es el bloque de construcción básico que utilizarán todas las bibliotecas instaladas, especialmente cuando implementemos las herramientas de construcción.
Es preferible tener al menos la versión 14, que puede descargarse de https://nodejs.org, el sitio web oficial. En la página principal, simplemente descargue la última versión estable (LTS) para su sistema operativo. Actualmente es la 20.12. npm se instalará con node.
b. Editor
Sera necesario un editor de código, el más extendido en la comunidad de desarrollo frontend es VSCode. Esto se debe al gran número de extensiones, algunas de las cuales se presentarán en este libro. Por supuesto, esto no es obligatorio; puedes elegir el editor que prefieras, pero es importante que te sientas cómodo con él y que domines la herramienta. Si prefiere un entorno de desarrollo "integrado", WebStorm es una opción, pero la licencia es de pago.
Para instalar VSCode, visite el sitio web oficial: https://code.visualstudio.com
Esto es lo mínimo que necesitas para empezar a programar. La siguiente sección detallará...
Una aplicación básica
1. El mínimo de código para una aplicación React
Antes de sumergirnos en una configuración más avanzada, merece la pena resumir lo que necesitamos para desarrollar el frontend. En primer lugar, un documento web, comenzando con un simple archivo HTML.
En los ejemplos de código proporcionados, puede abrir la carpeta 01-premera-pagina-react. Para ahorrar tiempo, abra esta carpeta directamente en VSCode o en el editor de su elección. También notará la presencia de un archivo CSS, ya que los estilos se proporcionan con los ejemplos. Pero no se preocupes por eso, el objetivo es concentrarse en React.
La biblioteca React consiste en un único archivo JavaScript que puede importarse a cualquier documento HTML mediante la etiqueta <script>. Este archivo por sí solo no será suficiente en el contexto de un navegador web, ya que no incorpora las funcionalidades de modificación del DOM. Por lo tanto, es necesario cargar una segunda biblioteca llamada ReactDOM.
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/
react-dom.development.js"></script> El sitio web unpkg.com es un servicio de distribución de paquetes para desarrolladores web. Permite servir directamente archivos JavaScript...
Entorno de desarrollo
1. Introducción a JSX
JSX es una extensión de la sintaxis del lenguaje JavaScript. Ampliamente utilizado en React, permite describir la estructura de la interfaz de usuario con una sintaxis que se asemeja a HTML. He aquí un ejemplo sencillo de un componente React escrito con JSX :
function Hola() {
return <h1>¡Hola!</h1>;
} En este ejemplo, <h1>¡Hola!</h1> es una expresión JSX que describe un elemento HTML h1.
El contenido JSX puede ser almacenado en una variable o incluso devuelto desde una función. Este tema se trata en el capítulo Descubrir JSX.
Una de las ventajas de usar JSX es que el código React es más legible y expresivo que con createElement. Tenga en cuenta que, para que el código JSX sea interpretado por los navegadores, tiene que ser transformado en una llamada de función JavaScript estándar, a menudo a través de bundlers como Webpack o compiladores como Babel. En el caso de React, el JSX se transforma en llamadas a React.createElement, para crear la representación del elemento DOM en JavaScript. Así es como se vería la transformación en nuestro ejemplo:
function Hola() {
return React.createElement('h1', null, '¡Hola!');
} 2. Inicialización de un proyecto con Vite
A partir de ahora, vamos a utilizar una herramienta que facilitará el proceso de desarrollo. En primer lugar, asegúrate de que tienes Node.js y npm instalados en tu máquina. Hay varias formas de crear un proyecto, pero durante mucho tiempo la documentación de React recomendaba usar Create React...