Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js Typescript HTML5 PHP
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA CompTIA Security+ Microsoft AZ-900
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Data Analysis Data Warehouse Blockchain Business Intelligence
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin SwiftUI Mobile App Development
Graphic Design Photoshop Adobe Illustrator Drawing Canva Digital Painting InDesign Design Theory Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Sound Therapy Emotional Intelligence Coaching
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Online Business Startup Business Plan Blogging Amazon Kindle Direct Publishing (KDP)
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Copywriting Google Analytics Email Marketing Startup Advertising Strategy

DevelopmentWeb DevelopmentReact

React PRO: Lleva tus bases al siguiente nivel

Storybook, Github Actions, publicar NPM, TypeScript, patrones de componentes, PWA, Formik, formularios dinámicos y más
Rating: 4.9 out of 54.9 (1,296 ratings)
10,275 students
Created by Fernando Herrera
Last updated 4/2022
Spanish
Spanish [Auto]

What you'll learn

  • Progresar como desarrolladores en React
  • TypeScript
  • PWAs manuales y con Workbox
  • Storybook
  • TSDX, Storybook y despliegues manuales a NPM
  • Github Actions
  • Versionamiento Semántico
  • Patrones de creación de componentes
  • Formik
  • Formularios dinámicos
  • Lazyload
  • Módulos
  • Re-utilización de componentes

Requirements

  • Tener las bases de React con Hooks
  • Saber TypeScript es útil pero no indispensable (introducción incluída)
  • Poder realizar instalaciones en el equipo como administrador

Description

React Pro: Lleva tus bases al siguiente nivel

Bienvenidos a mi curso de React Pro, el objetivo principal es simple, mejorar tus habilidades existentes de React. No es un curso para personas que quieran empezar con esta librería, ya que el curso está dirigido a personas que ya tengan conocimientos de React con Hooks.


Breve Descripción del curso

El curso empieza con una breve introducción de React con Typescript, pero dejo videos adicionales en YouTube para mayor referencia (dichos videos creados por mi también y son 5 horas adicionales no incluidas aquí), luego pasamos a la creación de un pequeño proyecto que nos servirá para practicar diferentes patrones de creación de componentes, explicaré varios muy populares y poco a poco iremos creando un juego de componentes robusto que desplegaremos a NPM mediante TSDX. En el camino pasamos por separación de módulos y lazyload, adicionalmente doy mi punto personalizado preferido para trabajar con módulos.

Luego explicamos Formik, validaciones, Yup y formularios dinámicos, creando componentes re-utilizables simples que nos ayudarán a no tener que escribir lo mismo una y otra vez.

Posteriormente pasamos a Storybook, explicamos qué es, para que nos puede servir, creamos un par de configuraciones y luego publicamos nuestro Storybook en varios lugares, eventualmente crearemos los archivos de configuración de TypeScript necesarios, modificaciones en el package.json y configuraciones con semantic release para realizar todo un proceso sistematizado de creación y actualización de componentes utilizando GitHub Actions como intermediario.

Después nos movemos a levantar una aplicación realizada en mi curso de React de cero a experto que tiene un backend personalizado con JWTs, para transformar nuestra aplicación de React en una PWA, explicando configuraciones automáticas, manuales y personalizaciones que nos permitan trabajar sin conexión a internet nuestra aplicación de React, también instalarla como si fuera una aplicación de Windows, Linux o Mac.


Temas puntuales del curso:

El curso esta cargado de mucha información para mejorar nuestras habilidades de React, puntualmente estos son algunos temas de interés que tocamos en el curso:

  1. React con TypeScript en un 95% del curso

  2. Lazyload y Suspense

  3. Rutas Hijas

  4. Modularización

  5. Git y GitHub para el manejo de ramas, versiones y acciones

  6. Patrones de creación de componentes

    1. Compound Components Pattern

    2. Extensible Styles Pattern

    3. Control Props Pattern

    4. State Initializer Pattern

    5. Function Child Pattern

    6. Custom State Initializer + Function Child pattern

  7. Despliegues a NPM

    1. TSDX

    2. Storybook to NPM

    3. Despliegue manual a NPM: TypeScript + create-react-app

    4. Semantic Release automático

  8. Formik

    1. Formularios tradicionales

    2. Validaciones manuales

    3. Validaciones con Yup

    4. Custom Formik Hooks

    5. Componentes de Formik

    6. Formik Abstractation

    7. Componentes personalizados reutilizables para Formik

    8. Formularios dinámicos

    9. Validaciones de formularios dinámicos

  9. Storybook

    1. Introducciones

    2. Properties

    3. Opciones

    4. Elementos

    5. Controles

    6. Despliegues

    7. Publicaciones a NPM

    8. TypeScript

    9. Documentación automática

    10. Bonus: Chromatic

    11. Bonus: Notas en Chromatic

  10. GitHub Actions: El procedimiento a crear el siguiente

    1. Configuración de acciones

    2. Instalación de Node

    3. Build de aplicacion de React

    4. Creación de un versionamiento semantico

    5. Generar Release

    6. Publicación automática a Npm

    7. Despliegue automático de Storybook

  11. PWA:

    1. Service Worker

    2. Manifest

    3. Configuraciones automáticas de npx create-react-app

    4. Configuraciones manuales

    5. Estrategias de caché

      1. Pre-cache

      2. Cache Only

      3. Cache first with network fallback

      4. Network first with cache fallback

      5. Network only

    6. Offline mode

    7. CRUD sin conexión

      1. Create

      2. Read

      3. Update

      4. Delete

    8. Background Sync

  12. Workbox

    1. Configuración manual

    2. Configuración con Wizard

    3. Configuración preferida por mi (manual)

    4. Background Sync

    5. IndexedDB

    6. Workbox CDN

    7. Módulos de Workbox

  13. React - Detectar online y offline


Nuevamente el curso tiene por objetivo pulir tus habilidades existentes de React con Hooks y llevarlas a un nivel superior para que tus aplicaciones de React sean aún mejores.


Espero el curso te ayude mucho y espero verte dentro del curso!





Who this course is for:

  • Desarrolladores actuales de React
  • Desarrolladores que quieran seguir progresando en React
  • Todos los que quieran saber más sobre PWAs con Workbox
  • Los que quieran aprender a desplegar paquetes a NPM de diferentes formas
  • Todos los que quiera aprender React con TypeScript
  • Personas que quiera modularizar la aplicación

Instructor

Fernando Herrera
A Full-Stack Developer & Teacher
Fernando Herrera
  • 4.8 Instructor Rating
  • 203,240 Reviews
  • 483,831 Students
  • 36 Courses

Soy un analista programador de sistemas de computo, con poco más de 19 años en el mundo del desarrollo de aplicaciones frontend y backend.

Durante mis últimos años me he dedicado a la enseñanza en línea,  mientras trabajo en una empresa en Canadá.

Me encanta enseñar y programar, son mis dos pasatiempos favoritos que a su vez, es mi trabajo.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Terms
  • Privacy policy
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.