Te doy la bienvenida al curso de introducción a ReactJS.
ReactJS es una de las herramientas más populares
y la que mayor demanda laboral tiene en el entorno de JavaScript.
¿Y cómo lo consiguió?
Bueno, resulta que ReactJS nos ayuda a crear aplicaciones
altamente escalables y extremadamente interactivas.
En lenguaje formal, esto significa que es multiplataforma,
declarativo, basado en componentes,
algunas definiciones que vamos a ir descubriendo a lo largo de este curso.
Y también, a lo largo de este curso,
vamos a construir nuestro primer gran proyecto con ReactJS.
Vamos a crear un proyecto desde cero,
aprovechando todo el poder y todos los grandes poderes de ReactJS
para implementar una aplicación que se sienta viva,
que los usuarios la usen y se sienta una experiencia espectacular.
Para eso es que sirve ReactJS.
Vamos a descubrirlo, vamos a desplegar nuestro proyecto
y vas a poder incluirlo en tu portafolio profesional de proyectos
como front-end developer con ReactJS.
Dicho eso, hay algunos requisitos.
Antes de empezar este curso, necesitamos saber esto.
Por ejemplo, esto no es un curso de programación básica,
es un curso de introducción a React, no a la programación.
Si todavía no sabes programar,
muy pronto vas a llegar a este curso, no te preocupes,
pero primero toma los cursos básicos de programación.
Aquí en la sección de recursos abajo de la clase
te dejo toda la información que necesitas
para tomar esos cursos.
Muy bien.
Dicho eso, también necesitamos saber los fundamentos
de las tecnologías fundamentales de la web.
HTML, CSS, JavaScript.
Con JavaScript en particular es muy buena idea
que ya sepas qué es ECMAScript, cuáles son sus versiones,
cómo manejar programación orientada a objetos,
manipulación del DOM, asincronismo.
No es indispensable que seas un experta
o un experto en todos estos temas,
con que sepas qué es todo lo que yo te acabo de decir
y lo hayas implementado alguna vez,
es más que suficiente para que puedas empezar
a dar tus primeros pasos con ReactJS.
Además, quitting is awful.
Este proyecto es lo suficientemente complejo
como para que necesitemos un sistema
de control de versiones para que podamos en cualquier momento
tener un commit, volver a una versión anterior,
repasar y no tengamos que volver a empezar este curso
cien mil veces desde cero. Por tu seguridad,
te recomiendo que ya sepas manejar Git y GitHub.
Si no lo has hecho ya, toma el grandísimo curso profesional
de Git y GitHub, es una joya.
Y además, otra cosa que necesitamos fundamental es NPM.
Vamos a instalar y manejar dependencias con NPM.
Si tú usas alguna otra herramienta como Yarn o PMPM,
es lo mismo.
Con que sepas manejar e instalar dependencias con NPM
es más que suficiente.
Si tienes todos estos requisitos listos,
hablemos ahora de cuál es el proyecto
que vamos a construir en este curso.
Se llama Todo Machine y vamos a verlo ahora mismo en el diseño.
Lo que vamos a hacer es entrar por aquí
a nuestra aplicación, al prototipo de Todo Machine.
Aquí podrás ver que tenemos un prototipo
que nos indica que podemos buscar todos.
Muy bien, perfecto, puede filtrar.
¿Qué más podemos hacer?
Podemos marcar cómo completar un todo.
Toda la aplicación reacciona a cualquier interacción
que hagan los usuarios.
También podemos borrar todos, por ejemplo.
Podemos crear nuevos todos.
Esto abre modales, formularios.
Podemos abrirlos, cerrarlos, completarlos.
Podemos agregar nuevos todos
y todo esto reacciona a los eventos de los usuarios.
Está vivo.
Muy bien, este es el diseño.
¿Y cuál va a ser el deploy final de la aplicación?
Es este.
Esta va a ser nuestra aplicación.
Fíjate que ya está funcionando.
Nos permite filtrar,
nos permite marcar cómo completado algún todo,
nos permite borrar más,
nos permite decir que, por ejemplo,
sí, ya vimos de Batman,
y, por ejemplo, podemos crear un nuevo todo.
Es decir que vamos a terminar
el curso de introducción
a ReactJS.
Muy bien, si le damos a añadir,
ahí aparece nuestro nuevo todo
y vamos a marcarlo como completado
cuando hayamos terminado nuestra aplicación.
Empecemos de una vez
con lo primero que necesitamos
para tomar este curso y desarrollar este proyecto.
Lo que vamos a hacer es que yo te voy a dejar
este repositorio de la cuenta de Platzi
en la sección de recursos de esta clase por aquí abajo
y tú lo que vas a hacer es entrar
y vas a seguir estas instrucciones.
Fíjate que te dejé una descripción
lo suficientemente descriptiva
para que puedas seguirla sin ningún problema.
Tenemos que clonar este repositorio con git clone,
tenemos que instalar sus dependencias con npm install
y tenemos que ejecutar,
iniciar la aplicación con el comando npm start.
Así que vamos a hacer exactamente eso.
Voy a aquí seleccionar la URL
con el csh en este caso de mi repositorio
y vamos a ir a nuestro editor de código
para clonar este proyecto.
Muy bien, en este caso yo estoy usando Visual Studio Code,
es mi editor favorito,
tú puedes usar el que tú quieras,
eso es lo de menos.
Lo que sí importa es que clonemos nuestro proyecto.
Así que voy a utilizar el comando git clone
con la URL que acabo de copiar.
Perfecto, eso me va a clonar nuestro proyecto
con la estructura base de la aplicación
que vamos a construir, ya la vamos a ver.
Muy bien, voy a entrar a la carpeta
que me acaba de generar esta clonación
y ahora lo que vamos a hacer es ejecutar
el siguiente comando, npm install,
para instalar todas las dependencias
que necesita nuestro proyecto base
para al menos ejecutarse correctamente.
Muy bien, vamos a esperar a que termine esa instalación
y apenas la tengamos,
en teoría deberíamos poder ejecutar.
Muy bien, ya con eso listo,
fíjate que si hacemos ls,
ya tenemos todas las carpetas y archivos
de nuestro proyecto.
Si nosotros ahora ejecutamos npm start,
esto nos va a iniciar un servidor de desarrollo
y va a permitirnos que, en mi caso al menos,
en el localhost 2.3.000,
podamos ver nuestra aplicación
en su primerísima, primerísima versión, funcionando.
Vamos a darle a Enter y nos vemos en el navegador.
Muy bien, ya estando en el navegador
con mi servidor iniciado,
ya entrando a localhost 2.3.000,
tenemos un color de fondo azul Platzi,
tenemos un logo de Platzi girando
y tenemos un mensaje muy claro,
nos dice edita el archivo src-
o más bien, slash, app.js
y guarda para recargar.
Ok, y tenemos un enlace que nos dice
dónde podemos aprender React.js, por supuesto en este curso.
Así que, listo, ya tenemos nuestro primer
proyecto funcionando.
Ahora lo que falta es que convirtamos esto,
en lo que te prometí,
en la aplicación de TodoMachine.
Y para eso, desde la próxima clase,
vamos a descubrir cómo podemos empezar a trabajar
con el fundamento más absolutamente fundamental
de React.js, que son los componentes.
Antes de ir para allá, quisiera presentarme.
Yo soy Juan DC, Core Director,
profesor y School Owner de la Escuela
de Desarrollo Web aquí en Platzi.
Mi responsabilidad es que todos los cursos
y rutas de aprendizaje sean de la máxima calidad
para aportar a tu crecimiento profesional
como web developer.
Dicho eso, es un honor ser tu profesor,
te deseo mucha suerte y te prometo,
me comprometo también,
a que al finalizar este curso,
vas a tener un proyecto explotando
todas las capacidades de React.js,
súper interactivo, súper bien,
y súper funcional para tu portafolio profesional
como frontend developer con React.js
y vas a haber dado tus primeros grandes pasos
para este camino que es el desarrollo frontend
con React.js.
Es un honor, nos vemos en la siguiente clase
para crear componentes con React.js.