Aprender React con 100 ejercicios prácticos

001

¿Qué es React?

React es una librería Javascript de código abierto, desarrollada por Facebook, con la que podremos crear interfaces de usuario de tipo SPA (single page applications).

¿QUÉ ES UNA INTERFAZ DE USUARIO?

Es aquello con lo que el usuario de la aplicación interactúa. Una interfaz de usuario tiene botones, cuadros donde introducir texto, imágenes... A la interfaz de usuario a menudo se la llama frontend.

Cualquier página web que visite tiene una interfaz con la que usted, como usuario, va a interactuar. Con React se pueden hacer páginas web sencillas en las que simplemente se muestre información, pero está más enfocado a hacer aplicaciones en las que el usuario introduce una serie de datos que deben ser procesados para ofrecer una respuesta. Por ejemplo, la captura de la derecha 1 muestra la interfaz visual de una aplicación en la que el usuario puede introducir valores, seleccionar checkboxes, escribir textos... La aplicación recogerá toda esa información y generará una respuesta, en este caso el presupuesto de una página web. React es especialmente apropiado para realizar este tipo de aplicaciones. Tiene un ejemplo funcional de esta aplicación disponible en https://pablomonteserin.com/presu.

Los datos introducidos en una aplicación pueden ser procesados dentro del propio frontend, o ser enviados al servidor —o backend— para su procesamiento.

¿QUÉ ES UNA SPA?

Una single page application es una aplicación web en la que todo el código HTML, CSS y Javascript está escrito en una sola página. Esto hace que la experiencia de uso sea mucho más rápida, ya que, aunque cambiemos de url (vayamos a otra página web dentro de la aplicación), realmente seguiremos navegando dentro de la misma página.

Cuando hagamos una SPA con React, escribiremos el código fuente de la aplicación en los diversos ficheros que la componen. Sin embargo, cuando la aplicación esté terminada, ejecutaremos un proceso de compilación que, entre otras cosas, juntará el código fuente de cada uno de los ficheros independientes que forma la aplicación para para obtener un único documento con todo el código.

¿QUÉ ES CÓDIGO ABIERTO?

Cuando el código con el que está escrita una aplicación informática es público y cualquier persona puede acceder a él para modificarlo, este código se denomina código abierto. Por tanto, el término hace referencia a una forma de desarrollo colaborativo.

002

Programación funcional y orientada a objetos

Para desarrollar nuestras aplicaciones con React, existen dos grandes aproximaciones: programación funcional y programación orientada a objetos.

PROGRAMACIÓN FUNCIONAL

•Tiene sus raíces en el año 1930.

•Se basa en el uso de funciones. Una función tiene unos parámetros de entrada y, dependiendo de ellos (en función de ellos), ofrecerá una respuesta.

PROGRAMACIÓN ORIENTADA A OBJETOS

•Tiene sus raíces en el lenguaje de programación Simula 67, que fue lanzado oficialmente en el año 1967. Su uso se popularizó notablemente a comienzos de la década de 1990.

•Se basa en la utilización de entidades, llamadas «objetos», para representar lo que estamos programando (en muchas ocasiones, estos objetos corresponden directamente a elementos del mundo real). Estos objetos tienen una estructura concreta; cuentan con atributos que almacenan las características del objeto (si el objeto es una persona podrían almacenar su nombre, edad, etc.) y con métodos que contienen acciones que el objeto puede realizar (caminar, corrrer, cantar...).

•La programación orientada a objetos fue desarrollada posteriormente a la programación funcional y añade nuevos conceptos de programación: herencia, polimorfismo, encapsulamiento, cohesión, acoplamiento y abstracción. A priori , estas nuevas características optimizarán nuestra forma de programar, pero también harán que el proceso sea más complejo que si recurriéramos a la programación funcional.

PROGRAMACIÓN FUNCIONAL VS PROGRAMACIÓN ORIENTADA A OBJETOS PARA DESARROLLAR CON REACT

Puede programar en React utilizando programación funcional o programación orientada a objetos. React utiliza Javascript, y este lenguaje soporta ambos paradigmas de programación.

La gran mayoría de tutoriales y cursos que circulan por Internet explican cómo aprender a programar con React utilizando programación orientada a objetos. Después de todo, es un paradigma de programación más moderno. Algunos comentan que para programas sencillos se puede usar programación funcional, pero que cuando el programa empieza a crecer la programación orientada a objetos se hace indispensable. Sin embargo...

POR QUÉ DEBE USAR PROGRAMACIÓN FUNCIONAL PARA DESARROLLAR CON REACT

•Porque es más sencillo.

•Porque escribe menos código.

•Porque lo dice Facebook (la compañía creadora de React).

En cuanto a este último punto, en la React Conf del 2018, Sophie Alpert 1, gerente de ingeniería en Facebook, y Dan Abramox 2, coautor de Redux, de create-react-app y trabajador de Facebook, explicaron por qué el camino a tomar en el desarrollo de aplicaciones con React es utilizar la programación funcional, y los incovenientes que trae consigo el uso de la programación orientada a objetos para este fin.

IMPORTANTE

Tiene el vídeo completo de las intervenciones de Sophie Alpert y Dan Abramox en la React Conf del 2018 en:

https://www.youtube.com/watch?v=V-QO-KO90iQ

He extraído dos partes de la conferencia en las que hablan expresamente de la programación funcional vs la programación orientada a objetos. Puede ver estos fragmentos aquí:

https://www.youtube.com/watch?v=wl_3JIcVvZE

https://www.youtube.com/watch?v=r2MzbpEeEDY

003

El editor de código

Para desarrollar nuestras aplicaciones con React, utilizaremos fundamentalmente código Javascript, y algo de HTML y CSS. Por tanto, en principio nos serviría cualquier editor de texto plano (sublime text, Atom, Brackets...).

El editor que utilicemos deberá tener soporte para poder programar con React, autocompletado de código, señalización de errores, coloreado de sintaxis e interfaz de uso lo más amigable posible.

Esto reduce el número de posibilidades. Aunque haya muy buenas opciones de pago, como Web Storm, le recomiendo dar sus primeros pasos con Visual Studio Code, y quizás más adelante pensar si le merece la pena cambiar.

VISUAL STUDIO CODE 1

•Herramienta creada por la empresa Microsoft.

•Disponible para Windows, Linux y Mac.

•Enlace de descarga: https://code.visualstudio.com/download .

•Es opensource y la podremos usar gratuitamente.

•Es la herramienta que he utilizado en este libro.

WEB STORM 2 Y PHP STORM 3

•Herramientas creadas por la empresa JetBrains. Son los mismos que han creado Android Studio.

•Disponibles para Windows, Linux y Mac.

•Url de descarga:

•https://www.jetbrains.com/webstorm/ (para WebStorm).

•https://www.jetbrains.com/phpstorm/ (para PHP Storm).

•La diferencia entre WebStorm y PHPStorm es, básicamente, que PHPStorm tiene todo lo que tiene WebStorm pero, además, incluye soporte para PHP y bases de datos. En principio, para el desarrollo exclusivamente de aplicaciones con React, nos será indiferente una u otra aplicación.

•No son herramientas opensource ni gratuitas. Pueden probarse gratuitamente durante 30 días. A partir de ahí, el precio de PHPStorm el primer año es de unos 200 €; y de WebStorm, de unos 130 €. No obstante, el precio se reduce el segundo y el tercer año de uso continuado.

•Mi sensación es que es una herramienta más completa que Visual Studio Code, si bien este último es gratuito y más liviano.

004

Profundizando en Visual Studio Code

Mi recomendación es usar Visual Studio Code, por ser una opción muy completa y, sobre todo, gratuita. Es el editor que utilizo para dar clase, para trabajar, y el que usaré en este libro.

INSTALACIÓN DE VISUAL STUDIO CODE

Puede descargar el editor en https://code.visualstudio.com/download.

Tras hacer doble click en el fichero descargado, la instalación consiste en seguir los pasos indicados. No obstante, si durante la instalación de Visual Studio Code marca estos dos checks 1, al pulsar con el botón derecho sobre cualquier carpeta de su ordenador aparecerá la opción de abrir esa carpeta con Visual Studio Code 2, lo cual es muy cómodo para empezar a trabajar. Si no lo hizo en su momento, la forma más cómoda de tener esta funcionalidad será reinstalar la aplicación.

CONFIGURACIÓN DE VISUAL STUDIO CODE

Para poder mejorar la experiencia de uso de este editor le recomiendo que realice los siguientes pasos, que establecerán una configuración óptima para trabajar. Tenga en cuenta que estos pasos también están reflejados en la captura mediante números blancos sobre fondo rojo 3:

1. Pulsar en la ruedita dentada de la interfaz de Visual Studio Code.

2. Pulsar en el menú Settings.

3. Pulsar en el documento que tiene una flecha curva.

4. Sustituir el código que tiene en el documento que aparece por el que le facilito 4. Para poder difrutar de los nuevos cambios, debe asegurarse de que el código está escrito exactamente igual. Si no está muy seguro de copiarlo y pegarlo correctamente, puede consultarlo en:

https://pablomonteserin.com/curso/visual-studio-code/#monteserin_format

EXTENSIONES DE VISUAL STUDIO CODE

Es posible instalar en Visual Studio Code ciertas extensiones que también contribuirán a mejorar su experiencia de uso. Para ello, debe pulsar sobre el menú de extensiones, que en la captura 2 es el quinto icono de la columna izquierda, y utilizar su buscador. Una vez seleccionada la extensión que desea instalar, basta con pulsar sobre el botón install.

Path Intelligense by Christian Kohler: ayuda en el autocompletado de las rutas. Muy útil en React.

Open in Browser by TechEr: pulsando alt+b se abriá el código HTML que está haciendo en un navegador web.

Material Icon Theme by Philipp Kief: redefine los iconos visuales del menú ficheros.

Color HighLighting by Sergii N: muestra un previo del color seleccionado.

Github Copilot by GitHub: autocompleta el código con inteligencia artificial.

Auto Rename Tag by Jun Han: renombra automáticamente la otra parte de una etiqueta al editar su nombre.

Rainbow Brackets by 2gua: colorea las llaves de apertura y cierre.

ES7 React/Redux snippets by dsznajder: añade algunos snippets útiles, como clg para hacer un console.log.

npm by Microsoft: muestra un panel para poder ejecutar cómodamente los scripts del package. json. Más adelante concretaremos más acerca de esto.

005

Instalación de NodeJS y Git

Aunque ReactJS es, simplemente, una librería que debemos incluir en nuestro proyecto, durante el proceso de creación de nuestra aplicación, esta se va a ejecutar en un servidor de NodeJS, y utilizaremos algunos comandos de NodeJS para instalar ciertos módulos. Por tanto, debemos tener NodeJS instalado en nuestro ordenador.

¿QUÉ ES NODEJS?

Es una tecnología que nos permite programar del lado del servidor mediante código Javascript.

Utilizando comandos de NodeJS, vamos a poder crear carpetas, ficheros, desplegar un servidor web, actualizar los módulos de nuestra aplicación, etc.

En el desarrollo de aplicaciones con ReactJS, usaremos NodeJS para ir lanzando en un servidor web nuestra aplicación a medida que la vamos desarrollando, y para instalar de forma cómoda los módulos que vayamos necesitando.

Para instalar NodeJS:

1. Iremos a la página