/30DaysOfReact

#30DaysOfReact

Felicitaciones por unirse 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.

Sugerencias

  1. Inicialmente vamos a tomar como referencia este post de Kent C. Dodds, recomendamos leerlo antes de iniciar: https://kentcdodds.com/blog/how-to-react
  2. 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 #30DaysOfReact y #reactCostaRica así le damos un poco de visibilidad a la comunidad 😉
  3. 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.
  4. 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.
  5. Si perdemos un día o dos no es problema siempre y cuando nos pongamos al día. Si se puede. 💪🏽

Agradecimientos especiales

Bitácora

Día 1: Preparación

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.

Día 2: JavaScript para React - Closures

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:

Día 3: JavaScript para React - Abstracción

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:

Día 4: JavaScript para React - Conceptos fundamentales

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:

Día 5: JavaScript para React - Características modernas de JavaScript para React

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:

Día 6: Hola Mundo de React

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:

Día 7: Crear un generador de escalas musicales con React

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

Día 8: React Router

En el día 8 vamos a crear nuestro propio React Router para entender de manera profunda su funcionamiento.

Contenido Recomendado:

Día 9: Manejo del estado de la aplicación

React es todo lo que necesitas para manejar el estado de tu aplicación.

Contenido Recomendado:

Día 10: Componentes y estilos CSS

En el día 10 veremos las mejores estrategias para organizar y aplicar estilos a nuestros componentes en react.

Contenido Recomendado:

Día 11: TailwindCSS y React

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:

Día 12: Repaso de CSS - CSS Grid

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:

Día 13: Repaso de CSS - Flexbox

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

Día 14: Listas en React

Renderizar listas en React es bastante sencillo sin embargo tiene sus particularidades.

Contenido Recomendado

Día 15: React Hooks - Use State

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

Día 16: Forms en React

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

Día 17: Manejo de efectos secundarios con useEffect

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

Día 18: Explorando useMemo, useCallback y useRef en React

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

Día 19: useContext & useReducer

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

Día 20: useReducer

En el día 20 continuamos repasando el hook useReducer, muy útil para cambios complejos en el estado de un componente.

Contenido Recomendado

Día 21: Patrones avanzados - Compound Components

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

Día 22: Principio de Inversión de Control

El principio de inversión de control nos puede ayudar a mejorar nuestro código reutilizable.

Contenido Recomendado

Día 23: Repaso de programación funcional

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

Día 24: Programación funcional - Funciones de Orden Superior

En matemáticas y ciencias de la computación funciones de orden superior son funciones que cumplen al menos una de las siguientes condiciones:

  1. Tomar una o más funciones como entrada
  2. Devolver una función como salida

Contenido Recomendado

Día 25: Introducción a TypeScript con React

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

Día 26: Empezando con NextJS

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

Día 27: Cheatsheet de TypeScript + React

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

Día 28: Front End Unit Testing

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

Día 29: Reto - Acortdor de URLs

Crear un acortador de URLs desde 0 utilizando NextJS.

Contenido Recomedado

Día 30: Reto - Crear una Dapp con React

Las aplicaciones descentralizadas también conocidas como aplicaciones web3 son aplicaciones web que interactúan con una blockchain y tienen algunas particularidades.