0:00 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.

0:31 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.

0:56 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í.

1:05 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?

1:30 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.

1:52 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.

2:43 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.

3:21 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.

3:56 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.