@lcjury queria aprender React, y luego de este tweet, nos motivamos junto a @fforres a aprender! Así que durante los próximos estaremos haciendo livestreams del "30 dias de React Challenge" 😁
Lunes, Martes, Miercoles y Viernes a las 20**:30 GMT-4 (Hora Chile) Y los domingos a las 15**:00 GMT-4 (Hora Chile) O puedes revisar los horarios del streaming en el siguiente link
Por https://noders.live (Entra a nuestro discord https://noders.live/discord.) Puedes ver los lives en youtube en nuestro canal de youtube
React! Pero mas concretamente, el siguiente temario:
| Numero | Titulo | Youtube | Descripcion |
|---|---|---|---|
| 1 | Setup - IDE y "Autenticación": | ▶ | Crear tu primer componente, estilarlo y diseñar una autenticación falsa 😃 |
| 2 | Estilando nuestros pokemones (CSS En JS): | ▶ | Crear un componente "tarjeta pokemon" y probar las diferentes alternativas de estilado en react como CSS-in-JS. |
| 3 | Function components y Hooks: | ▶ | Ordenar el proyecto en distintos archivos, aprender sobre hooks y migrar los componentes anteriores para utilizar hooks. |
| 4 | Lista de Pokemones! (TextInputs, eventos y filtros de listas): | ▶ | Nustra de lista de pokemones, añadiremos filtros al listado de pokemones para poder filtrar por nombre y tipo. |
| 5 | Performance, Estados entre componentes y multiples "paginas"": | ▶ | Añadir una estrella de favoritos al componente "tarjeta pokemon" Y crear una nueva página que te permita ver tus pokemones favoritos. |
| 6 | Multiples paginas, rutas pokemones favoritos y nuestro propio router: | ▶ | Implementar un router desde 0 utilizando event listeners, (¿y luego lo tiramos a la basura para usar react-router?) |
| 7 | Persistencia, Local storage y Login: | ▶ | Mover la información del login y los pokemones favoritos al local storage |
| 8 | Hooks personalizados (Local storage...pero ahora con hooks): | ▶ | Refactorizar la aplicación para utilizar el local storage por medio de hooks |
| 9 | Unit Testing!(Con Jest): | ▶ | Implementar React testing y crear los test para los componentes ya existentes |
| 10 | Linting, +Jest y Unit Testing | ▶ | Eslint, limpieza, ordenando nuestro codigo, agregando proptypes y arreglando tests |
| 11 | Dia de DRY. Armemos nuestra Libreria de componentes: | ▶ | Extraeremos algunos componentes, hablamos de storybook, visual regression testing y tests |
| 12 | Visual regression testing (Chromatic y Storybook++): | ▶ | Visual regression testing! Veremos mas tests, UI y estilos |
| 13 | Prettier, componentes hermosos, deuda visual de Figma (y + historias): | ▶ | Revisar nuestro diseño con Figma, ver las diferencias entre linters y prettier y vamos a pagar la deuda técnica visual de los componentes! |
| 14 | Busqueda con APIs, datos asincronos, fetch y hooks: | ▶ | Implementar fetching de data basado en el texto del input, y manejo de "loading" states. |
| 15 | Tests version 2.0 (Arreglar tests que rompimos en el live previo): | ▶ | Arreglar los test que se rompieron haciendo mock de la API |
| 16 | Autenticación con APIs!! :D: | ▶ | Implementar autenticación contra una API real |
| 17 | Deployeando a produccion!: | ▶ | Deployar la aplicación a Vercel |
| 18 | Redux parte 1: | ▶ | Vamos a dejar de pasar props por todos lados, y usaremos redux |
| 19 | Redux parte 2: | ▶ | Continuar con el trabajo redux... |
| 20 | Typescript!: | ▶ | Migrando nuestra aplicación a Typescript, because, ¿why not?. |
| 23 | GraphQL y Typescript: | ▶ | Vamos a construir una API en graphQL con typescript y deployarla a vercel para obtener toda nuetra data desde un solo lugar |
| 21 | Graphql y Apollo: | ▶ | Vamos a matar Redux para utilizar Apollo como storage central de data y vamos a usar GraphQl para obtener nuestra data |
¿Cómo crees que deberiamos seguir aprendiendo React?, crea un aquí con tu idea y ayudanos a crear el contenido a seguir!
- Luis Jury (@lcjury)
- Felipe Torres (@fforres)
https://www.figma.com/file/WBSxDuSE8q56mgKYon7PxB/Chatapp?node-id=0%3A1