Aprender y comprender React - el tutorial práctico

Introduce los temas que se tratarán más adelante y explica la motivación de este curso.

En la actualidad existen innumerables marcos de interfaz de usuario para JavaScript, así que ¿por qué debería ser React? Además de la indiscutible popularidad de esta biblioteca, también hay algunas razones más profundas que hablan a favor de React.

En esta lección, configuraremos el entorno de desarrollo y utilizaremos npm create vite para crear nuestra primera aplicación React en un abrir y cerrar de ojos.

Después de haber creado una aplicación React "fresca" en la última lección, el objetivo aquí es entender la estructura de esta aplicación y explicar cómo React se puede incrustar en un sitio web.

Un pequeño repaso al tema var vs. let/const.

La desestructuración permite la extracción selectiva de elementos de objetos y matrices. Si se analiza más detenidamente, existen muchas aplicaciones posibles que hacen que el código JS sea más elegante y compacto.

Las funciones son esenciales en JS y antes sólo se declaraban y definían utilizando la palabra clave function. ES6 introduce una notación elegante y abreviada que hace el código más legible y ofrece una solución a un fastidioso problema con esto.

Los módulos se han utilizado en NodeJs desde el principio, pero al principio se basaba exclusivamente en el formato de módulo CommonJs con require. Desde ES6, existe una definición de módulo en el estándar y, por tanto, las nuevas palabras clave import/export. Este formato es ahora soportado por casi todas las (nuevas) librerías JS y NodeJs también puede manejarlo en las últimas versiones.

Con JSX se describe la interfaz de usuario de un componente y se integran expresiones JS en él. El archivo de proyecto del vídeo contiene el código terminado de esta sección del tutorial.

Los componentes personalizados de React se pueden escribir muy fácilmente utilizando funciones que devuelven JSX.

Esta lección explica cómo integrar datos y expresiones JavaScript en JSX.

Sin un estado que pueda cambiar, es casi imposible implementar una aplicación con sentido. En React, useState se utiliza normalmente para esto. Esta lección introduce este hook y explica su uso.

Los props se utilizan para transferir datos a los componentes hijos. Aquí te explicamos exactamente cómo se hace y a qué debes prestar atención.

Si los accesorios cambian dinámicamente, se vuelve a llamar a la función de renderizado correspondiente del componente.

Aquí se explica cómo se estructurará la aplicación de tareas pendientes. El vídeo va acompañado de un archivo de proyecto que contiene el código terminado para esta sección del tutorial.

Si un componente hijo quiere comunicar algo al componente padre, esto se hace a través de un callback prop.

Las tareas pendientes también deben completarse en algún momento. Aquí explicamos cómo funciona esto en el código.

La apariencia de una interfaz de usuario es sin duda importante. Por eso explico aquí cómo funciona esto con la librería Emotion y cómo se puede usar el Prop className con ella. También se discute el atributo style, que se puede utilizar para dar estilo a cada elemento por separado en detalle.

Las tareas pendientes pueden dividirse en dos grupos filtrando la matriz de tareas pendientes.

Por supuesto, también es necesario poder borrar las tareas pendientes. Aquí explicamos cómo funciona esto utilizando el filtrado de matrices.

Hasta ahora, siempre hemos "envuelto" los componentes en DIVs. Sin embargo, en algunos casos se puede prescindir de ello.

Ahora la cosa se pone interesante: las tareas pendientes pueden guardarse fácilmente de forma persistente en la memoria del navegador y, por supuesto, cargarse de nuevo para que "sobrevivan" a la recarga de la página.

Los efectos secundarios pueden integrarse con useEffect. El montaje de un componente también se puede manejar con esta función.

Breve resumen de nuestra aplicación de tareas pendientes y últimas mejoras.

La aplicación de reproducción de vídeo se crea con create vite y se explica cómo debe estructurarse la aplicación. El archivo de proyecto adjunto al vídeo contiene el código terminado para el reproductor de vídeo.

Se puede hacer referencia a los elementos DOM con el atributo ref y acceder a ellos con useRef. Aquí hacemos esto con el elemento video.

Creamos el reproductor de vídeo propiamente dicho, que ya tiene botones para reproducir, pausar y parar.

Como nunca necesitas Reproducir y Pausa al mismo tiempo, los combinamos en un solo botón.

Los propios controles del elemento de vídeo también controlan el vídeo, pero esto significa que nuestro estado no se ajusta en consecuencia cuando se pulsa el botón de reproducción/pausa. Arreglamos esto usando manejadores de eventos en el elemento video.

También podemos cambiar el volumen mediante un mando independiente.

Saltar a cualquier posición en el vídeo (Seek) es sorprendentemente fácil estableciendo la propiedad currentTime.

La duración del vídeo sólo se conoce una vez que se han cargado los metadatos del vídeo, por lo que hay que esperar al evento adecuado.

La lista de reproducción se realiza mediante una lista que puede implementarse con el elemento HTML select.

Usamos useEffect aquí para reaccionar al cambio en la prop srcy restablecer el estado del reproductor de vídeo.

La lista de reproducción se transforma de entradas fijas a una matriz.

Ahora entra en juego la edición de la lista de vídeos: Añadimos las entradas de vídeo.

Lo que añades, también debes poder volver a eliminarlo. Hacemos esto de una manera similar a la aplicación de tareas por filtrado.

La lista de reproducción no sólo debe servir como "lista de favoritos", sino también reproducir automáticamente los vídeos uno tras otro. Esto se hace realidad en esta lección.

Para los impacientes: botones para el vídeo siguiente y el anterior.

Se realiza un tratamiento especial para el primer y el último vídeo: los botones Siguiente y Anterior deben desactivarse en consecuencia.

Ahora guardamos y cargamos nuestra lista de reproducción. Esto se hace en el almacenamiento local del navegador de la misma forma que en la app de to-do.

Puedes ver los vídeos originales utilizados como ejemplo en la aplicación de reproducción de vídeo aquí (todos con licencia CC, consulta los sitios web correspondientes):

El sueño de los elefantes: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Utilizando el hook useJsonFetchcomo ejemplo, esta sección explica cómo escribir tus propias funciones hook.

Cambiar de estado con el setter de useState puede ser complicado. Pero con useImmer ya no es un problema.

La interfaz de usuario se construye más rápido y reacciona más rápidamente a la entrada del usuario si las funciones de renderizado no se llaman innecesariamente. memo se puede utilizar para evitar que los componentes se rendericen si sus props no cambian.

UseCallback se puede utilizar para evitar el renderizado innecesario de componentes hijos cuando se utilizan callback props.

Los cálculos complejos dentro de las funciones de renderizado sólo deben realizarse en caso necesario. Con useMemo, los resultados de estos cálculos pueden almacenarse en caché, teniendo en cuenta las dependencias.

Resumo aquí los resultados del curso y doy consejos sobre lo que los participantes deben mirar después del curso.