Bienvenidos
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.
⏰ 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
Estas herramientas deben ser parte de tu sistema, para verificar puedes ejecutar en la terminal
Configuración
Si gustas, puedes hacer un fork de este repositorio para poder ir "guardando" tu progreso. Clona este repositorio, en la terminal ejecuta:
Instala las dependencias:
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
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.
Transcripción
Bienvenido al curso Fundamentos de React para Escuela Frontend. Soy Matías Hernández y seré tu instructor durante este viaje. Estoy muy feliz que hayas decidido unirte a este proceso junto a mí y al equipo de Escuela Frontend y aprender así las vas que necesitas para comenzar tu camino con React. Este curso no es el típico listado de videos en que puedes verlo como si fuera una serie de Netflix, al contrario, la idea es que tu aprendizaje se solidifique, por esto el curso está diseñado para que pases un buen tiempo ensuciándote de las manos en el teclado, resolviendo los ejercicios y desafíos.
En los siguientes videos encontrarás cómo comenzar con este workshop, por ahora solo quiero darte la bienvenida, estamos felices de tenerte aquí y esperamos pronto ver lo que serás capaz de crear. Ya estás listo para comenzar el curso Fundamentos de React de Escuela Frontend, para eso lo primero es que accedas a este repositorio en GitHub para poder clonarlo y poder revisar el contenido de cada una de las lecciones.
Aquí encontrarás cada uno de los pasos a seguir con las instrucciones y contenido que te ayudarán a procesar y a continuar con tu aprendizaje. Lo primero es este pequeño readme de bienvenida que te cuenta sobre qué es este workshop y cómo trabajar con él, te recomiendo leerlo, pero lo repasaremos rápidamente aquí.
Lo primero es que estás ansioso para aprender, este será un viaje lleno de desafíos, una de las cosas que podrás aprender será cómo pensar en React porque usamos JSX, qué es lo que hay detrás de JSX, cómo manejar estilos, cómo manejar arreglos y algunos eventos. ¿Qué necesitas para comenzar?
Lo primero y sobre todo necesitas conocer conceptos fundamentales de desarrollo web, pero sobre todo sobre JavaScript. Algunas de estas ideas son Destructuring, Spread, Ternary, Closures, aquí hay algunos enlaces a algunos artículos en donde podrás profundizar más, además te invito a revisar mi newsletter Microbytes en donde encontrarás el curso JavaScript para React que te entregará todos los fundamentos previos para comenzar a trabajar con React.
Como requerimientos necesitas tener GIT instalado, Node y NPM para poder instalar las dependencias, puedes revisar las versiones de tu sistema con estos comandos. Una vez tengas eso preparado simplemente clonas el repositorio, instalas las dependencias con un simple NPM install que podrá tardar algunos minutos y ya estás listo para ejecutar cada uno de los ejercicios simplemente escribiendo NPM run dev, lo que te mostrará un menú como este en donde podrás seleccionar la lección que quieres ejecutar, una vez seleccionada la lección simplemente visitarás localhost:3000. Cada una de las lecciones se compone de al menos tres partes, un video en donde podrás revisar algunos conceptos básicos de lo que veremos a continuación, esto está asociado a un archivo readme, luego ejercicios que tienes que resolver y un crédito extra.
Tenemos algunos comentarios y emojis que te ayudarán en el camino que están identificados en esta clave, revisemos rápidamente algunas de las lecciones, encontrarás todas las lecciones numeradas en estos directorios, revisemos la lección número tres, dentro encontrarás un archivo readme que te da el contenido que vamos a tratar con algunos ejemplos y te indica cuáles serán los ejercicios y el crédito extra y luego encontrarás un archivo index en donde tendrás que escribir tus soluciones y algunos comentarios y emojis que te permitirán continuar con esto. Ahora ya sabes cómo comenzar, es momento de revisar una lección.
Revisemos juntos cómo comenzar con el curso desde cero, visitamos este repositorio llamado fundamentos react, lo que lo unaremos, copiamos la url y en la consola simplemente escribimos git clone, copiamos la url y podemos ingresar en el directorio. Dentro del directorio tenemos todas las lecciones, ahora necesitamos instalar las dependencias, npm install, una vez instaladas ya podemos comenzar, para eso ejecutaremos npm run dev y tomaremos una lección de ejemplo, vamos a tomar la número tres.
Ahora revisaremos el contenido de la lección, este es el proceso que deberás seguir para cada una de las lecciones, lo primero que tendrás que hacer es revisar el video llamado intro de cada una de las lecciones, en este video te mostrará algo de contenido, ejemplos y qué es lo que tendrás que realizar, luego es momento de que abras tu editor de código, puedes aquí mismo revisar el archivo readme que también está en el video para que lo sigas a tu propio tiempo, pero es momento de resolver los ejercicios, para eso abrirás el archivo index.html, utilizarás los comentarios y los emojis para ir resolviendo los ejercicios propuestos en el archivo readme, una vez tengas eso listo es momento de revisar la solución, para eso visitarás nuevamente el sitio con los videos y elegirás la solución para poder visualizarla, en este video se te mostrará cómo resolver el ejercicio, el siguiente paso es resolver el crédito extra y finalmente ver el video correspondiente al crédito extra y la solución propuesta, una vez terminada la lección simplemente vuelve a la consola y cierras el servidor de desarrollo presionando control C y ya puedes nuevamente continuar con la siguiente lección ejecutando npm run dev nuevamente.