Fundamentos de React

En este tutorial 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 de lo que aprenderás

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.

👨🏻‍💻 ¿Quién soy?

Soy Matías Hernández, padre, desarrollador, podcaster, escritor e instructor.

Desde hace mucho tiempo (antes de que jQuery existiese) que escribo software y durante todos esos años el desarrollo web ha sido mi pasión. En los últimos 10 años he trabajado oficial y profesionalmente como Ingeniero de Software para diferentes proyectos. Durante esos años he recolectado muchas ideas, conceptos y conocimientos que intento destilar en diferentes formatos para ayudar a otros desarrolladores a mejorar su carrera.

Me encanta lo que hago y trato de traer la misma pasión a la creación de contenido por medio de cursos en egghead.io, artículos en FreeCodeCamp, mi blog, Cloudinary y otras publicaciones, en mis podcasts Café con Tech y Control Remoto y en mis cursos via email.

Puedes encontrarme en twitter como @matiasfha

⏰ Antes del tutorial

¿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:

• Destructuring.
• Spread.
• Ternaries.
• Closures.
• Parámetros por defecto.
• Arrow functions.
• Métodos de arreglos.
• Promesas, async/await.

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

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

🛠 Requerimientos

❗ Cada ejercicio contiene una inserción de Stackblitz que puede usar si prefiere no instalar este repositorio localmente.

Si prefieres installar este repositorio localmente 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/tutorial-react-desde-cero.git

• Instala las dependencias

cd tutorial-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

Ejecutando los ejercicios

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.

📝 Sobre el tutorial

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.

Listado de lecciones

• 00 - Introducción
• 01 - Componentes
• 02 - Creando una app estática base
• 03 - El mundo sin JSX
• 04 - Conociendo JSX
• 05 - Props
• 06 - Renderizado Condicional
• 07 - Composición
• 08 - Arrays
• 09 - Estilos
• 10 - Eventos
• 11 - Formularios: Componentes Controlados
• 12 - Formularios: Componentes No-Controlados
• 13 - Construyendo una interfaz