Scribd
Upload
28 views1 page

React Practical

The document outlines a series of practical React JS project ideas for developers to enhance their skills. It includes tasks such as creating a simple app to display a message, building a counter and to-do list, developing forms, fetching data from APIs, and implementing various UI components like modals and dropdowns. These projects cover a range of functionalities, encouraging hands-on experience with React concepts like state management and component design.

Uploaded by

Shamim Alam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
28 views1 page

React Practical

The document outlines a series of practical React JS project ideas for developers to enhance their skills. It includes tasks such as creating a simple app to display a message, building a counter and to-do list, developing forms, fetching data from APIs, and implementing various UI components like modals and dropdowns. These projects cover a range of functionalities, encouraging hands-on experience with React concepts like state management and component design.

Uploaded by

Shamim Alam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

React JS Practical Questions

1. Create a simple React app that displays "Hello, React!" in an <h1> tag.
2. Build a counter app with increment, decrement, and reset buttons using useState.
3. Create a to-do list app where users can add, delete, and mark tasks as
completed.
4. Build a form with fields for name, email, and message. On submission, show the
data below the form.
5. Fetch data from a public API (e.g., https://jsonplaceholder.typicode.com/users)
and display it in a table.
6. Create a digital clock using useEffect and setInterval.
7. Build a weather app that takes a city input and fetches the weather using an
API.
8. Create a login form with validation. Show an alert on successful login.
9. Build a light/dark mode toggle button. Use localStorage to save user preference.
10. Make a component that accepts a list of names as props and renders each in a
styled card.
11. Create a reusable button component that takes label, onClick, and style as
props.
12. Develop a quiz app that shows one question at a time with multiple choices.
13. Create a tabbed interface with three tabs and different content for each.
14. Make a multi-step form (wizard) with “Next” and “Back” buttons.
15. Implement a modal popup that opens on a button click and closes when clicking
outside or on "X".
16. Create a dropdown menu that shows and hides on click.
17. Build a simple calculator that supports basic arithmetic operations.
18. Create an image gallery using an array of image URLs with "Next" and "Previous"
buttons.
19. Build a progress bar that fills based on input from a slider.
20. Make a component that highlights a word in a paragraph as the user types it in
a search box.
21. Create a blog post viewer that loads posts from an API and allows filtering by
title.
22. Build a sticky navbar that stays on top when scrolling.
23. Implement a file upload form that shows the uploaded file name after selection.
24. Create a dynamic form using useState, where the user can add/remove input
fields.
25. Build a mini e-commerce cart with product list, add-to-cart button, and total
price calculation.

You might also like