Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreUniversidad React ★: De Cero a Master + 5 Cursos de Regalo
Rating: 4.5 out of 54.5(1,918 ratings)
10,500 students
What you'll learn
- Conocimiento profundo de React Core con el curso mas completo y actualizado de React ✪ en español
- + 5 Cursos de Regalo (Redux, React Router, Animaciones, Styled Components, Test con Jest y Enzyme)
- Todo sobre React Hooks
- Todo sobre React API Context
- Animaciones y transiciones aplicadas a componentes
- Ciclo de vida de Componentes estatales y hooks
- Aprende las Mejores arquitecturas de desarrollo escalable
- Composición de Componentes
- Buena practicas de desarrollo con React
- Componentes Responsivos y con styled components
- Gestión del estado con Redux y React API Context
- Gestión de estilos Avanzados con styled-components
- Crear sistemas de enrutado con React Router
Explore related topics
Course content
20 sections • 208 lectures • 20h 2m total length
- Que es React.js2:24
Comenzamos por definir exactamente que es React y de que manera nos ayuda a construir componentes que formen aplicaciones web, universales o nativas.
- Metodología y fundamentos de Universidad React9:58
Damos una introducción sobre la metodología LEAP que estamos aplicando en este curso.
- Introducción a Herramientas de Desarrollo2:28
Vemos una introducción a lo que vamos a ver en esta sección sobre las herramientas de desarrollo entorno a React.
- Entornos de desarrollo para React.js1:28
En esta clase aprendemos las diferentes opciones que tenemos para poder tener un entorno de desarrollo para React.js
Entorno personalizado
Entorno vía boilerplates o herramientas CLI
- Explicacion express de NPM, Webpack y Babel2:04
Aprendemos de forma breve las principales herramientas modernas para desarrollo web como NPM, Webpack y Babel.
- Fundamentos de Chrome DevTools8:21
Antes de comenzar con React aprendemos unas de las herramientas de desarrollo de Chrome DevTools que utilizaremos a lo largo del curso
- Introducción a crear aplicación con React2:08
Damos una introduccion a lo aprenderemos en esta seccion, usando create-react-app
- Crear una aplicacion con create-react-app2:34
En esta lección aprendemos a generar una aplicacion usando la herramienta CLI (Herramienta de linea de comandos) llamada create-react-app que es desarrollada por el equipo que esta atrás de react.
Guias de instalacion de Node & NPM:
Windows
https://luismasdev.com/instalar-nodejs-en-windows/
Ubuntu
https://www.hostinger.mx/tutoriales/instalar-node-js-ubuntu/
Mac
https://medium.com/javascript-comunidad/c%C3%B3mo-instalar-node-js-y-npm-en-mac-9d80f26fb88d
- Librerias React, React-dom y prop-types1:27
En esta lección aprendemos las diferentes librerías o paquetes que conforman el stack de React y aprendemos breve mente para que es cada una.
- Estructura de proyecto generado con create-react-app4:37
En esta lección damos un repaso breve a la estructura de archivos que nos genera create-react-app al crear un nuevo proyecto
- Introducción a React Core6:30
Introduccion a esta seccion de React Core.
- Introduccion a JSX (Javascript + HTML)1:32
En esta lección aprendemos un poco la sintaxis llamada JSX, que es algo parecido a combinar lenguaje Javascript con HTML, esto nos ayuda a construir componentes o interfaces de una forma declarativa.
Los navegadores no entienden esta sintaxis por lo que son necesarias herramientas como Babel que ayudan a transformar este código JSX en uno que pueda entender el navegador.
- Crear un Elemento y montarlo en el DOM2:33
En esta lección aprendemos a crear un elemento con React.js y renderizarlo o montarlo dentro del DOM de nuestra pagina.
Entender los elementos con React.js este es el primer paso ya que los componentes están formados por uno o mas elementos.
- Expresiones en JSX1:17
En esta lección aprendemos como usar las expresiones en JSX, que nos ayudaran a inyectar valores o realizar operaciones basadas en expresiones de Javascript.
Nota:
En la función 'getInfo' Uso un template string que es una característica de EcmaScript6, no te preocupes por la sintaxis de momento puedes pensar que es un string donde podemos inyectar valores dentro de esta expresion `${}`.
- Crear componente funcional con React2:45
En esta lección aprendemos a crear nuestro primer componente con React.js y como montarlo en el DOM. Estos componentes son llamados funcionales y se crean usando una función de allí su nombre.
- Que son las props en un componente de React2:38
En esta lección aprendemos que son las props en React. En resumen son los datos por donde alimentamos a nuestros componentes.
Estos datos pueden ser usados dentro del marcado como vemos en este ejemplo pero también se podrían usar para cambiar el comportamiento del componente.
- Aclaración de Estructura de Curso7:31
Aclaro de que forma esta estructurada el curso siguiendo un orden logico comenzando con componentes basados en clases y despues componentes funcionales.
- Crear un componente con Estado usando Clases5:04
En esta lección aprendemos a crear un componente con estado dentro de React usando clases, un componente con estado hace referencia a que se puede actualizar a si mismo, de esta forma puede ser dinámico o interactivo.
Aunque ya es posible crear componentes con estado usando funciones con una nueva característica de React llamada hooks, eso lo veremos en otra lección.
- Usando métodos de clase para manejar Eventos4:19
En esta lección aprendemos a como usar métodos de clase para manejar los eventos dentro de un componente de React, cuando creamos un componente usando clases es una buena idea manejar los manejadores de eventos de forma separada, es decir con métodos en lugar de funciones de flecha.
- InIcializadores de propiedad (property Initializers)1:21
En esta lección aprendemos a usar los inicializadores de propiedad que nos ayudaran a mantener mas legible y mantenible nuestros componentes basados en clases y evitando el problema de this.
- Ejemplo de refactorizacion de componentes1:50
En esta lección vemos un ejemplo de como refactorizar una aplicación de react y como separar sus componentes en diferentes archivos para un mejor mantenimiento y escalabilidad.
- Aprendiendo JSX en mas profundidad4:02
En esta lección aprendemos mas profundamente esa sintaxis JSX para escribir el marcado (HTML) de nuestros componentes.
- Aplicar estilos CSS en Linea a componente de React4:04
En esta lección aprendemos a como podemos aplicar estilos CSS a nuestro componente de React ya que es diferente a como se lo aplicaríamos naturalmente en HTML.
- Aplicar estilos con clases CSS en componente de React7:34
En esta lección aprendemos como podemos aplicar estilos basados en clases CSS en un componente de React.
- Sistema de Modulos CSS5:11
En esta lección aprendemos como crear nombres de clases claros, breves y generales pero que no entren en conflicto con nombres de clases css de otros componentes, utilizando un sistema de modulos CSS
- Modularizacion de componentes en folders con ayuda de ES63:48
En esta leccion aprendemos a modularizar nuestro componentes de react cuando estos tienen diferentes archivos, estos podrian ser hojas de estilos CSS, imagenes etc.
- Entendiendo el Object.assign (ES6)2:46
En esta lección aprendemos los fundamentos del método Object.assign() Con el cual podemos clonar las propiedades de un objeto en otro objeto objetivo.
Sintaxis:
Object.assing({}, {}, {})
- Entendiendo el operador Spread (ES6)2:13
Aprendemos los fundamentos del nuevo operados spread que se declara con tres puntos seguidos (...) que podemos usarlo para combinar las propiedades de un objeto a otro.
- Manejando operador Spread con Arrays1:18
Aprendemos como aplicar el operador spread (...) aplicado a Arrays o listas.
- Mutando el estado de componente con una funcion5:16
En esta lección aprendemos a como actualizar el estado pasando al metodo setState una función, también aprendemos como podemos solucionar la perdida de datos o la mezcla de información del estado previo y el nuevo usando el operador spread
- Usando operador spread para pasar props3:29
En esta leccion aprendemos una forma eficiente y legible para pasar props usando el operador spread.
Nota: Recuerda que el operador spread (representado por tres puntos seguidos ...) Es parte de EcmaScript 6
- Manejando Eventos de Mouse3:43
En esta lección aprendemos mas de los eventos que tenemos disponible para acciones del mouse
- Ejemplo de Eventos de Input2:29
En esta lección aprendemos algunos de los escuchadores de eventos que tenemos disponibles gracias a React
- Diferencia de Evento nativo DOM y Evento Sintético de React2:56
En esta leccion aprendemos algunas de las diferiencias que existen entre agregar un escuchador de evento de forma nativa con html y como lo hacemos con React.js
- Conservar Eventos con React3:00
En esta lección aprendemos a conservar datos de eventos en operaciones asincronas.
- Crear Eventos personalizados con React4:18
En esta lección aprendemos a crear un escuchador de evento personalizado con React, estos nos ayudara a ejecutar acciones o enviar datos desde un componente Hijo a uno Padre.
- Renderizados condicionales con React2:20
En esta leccion aprendemos como renderizar diferente contenido utilizando para ello la logica y el flujo de control que nos proporcionan los condicionales regulares, asi como los condicionales ternarios y el operador logico && (and).
- Inyectando HTML en marcado de componente con React1:18
En esta lección aprendemos a inyectar marcado HTML proveniente de un string, ya que por seguridad React escapa todo el contenido HTML a Texto, sin embargo nos ofrece una forma de realizarlo, pero siempre debemos ser cuidadosos y responsables al utilizar esta opcion.
- Introducción a la prop especial children2:37
En esta leccion introducimos una prop especial llamada children que nos ayudara a inyectar elementos u componentes dentro de otros.
- Destructuracion avanzada aplicada a componentes5:51
En esta leccion damos un repaso a lo que es una destructuracion (caracteristica de ES6) y en definitiva como podemos aplicarla a nuestros componentes para mantener nuestro código mucho mas compacto y legible.
- Elementos sin etiquetas con fragments2:30
En esta leccion aprendemos a usar el componente Fragments que nos ayudara a envolver componentes o elementos dentro de etiquetas que no se renderizaran.
- Entendiendo los portals de React4:29
En esta leccion aprendemos como funcionan los portales que son componentes que podemos montar fuera del nodo raiz de nuestra aplicacion.
- Controlar los datos de entrada con prop-types4:03
En esta leccion aprendemos a usar prop-types que nos permite tener mas control de las props que recibimos de entrada en nuestros componentes
- Datos de entrada por defecto con defaultProps2:14
En esta lección aprendemos a usar defaultProps que son las props que tendrá nuestro objeto por defecto, aunque también aprendemos algunos tips de en que escenarios nos pueden ser utiles.
- Introducción a iteraciones con React2:25
Damos una introduccion a lo veremos en esta seccion sobre iteraciones.
- Iterando listas con React2:59
En esta lección aprendemos a realizar repeticiones o iteraciones de componentes basados en listas o arrays.
- Iterando listas de Objetos2:46
En esta lección profundizamos mas en la iteracion, en este caso lista de objetos, también creamos un ejemplo con iteraciones anidadas.
- Iterando propiedades de Objetos2:04
En esta lección aprendemos a como iterar pero ahora en las propiedades de un objeto ya que no siempre vamos a tener el control de los datos que nos llegan por ejemplo de una base de datos, siempre es buena idea entender como iterar diferentes tipos de datos.
- Prop Key al iterar listas con React2:46
En esta lección aprendemos la prop especial key y como se usa dentro de React al momento de generar iteraciones.
- Iteracion de Componentes7:40
En esta leccion aprendemos con un ejemplo practico la forma en la cual podemos aplicar composición al momento de hacer una iteracion.
- Pasar datos al iterar listas con React2:46
En esta lección aprendemos a pasar datos desde una iteracion hecha con React.js
- Introducción a modulo Refs1:53
- Que son las refs en React2:45
En esta lecciones aprendemos a usar las refs de react que nos permiten acceder al elemento o componente en el DOM real, esto es util en muchas operaciones.
- Integrar librerías de terceros usando las refs de React2:59
Aprendemos a integrar chart.js que es una libreria de graficos, usando para esto las refs.
- Reenvió de la prop especial ref con forwardref2:09
En esta lección aprendemos a como reenviar la ref desde un componente funcional hacia el padre usando el método React.forwardRef().
- Manejando ( Inputs No controlados ) con Refs2:59
En esta lección aprendemos a usar los inputs controlados y obtener los datos que se ingresan en ellos de formas diferentes.
- Manejando ( Inputs No controlados ) con formularios3:42
En esta lección aprendemos a usar inputs controlados pero extrayendo la información a través de un formulario.
- Ventajas y desventajas de tener inputs no controlados1:17
En esta lección aprenderemos las ventajas y desventajas que tenemos al usar un input no controlado
- Manejando Inputs controlados con React4:02
En esta lección aprendemos a crear un input controlado que nos puede ayudar a validar la información que se ingresa en ellos inmediatamente cuando estos datos cambian.
- Propagacion de datos con inputs controlados3:23
En esta lección aprendemos una forma para propagar los datos de inputs que sean controlados y acumular estos datos dentro de un componente padre.
- Usando el atributo "for" en formularios1:25
En esta lección aprendemos a usar el atributo for para poner en foco los inputs dentro de React.
- Ejemplo de formulario con opciones de Selección2:31
Aprendemos como usar la etiqueta select para crear listas de opciones dentro de nuestros formularios en React.
- Ejemplo de formulario con opciones de Seleccion Múltiple4:25
Aprendemos como crear una lista de selección múltiple dentro de React.
- Ejemplo de Input Checkbox2:13
En esta lección aprendemos a usar el input tipo checkbox para manejar estados de formulario con propiedades booleanas (true - false)
- Usando las Chrome Dev Tools10:03
Aprenderás a instalar y los fundamentos de las herramientas de desarrollo de React para Chrome, conocidas como React DevTools, las cuales te permitirán analizar y depurar tus aplicaciones y componentes desarrollados con React.
- Manejo y limite de errores dentro de componentes4:27
Aprenderás un método de ciclo de vida especial para el manejo y control de errores dentro del árbol de componentes creados con React.
- Haciendo una llamada a un API Rest con React7:23
En esta lección aprendemos a como hacer una solicitud HTTP desde un componente de React.
- Ejemplo buscador de peliculas6:23
NOTA: En el archivo descargable aparece mi propia api key si te da error deberas de crear la tuya como te enseñe en la lección.
En esta lección aprendemos a usar las peticiones HTTP, creando una pequeña aplicación para buscar información de películas.
- Solución a Tarea (buscador de películas)3:12
NOTA: En el archivo descargable aparece mi propia api key si te da error deberás de crear la tuya como te enseñe en la lección.
Aquí tienes la solución para completar algunas características en nuestra micro aplicación de prueba.
- integrar libreria Axios para hacer solicitudes HTTP4:16
NOTA: En el archivo descargable aparece mi propia api key si te da error deberás de crear la tuya como te enseñe en la lección.
Aprendemos como usar la librería Axios para hacer solicitudes HTTP desde nuestros componentes, utilizando la aplicación de prueba que habíamos creado.
- Usando Async Await para solicitudes HTTP3:03
NOTA: En el archivo descargable aparece mi propia api key si te da error deberás de crear la tuya como te enseñe en la lección.
En esta lección aprendemos con un ejemplo practico como usar la nueva sintaxis Async Await de ES2017.
- Introducción a métodos de ciclo de vida6:04
Una breve introducción a los métodos de ciclo de vida
- El metodo Constructor8:15
En esta lección aprendemos el primer método que se dispara cuando se crea el componente.
- El método render4:49
En esta lección aprendemos mas en profundidad el método render que nos puede ayudar a generar lógica para nuestros marcados.
- El metodo componentDidMount5:51
Aprendemos el método componentDidMount que se ejecuta una vez que el componente es montado por completo, en este método podemos agregar listeners, en este punto ya se ha renderizado por primera vez por lo que tenemos acceso al marcado dentro del DOM.
- El metodo componentDidUpdate10:13
En esta lección aprendemos a usar el método componentDidUpdate con un ejemplo practico.
- El método getSnapshotBeforeUpdate16:47
Aprendemos el método getSnapshotBeforeUpdate() que nos ayuda a obtener captura de algún posible cambio de valor antes de que el componente se actualice en el DOM real.
- El metodo getDeliveryStateFromProps7:19
Aprendemos el método de ciclo de vida getDerivedStateFromProps() para actualizar el estado interno de un componente con información que venga desde las props.
- El método shouldComponentUpdate12:16
Aprendemos el método de ciclo de vida shouldComponentUpdate() El cual nos ayuda a mejorar el rendimiento de nuestras aplicaciones ya que podemos usarlo como un interruptor para hacer que se ejecute el método render o no.
- Usar PureComponent para aplicar shouldComponentUpdate automáticamente2:56
Aprendemos a usar la clase PureComponent que ya cuenta con una funcionalidad implícita de shouldComponentUpdate().
- El método componentWillUnmount4:55
Aprendemos a usar el método componentWillUnmount() para hacer las limpiezas necesarias antes de desmontar nuestros componentes.
- Métodos de Ciclo de Vida Obsoletos2:12
En esta lección aprendemos algunos de los métodos de ciclo de vida que se han declarado como obsoletos dentro de React.
componentWillMount
componentWillUpdate
componentWillReceiveProps
Requirements
- Conocimiento basico de HTML, CSS y Javascript
- No es necesario conocimiento previo de React
Description
El curso mas completo y actualizado de React ✪ Aprenderás desde nivel cero hasta conocer y dominar en nucleo de React en profundidad con todas las características que no se tocan en cursos convencionales, al finalizar el curso podrás crear componentes de calidad de producción ademas se incluyen 5 cursos de Regalo relacionados con el stack de React (Animaciones y transiciones, Redux, React Router, Styled Components y Testing con Jest y Enzyme):
" Nuestro compromiso es mantener el curso mas completo y actualizado de React en Español"
En este curso aplicamos nuestra propia metodología de enseñanza LEAP, que nos permite crear lecciones efectivas, concretas y modulares.
En este curso dominaras
El API de React
Todo sobre React API Context
Todo sobre Hooks y componentes Funcionales
Crear componentes de alta calidad
Desarrollar aplicaciones basados en Componentes
Aprender a crear composición de componentes y comunicarlos usando diferentes arquitecturas
Aprenderás todo sobre gestionar formularios con React
Inputs controlados y no controlados
Realizar solicitudes HTTP y usar la información en componentes de React
Animaciones y transiciones ✦Curso de Regalo
Gestionar estilos CSS avanzados con styled components ✦ Curso Regalo
Agregar un sistema de enrutado a tus aplicaciones con React Router ✦ Curso Regalo
Gestionar el estado usando Redux ✦ Curso Regalo
Aprenderás a realizar test unitarios usando Jest y Enzyme ✦ Curso Regalo
Who this course is for:
- Desarrolladores que quieran mejorar su carrera usando una de las librerías mas demandadas de la actualidad
- Desarrolladores que quieran llegar a dominar completamente React