Name: REACT HOOKS: Como crear un evaluador de restaurantes de cero
Rating: 4.8 (15 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byDiego Parra

Last updated 8/2022

Spanish

What you'll learn

Podrás Configurar tu ambiente de desarrollo
Aprenderás React de forma práctica
Aprenderás que es un hook en React
Podrás usar los hooks más importantes para desarrollar en React
Podrás integrarte a cualquier API REST
Aprenderás a integrarte con los servicios de autenticación de google
Podrás integrar componentes de terceros muy facilmente
Serás capaz de integrarte con frameworks de controles como Material UI
Aprenderás a usar styled components
Podrás personalizar los temas de frameworks como Material UI
Podrás estructurar una aplicación de manera profesional
Aprenderás a hacer formularios con validaciones

Course content

10 sections • 60 lectures • 4h 56m total length

Introducción1:01
¿Que aplicación vamos a construir?6:04
Recursos importantes para el curso0:18

Que vamos a aprender en esta sección?0:45
Instalar NPM2:53
LINKS DE UTILIDAD

https://www.npmjs.com/
https://nodejs.org/es/
https://conemu.github.io/
Instalar VSCODE + plugins2:17
LINKS UTILES
https://code.visualstudio.com/

PLUGINS VSCODE
https://marketplace.visualstudio.com/items?itemName=jawandarajbir.react-vscode-extension-pack
Crear tu primera aplicacion web React4:16
INSTRUCCIONES CMD

npx create-react-app critic
cd critic
npm start
Como hacer debug?3:00
Conceptos importantes de ES6, spread operator y arrow functions7:11
LINKS UTILES

https://www.w3schools.com/js/js_versions.asp
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Recapitulando0:40

Que vamos a aprender en esta seccion?0:47
Primer renderizado HTML5:15
NOTA: Por favor descargar los recursos que se encuentran en: Sección 1 -> Recursos importantes para el curso
Que es JSX?3:58
Creando nuestro primer componente React5:31
{
    "compilerOptions": {
      "baseUrl": "./src",
      "checkJs": true,
      "jsx": "react"
    }
}
Adicionando estilos con styled components10:32
LINKS DE UTILIDAD
https://www.npmjs.com/package/styled-components
PLUGIN
https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components
Adicionando atributos y eventos basicos5:39
Como usar la deconstrucción:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Renderizado condicional y loops8:39
Recapitulando1:15

Que vamos a aprender en esta seccion?1:53
Que es un hook?3:56
LINKS UTILES

https://es.reactjs.org/docs/hooks-intro.html
https://usehooks.com/
Usando el hook "useState"4:21
Simulando el login3:07
Que es un servicio REST?3:06
LINKS DE UTILIDAD
https://openwebinars.net/blog/que-es-rest-conoce-su-potencia/
Configurar nuestros servicios REST3:32
NOTA: Por favor descargar los recursos que se encuentran en: Sección 1 -> Recursos importantes para el curso
IMPORTANTE: Katacoda fue dado de baja, por favor usar Killercoda en su lugar (VER INSTRUCCIONES EN EL PDF ADJUNTO)
LINKS DE UTILIDAD
https://insomnia.rest/download
Adicionando efectos9:07
Recapitulando0:55
LINKS DE UTILIDAD

https://www.docker.com/
https://docs.docker.com/docker-for-windows/install/
https://hub.docker.com/repository/docker/depl20982/criticserver

Que vamos a aprender en esta seccion?0:43
Que es material UI3:04
LINKS UTILES
https://material-ui.com/
Adicionando controles basicos8:28
NOTA IMPORTANTE:
Instalar estos componentes:

npm install @material-ui/core
npm install @material-ui/icons

e importar...
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

LINKS UTILES
https://material-ui.com/getting-started/installation/
https://material-ui.com/components/app-bar/
https://material-ui.com/components/material-icons/
https://material-ui.com/components/buttons/
https://material-ui.com/components/typography/
Modificando nuestro tema base4:47
LINKS UTILES
https://material-ui.com/customization/color/
https://material-ui.com/customization/theming/

PALETA
export const CRITIC_PALETTE = {
    primary: '#003433',
    secondary: '#ff5b33',
    light: '#c6d9b4'
}
Recapitulando0:44

Que vamos a aprender en esta seccion?0:54
Configurando cuenta de google3:50
LINKS UTILES

https://console.cloud.google.com/apis/dashboard?hl=ES
Adicionando el login de google8:13
LINKS UTILES

https://www.npmjs.com/package/react-google-login
Componente react router3:24
LINKS UTILES
https://reactrouter.com/
Adicionando rutas nuevas12:36
LINKS UTILES
https://reactrouter.com/web/guides/quick-start
https://material-ui.com/components/grid/
Conectando todo9:14
NOTA: Por favor descargar los recursos que se encuentran en: Sección 1 -> Recursos importantes para el curso
Recapitulando1:04

Que vamos a aprender en esta seccion?0:41
Paradigma redux7:19
LINKS UTILES
https://es.reactjs.org/docs/hooks-reference.html
Creando el store con useContext3:36
LINKS UTILES
https://es.reactjs.org/docs/hooks-reference.html
Adicionando acciones, reducers y dispatchers5:47
LINKS UTILES
https://es.reactjs.org/docs/hooks-reference.html
Usando el store10:00
LINKS UTILES

Instalar las siguientes dos extensiones de React para Chrome

https://chrome.google.com/webstore/detail/react-context-devtool/oddhnidmicpefilikhgeagedibnefkcf?hl=es
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=es
Recapitulando1:43

Que vamos a aprender en esta seccion?0:52
Creando nuestro primer custom hook7:00
LINKS UTILES
https://www.npmjs.com/package/react-google-login
Formularios en react usando react-hook-form4:10
LINKS UTILES
https://material-ui.com/components/text-fields/
https://material-ui.com/components/pickers/
https://material-ui-pickers.dev/
https://material-ui-pickers.dev/getting-started/installation
https://www.kindacode.com/article/top-react-form-validation-libraries/
https://react-hook-form.com/
Creando nuestro formulario11:34
LINKS UTILES
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://material-ui-pickers.dev/getting-started/installation
https://material-ui.com/api/text-field/
Adicionando validaciones10:07
Haciendo refactor7:38
Recapitulando0:39

Felicitaciones2:52
Proyecto parte 1 - Journey "owner"8:26
LINKS UTILES
https://github.com/diegoparraleal/udemyreact
https://github.com/diegoparraleal/udemyreact/tree/udemy-course-project

COMMIT PARTE 1: https://github.com/diegoparraleal/udemyreact/commit/4981c84de12e596a1ed0e4800259a45cb1a80e0b
Proyecto parte 2 - Journey "admin"6:17
LINKS UTILES
https://github.com/diegoparraleal/udemyreact
https://github.com/diegoparraleal/udemyreact/tree/udemy-course-project
COMMIT PARTE 2: https://github.com/diegoparraleal/udemyreact/commit/c4d75f77cc9c05820742ab62cd6f6dce03833b4b

Requirements

Conocimientos básicos de programación
Conocimientos básicos de HTML
Conocimientos básicos de CSS

Description

En este curso vamos a aprender desde cero, es decir, sin ni siquiera tener un IDE instalado, hasta poder lograr crear toda una página que permita adicionar reviews a restaurantes, responder a los reviews y administrar toda la información.

Toda la construcción de la aplicación se hace mientras se aprende de forma práctica todos los conceptos esenciales de React como el JSX, renderizado condicional y ciclos; algunos otros conceptos importantes como librerías de UI, estilos, routing y hooks básicos.

También vamos a aprender algunos conceptos un poco más avanzados como el paradigma redux, los hooks de reducer y context, validaciones de UI, login de google e incluso vamos a hacer nuestro primer hook personalizado.

Al final del curso, hay un proyecto dividido en dos partes que nos va a ayudar a cementar todo el conocimiento adquirido para poder desempeñarnos como frontends y trabajar con React.

Estoy seguro que tomando este curso, van a poder ingresar al mundo del desarrollo frontend, y adicionalmente, van a tener todas las herramientas necesarias para poder tomar cualquier trabajo de junior frontend developer si no tienen experiencia previa.

Este curso también es muy útil para las personas que vienen de backend y desean volverse fullstack developers, ya que esta diseñado para aprender de cero con simplemente conocimientos básicos de HTML, CSS y programación básica.

Espero les guste!

Who this course is for:

Programadores de back-end interesados en aprender front-end
Desarrolladores front-end con conocimientos en otros frameworks como jQuery, Vue o Angular
Programadores con conocimientos de React que deseen entender más como funcionan los React Hooks

What you'll learn

Explore related topics

Course content

Introducción3 lectures • 7min

Configura tu ambiente de desarrollo y crear tu primera aplicación React7 lectures • 21min

Primeros pasos en React8 lectures • 42min

Hooks basicos: useState, useEffect8 lectures • 30min

Integrar con material UI5 lectures • 18min

Integrar con Google Login y adicionar routing7 lectures • 39min

Hooks avanzados: useContext, useReducer6 lectures • 29min

Acelerando el pedal con react hooks6 lectures • 51min

Formularios y validaciones y un custom hook7 lectures • 42min

Finalización del curso y proyecto3 lectures • 18min

Requirements

Description

Who this course is for: