隆Estamos en directo en Twitch!

隆Entra y participa!

Imagen de la etiqueta react

Curso gratis de ReactJS 2020 con clases en vivo

5 minutos de lectura驴Una errata? Edita el art铆culo

Aprende qu茅 es React, crea una aplicaci贸n desde cero, crea tus propios hooks y a帽ade infinite scroll y testing con estas clases. Lo ense帽amos desde cero y te explicamos por qu茅 lo necesitas y deber铆as aprenderlo. 馃憞

Aprendiendo React desde cero

隆Suscr铆bete! 79K

En esta clase aprendemos React desde cero y respondamos a las preguntas: 驴Qu茅 es React? 驴Por qu茅 deber铆as aprenderlo? 驴Por qu茅 lo necesitamos? 驴Qu茅 es JSX?

Tambi茅n vemos qu茅 son las props y state. Definimos el concepto de componente y vemos c贸mo usar eventos. C贸mo funciona el renderizado condicional y usamos un hook, useState para a帽adir estado a nuestros componentes.

Crea un app con create-react-app

隆Suscr铆bete! 79K

Ahora que ya conocemos los conceptos b谩sicos de React, es el momento de crear nuestra primera aplicaci贸n con todo lo aprendido. En esta clase conocemos la herramienta create-react-app que nos permite crear desde cero una aplicaci贸n y nos permite no tener que preocuparnos por la configuraci贸n. As铆 empezaremos a crear nuestra aplicaci贸n para buscar gifs.

Tambi茅n vemos m谩s hooks, como useEffect para ejecutar c贸digo cada vez que nuestro componentes se renderiza o sus dependencias cambian. Adem谩s tambi茅n hacemos las primeras llamadas a una API y vemos c贸mo lo podemos gestionar.

Custom Hooks y React Context

隆Suscr铆bete! 79K

Subimos de nivel con los hooks. En esta clase vemos c贸mo podemos crear nuestro propio hook para reutilizar parte de la l贸gica a la hora de buscar Gifs. Tambi茅n vemos c贸mo podemos manejar un formulario para escuchar sus eventos y por qu茅 es una buena pr谩ctica utilizar el onSubmit y evitar escuchar simplemente el onClick de un bot贸n.

Adem谩s conocemos React Context, una funcionalidad de la biblioteca que nos permite compartir informaci贸n entre componentes sin que le lleguen por las props. Esto, adem谩s, nos permitir谩 crear una especie de estado global. Hablamos de las buenas pr谩cticas sobre esto y c贸mo podemos conseguirlo.

Lazy Load, Suspense y Paginaci贸n

隆Suscr铆bete! 79K

Para mejorar el rendimiento de nuestro sitio conocemos el concepto de Lazy Load y c贸mo podemos hacer que nuestra aplicaci贸n se separe en chunks. Estos chunks o pedazos de la app se descargar谩n solo cuando sea necesario. Lo hacemos con una nueva secci贸n que en m贸vil no aparece de forma que lo cargaremos s贸lo cuando hagamos scroll. Para ello creamos un nuevo hook llamado useNearScreen.

Para hacerlo descubrimos React.lazy, que nos permite cargar din谩micamente nuestros componentes. Sin embargo, veremos que esto no funciona tal cu谩l si no que tenemos que envolver el componentente que se carga de forma diferida con un componente de React llamado <Suspense> y que nos permite indicarle un fallback, un elemento que se renderizar谩 mientras se carga el nuevo.

Adem谩s, a帽adimos paginaci贸n a nuestra aplicaci贸n, para poder ver m谩s gifs.

CSS Grid, Infinite Scroll y Testing

隆Suscr铆bete! 79K

Cuando hicmos la paginaci贸n, vimos que no se estaban a帽adiendo correctamente los resultados. As铆 que en esta clase mejoramos el layout de nuestra app utilizando CSS Grid y vemos c贸mo podr铆amos hacer un dise帽o masonry (por ahora s贸lo con Firefox Nightly pero… es un momento WOW! 馃ぉ).

Adem谩s, conseguimos reusar el hook useNearScreen para a帽adirle Infinite Scroll a nuestra aplicaci贸n y vemos los problemas que nos podemos encontrar y c贸mo solucionarlo con useCallback y usando la funci贸n debounce.

Finalmente, empezaremos a ver algo de testing con Jest y @testing-library/react. Adem谩s de alg煤n test muy b谩sico, tambi茅n veremos c贸mo podemos probar componentes que se cargan de forma as铆ncrona.

React.memo, mejora el rendimiento de la app y Deploy con Vercel

隆Suscr铆bete! 79K

Ahora es el momento de optimizar nuestra aplicaci贸n. Para ello, aprenderemos qu茅 son las React Developer Tools y c贸mo podemos sacarle partido para detectar renderizados innecesarios en nuestra aplicaci贸n. Tambi茅n aprendemos qu茅 es React.memo y c贸mo podemos usarlo para arreglar esos problemas de optimizaci贸n.

Finalmente, haremos un deploy desde la terminal gracias a los servicios gratuitos de Vercel, que nos ofrecer谩 SSL y una URL para compartir con nuestros colegas.

SEO con React y Deploy Integrado con GitHub

隆Suscr铆bete! 79K

En esta clase vamos a preparar la app para que los crawlers, como el de Google, puedan encontrar nuestra aplicaci贸n es super importante. Por ello, a帽adiremos t铆tulos y descripciones gracias, primero, a crear nuestro propio Hook de SEO que lo haga y, luego, viendo react-helmet.

Adem谩s, tambi茅n vamos a preparar nuestro repositorio para tener Continuous Deployment. De forma que cada vez que hagamos un merge a master con cambios de c贸digo, tengamos una nueva versi贸n desplegada en Internet.

useReducer y testing de React Hooks

隆Suscr铆bete! 79K

Ahora que ya tenemos nuestra aplicaci贸n de React 鈿涳笍 desplegada en producci贸n, es el momento de subir nuestra aplicaci贸n de nivel. Para ello vamos a entender c贸mo usar el hook useReducer que nos permite tener un estado en nuestra aplicaci贸n y actualizarlo de una forma mucho m谩s limpia y sencilla, especialmente para estados grandes.

Adem谩s, viendo que esto de los hooks se va complicando, veremos c贸mo podemos hacer testing de los Custom Hooks que vamos creando gracias a la librer铆a React Hooks Testing Library.

Inicio de sesi贸n y gesti贸n de favoritos del usuario

隆Suscr铆bete! 79K

Ahora es el momento de utilizar una API para poder loguear a nuestros usuarios. Para ello he creado una API en Deno 馃 que nos permitir谩 iniciar sesi贸n, registrar al usuario y que estos puedan gestionar sus favoritos.

En esta clase vemos como podemos iniciar sesi贸n, creamos un estado global con el contexto, un hook para poder consumirlo y guardar la sesi贸n del usuario (gracias a un Javascript Web Token) usando SessionStorage.

Registro de usuario con Formik y React.createPortal

En esta clase vamos a ver c贸mo podemos usar Formik para gestionar nuestros usuarios y createPortal para poder renderizar fuera del 谩rbol de elementos un componente hijo en React.

隆Suscr铆bete! 79K

CSS en JS y Styled Components con Emotion

Y la 煤ltima clase, donde veremos c贸mo podemos a帽adir CSS en JS en nuestra aplicaci贸n gracias a Emotion. Veremos los dos sabores: CSS-en-JS cl谩sico y uno basado en styled components:

隆Suscr铆bete! 79K

Suscr铆bete para no perderte los pr贸ximos v铆deos sobre desarrollo web y full stack
Suscr铆bete para no perderte los pr贸ximos v铆deos sobre desarrollo web y full stack

Contenido del art铆culo

Comparte el art铆culo