React JS Hooks: De Cero a Experto Creado Aplicaciones Reales

Seleccionaremos el navegador que vamos a utilizar durante todo el curso.

Vamos a seleccionar un editor de código con el que vamos a programar todas nuestras apps.

Vamos a ver que extensiones vamos a usar en Visual Studio Code para codificar más rápido.

Instalaremos Node.js para poder luego crear Apps con React.

Instalaremos YARN para descargar todas las dependencias de terceros que usaremos en nuestros proyectos.

Vamos a instalar la extensión de Google Chrome React Developer Tools.

Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.

Veremos los conceptos básicos de React para poder entender que estamos programando en todo momento.

Crearemos nuestra primera app con el comando create-react-app.

Veremos toda la estructura de una aplicación de React JS.

Crearemos nuestro primer componente y veremos todas sus partes.

Veremos una explicación de que son los PROPS de React y como funcionan.

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasaremos variables y objetos por los props de nuestros componentes.

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Con React Developer Tools podremos ver en tiempo real que props tiene cada componente, que componentes son los padres y que hooks esta usando, entre muchas mas funcionalidades.

Una explicación de todo lo que vamos a ver en esta sección de estilos CSS y SCSS en React JS.

Vamos a empezar aprendiendo como se añaden los IDs y las Classes cuando estamos escribiendo React JS.

Veremos como podemos añadir estilos en linea en nuestros componente.

Veremos qué es CSSModule y por qué React JS lo recomienda en su pagina oficial.

Podemos añadir tanto CSS en linea como CSS en un fichero externo y incluirlo en nuestro componente con un import.

Veremos la mejor forma de añadir SASS a nuestro proyecto de React JS y como potencia y facilita la escritura de CSS.

Una explicación de todo lo que vamos a ver en esta sección de Conocimientos avanzados.

Veremos qué son los PropTypes y por que son buenos utilizarlos para documentar los tipos de nuestros props en los componentes.

Veremos qué tipo de validación de tipo tenemos para poder implementar con PropTypes ya sean String, Int, Funciones, Array, Objetos, etc...

Hemos visto que podemos hacer Destructuring de los props pues ahora veremos como podemos hacer el doble Destructuring.

También podemos crear componentes internos dentro de un mismo componentes para estructura más nuestro componente y que sea más fácil de leer.

Veremos qué es el Children de un componentes y como se puede utilizar para crear Layouts.

Una explicación de todo lo que vamos a ver en esta sección de Hooks de React JS.

Una explicación de que son los Hooks y a quién sustituyen.

Veremos como utilizar el Hooks useState para el uso de estados en componentes y actualizar esos estados

Crearemos nuestro primero estado en nuestro componente y veremos como se mueve la información por le estado.

Veremos como podemos complicar un poco más el estados y generaremos un estado que almacenara un objeto con varias propiedades.

Una explicación de que es el useEffect y como podemos utilizarlo para hacer que nuestros componentes sean reactivos.

Crearemos un ejemplo de como se usuaria el useEffect en un componente.

Vamos ha ver el resultado final del proyecto.

Vamos a crear el proyecto base y hacer varios cambios para empezar a programar.

Vamos a instalar todas las dependencias que usaremos en nuestro proyecto.

Vamos a crear el componente Header para mostrar el logo y el nombre de nuestra aplicación.

Crearemos un botón flotante que abrirá un modal que contendrá el formulario para crear un nuevo Tweet.

Vamos a crear el componente ModalContainer y le pasaremos por children el contenido que tiene que renderizar.

Crearemos el componente FormSendTweet para renderizar el formulario para enviar los de tweets.

Guardaremos el contenido del formulario en un estado y cuando se envíe el formulario lo guardaremos en un array en el localStorage

Crearemos un toast para avisar al usuario si el tweet que ha enviado si se ha enviado correctamente o ha surgido algún fallo en el proceso de envío.

Recuperaremos todos los Tweets que hemos enviado del localStorage y añadiremos el nuevo tweets que estamos intentando enviar.

Crearemos un componente que renderizara la lista todos los tweets que tenemos guardados en el localStorage.

Crearemos un componente Tweets para renderizar en le navegador cada uno de los tweets enviados.

Crearemos una función para pode borrar cualquier Tweet.

Dónde podrás encontrar el código fuente de este proyecto.

Vamos ha ver el resultado final del proyecto.

Dónde podrás encontrar el código fuente de este proyecto.

Nos vamos a crear una cuenta en TheMovieDB para poder consumir tu API de películas.

Vamos a crear el proyecto base y hacer varios cambios para empezar a programar.

Vamos a instalar todas las dependencias que usaremos en nuestro proyecto.

Crearemos todas la páginas que va a tener nuestra aplicación para poder configurar el sistema de rutas en la siguiente clase.

Crearemos el sistema de rutas con React Router DOM para poder navegar entre nuestra páginas sin recargar la web.

Crearemos el menú e la web y enlazaremos todas  las paginas a las opciones del menú para poder navegar entre páginas.

Crearemos nuestro propio hooks llamado useFetch para hacer peticiones HTTP a TheMovieDB y que nos devuelva el loading, el errro y el resultado.

Crearemos un componente que renderize un slider/carrousel de todas las películas que le enviemos.

Crearemos un componente que renderize un slider/carrousel de todas las películas que le enviemos.

Crearemos un componente con un spinner para mostrar mientras se ejecutan las peticiones HTTP.

Crearemos el componente MovieList y lo reutilizaremos para crear una lista de películas  populares.

Crearemos el componente MovieList y lo reutilizaremos para crear una lista de películas  populares.

Reutilizaremos el componente MovieList para renderizar otra listas de películas pero esta vez de las películas mejor votadas por por usuarios.

Crearemos el componente Footer para mostrar nuestro nombre en el pie de la página.

Recogeremos el ID de la película que mandamos al componente movie y obtendremos toda la información de la película.

Obtendremos una imagen de un fragmento de la película y la pondremos como background de la página.

Recuperaremos toda la información que necesitemos de la película para mostrar en nuestra página.

Crearemos un componente ModalVideo para poder reproducir un video o trailer.

Usaremos el componente ReactPlayer para mostrar el trailer de la película dentro del modal.

Crearemos la estructura que va a tener nuestra página de Ultimos lanzamientos.

Crearemos un componente que manejara los datos de cada película.

Crearemos un componente que renderizara el diseño de cada película.

Crearemos una paginación de películas sin que se tenga que recargar la página.

Vamos a reutilizar componentes que ya hemos creado para crear una nueva pagina con con otro tipo de películas.

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

Crearemos una pagina para buscar películas y generaremos la URL para poder compartir el resultado de nuestra búsqueda.

Vamos a darle un diseño atractivo a la página de error404.

Veremos el ejemplo final del proyecto que vamos a realizar en esta sección.

Crearemos el proyecto desde donde partiremos.

Instalaremos todas las dependencias que vamos a usar en el proyecto y cambiaremos el comando de ejecución de la app en el package.json.

Vamos a crear un componente que renderize el menu de nuestra web.

Le daremos los estilos necesarios a nuestro menu para que se vea bonito con SASS.

Vamos a construir nuestra base de datos de productos y lo subiremos a myJson para generar una URL y luego poder hacer peticiones HTTP para recuperar esos productos.

Vamos a crear un Hook personalizado llamado useFetch para realizar petición HTTP y que nos devuelva un loading, el resultado y el error si fuera necesario.

Crearemos el componente Products para gestionar los datos de todos los productos y luego renderizar un nuevo componente.

Crearemos un componente Loading para mostrarlo cuando hagamos una petición HTTP y este en curso.

Crearemos el componente Product para renderizar el producto ya en la web donde le pasemos los datos de cada productos por props.

Escribiremos la logia en JavaScript para poder añadir productos al carrito.

Añadiremos un Toast para poder mandar feedback al usuario de lo que ha sucedido.

Recuperaremos los productos del carrito cuando nuestra pagina web sea recargada y así no perderemos nunca los productos añadidos al carrito.

Crearemos el componentes Cart donde ira todos el carrito de nuestra página web.

Escribiremos la lógica que necesitamos para que nuestro carrito se abra y se cierre haciendo click en el icono.

Cambiaremos el icono cuando el carrito tenga productos o cuando el carrito esta vacío.

Crearemos el componte CartContentHeader donde estaba para cerrar el carrito, el titulo de carrito y para vaciar al carrito.

Añadiremos la funcionalidad de para poder cerrar el carrito y vaciar el carrito de todos los productos que contenga.

Crearemos funciones para controlar Arrays que luego reutilizaremos en otros componentes.

Crearemos el componente interno CartContentProducto que renderizara todos los productos del carrito.

Escribiremos el código para que los producto del carrito se vean correctamente en la web.

Añadiremos la funcionalidad al botón de (+) y (-) de cada productos para poder incrementar y decrementar la cantidad de ese producto que hay en el carrito.

Crearemos el componente CartContentFooter donde añadiremos el total del precio del carrito y botón para proceder al pago del carrito.

Crearemos un Hooks para que la cantidad total del carrito se pueda actualizar instantaneamente.

Dónde podrás encontrar el código fuente de este proyecto.

Veremos el resultado final de nuestra aplicación.

Donde puedes obtener el código de la aplicación terminada.

Vamos a crear un proyecto de React JS y a modificarlo para nuestra App.

Vamos a crear nuestra App en Firebase y a añadir las configuraciones necesarias

Vamos a conectar la app de Firebase que acabamos de crear con nuestra app de React JS.

Instalando React Bootstrap y añadiéndolo al propyecto de React.

Añadiendo SASS al proyecto.

Vamos a crear la cabecera de nuestra app con nuestro nombre.

Vamos a montar la estructura del listado de tareas.

Creando el componente AddTask para poder crear tareas.

Vamos a guardar el valor del formulario en un estado para luego mandarlo a Firebase.

Mandaremos la tarea a firestore para guardarla.

Vamos a limpiar el formulario cuando la tarea se haya creado en firestore.

Vamos a crear una petición para obtener todas las tareas de firestore y las guardaremos en un estado.

Vamos a usar el estado donde tenemos todas las tareas y las pintaremos en nuestra app.

Vamos a darle un poco de diseño a la lista de tareas y añadiremos los iconos de Check y Delete.

Vamos a refrescar la lista de tareas cuando el usuario crea una nueva sin tener que recargar la página.

Vamos a mostrar al usuario un feedback cuando la lista este vacía o este cargando las tareas.

Vamos a añadir la funcionalidad para actualizar cualquier tarea y márcala como completa o incompleta.

Vamos a añadir la funcionalidad para eliminar cualquier tarea.