Fundamentos de React

En este workshop aprenderás los diferentes conceptos base que fundamentan el cómo y por qué de ciertas prácticas en React. Revisaremos que necesidad viene a cubrir, desde donde nace su API, el uso de JSX, como manejar estilos, eventos y estado de un componente

Resumen del Workshop

Ok. ¿listo y ansioso de aprender?, genial, este será un viaje divertido y lleno de desafíos. Algunas de las cosas que podrás aprender serán:

  • Pensando en React
  • Como configurar una app React desde cero y de forma estática.
  • ¿Por que usamos JSX?
  • ¿Qué es un componente? y como pensar en términos de componentes.
  • Como crear componentes utilizando React y JSX.
  • Cómo manejar estilos en tu aplicación.
  • Cómo renderizar listas de datos y que es la prop key.
  • Cómo manejar formularios y eventos mendiante manipulación del estado.

Antes del workshop

¿Que necesitas saber para iniciar tu camino con React?

Primero, y por sobre todo, necesitas conocer conceptos fundamentales sobre desarrollo web y sobre todo tener conocimientos sobre Javascript moderno o avanzado. Durante tu trabajo con React verás mucho ideas y conceptos como:

Te invito a revisar tus conocimientos en esas áreas para que puedas sacar el máximo provecho a este workshop.

Puedes revisar mi newsletter Microbytes y unirte al curso Javascript para React donde encontrarás más material al respecto.

Requerimientos

Para aprovechar al máximo nuestro tiempo durante el workshop, por favor realiza los siguientes pasos antes de iniciar:

Requerimientos del sistema

  • git v2.13 o superior
  • NodeJS 12 || 14 || 15 || 16
  • npm v6 o superio

Estas herramientas deben ser parte de tu sistema, para verificar puedes ejecutar en la terminal

git --version node --version npm --version

Configuración

Si gustas, puedes hacer un fork de este repositorio para poder ir "guardando" tu progreso.
  • Clona este repositorio, en la terminal ejecuta:

git clone https://github.com/matiasfha/workshop-react-desde-cero.git

  • Instala las dependencias

cd workshop-react-desde-cero npm install

Esto puede tardar unos minutos dependeniendo de tu conexión.

Si tienes algún error durante este proceso por favor completa un issue en el reposotiorio. Escribe en el toda la información de los pasos realizados y el resultado del script que ejecutaste

Desafíos

Para ejecutar los ejercicios, una vez que tienes los pasos anteriores listos, solo debes abrir la terminal y ejecutar

npm run dev

Esto te mostrará una lista de opciones con el nombre de la lección. Selecciona la que corresponda y luego visita http://localhost:3000 en tu navegador.

Para terminar el proceso y cambiar de lección solo presiona CTRL-C, esto detendrá el script y podras ejecutarlo nuevamente
  • Ten listo tu editor de código favorito para resolver los ejercicios

¿Cómo ejecutar las lecciones?

Cada lección "vive" dentro de su propio directorio dentro de este monorepo, para ejecutar el ejercicio de una lección en particular sólo debes, desde la terminal, ejecutar npm run dev. Esto te mostrará una lista de las lecciones donde podrás seleccionar utilizando el teclado.

El workshop

Estructura de las lecciones

Cada concepto o contenido esta encapsulado en su propia lección y cada lección tiene su propio directorio con recursos, ejemplos de código y desafíos.

En cada directorio encontrarás un nuevo archivo Readme.md, en el encontrarás una descripción de lo que encontrarás en la lección e instrucciones para llevar a cabo los ejercicios, desafíos o cuestionarios.

Además encontrarás la configuración necesaria para ejecutar el proyecto que te permitirá resolver los ejercicios.

Ejemplos de Ejercicios

Los ejercicios consisten en el desarrollo y solución de una problemática asociada al concepto que estás aprendiendo en la lección. Esto implica, que el código tendrá pistas y guías para que te mantengas enfocado en el tema correspondiente.

Para esto encontrás comentarios y emojis que te ayudarán en el camino.

  • 💡: Indica el contenido del ejercicio.
  • 🏋️‍♂️: Indica el ejercicio en particular.
  • 🍬: Desafío o crédito extra.