Aprender React con 100 ejercicios prácticos E-Book

Pablo Monteserín Fernández

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2022

Seitenzahl: 172

Beschreibung

Si le interesa ampliar su conocimiento en Javascript, React es la mejor tecnología para aprender. La relación entre el esfuerzo destinado a aprenderla y lo que podrá hacer después con ella es muy positiva. Además, React está ampliamente extendida y es demandada en infinidad de puestos de trabajo. Gracias a los 100 ejercicios prácticos que encontrará en este libro: o Comprenderá los fundamentos imprescindibles de React y se capacitará para posteriormente aplicarlos en sus propios desarrollos. o Creará componentes reutilizables que podrá guardar en su propia colección para reducir los tiempos de desarrollo de sus aplicaciones. o Realizará aplicaciones que recuperarán información de un servicio externo y la mostrarán en pantalla aplicando estilos para obtener el diseño deseado. o Practicará con decenas de ejercicios que le permitirán asimilar la materia estudiada. o Utilizará programación funcional en sus desarrollos: a pesar de no contar con tanta documentación como la programación orientada a objetos en React, es la solución recomendada por Facebook. Además, en la parte inferior de la primera página, encontrará el código de acceso que le permitirá disfrutar de forma gratuita de todas las soluciones y los recursos necesarios para realizar los ejercicios propuestos en el libro. Todos estos contenidos adicionales están disponibles en www.marcombo.info. Es el momento de aprender y practicar para realizar todas las aplicaciones con React que siempre había imaginado.

Leseprobe

Aprender

React

con 100 ejercicios prácticos

Aprender

React

con 100 ejercicios prácticos

Aprender React con 100 ejercicios prácticos

© 2022 Pablo Monteserín Fernández

© 2022 MARCOMBO, S. L.

www.marcombo.com

Diseñadora de la cubierta: María Paz Mora Encinas

Ilustración de la cubierta: Wahab Zeghlache Bayot

Director de colección: Pablo Martínez Izurzu

Directora de producción: M.ª Rosa Castillo Hidalgo

Maquetadora: María Paz Mora Encinas

Correctora: Anna Alberola Banasco

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.

ISBN: 978-84-267-3528-7

Producción del ePub: booqlab

Presentación

APRENDER REACT CON 100 EJERCICIOS PRÁCTICOS

Los 100 capítulos que contiene este libro le permitirán dar los primeros pasos con ReactJS, para que pueda programar sus propias aplicaciones con autonomía. Se recomienda leer estos capítulos por orden, ya que a menudo un capítulo se apoya en el conocimiento aprendido en el capítulo anterior.

Una vez completado este libro, estará capacitado para desarrollar aplicaciones con ReactJS, y lo utilizará con bastante soltura.

A QUIÉN VA DIRIGIDO

Este libro está dirigido a desarrolladores web que quieran dar un paso más allá. Si ya sabe HTML, CSS y Javascript, tiene mucho sentido que React sea su siguiente paso.

Para poder entender y digerir el contenido de este libro con facilidad, es necesario tener conocimientos sólidos de programación, especialmente de Javascript ECMAScript 6. Ese es el punto de partida. Aunque no es totalmente imprescindible, le permitirá avanzar por las páginas del libro con mayor fluidez.

LA FORMA DE APRENDER

Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Cada ejercicio se explica paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes y de los resultados que deberían obtenerse, y con recuadros «IMPORTANTE», que ofrecen información complementaria sobre los temas tratados en los ejercicios.

LOS ARCHIVOS NECESARIOS

En la parte inferior de la primera página del libro encontrará el código de acceso que le permitirá descargar de forma gratuita los contenidos adicionales del libro en www.marcombo.info.

Cómo leer los libros “Aprender...”

Dedicado a mi papá.

Índice

001 ¿Qué es React?

002 Programación funcional y orientada a objetos

003 El editor de código

004 Profundizando en Visual Studio Code

005 Instalación de NodeJS y Git

006 Creación de nuestra primera aplicación

007 Estructura de la aplicación recién creada

008 Ejecutar nuestra aplicación

009 JSX

010 Ejemplos de JSX

011 Ejemplos de JSX. Eventos y arrays

012 Recogida de datos

013 Ejercicio useRef. Euros

014 Ejercicio useRef. Grados

015 Ejercicio useRef. Superficie rectángulo

016 Estados

017 Ejercicios useState

018 Ejercicio useState. Grados

019 Ejercicio useState. Calcular superficie

020 Recoger valor con estados en lugar de con useRef

021 Componentes

022 Ejercicios componentes. Euros a dólares

023 Ejercicios componentes. Grados

024 Props

025 Enviar props del componente hijo al padre

026 Ejercicios props. Componente Post

027 Renderizado condicional

028 Ejercicio props con renderizado condicional

029 Ejercicio Viaje

030 Arrays

031 Estilos

032 Styled components

033 Styled components. Hover, herencia y atributos

034 Styled components. Mediaqueries, estilos del body

035 Aplicación para memorizar un speech

036 Botones para avanzar y retroceder párrafos

037 useEffect

038 Aplicación de rutinas deportivas

039 Aplicación de rutinas deportivas. Carga del primer título.

040 Aplicación de rutinas deportivas. Mostrar imágenes

041 Aplicación de rutinas deportivas. Styled components.

042 Aplicación de rutinas deportivas. Destacando la imagen

043 Aplicación de rutinas deportivas. Cambiar de workout.

044 Hacer un trivial

045 Hacer un trivial. Preguntas, respuestas y variaciones.

046 Hacer un trivial. Respuesta correcta

047 Hacer un trivial. Styled components

048 Hacer un trivial. Mostrar popups

049 Hacer un trivial. Randomizar preguntas y respuestas.

050 Cuento interactivo

051 Cuento interactivo. Fichero de datos

052 Cuento interactivo. Cargar la primera escena

053 Cuento interactivo. Cargar la imagen

054 Cuento interactivo. Styled components

055 Cuento interactivo. Añadiendo puertas

056 React Router

057 React Router. Enlaces a páginas

058 React Router. Envío y recepción de parámetros

059Fetch API

060Fetch API Comprobación de errores

061 Axios

062 Aplicación de chistes

063 Aplicación de chistes Mostrando las categorías

064 Consultando la API de Star Wars

065 Consultando la API de Star Wars. Mostrando datos

066 Consultando la API de Star Wars. Ir a la página de perfil.

067 Consultando la API de Star Wars. Procesar parámetros.

068 Consultando la API de Star Wars. Página de perfil

069 Consultando la API de Star Wars. Styled components

070 Consultando la API de Star Wars. Estilos en el perfil

071 Consultando la API de Star Wars. Paginación

072 Consultando la API de Star Wars. Procesar paginación.

073 Context API

074 Context API. Mostrar estados

075 Redux

076 Redux. La Store y los Reducers

077 Redux. Actions y Componentes

078 Redux. Añadiendo propiedades y entidades

079 Redux. Ejercicios

080 Estructura correcta de un componente de React

081 Firebase

082 Firebase. Crear un proyecto

083 Firebase. Configuración de la base de datos

084 Firebase. Autentificación

085 Firebase. Conexión desde React a Firebase

086 Firebase. Operación de alta

087 Firebase. Consulta y modificación

088 Firebase. Borrado

089 Autentificación con Auth0

090 Autentificación con Auth0. Aplicación de React

091 Autentificación con Auth0. Personalización

092 NextJS

093 NextJS. Navegación

094 Publicación

095 Publicación de un proyecto que utiliza React Router

096 React Native

097 Arrancar nuestro proyecto con Expo

098 React Native. Componentes básicos

099 React Native. Compilar con Expo

100 ¿Y ahora qué?

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 CODE1

• 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 STORM2Y PHP STORM3

• 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 web del proyecto: https://nodejs.es/es1.

2. Pulsaremos sobre la versión LTS (Long Time Support) para descargarla. Aunque esta versión no tiene las ultimísimas novedades de NodeJS, es la más estable y, por tanto, la más apropiada para nuestros objetivos.

3. Ejecutaremos el instalador que acabamos de descargar.

4. A partir de ahí, la instalación consiste en ir siguiendo los pasos. En principio, no necesitará cambiar ninguna de las opciónes de instalación por defecto. Así que básicamente la instalación se reduce a un siguiente, siguiente, siguiente.

¿QUÉ ES GIT?

Git es un software que permite controlar las versiones de nuestra aplicación, así como facilitar el trabajo colaborativo mediante la creación de ramas (o bifurcaciones) en el desarrollo del software.

¿PARA QUÉ NOS SERVIRÁ GIT?

Realmente, para programar aplicaciones con React no es necesario que tengamos Git instalado. Sin embargo, Git es una herramienta muy habitual y, como programadores, no debemos pasarla por alto. Además, si instalamos la aplicación de Git para Windows, cuando pulsemos el botón derecho del ratón al estar dentro de una carpeta, aparecerá un menú contextual que nos permitirá arrancar una terminal desde la que ejecutar comandos 2. No es indispensable, pero sí es recomendable tenerlo instalado.

CÓMO INSTALAR GIT

En Windows:

1. Nos vamos a https://git-scm.com/.

2. Descargamos y ejecutamos el instalador. Podemos avanzar a través del proceso de instalación dejando la configuración por defecto del instalador.

En Mac:

1. Instalaremos una aplicación llamada Homebrew: https://brew.sh/.

2. Tras haberla instalado, podremos ejecutar el siguiente comando desde la terminal:brew install git

HISTORIA

GNU/Linux es la denominación técnica y generalizada que reciben una serie de sistemas operativos de tipo Unix, que suelen ser de código abierto, multiplataforma, multiusuario y multitarea.

En 2002, el proyecto del núcleo de Linux empezó a usar un sistema controlador de versiones para facilitar el desarrollo colaborativo. Era un sistema propietario llamado BitKeeper.

Es curioso que, siendo Linux un proyecto de software libre, utilizase un sistema propietario para controlar sus versiones.

En 2005, BitKeeper dejó de ofrecerse de manera gratuita. Esto impulsó a la comunidad de desarrollo de Linux (y, en particular, a Linus Torvalds, el creador de Linux) a desarrollar su propia herramienta. Había nacido Git.

006

Creación de nuestra primera aplicación

Cuando comenzamos a programar una nueva aplicación con React, no es habitual partir de una carpeta vacía e ir creando dentro la estructura de carpetas y ficheros necesarios.

Como estos primeros pasos —que implican montar la estructura de la aplicación— suelen ser siempre los mismos, lo normal es partir de una plantilla como la que mostraré a continuación.

En vez de crear esta estructura desde cero, vamos a utilizar el comando create-react-app, que montará la estructura de ficheros y la configuración básica por nosotros.

Lo primero que vamos a hacer es crear una carpeta con el nombre de nuestra aplicación (el nombre de la carpeta no debería tener eñes, ni acentos ni espacios en blanco).

A continuación, vamos a abrir la carpeta recién creada con Visual Studio Code. Para ello, podemos arrastrar la carpeta sobre la aplicación o bien, dentro de Visual Studio Code, ir al menú File → Open Folder1. También, si habíamos marcado durante la instalación los dos checks indicados en la página 20, podemos hacer click derecho sobre la carpeta para abrirla con el editor.

Tras abrir la carpeta con Visual Studio Code, vamos a ejecutar un comando en la terminal. Para mostrar la terminal podemos ir al menú View → Terminal o bien pulsar ctrl + ñ.

Si hemos instalado NodeJs, deberíamos poder ejecutar en la terminal el siguiente comando:

npx create-react-app.2

Tras ejecutarlo, aparecerán por pantalla las trazas o mensajes, que nos informarán de todo el proceso y de los posibles errores que pudiesen aparecer.

El comando que acabamos de ejecutar:

• Es un comando de NodeJS. Por eso empieza por npx., que es el acrónimo de Node Package Execute.

• El comando create-react-app