React functional component Tasks offers a hands-on collection of assignments designed to solidify your understanding and practical skills in building modern React applications. Dive in and start coding your way to React mastery!

Question 1:

Create a functional component called Greeting that accepts a name prop and displays a message like: "Hello, [name]!".

Question 2:

Create a functional component called Counter that has a state for counting numbers.

  • Initialize the count to 0.
  • Add a button that, when clicked, increments the count by 1.
  • Add another button that, when clicked, decrements the count by 1.
  • Display the current count value in an <h1> tag.

Question 3:

Create a functional component called TodoList that:

  • Accepts an array of todos as props. Each todo is a string.
  • Renders a list (<ul>) of todos. Each todo should be displayed inside a <li> tag.
  • Below the list, include an input field and a button.
    1. When you type a new todo into the input field and click the button, the todo should be added to the list.
    2. The new todo should also be displayed below the existing todos.

Question 4:

Create a functional component called ColorPicker that:

  • Displays a list of color options (Red, Green, Blue, etc.) as buttons.
  • When you click a color button, the background color of the page should change to that color.
  • Display the currently selected color in a <p> tag.

Question 5:

Create a functional component called ToggleText that:

  • Displays a paragraph with some initial text.
  • Below the paragraph, add a button that toggles the visibility of the paragraph. When the button is clicked:
    – If the paragraph is visible, it should hide.
    – If the paragraph is hidden, it should become visible again.
  • Display a message on the button that says either “Show” or “Hide” depending on whether the paragraph is currently visible or not.

Question 6:

Create a functional component called PasswordStrength that:

  • Displays an input field where a user can type a password.
  • As the user types in the password, the component should check its strength based on the following criteria:
    – Weak: Password is less than 6 characters.
    – Medium: Password is between 6 and 10 characters.
    – Strong: Password is more than 10 characters.
  • Display a message showing the password strength: “Weak”, “Medium”, or “Strong”.
  • Bonus: Use color to visually represent the strength (e.g., red for weak, yellow for medium, and green for strong).

Question 7:

Create a Simple Stopwatch

Objective: Create a stopwatch using React.
Features:

  • Start, Stop, and Reset buttons.
  • Display time in seconds and milliseconds.
  • Use useState and useEffect for managing time and intervals.

Question 8: Create a Countdown Timer

Objective: Build a countdown timer that takes a user input for the duration (in seconds) and counts down to zero.
Features:

  • Input field for time in seconds.
  • Start, Pause, and Reset buttons.
  • Display the remaining time in seconds.

Question 9: Build a Basic Calculator

Objective: Create a simple calculator using React.
Features:

  • Buttons for digits (0-9) and operations (+, -, *, /).
  • A display area to show the current calculation.
  • Implement the logic to handle basic arithmetic operations.

Question 10: Create a Contact Form

Objective: Create a contact form with fields like Name, Email, and Message.
Features:

  • Use controlled components to manage form input fields.
  • Display success or error messages after form submission.
  • Basic validation (e.g., make sure the email field is filled out).

Question 11: Create a Modal Component

Objective: Build a reusable modal component in React.
Features:

  • The modal should be able to open and close dynamically.
  • Use useState to control the visibility of the modal.
  • Allow the modal to display any content passed as a prop (e.g., a message or form).
  • Use basic CSS transitions for smooth opening/closing.