Scribd
Upload
3 views3 pages

React Project Questions

The document outlines ten React projects, each demonstrating different functionalities and concepts. Projects include a To-Do List App, Random Quote Generator, Color Picker, Digital Clock, Modal Popup, Temperature Converter, Simple Calculator, Character Counter, Image Gallery Viewer, and a Light/Dark Mode Toggle. Key React concepts utilized across the projects include useState, conditional rendering, and handling user inputs.

Uploaded by

sriramfan709
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

React Project Questions

The document outlines ten React projects, each demonstrating different functionalities and concepts. Projects include a To-Do List App, Random Quote Generator, Color Picker, Digital Clock, Modal Popup, Temperature Converter, Simple Calculator, Character Counter, Image Gallery Viewer, and a Light/Dark Mode Toggle. Key React concepts utilized across the projects include useState, conditional rendering, and handling user inputs.

Uploaded by

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

Project 1: To-Do List App

What It Does
• Lets users type tasks, add them to a list, and delete them.
React Concepts Used
• useState for handling input and task list
• Rendering arrays with .map()
Project 2: Random Quote Generator
What It Does
• Displays a random quote when a button is clicked.
React Concepts Used
• useState
• Random number logic
Project 3: Color Picker
What It Does
• Lets users pick a color using a color input
• Displays a box with the selected background color
React Concepts Used
• useState
• Controlled input (onChange)
Project 4: Digital Clock
What It Does
• Displays the current time and updates every second
React Concepts Used
• useState to hold time
• useEffect for real-time updates with setInterval
Project 5: Modal Popup
What It Does
• Shows a modal overlay when a button is clicked
React Concepts Used
• useState
• Conditional rendering
Project 6: Temperature Converter (Celsius to Fahrenheit)
What It Does
• User enters Celsius temperature
• App displays equivalent Fahrenheit value
React Concepts Used
• useState
• Input handling
• Simple formula calculation
Project 7: Simple Calculator (+ − × ÷)
What It Does
• User enters two numbers
• Click buttons to perform addition, subtraction, multiplication, or division
React Concepts Used
• useState
• Handling multiple inputs
• Simple math operations
Project 8: Character Counter
What It Does
• User types text into a textarea
• App shows total character and word count
React Concepts Used
• useState
• String methods: .length, .split()
Project 9: Image Gallery Viewer
What It Does
• Displays image thumbnails
• Clicking a thumbnail shows it enlarged
React Concepts Used
• useState
• Arrays
• Conditional image display
Project 10: Light / Dark Mode Toggle
What It Does
• Toggles the entire app's theme between light and dark
React Concepts Used
• useState
• Conditional styling

You might also like