react.md

¿Cómo crear una aplicación con React?

ÍNDICE

1. Qué es React
2. Por qué me podría interesar aprender a utilizar React
3. Qué debería saber para utilizar React
4. Cómo creo una página web con React
5. Cómo pongo algo en una página con React
6. Cómo veo el código que hice en un navegador web

Qué es React

React es una biblioteca de UI (User Interface) creada por Facebook. Su función es crear aplicaciones web interactivas compuestas de componentes. Los componentes los podemos pensar como etiquetas o elementos (<p />, <button />, <table />, etc.) personalizados (<MiBotonEnchulado />, <MiGraficaFancy />, etc.). Son un conjunto de contenidos y comportamientos (HTML, CSS y JS) reutilizables que se pueden poner en una página web.

Un componente se escribe como una función simple de JavaScript. Es decir, que un componente se escribe completamente en este lenguaje (JavaScript) y no en HTML. React soporta una sintaxis especial llamada JSX, que se parece mucho a HTML (pero que en realidad es JavaScript), y es convertida (traducida) a JavaScript estándar en tiempo real por un intérprete (comúnmente Babel).

Una página web se compone de componentes colocados en una estructura anidada de "árbol". Así como los elementos HTML pueden contener otros elementos, los componentes de React pueden contener otros componentes (y elementos nativos también como div, p, button, etc.). Sólo que estos componentes son funciones, por lo que también se les puede pasar o transmitir datos para que se muestren.

Una de las características que definen a React es la idea de un flujo de datos unidireccional (one-way data flow). Esto fue una de las cosas que diferenció a React cuando salió por primera vez en 2013. Actualmente (2020), muchas otras bibliotecas (como Vue, Svelte y Angular) también han adoptado el patrón de flujo de datos unidireccional.

En el modelo de flujo de datos unidireccional, los datos sólo se transmiten a través del árbol, de un componente a sus hijos. Como en una cascada: sólo hacia abajo, no hacia arriba o de lado. A diferencia de otros enfoques (como jQuery), donde los datos podrían haber estado disponibles globalmente y podrías "conectarlos" en cualquier parte de la página, React es más explícito y más restrictivo. Con React se transmiten esos datos al componente de nivel superior (al componente padre), y éste los transmite hacia abajo (hacia los demás hijos), y así sucesivamente. Es algo parecido a cómo comunicamos o transmitimos datos entre nodos que son clones de un repositorio origen de Git.

Por qué me podría interesar aprender a utilizar React

React es manera muy buena de construir interfaces interactivas, y es muy popular en este momento (y lo ha sido durante algunos años). Si estás buscando una carrera como desarrollador web (y como front-end), React es una excelente biblioteca para aprender. Los "React developers" están teniendo una gran demanda.

No obstante, no es la única manera de construir interfaces de usuario para la web. Existen muchas otras bibliotecas. Vue y Angular son las alternativas más populares, y Svelte está ganando fuerza. Y, incluso ahora en el 2020, todavía puedes construir páginas estáticas con puro HTML y CSS, y páginas dinámicas con puro JavaScript.

Qué debería saber para utilizar React

Aprender los "prerrequisitos" es aburrido, pero React se basa en ideas de HTML y JavaScript. Aunque no pienso que haya necesidad de dominar HTML y JS durante meses antes de utilizar React, será de gran ayuda tener alguna experiencia con estos lenguajes.

React es una biblioteca encima de JS, y a diferencia de muchas otras bibliotecas que son sólo un conjunto de funciones, React tiene su propia sintaxis "JSX". Sin una comprensión sólida de la sintaxis de JS, puede ser difícil decir qué partes del código son "cosas de React" y cuáles son sólo JavaScript. Al final, si se convierte en una confusión en tu cabeza será mucho más fácil si aprendes primero JavaScript simple (Vanilla JavaScript).

Y también, dado que JSX está fuertemente inspirado en HTML (con el mismo rigor de "tú debes cerrar cada etiqueta" de XML), será de gran ayuda entender también HTML.

React no tiene una forma "preferida" de hacer el estilo. El CSS regular funciona muy bien, y hay un montón de bibliotecas CSS-in-JS si es que deseas ir por ese camino (Styled-Components es probablemente la más popular). De cualquier manera, necesitas entender cómo funciona CSS para estilizar páginas de manera efectiva.

Un montón de preguntas (a Google o a Stack Overflow) de "cómo hacer X cosa en React" son en realidad preguntas de JavaScript, de HTML o de CSS, pero sería más complejo saber cómo encontrar esas preguntas (o respuestas) sin entender las otras tecnologías web (HTML, CSS y JS) también.

Cómo creo una página web con React

Hay (muy) diversas (y muchas) maneras de construir una página de cero con React. La que me parece más inmediata y sencilla es utilizando una herramienta de la línea de comandos (CLI) que se llama create-react-app. create-react-app es un generador de proyectos, construye un "scaffold" en un solo comando (y en menos de un minuto, dependiendo claro de los recursos de cada computadora).

A su vez, hay tres maneras de utilizar create-react-app: con npx, con npm o con yarn. Yo personalmente tengo preferencia por yarn, así que escribiré los ejemplos utilizando dicho packet manager. Tanto React como create-react-app son proyectos de Node.js por lo que debemos tener instalado dicho intérprete en nuestra máquina.

Dicho todo lo anterior, comenzamos:

1. Abrir la terminal

Este paso es inmediato pero depende del sistema operativo de cada quién. Para OS GNU/Linux y macOS basta con abrir la aplicación "Terminal". Para OS Windows, hay que instalar un simulador de la aplicación Terminal que se llama Git Bash (Microsoft publicó una terminal nueva en 2020, puede ser que con esta nueva aplicación sea suficiente): https://gitforwindows.org.

2. Instalar Node.js

Este paso es sólo para cuando no está instalado el intérprete de JavaScript en nuestra máquina. También es inmediato y también depende del sistema operativo de cada quién. Basta con descargar el instalador de https://nodejs.org/en/. Escoge la versión LTS (Long Term Support) que significa que es una versión que va a tener varios años de mantenimiento.

Una vez que esté instalado el intérprete. En nuestra línea de comandos podremos utilizar los comandos node y npm.

3. Instalar Yarn

npm es un administrador de paquetes (si vienes del mundo de R es un equivalente a pacman, si vienes del mundo de Python es un equivalente a pip, si vienes del mundo de Flutter es un equivalente a flutter pub, etc.), su función es instalar bibliotecas externas o terceras (third-party libraries) para utilizarlas en nuestros proyectos. yarn también es un administrador de paquetes pero no es el "oficial", fue desarrollado por Facebook como alternativa a npm. A mí me gusta utilizar yarn porque cuando instalo dependencias (dependencias, paquetes, bibliotecas, "librerías", módulos, etc. son términos equivalentes, se refieren a third-party libraries) lo hace bastante más rápido y también cuando ejecuto proyectos lo hace más rápido.

Como yarn es una biblioteca externa, quiere decir que debemos instalarla en nuestra computadora. Entonces, en el prompt de la terminal escribimos:

$ npm install -g yarn

Donde,

npm es el comando para invocar al administrador de paquetes

install es el subcomando para indicar que el administrador va a realizar una descarga

-g es la opción para indicar al administrador que instale la biblioteca de manera "global" (en todo el filesystem del sistema operativo, o sea en toda la computadora)

yarn es la biblioteca, dependencia, paquete, etc. que el administrador va a instalar

Con este comando npm instalará yarn en nuestra computadora.

4. Instalar create-react-app

Instalar el generador de proyectos con React es prácticamente el mismo paso que el anterior. En el prompt de la línea de comandos escribimos:

$ npm install -g create-react-app

Donde,

npm es el comando para invocar al administrador de paquetes

install es el subcomando para indicar que el administrador va a realizar una descarga

-g es la opción para indicar al administrador que instale la biblioteca de manera "global" (en todo el filesystem del sistema operativo, o sea en toda la computadora)

create-react-app es la biblioteca, dependencia, paquete, etc. que el administrador va a instalar

Con este comando npm instalará create-react-app en nuestra computadora.

5. Crear una aplicación de cero con create-react-app

En el prompt de la línea de comandos escribimos:

$ create-react-app mi-proyecto-fancy

Donde,

create-react-app es el comando para invocar al generador de proyectos de React

mi-proyecto-fancy es el nombre de la carpeta (y del proyecto de Node.js) donde se va a colocar todo el código

Con este comando create-react-app creará una carpeta mi-proyecto-fancy/ y adentro colocará todo el código generado (el scaffold) que corresponde a un proyecto completo (una base o un mínimo producto viable) de React (son muchos archivos y carpetas que por ahora las voy a dejar de lado para otro momento).

6. Ejecutar el proyecto de React (mi-proyecto-fancy) para que se vea en el navegador web

Cuando el proyecto quede creado, entramos a la carpeta del proyecto:

$ cd mi-proyecto-fancy/

Donde,

cd es el comando para cambiar de directorio

mi-proyecto-fancy/ es la carpeta a la que vamos a entrar

Dentro (en el proyecto) escribimos:

$ yarn start

Donde,

yarn es el administrador de paquetes que instalamos anteriormente

start es el subcomando que indica a yarn que vamos a ejecutar el proyecto para que se visite desde una URL en el navegador web

Con este comando yarn coloca el proyecto en una URL (http://localhost:3000). La cual podemos visitar desde un navegador web.

7. Visitar el proyecto con un navegador web

Abrimos el navegador web de preferencia (Safari, Chrome, Firefox, Edge, Opera, Brave, Vivaldi, Tor, Internet Explorer, etc.) y en la barra de navegación escribimos http://localhost:3000. Damos enter a la URL y listo, el proyecto construido ya es visible desde el navegador web.

Es importante mencionar que esta ejecución sólo construye la aplicación web para que se pueda visitar en localhost (mi propia computadora) o en LAN (red de área local, o sea los dispositivos conectados al mismo router que yo). Quiere decir que es una construcción o compilación en modo de desarrollo.

Continuará...

Jorge, super practico y claro tu post. Yo agregaría una solución a un error que alguien más puede tener (como yo) y que me ayudaste a resolver.
Al instalar:

npm install -g yarn

Me salio el error:

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! syscall access

Esto se soluciona agregando:

sudo npm install -g yarn

Te va a solicitar tu contraseña y listo.