Evolución de la Gestión de Formularios en React

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

Aprende cómo manejar formularios en React utilizando las últimas características, como startTransition, useTransition, useOptimistic y useActionState, con y sin acciones del servidor de React 19, junto con la validación adecuada, manejo de errores y mejores prácticas.

La masterclass comenzará demostrando el manejo tradicional de formularios usando useState y useEffect para el renderizado del lado del cliente. Gradualmente, pasaremos a utilizar las últimas características de React 19, incluyendo formularios del lado del servidor y los hooks más recientes para gestionar estados y errores de formularios. Al final de la masterclass, los participantes entenderán cómo crear formularios robustos con validación adecuada y manejo de errores.

Objetivos de Aprendizaje

  • Últimos Hooks de React 19 — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValue
  • Acciones del Servidor
  • Revalidaciones
  • Validación del lado del Servidor
  • Manejo de Errores
  • Prácticas de Seguridad

This workshop has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Adrian Hajdin
Adrian Hajdin
72 min
05 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenido a la evolución de la gestión de formularios en React. Aprende cómo construir formularios utilizando los últimos hooks de React. Maneja formularios con acciones del servidor, usa validación, estado del formulario, optimismo y estado de acción. En este curso, convertiremos el formulario básico en tres formularios diferentes, incluyendo un formulario del servidor que funciona sin JavaScript del lado del cliente. Usa el hook useFormStatus para proporcionar retroalimentación en tiempo real sobre el estado de envío del formulario. El hook useActionState ayuda a gestionar el estado de una acción del servidor en componentes del servidor de React. El hook useOptimistic permite la creación de interfaces de usuario optimistas. El hook useTransition distingue entre actualizaciones de estado urgentes y no urgentes. El hook useDeferredValue retrasa la actualización de una parte de la interfaz de usuario para mantenerla receptiva durante actualizaciones costosas. Practica y experimenta para aprender estos conceptos.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
WorkshopFree
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.
Dominando React Server Components y Server Actions en React 19
React Advanced 2024React Advanced 2024
160 min
Dominando React Server Components y Server Actions en React 19
Workshop
Maurice de Beijer
Maurice de Beijer
¡Llamando a todos los desarrolladores de React! Únete a nosotros para una inmersiva masterclass de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar su máximo potencial para construir aplicaciones rápidas y eficientes.
Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de API.
Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic.
Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: regístrate ahora y desata todo el poder de React!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
No puedes usar Hooks condicionalmente... ¿o sí puedes?
React Summit 2023React Summit 2023
28 min
No puedes usar Hooks condicionalmente... ¿o sí puedes?
Top Content
The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.
Gestión eficiente del estado con Hookstate
React Advanced 2021React Advanced 2021
10 min
Gestión eficiente del estado con Hookstate
This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.
No olvides React Memo
React Summit 2022React Summit 2022
7 min
No olvides React Memo
The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.
No sabemos cómo funcionan los React State Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
7 min
No sabemos cómo funcionan los React State Hooks
This Talk provides an introduction to React Staytools, explaining how to use the state and setState function to update a counter. It also delves into the inner workings of React rendering, discussing the update queue and re-rendering conditions. The Talk concludes by mentioning the different modes of updating and triggering re-renders in React, and encourages further exploration of the source code and discussion in Discord.
No sabemos cómo funcionan los React State Hooks
React Advanced 2021React Advanced 2021
28 min
No sabemos cómo funcionan los React State Hooks
This talk explores how useState works under the hood and why it's important to understand. It addresses the common confusion around the callback to setState and provides insights gained from exploring React hooks source code. Knowing how useState works is important for learning patterns, debugging, and gaining confidence in our code. React manages the current value of hooks in a linked list and performs updates sequentially. React optimizes rendering by caching computations and performing shallow renders when the state doesn't change.