Comparte si te a gustado:

React PRO: Lleva tus bases al siguiente nivel

Publicado en 01 Jun 2024

Udemy UK

Lo que aprender谩s

  • 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

Requisitos

  • 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

Descripci贸n

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!





驴Para qui茅n es este curso?

  • 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

Debes tener en cuenta que los cupones duran maximo 4 dias o hasta agotar 1000 inscripciones,pero puede vencer en cualquier momento. Obten el curso con cupon haciendo clic en el siguiente boton:

(Cup贸n v谩lido para las primeras 1000 inscripciones): JUNIO-2024
Udemy UK
Tags:
  • #React

Articulos Relacionados

content

Universidad Desarrollo Web - FrontEnd Web Developer!

El mejor curso para aprender a crear aplicaciones Web Modernas con HTML, CSS y JavaScript. Ser谩s un FrontEnd Developer!

Ir al Curso
content

Angular: De cero a experto

Componentes, directivas, servicios, mapas, gr谩ficas, JWT, autenticaci贸n, despliegues, mongo, Git, GitHub y mucho m谩s

Ir al Curso
content

Universidad Angular - De Cero a Experto en Angular!

Domina Angular y crea aplicaciones web del mundo real con TypeScript, Firebase, Cloud Firestore, JWT y m谩s!

Ir al Curso
Suscr铆bete a nuestro bolet铆n
Reciba los 煤ltimos Cupones y promociones (Solicitar Cup贸n)