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: Toggling Visibility
Task
Create a component that includes a button and a text paragraph. Implement the necessary logic using the useState
hook to toggle the visibility of the text paragraph when the button is clicked.
Instructions
- Import the
useState
hook from the React library. - Declare a state variable named
isVisible
using theuseState
hook. Initialize it with the valuefalse
. - Implement a function named
toggleVisibility
that, when called, toggles theisVisible
state betweentrue
andfalse
. - Use the
toggleVisibility
function as theonClick
handler for the button.
- Include an
import
statement to import the appropriate hook from the React library. - For this task, we will utilize the
useState
hook as we are managing the state of paragraph visibility. - To determine the appropriate variable name for the state, observe the function associated with setting the state, which is
setIsVisible
. Remove the "set" prefix and use a lowercase first letter for the variable name, which should beisVisible
. - To invoke the
toggleVisibility
function when the button is clicked, assign it as the value for theonClick
attribute of the button.
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 3