Todo lo que necesitas para dominar React.js

* En este video vamos a descargar el repositorio, instalar las dependencias y encender el servidor. 
 * El URL del repositorio es: https://bitbucket.org/rickitan/clontagram

Descargar projecto y encender el servidor

* Vamos a entrar en la carpeta del cliente 
 * Nuestro cliente esta basado en la librería create-react-app (https://github.com/facebook/create-react-app) 
 * Te voy a explicar cómo funciona el proxy entre el servidor y create-react-app

Encender cliente y explicar create-react-app

* Te voy a enseñar cómo revisar los commits que corresponden a cada video 
 * Los puedes encontrar en: https://bitbucket.org/rickitan/clontagram/pull-requests/1/videos-del-curso/diff

Aprender a tener acceso a todos los commits del curso

* En este video Daniel te va a dar un breve recorrido por el backend de Clontagram. 
 * Recuerda que en este curso no vamos a entrar en detalles sobre la implementación del servidor. Nos vamos a enfocar exclusivamente en la aplicación de React.js. 
 * Si quieres aprender a desarrollar un API como el que utilizamos en el curso puedes tomar nuestro otro curso de API: https://appdelante.com/cursos/descripcion/diseno-de-apis-con-node-js

Breve tour del backend de Clontagram

* El siguiente documento contiene todos los detalles del API de nuestro servidor: https://drive.google.com/file/d/1JgrClB1VXW4eFvnYCHmALJme9Uht7CsV/view?usp=sharing. 
 * Cada vez que hagamos una llamada a una ruta, puedes consular el documento para ver los detalles de la llamada, como lo parámetros y el cuerpo.

Documento de referencia del API

Introducción


          * Vamos a crear la barra de navegación de clontagram
        

Implementar Nav.js

* Vamos a crear la vista Signup para que los usuarios se puedan registrar en Clontagram 
 * Y vamos a implementar un componente génerico para envolver nuestras vistas

Crear Signup.js e implementar Main.js


          * Vamos a crear todo el markup de HTML de nuestra vista Signup
        

Implementar Markup de Signup.js


          * Te voy a enseñar cómo se utilizan los eventos de JavaScript con React.js
        

Implementar leer valores de inputs con event handler

* Voy a introducir el concepto de estado en React. 
 * Vamos a guardar los valores del formulario Signup en el estado del componente

Introducción a estado con formulario Signup.js


          * Ya que tenemos todos los valores del estado, vamos a utilizar Axios para enviarlos al servidor y crear nuestro primer usuario
        

Enviar data del formulario Signup.js con Axios al servidor


          * Vamos a crear e implementar la vista Login, para que los usuarios puedan ingresar a Clontagram una vez que esten registrados.
        

Implementar Login.js

* Cuando hacemos signup o login el servidor no envía un JSON Web Token 
 * Este token es la pieza fundamental para nuestro sistema de autenticación.

Qué es el JWT y por qué hay que anexarlos a todos los requests

* Vamos a crear una serie de helpers que nos van a ser útiles para implementar la autenticación de nuestra aplicación. 
 * Te voy a enseñar cómo guardar, leer y eliminar el token de localstorage.

Implementar auth-helpers.js para guardar y leer el token


          * Vamos a introducir un estado a nuestro componente App. El estado se va a encargar de guardar la data del usuarios que se encuentra loggeado.
        

Implementar estado usuario en App.js, login, signup y logout


          * Te voy a enseñar cómo reanudar las sesiones de los usuarios utilizando el token almacenado en local storage.
        

Implementar reanudar sesión si existe JWT


          * Vamos a crear un componente para mostrar cuando la aplicación esta cargando data.
        

Implementar componente Loading

Login, Signup y Autenticación con JWTs

* Voy a introducir el concepto de routing con React.js. 
 * Vamos a utilizar la librería react-router (https://reacttraining.com/react-router/web/guides/quick-start)

Introducción a React Router, implementar rutas logout

* Dependiendo de si hay un usuario loggeado o no, vamos a hacer render de rutas diferentes. 
 * Esta implementación es excelente y nos ayuda a evitar que tener que revisar si hay un usuario loggeado en cada vista.

Implementar lógica entre rutas logout y login

* Vamos a crear una componente que nos permite mostrarle errores al usuario. 
 * Vamos a utilizar este componente cada vez que haya un error en una llamada al servidor.

Implementar componente para mostrar errores

Routing y componente para mostrar errores

* Vamos a crear la vista Upload. Esta es la vista que le va a permitir a nuestros usuarios publicar fotos. 
 * Vamos a agregar el ícono de una cámara al navbar.

Crear vista upload.js y agregar icono cámara a la navegación


          * Vamos a implementar el markup de la vista Upload.
        

Crear el Markup de Upload


          * Vamos a implementar el markup para la sección que le permite al usuario seleccionar una imágen.
        

Crear el Markup de la sección para subir imágenes

* Con Axios vamos a hacer una llamada al servidor para guardar la imágen. 
 * Es importante que utilicemos el tipo de archivo en lo headers HTTP para que el servidor los reconozca.

Implementar subir imagen


          * Por último, vamos a implementar la llamada para enviar el caption y el URL de la foto.
        

Implementar submit post

Vista Upload para subir fotos

* IMPORTANTE: Para esta parte utiliza las siguientes credenciales para ingresar a Clontagram: 
 * Email: estudiante@clontagram.com 
 * Contraseña: password 
 * En el feed es donde mostramos los posts que has publicado a Clontagram y los de los usuarios sigues.

Crear Vista Feed.js e implementar cargarPosts

* Vamos a monstrar un estado de loading mientras esperamos por la respuesta del servidor 
 * En caso de que no haya ninguna foto en tu feed, te vamos a mostrar un mensaje.

Implementar component Loading y No Sigues a Nadie

* Vamos a crear un componente llamado Post. Este componente es responsable de mostrar toda la información de un post. 
 * El componente post va a incluir: Número de likes, Botón para dar like, comentarios y la foto.

Implementar Post.js parte 1 - Crear componente y mostrar imagen


          * Vamos a crear un componente que despliegue la imagen y el nombre del usuario.
        

Implementar Post.js parte 2 - Crear Avatar.js

* Vamos a crear el botón para darle like a una foto. 
 * Y vamos a mostrar los comentarios de un post.

Implementar Post.js parte 3 - Crear BotonLike.js y Mostar comentarios


          * Vamos a implementar el formulario que le permite a los usuarios dejar comentarios.
        

Implementar Post.js parte 4 - Crear comentar Form


          * Vamos a implementar la lógica que se encargue de guardar el like en el servidor y reflejarlo en el estado de nuestra aplicación.
        

Toggle likes, y función actualizarPost


          * Vamos a implementar la lógica que se encargue de guardar el comentario en el servidor y reflejarlo en el estado de nuestra aplicación.
        

Publicar comentarios en posts


          * Por último, vamos a implementar la paginación de nuestro feed, para cargar más fotos.
        

Implementar paginación del feed

Vista Feed

* La vista Post se encarga de mostrar cada post indivualmente 
 * A diferencia del feed, vamos a mostrar todos los comentarios.

Crear Post.js, sus estados y cargar la data de un post


          * Te voy a enseñar cómo manejar los errores de tipo 404
        

Manejar 404s y recurso post no encontrado


          * Vamos a implementar el Markup de la vista Post.
        

Implementar Markup de Vista Post.js


          * Vamos a implementar la lógica para dejar likes.
        

Implementar Like y Comentarios

Vista Post

* La vista Explore le permite a los usuarios conseguir a otros usuarios y ver los posts publicados en Clontagram. 
 * En este video vamos a crear el Markup y cargar la data de los usuarios y posts.

Crear vista Explore.js cargar data y markup

* Vamos a crear un componente llamado Grid, que recibe un array de posts y se encarga de mostrar las fotos en un Grid. 
 * Vamos a utilizar el método reduce para construir el Grid. Aquí puedes aprender más sobre reduce: https://www.youtube.com/watch?v=9xqJsJ3O8bw

Implementar Grid.js y agregar icono a barra de nav

Vista Explore


          * El perfil es la casa de nuestros usuarios. En este video vamos a cargar la data que necesitamos para la vista.
        

Crear Perfil.js e implementar la operación para cargar la data


          * Vamos a crear el componente ImagenAvatar que se encarga de mostrar la foto del usuario, y permite subir la foto para los avatares.
        

Crear componente ImagenAvatar para el perfil


          * Vamos a implementar la funcionalidad para subir la foto del avatar de nuestros usuarios.
        

Implementar función para subir imágenes al servidor


          * Vamos a crear los botones para seguir usuarios, dejar de seguir y hacer logout
        

Crear Botones para seguir usuarios y hacer logout


          * Vamos a implementar la lógica que se encarga de guardar cada vez que un usuario sigue a otro o deja de seguir.
        

Implementar función para seguir y dejar de seguir usuarios

* Vamos a crear un hook que nos permite determinar si la aplicación está corriendo en una pantalla pequeña. 
 * Con este hook vamos a alternar la locación donde hacemos render de la biografía.

Implementar hook useEsMobil y terminar vista Perfil.js

Vista Perfil

* Muchísimas gracias por haber tomado el curso. Fue un placer tener como estudiante. 
 * Recuerda que estoy disponible para responder cualquier duda. Puedes dejarla en los comentarios. 
 * Me encantaría escuchar tu opinión sobre el curso. ¿Qué fue lo que más te gusto? ¿Que te gustaría que cambie? 
 * Puedes enviarme tu respuesta a ricardo@appdelante.com 
 * ¡Te deseo muchísimo éxito en tu carrero!

Introducción

Descargar projecto y encender el servidor

Encender cliente y explicar create-react-app

Aprender a tener acceso a todos los commits del curso

Breve tour del backend de Clontagram

Documento de referencia del API

Login, Signup y Autenticación con JWTs

Routing y componente para mostrar errores

Vista Upload para subir fotos

Vista Feed

Vista Post

Vista Explore

Vista Perfil

Conclusiones y despedida

Breve tour del backend de Clontagram

Descripción