React.JS, Guía desde 0 (Actualizado 2022)

Name: React.JS, Guía desde 0 (Actualizado 2022)
Rating: 4.6 (2216 reviews)

Aprende a crear sitios web de forma rápida y sencilla con React Js

Created byJuan Jose Ortiz del Toro

Last updated 5/2022

Spanish

Spanish [Auto],

What you'll learn

Construir sitios web utilizando la libreria React JS
Consumir REST API (Fetch y Axios)
Context API
Pensar en componentes
Escribir codigo óptimo de React Js
Organización de las carpetas de tu proyecto
Redux
Redux Toolkit
Tailwind Css

Course content

7 sections • 118 lectures • 14h 40m total length

¿Qué es React Js?5:48
Historia de React Js4:26
Virtual DOM6:29
Pensando en componentes9:54
¿Qué es JSX?13:25
¿Qué es la transpilación?4:50
Renderizando por primera vez7:05
¿Que son los Componentes?, Parte 19:17
¿Qué son los Componentes?, Parte 27:43
Props9:44
States10:23
Analizando this.state6:04
Declarando métodos en tus componentes8:02
Eventos10:01
Analizando setState8:30
Creando primer proyecto con Create React App9:46
Analizando la estructura de un proyecto con React Js6:35
Ejemplo 1: Formulario16:01
Analizando useState5:00
Ciclo de vida de un componente16:12
useEffect: Parte 017:53
useEffect: Parte 0211:54
Renderizado condicional5:46
Listas y Keys11:26

¿Qué es Context.API?7:39
Explicación de cómo funciona Context.API para el manejo de la información en toda tu aplicación. No es un state management tal cual, sin embargo, se puede usar como uno.
Configurando Context y Provider12:15
Explicación de como configurar el provider y un contexto a tu aplicación
Creando llamadas a la API en el contexto15:21
Mostrando resultados en componentes7:04
Implementando <Link> y useParams de React Router9:03
Uso de Link para redirigir a los usuarios. Toma en cuenta que esto es una abstracción de un anchor tag de HTML. Ademas vamos a usar los parametros que enviaremos de una ruta a otra
Solicitando el detalle de un Pokemon9:30
Agregando mensaje de cargando6:48
Implementando ScrollToTop de React Router10:19
Mostrando habilidades de un pokemon9:32
Reusando componentes para mostrar Cargando y Error18:38
Para finalizar la primera implementación de este proyecto vamos a agregar un componente genérico que será usado a lo largo de toda tu aplicación. Además otro componente para mostrar errores. El objetivo es que tomemos la costumbre de empezar a crear nuestros propios componentes genéricos

Introduccion a Zustand5:02
Instalando Zustand2:36
Explicando el método create() Parte 017:10
En esta clase vamos a aprender como es que funciona el método más importante de Zustand para poder crear una store y manejar la información de los componentes
Explicando el método create() Parte 028:06
Creando store de pokemons7:01
Métodos async y llamadas a la api7:58
Conectando componentes a store10:50
Usando shallow en nuestro selector de la store6:59
getState()7:02
En esta clase vamos a aprender como utilizar el estado de zustand de manera no reactiva. Gracias a este metodo, podemos actualizar la store sin la necesidad de estar dentro de un component de react.js

Aviso sobre API0:17
¿Qué es Redux?9:18
¿Qué son las actions?4:53
¿Qué son los reducers?6:34
¿Qué es la store?4:14
Introducción e instalación de Redux Toolkit8:09
Explicación del proyecto a construir5:45
Instalación y creación de rutas en el proyecto8:05
Finalizando Router4:39
Introducción a Tailwind CSS6:27
Informacion importante de Tailwind0:13
Configurando Tailwind en nuestro proyecto9:43
Construyendo Home sin estilizar8:24
Estilizando Home usando Tailwind CSS7:13
Implementando y estilizando fuentes5:11
Aplicando estilos a input9:34
Mezclando colores de tailwind con colores personalizados4:09
Implementando pseudoselectores5:16
Estilizando botones6:28
Extendiendo variantes y controlando el input de search5:52
Redirigiendo a pantalla de resultados con useNavigate6:53
Tomando parámetros con useParams y agregando esqueleto de Resultados7:17
Analizando la API de películas3:39
¿Qué es RTK Query?6:20
Implementando createApi y estructura de APIs8:04
Creando endpoint para buscar películas3:27
Exportando endpoint y configurandolo en el reducer de la store8:44
Como consumir un hook de RTK Query6:42
Probando los valores de el response y catching3:38
Argumentos opcionales del endpoint de RTK Query8:55
Como manejaremos la información con Redux Toolkit y RTK Query.mp42:15
Creando componente de Loading Parte 18:32
Creando componente de Loading Parte 22:46
Creando componente de ListItem7:09
Estilizando componente de ListItem7:46
Dividiendo en componentes2:51
Usando banderas de RTK para mostrar el contenido correcto10:03
Agregando Evento onClick a ListItem y obteniendo id de la película10:22
Conociendo la estructura de actions en Redux Toolkit4:26
Creando Actions para obtener el rating3:51
Creando función para el manejo asíncrono y explicación del uso de redux thunk6:06
Disparando acciones con useDispatch7:07
Creando llamada a la API desde el thunk9:23
Creando primer reducer de Movies7:36
Modificando la información del reducer y creando el initial state6:34
Creando thunk y actions para el detalle de una película6:29
Consumiendo la información del reducer con useSelector4:26
Actualizando reducers con el movie detail8:37
Creando llamadas a la API con Fetch7:36
Colocando la imagen y construyendo el detalle4:43
Agregando información a detalle de película (Parte 1)8:25
Agregando genero al detalle de película5:50
Agregando el cast de la película6:35
Dividiendo contenedor izquierdo en componentes5:28
Dividiendo contenedor derecho en componentes9:54
Agregando loader y error al detalle de la pelicula7:00
Fixes en nuestro proyecto2:52
¿Qué son los slices?6:52
Escribiendo actions dentro del slice8:04
Consumiendo la información desde el reducer del slice8:25
Conclusion1:21

Requirements

HTML
CSS
Javascript
Uso de VS Code
Programacion Básica

Description

En este curso vamos a aprender a utilizar de forma sencilla y rápida la libreria para el desarrollo de frontend creada por Facebook llamada React JS. utilizada hoy en día en el desarrollo de sitios de grandes empresas tales como Dropbox, ebay, Instagram, PayPal y Netflix.

Completamente desde 0, iniciando con las bases esenciales para dominar la creacion y renderizado de componentes. Importante también los eventos de cada uno de los elementos, crear formularios, controlar estados, propiedades, referencias, comunicación entre componentes, ruteo, hasta construir tus propios proyectos utilizando las mejores prácticas en código para tener implementaciones óptima y escalables. En la primera parte del curso (Actualizado en el 2021) aprenderemos a usar Context.API para el manejo global de la información en tus componentes, que también puede fungir como un state management. En el ejemplo vamos a llamar a una REST API utilizando Fetch.

El objetivo principal es que aprendas las bases sólidas de la librería y aprendas a crear una estructura óptima para llevar a cabo cualquier tipo de proyecto de React Js hacia el éxito. He puesto todo mi esfuerzo para poder transmitirte mi experiencia durante más de 6 años usando esta librería.

Notas extra: El curso se actualiza 3 veces al año

Who this course is for:

Desarrolladores de software
Programadores Web

React.JS, Guía desde 0 (Actualizado 2022)

What you'll learn

Explore related topics

Course content

Iniciando en React Js (2021)24 lectures • 3hr 32min

Ejemplo 1: Buscador local (2021)8 lectures • 1hr 8min

Introducción a React Router (2021)3 lectures • 20min

Comunicación y llamadas a la API (2021)3 lectures • 27min

Aprendiendo a usar Context.API (2021)10 lectures • 1hr 46min

Aprendiendo a usar Zustand (2021)9 lectures • 1hr 3min

Redux (Toolkit y RTK Query) - 202261 lectures • 6hr 23min

Requirements

Description

Who this course is for: