Felicitaciones por unirte a #30DaysOfReact, vamos a estar intensivamente estudiando React junto con el ecosistema que le rodea.
La idea es estudiar una pieza corta de material día a día y practicar para poder aprender o reforzar conceptos sobre React y otras herramientas relacionadas.
- Inicialmente vamos a tomar como referencia este post de Kent C. Dodds, recomendamos leerlo antes de iniciar: https://kentcdodds.com/blog/how-to-react
- Es importante asumir el compromiso, una buena técnica para lograr esto es hacer público el proceso, recomendamos hacer un Tuit, post en LinkedIn o Facebook con cada uno de los materiales y un comentario, usando también el hashtag
#30DaysOfReacty#reactCostaRicaasí le damos un poco de visibilidad a la comunidad 😉 - Es buena idea aparte de publicar el avance, recuperar notas importantes o porciones de código que podamos reutilizar en el futuro, para esto sería buena idea utilizar GitHub para llevar el seguimiento del código que hagamos.
- Notion.so también es una muy buena herramienta para llevar notas. Para un nivel extra de aprovechamiento, podríamos publicar lo que vayamos aprendiendo en Dev.to o en alguna plataforma para blogs.
- Si perdemos un día o dos no es problema siempre y cuando nos pongamos al día. Si se puede. 💪🏽
- No todos los artículos son de nivel principiante, si tienes alguna pregunta etiquetame en un Twit y la resolveremos en comunidad.
El día uno consiste en revisar a alto nivel el material que vamos a estudiar, recuperar algunos links, ejemplos, crear notas y un proyecto en GitHub para manejar los ejemplos.
También es un buen día para invitar a otros colegas a unirse.
Durante el día 2 es buena idea repasar aspectos básicos de JavaScript y su funcionamiento. Siempre vale la pena aprender o recordar detalles importantes sobre qué es un Closure en JavaScript, cómo funciona y en que casos se aplica.
Contenido recomendado:
- What The fork is a Closure por Dan Abramov
- Scope and Closures por Kyle Simpson
- What is a Closure por Eric Elliot
Según Wikipedia, la abstracción consiste en aislar un elemento de su contexto o del resto de los elementos que lo acompañan. En programación es importante saber cuando abstraer y cuál es la mejor manera de hacerlo para evitar repetir el código pero al mismo tiempo no caer en la trampa de sobre-complicar las cosas.
Contenido recomendado:
- Abstraction and Composition por Eric Elliot
- AHA Programming por Kent C. Dodds
- AHA Programming Talk por Kent C. Dodds
El día 4 está dedicado completamente al repaso de conceptos fundamentales: el funcionamiento del browser, el funcionamiento del Event Loop y los conceptos más básicos de JavaScript en pocas palabras.
Contenido Recomendado:
- So How does the Browser Actually Render a Website por Ryan Seddon
- What The Heck is The Event Loop Anyway? por Philip Roberts
- The Fundamentals - JS por Wes Bos y Scott Tolinski
Una de las ventajas de React es funcionar tan de cerca a JavaScript sin necesidad de templates. Es por eso que es importante familiarizarse con el lenguaje, en especial con caracteristicas modernas. El día 5 esta dedicado al repaso de estas características.
Contenido Recomendado:
Cuando creamos aplicaciones utilizamos abstracciones y no siempre es claro lo que sucede por debajo. En el día 6 vamos a explorar las bases de la creación de componentes en React. Posiblemente a la hora de escribir nuestras aplicaciones vayamos a utilizar una estrategia diferente sin embargo conocer las bases es importante para tener un conocimiento sólido sobre React o cualquier otra tecnología.
Contenido Recomendado:
- Super Simple Start to React por Kent C. Dodds
- The Beginner's Guide to React - Introduction
- Create a User Interface with Vanilla JavaScript and DOM
- Create a User Interface with React’s createElement API
En el día 7 vamos a generar nuestra primera aplicación. Esta debe generar escalas musicales que consistiran en una serie de botones que emitiran la nota correspondiente. Utilizaremos JSX, Create React App y Tone.js.
Contenido Recomendado:
Ejercicio
En el día 8 vamos a crear nuestro propio React Router para entender de manera profunda su funcionamiento.
Contenido Recomendado:
React es todo lo que necesitas para manejar el estado de tu aplicación.
Contenido Recomendado:
En el día 10 veremos las mejores estrategias para organizar y aplicar estilos a nuestros componentes en react.
Contenido Recomendado:
Seguimos con el manejo de estilos css en nuestras aplicaciones de React. En el día 11 exploraremos TailwindCSS. Ciertamente no es necesario conocer Tailwind para crear una aplicación con React pero vale mucho la pena.
Contenido Recomendado:
- Introducción a TailwindCSS por Alfredo Bonilla
- Setting Up Tailwind CSS In A React Project por Blessing Krofegha
En el día 12 vamos a iniciar un repaso sobre las funcionalidades modernas de CSS para poder aplicarlas a nuestros componentes de React.
Contenido Recomendado:
- A Complete Guide to Grid
- CSS Grid Changes Everything por Morten Rand-Hendriksen
- CSS Grid Tutorial por FollowAndrew
- Learn CSS Grid por Jonathan Suh
Flexbox ayuda a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Es definivitamente una característica que debemos usar.
Contenido Recomendado
- A Complete Guide to Flexbox
- Flexbox in 20 minutes por Brad Traversy
- Flexbox vs Grid CSS por Jen Simmons
- Flexbox + CSS Grid por Jen Simmons
Renderizar listas en React es bastante sencillo sin embargo tiene sus particularidades.
Contenido Recomendado
Los hooks vienen a cambiar la manera de escribir aplicaciones en React. Permiten poder utilizar el estado si necesidad de escribir una clase, entre otras cosas.
Contenido Recomendado
Contenido extra
Los formularios son quizás la caraterística más común y de las más importantes en la web. Los elementos de formularios en HTML funcionan un poco diferente a otros elementos del DOM en React, debido a que los elementos de formularios conservan naturalmente algún estado interno.
Contenido Recomendado
Aparte de los cambios del estado pueden suceder otras cosas a la hora de renderizar un componente en React. Con useEffect podemos manejar la ejecución de los efectos secundarios.
Contenido Recomendado
- Usando useEffect
- A Complete Guide to useEffect por Dan Abramov
- The Iceberg of React Hooks por Alejandro Solidze
- Hook Flow por Donavon West
Algunas veces es necesario hacer algunos ajustes para mejorar el rendimiento de nuestras aplicaciones y existen herramientas que podemos utilizar sin embargo no siempre es necesario e incluso podría ser perjudicial.
Contenido Recomendado
- Explore the useMemo, useContext and useRef Hooks in React por chantastic
- When to useMemo and useCallback by Kent C. Dodds
Context provee una forma de pasar datos a través del árbol de componentes sin tener que pasar props manualmente en cada nivel. También podemos combinarlo con otros hooks como useReducer como estrategia para el manejo del estado de nuestra aplicación
- Context
- React Hooks useContext por Ben Awad
- useContext() + useReducer() = Magic? por Maximilian Schwarzmüller
- React Hooks - A deeper dive featuring useContext and useReducer por Austin Johnston
En el día 20 continuamos repasando el hook useReducer, muy útil para cambios complejos en el estado de un componente.
Contenido Recomendado
- Should I useState or useReducer? por Kent C. Dodds
- Why I Love useReducer por Harry Wolf
- The useReducer Hook by Dave Ceddia
Iniciamos estudiando los patrones avanzados de componentes en React. Por medio del patrón de componentes compuestos podemos lograr que uno o varios componentes trabajen en conjunto para lograr una tarea en específico.
Contenido Recomendado
El principio de inversión de control nos puede ayudar a mejorar nuestro código reutilizable.
Contenido Recomendado
Vamos a tomar algunos días para repasar programación funcional lo cual será de ayuda para pensar mejor a la hora de escribir código JavaScript y por ende a la hora de construir aplicaciones React.
Contenido Recomendado
En matemáticas y ciencias de la computación funciones de orden superior son funciones que cumplen al menos una de las siguientes condiciones:
- Tomar una o más funciones como entrada
- Devolver una función como salida
Contenido Recomendado
TypeScript es un super set de JavaScript, es decir extiende su funcionalidad. TypeScript permite tener tipado estático y funciona muy bien para capturar errores antes del proceso de ejecución. Además ayuda muchísimo a darle más legibilidad al código.
Contenido Recomendado
Next.js es un framework de React que permite implementar fácilmente server side rendering entre muchas otras cosas más. En este día vamos a empezar a crear una aplicación para poner en práctica los conceptos aprendidos.
Contenido Recomendado
TypeScript es especialmente útil en React para definir los tipos de las props que se utilizarán en un componente. Con esta guía será muy sencillo entender el concepto y aplicarlo.
Contenido Recomendado
Las pruebas unitarias son el respaldo que vamos a tener para asegurarnos que los cambios que hagamos no estén quebrando otra parte del sistema que estamos actualizando. Vale mucho la pena acostumbrarse a escribirlas adecuadamente.
Contenido Recomendado
Crear un acortador de URLs desde 0 utilizando NextJS.
Contenido Recomedado
Las aplicaciones descentralizadas también conocidas como aplicaciones web3 son aplicaciones web que interactúan con una blockchain y tienen algunas particularidades.
Te agradezco mucho por llegar aceptar el reto. Felicitaciones por llegar hasta el final. Espero que hayas disfrutado el reto tanto como yo lo hice preparándolo. Ahora bien, ¿eso es todo? ¿ya lo aprendiste todo? pues no, nunca debemos parar de aprender. Si quieres continuar aprendiendo puedes seguir con el siguiente reto: #30DaysOfWeb3 donde vamos a aprender lo necesario para construir el futuro de la web programando aplicaciones web3. ¡Nos vemos allà!