Contenido del Curso
React Mastery
React Mastery
1. Introduction to React Fundamentals
What is React?SPAs vs. MPAs in Web DevelopmentHow React Works with the Virtual DOMIntroducing JSX in ReactCreating Complex JSX Elements Rendering Elements in ReactChallenge: Rendering ElementReact ComponentProps in ReactChallenge: Functional ComponentsConditional RenderingChallenge: Conditional Rendering - Chat NotificationChallenge: Conditional Rendering - Bank AlertRendering a Data CollectionChallenge: Rendering a Data CollectionIntroduction to React Section Sum-Up
2. Styling in React Apps
Introduction to Styling in ReactInline StylesInline Styles in PracticeChallenge: Inline StylesStyling with the CSS FileStyling with the CSS File in PracticeChallenge: Styling with the CSS FileStyling with the CSS ModulesFile Folder Structure OrganizationChallenge: CSS ModulesStyling in React Section Sum-Up
3. React Hooks and Context
Introduction: React Hooks and ContextuseState HookChallenge: Toggling VisibilityuseRef HookChallenge: Creating a Form ComponentuseEffect HookChallenge: Fetching and Displaying DatauseMemo HookChallenge: Car List FilteringContextContext in PracticeChallenge: World of Astronomy AppReact Hooks and Context Section Sum Up
Challenge: Creating a Form Component
Task
In this challenge, you will create a Form
component with two input fields: email
and password
. The goal is to use the useRef
hook to reference the input elements and handle form submission logic.
Instructions
- Import the
useRef
hook from thereact
library. - Inside the
Form
component, declare twouseRef
variables:emailRef
andpasswordRef
, initialized withnull
. - Reset the input fields by setting their values to an empty string using the
useRef
variables.
- To import the necessary hook from the React library, include an
import
statement. - For this task, we will utilize the
useRef
hook to store data without affecting the markup. - To determine the appropriate variable name for the ref, choose a word that is associated with the ref and add "Ref" at the end.
- To initialize the ref with
null
, passnull
as the initial value in the brackets of theuseRef
hook (e.g.,useRef(null)
). - To reset the form input, use the appropriate ref variable and assign its
.current.value
to an empty string (""
).
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 5