Challenges

Introduction to React

Build a reusable Greeting component that personalizes messages based on props.

Create a ProfileCard component that accepts and displays multiple props like name, age, and location.

Set default props for a Greeting component to display a fallback value when no data is passed.

Create a Wrapper component that accepts and renders content passed as children.

Create a reusable StyledButton component with hover effects using the className prop.

Learn how to group multiple elements using React fragments.

Render a dynamic list of items using map and apply the key prop correctly.

Use conditional rendering to display different content based on a boolean prop.

Handle a button click event to update the component state using useState.

Pass a function from a parent component to a child component and use it to update the parent’s state.

Use props to dynamically style components based on input values.

Use default props to provide fallback values when props are not provided.

Define and enforce prop types using TypeScript interfaces.

Use the children prop to create a reusable container component.

Embed JavaScript expressions dynamically in JSX.

Conditionally render elements in JSX based on logical expressions.

Group multiple JSX elements using React fragments to reduce unnecessary DOM nodes.

Learn to add comments in JSX to document and explain code.

Learn to use static and dynamic attributes in JSX for styling and customization.

Learn how to handle user interactions in JSX using event handlers like onClick.

Learn how to combine inline styles and class-based styles dynamically in JSX.

Learn how to render lists dynamically in JSX using the map method.

Learn to use default props in React for setting fallback values.

Learn how to use JSX spread attributes to pass props dynamically.

Learn to manage component state using the useState hook.

Learn to manage toggle state using useState in React.

Learn to manage on/off states dynamically with useState.

Learn to dynamically update state using user input and step size.

Learn to track and display user input dynamically using useState.

Learn to count and display the length of user input in real time.

Learn to toggle between light and dark themes using useState.

Learn to reset a state variable to its initial value in React.

Learn to create and manage controlled inputs in React.

Learn to implement two-way data binding with React.

Persist state using localStorage and React’s useEffect hook.

Learn to implement dynamic tabs with active state management.

Learn to enforce maximum and minimum limits on state variables.

Learn to manage a list dynamically by adding and removing items.

Learn to adjust state dynamically with user-defined step values.

Manage form data with multiple inputs using useState in React.

Implement a simple to-do list app using useState for state management.

Create a counter that uses the previous state with useState's functional update.

Manage state with useState by updating objects and arrays immutably.

Implement a simple accordion component using useState to manage active panels.

Build a form with multiple fields and advanced validation rules to ensure user input integrity.

Build a multi-step form where users can navigate between steps, input data, and submit the final result.

Create a reusable custom hook for fetching data from APIs and handle loading and error states dynamically.

Build a shopping cart where users can add items, increment quantities, and remove items dynamically.

Create a real-time search input that filters a list dynamically, with a debouncing mechanism to optimize performance.

Create a controlled input field that updates its state as the user types.

Create a controlled input field with a 'Show Password' toggle.

Manage the checked state of a checkbox using React state.

Build a controlled dropdown menu where the selected value updates the state.

Create an input field that enforces a maximum character limit and displays the remaining characters.

Validate an email input field in real time as the user types.

Create a number input field that enforces minimum and maximum values.

Create a text input where the entered text is displayed live in a preview below the field.

Build an input field with a dynamic placeholder that changes based on state.

Add a toggle to make an input field read-only dynamically.

Manage multiple input fields (e.g., name, email, and phone) with a single state object.

Create a search input that displays suggestions based on the entered text.

Create a form with multiple inputs and display error messages for invalid fields.

Build an input field where the text transforms dynamically (e.g., uppercase, lowercase) as the user types.

Create an input field with an auto-fill feature that suggests a predefined value.

Build a form that allows users to dynamically add or remove input fields.

Implement a controlled input field that applies a phone number format dynamically (e.g., `(123) 456-7890`).

Create a textarea input that renders a real-time markdown preview.

Build two dropdowns where the options of the second depend on the selection in the first.

Build a form with custom validation rules for multiple input fields, displaying error messages for invalid entries.

Create a simple form with a single input and submit button.

Add basic validation to a form and display a message on submit.

Create a form with password and confirm password fields.

Disable the submit button until all form fields are valid.

Automatically focus the next input field on enter.

Show error messages dynamically as the user types.

Add a required checkbox before submitting a form.

Create a form that pre-fills fields with existing data.

Add a 'Clear All' button to reset the form state.

Create a form with a dropdown menu to select an option.

Create a basic multi-step form with next and back buttons.

Add dynamic validation rules that change based on user input.

Show or hide input fields based on selected options.

Build a form that allows users to upload files and preview the selected file.

Create a form with a custom date picker input field using state.

Create a form with a progress bar that updates as fields are completed.

Build a form with dependent dropdowns that fetch options dynamically.

Create a form with nested fields (e.g., address fields with subfields).

Build a form with live validation and conditional error messages.

Build a form that saves data to localStorage and retrieves it on reload.

Manage a simple counter using the `useState` hook.

Display and update the current time using the `useEffect` hook.

Toggle a light/dark theme using `useState`.

Persist a counter state using `useState` and `localStorage`.

Fetch and display data from an API using `useEffect`.

Implement a debounced input field using `useEffect`.

Manage focus on an input field using `useRef`.

Build a timer using `useState` and `useEffect`.

Validate a form dynamically using `useState`.

Create a responsive navbar using `useState` and `useRef`.

Manage a to-do list using `useReducer`.

Build a modal with `useContext` for global state.

Optimize list rendering with `useMemo`.

Debounce an API call using `useCallback`.

Measure DOM elements using `useLayoutEffect`.

Create a tab navigation system with `useReducer`.

Build a custom hook for fetching data with loading/error states and pagination.

Use `useImperativeHandle` to expose functions from a child component.

Create a custom hook for form handling with validation.

Build a custom hook for infinite scrolling.