React JS Hooks: De Cero a Experto Creado Aplicaciones Reales

Introducción6 clases

Introducción

¿Por qué hemos elegido React JS?

PROYECTO: App de Tweets

PROYECTO: Web de Películas

PROYECTO: Carrito de un E-Commerce

PROYECTO: Lista de tareas con React y Firebase

Configurando el entorno de desarrollo6 clases

Instalación del navegador

Instalando Editor de Código

Extensiones para Visual Studio Code

Instalando Node JS

Instalando YARN para el manejo de dependencias

Instalando React Developer Tools

Conceptos básicos14 clases

¿Qué vamos hacer en esta sección?

Introducción a JSX

Conceptos básicos de React JS

Creando nuestra primera app en React JS

Estructura de React JS

Nuestro primer Componente en React JS

¿Que son los Props de React?

Pasando props básicos entre componentes

Pasando variables y objetos entre componentes por los props

Pasando funciones entre componente por los props

El uso de la Asignación por Destructuring

Props por defecto

Template Strings

Usando react developer tools

Añadiendo estilos CSS y SCSS6 clases

¿Qué vamos hacer en esta sección?

Como añadir Clases y IDs en React JS

Estilos en linea

CSSModules

Añadir CSS en un fichero externo por componentes

Añadir SASS en un fichero externo por componentes

Conocimiento avanzados6 clases

¿Qué vamos hacer en esta sección?

¿Qué son los PropTypes y para qué sirven?

Validaciones PropTypes

Props con Doble Destructuring

Componentes internos

Children Layout

Los Hooks de React7 clases

¿Qué vamos hacer en esta sección?

¿Qué son los Hooks y qué sustituyen?

useState - ¿Que es y para que se usa?

useState - Creando estados en nuestros componentes

useState - Creando estados de tipo objetos

useEffect - ¿Qué es y para qué se usa?

useEffect - Ejemplo de uso

PROYECTO: Simulador de Tweets14 clases

¿Qué vamos hacer en esta sección?

Creando el proyecto de React JS

Instalando las Dependencias

Creando el componente Header y los estilos

Creando el componente SendTweet y posicionando el botón de abrir el modal

Crearemos el componente ModalContainer y le pasaremos el contenido del modal

Creando FormSendTweet para renderizar el formulario de envío de tweets

Escribiendo logica para enviar el Tweet y guardarlo en el localStorage

Añadiendo Toast para notificar al usuario si el Tweet se ha enviado

Recuperando Tweets del localStorage y actualizándolos con el nuevo tweet

Componente para mostrar todos la lista de Tweets enviados

Componente Tweet que pintara el tweet

Función para borrar Tweets

Código fuente del proyecto

PROYECTO: Web de Películas30 clases

Resultado final de la aplicación

Código fuente del proyecto

Creando una cuenta en TheMovieDb

Creando el proyecto de React JS

Instalando las Dependencias

Creando todas las páginas de nuestra aplicación

Creando el sistema de rutas con React Router DOM

Creando el Menú y enlazando las páginas

Creando un Hooks personalizado useFetch para hacer peticiones http

1/2 - Creando el componente SliderMovies para mostrar un slider de películas

2/2 - Creando el componente SliderMovies para mostrar un slider de películas

Componente Loading para mostrar un spinner mientras cargar

1/2 - Componente MovieList para mostrar una lista de películas

2/2 - Componente MovieList para mostrar una lista de películas

Reutilizando el Componente MovieList para mostrar otro tipo de películas

Componente Footer

Obteniendo los datos de la película que mandamos al componente movie

Añadiendo un fragmento de la película como background de nuestra página

Pintando la información de la película en nuestra página

Componente ModalVideo donde aparecerá el trailer de la película

Cargando trailer con el componente ReactPlayer

Estructura de la página últimos lanzamientos

Componente MovieCatalog para gestionar los datos de todas las películas

Componente MovieCard que renderizara el diseño de la película

Añadiendo paginación en últimos lanzamientos

Reutilizando componentes para montar la página de Películas Populares

1/3 - Creando la página para buscar películas

2/3 - Creando la página para buscar películas

3/3 - Creando la página para buscar películas

Maqueando la página de Error404

PROYECTO: Carrito de un E-Commerce25 clases

Resultado final de la aplicación

Creando el proyecto de React JS

Instalando las dependencias y cambiando el comando yarn start

Creando el componente TopMenu

Dandole estilos con SASS al componente TopMenu

Creando base de datos de productos y subiéndola a api.myjson

Creando el hook useFetch para hacer peticiones HTTP

Creando el componente Products mostrando un loading o los productos por pantalla

Creando el componente Loading para mostrarlo cuando este cargando el contenido

Componente Product para mostrar el productos en la web

Logica para añadir productos al carrito

Toast para avisar al usuario que se ha añadido un producto al carrito

Recuperando productos del carrito al recargar la web

Creando el componente Cart

Función para abrir el carrito

Mostrando diferente icono si el carrito tiene productos o no

Creando el componente CartContentHeader

Añadiendo funcionalidad de cerrar el carrito y vaciar el carrito

Creando funciones reutilizables para tratar arrays

Creando componente interno CartContentProducts

Pintando los productos en el carrito

Añadiendo funcionalidad al botón de incrementar y decrementar producto

Creando el componente CartContentFooter

Hook para que la cantidad del carrito se actualize

Código fuente del proyecto

PROYECTO: Lista de tareas con React y Firebase20 clases

Presentación de la aplicación

Código de la aplicación

Creando nuestra App de React JS

Creando y configurando la app de Firebase

Conectado Firebase con nuestra app de React JS

Instalando React Bootstrap

Añadiendo SASS al proyecto

Creando la cabecera de nuestra app

Estructura del listado de tareas

Componente AddTaska

Guardando el valor del formulario en un estado.

Guardando la tarea en firestore

Limpiando formulario al crear la tarea

Obteniendo todas las tareas de firestore

Creando una lista con todas las tareas

Dando diseño a la lista de tareas

Refrescando la lista cuando se añade una nueva tarea

Añadiendo aviso de lista vacía y loading

Funcionalidad para marcar tareas completada y desmarcarlas

Funcionalidad para eliminar tareas

Desplegar un proyecto de React terminado a producción2 clases

Creando cuenta en Netlify

Desplegando proyecto de React en Netlify

React JS Hooks: De Cero a Experto Creado Aplicaciones Reales

Contenido del curso

Comentarios de los estudiantes

Valoraciones

Este curso incluye:

Instructor del curso