FSD 2 -UNIT 2
INSTALLATION OF NODE.JS
1)
AIM
To create a counter application using React class components that allows
users to increment, decrement, and reset a numeric value.
DESCRIPTION
This React counter application demonstrates the fundamental concepts of state
management in class-based components. The program allows users to modify a
numeric value through three interactive buttons: one to increment the count by 1,
another to decrement it by 1, and a reset button to return the count to zero. The
component maintains its state using React's built-in this.state and updates the UI
dynamically through the setState method, showcasing how class components
handle data changes and re-rendering. Designed with simplicity in mind, the
interface features a prominently displayed current count alongside clearly labeled
buttons with basic styling. This example serves as an excellent introduction to
working with state in React class components, illustrating key principles like
component lifecycle, event handling, and the unidirectional data flow that React
employs. The clean, focused implementation makes it ideal for beginners to
understand core React concepts while providing a foundation for more complex
state management techniques.
PROGRAM CODE
Open in notepad++
import React from 'react';
class ColorfulCounter extends React.Component {
state = { count: 0 };
increment = () => this.setState({ count: this.state.count + 1 });
decrement = () => this.setState({ count: this.state.count - 1 });
reset = () => this.setState({ count: 0 });
render() {
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1 style={{ color: '#333' }}>Count: {this.state.count}</h1>
<button
onClick={this.increment}
style={styles.incrementButton}
>
+
</button>
<button
onClick={this.decrement}
style={styles.decrementButton}
>
-
</button>
<button
onClick={this.reset}
style={styles.resetButton}
>
Reset
</button>
</div>
);
}
}
const styles = {
incrementButton: {
backgroundColor: '#4CAF50', // Green
color: 'white',
padding: '10px 20px',
margin: '0 5px',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
},
decrementButton: {
backgroundColor: '#f44336', // Red
color: 'white',
padding: '10px 20px',
margin: '0 5px',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
},
resetButton: {
backgroundColor: '#2196F3', // Blue
color: 'white',
padding: '10px 20px',
margin: '0 5px',
border: 'none',
borderRadius: '5px',
fontSize: '16px',
cursor: 'pointer'
}
};
export default ColorfulCounter;;
Process how to run and Where to save React code:-
1) Open D -drive create a folder like React
2) From there open cmd and type
npx create-react-app counter-app
Enter y and press enter.
3) Now open react folder and check it whether packages installed or not
(D:\React\counter-app)
4) Now open src folder in it and save your js (react) program with file name
as App.js in It.
(D:\React\counter-app\src)
5) Now open cmd from your folder (D:\React\counter-app\src>)
6) Now type
npm start
7) Now open http://localhost:3000 in your browser.
ouput:-
2)
AIM:
To create a React functional component with a form that collects user details
(name and email) and implements form submission with validation.
DESCRIPTION :
This React component implements a user details form with name and email fields,
submission validation, and confirmation messaging. It demonstrates core React
concepts including state management with hooks, controlled components, and
conditional rendering.
Program code:
import React, { useState } from 'react';
function SimpleForm() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [submitted, setSubmitted] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
setSubmitted(true);
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
if (submitted) {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Thank you for submitting!</h2>
<p>We received your details.</p>
<button
onClick={() => setSubmitted(false)}
style={{ padding: '8px 16px', marginTop: '10px' }}
>
Submit Again
</button>
</div>
);
}
return (
<form onSubmit={handleSubmit} style={{ padding: '20px' }}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Your Name"
required
style={{ display: 'block', margin: '10px 0', padding: '8px', width: '100%' }}
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Your Email"
required
style={{ display: 'block', margin: '10px 0', padding: '8px', width: '100%' }}
/>
<button type="submit" style={{ padding: '8px 16px', marginTop: '10px' }}>
Submit
</button>
</form>
);
}
export default SimpleForm;
output:-
3)
Aim :
To create a React functional component with a button that fetches and displays
weather forecast data when clicked, demonstrating event handling in functional
components.
Description:
This component shows a weather forecast when the button is clicked. It uses
React hooks (useState) to manage the forecast data state and simulates an API
call with mock data. The button click triggers the forecast display, showcasing
event handling in functional components.
Program code :
import React, { useState } from 'react';
function WeatherForecast() {
const [forecast, setForecast] = useState(null);
const [loading, setLoading] = useState(false);
const fetchWeather = () => {
setLoading(true);
setTimeout(() => {
setForecast({ city: "New York", temp: "72°F", condition: "Sunny", icon: "☀️" });
setLoading(false);
}, 1000);
};
return (
<div style={{
minHeight: '100vh',
display: 'grid',
placeItems: 'center',
background: 'linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)',
backgroundSize: '400% 400%',
animation: 'gradient 15s ease infinite',
color: 'white',
padding: '2rem',
textAlign: 'center'
}}>
<div>
<h1>Weather Forecast</h1>
<button onClick={fetchWeather} disabled={loading} style={{
padding: '12px 24px',
background: 'rgba(255,255,255,0.2)',
color: 'white',
border: '2px solid white',
borderRadius: '30px',
margin: '20px 0'
}}>
{loading ? 'Loading...' : 'Get Weather'}
</button>
{forecast && (
<div style={{
background: 'rgba(255,255,255,0.15)',
padding: '20px',
borderRadius: '15px'
}}>
<h2>{forecast.city}</h2>
<div style={{ fontSize: '3rem' }}>{forecast.icon}</div>
<p style={{ fontSize: '1.5rem' }}>{forecast.temp}</p>
<p>{forecast.condition}</p>
</div>
)}
</div>
<style>{`@keyframes gradient { 0%,100% {background-position:0% 50%} 50%
{background-position:100% 50%} }`}</style>
</div>
);
}
export default WeatherForecast;
output:-
4)
Aim :-
To demonstrate conditional rendering in React by creating a toggle button that
shows/hides a message.
Description:
1. useState hook to manage the visibility state
2. A button that toggles between "Show"/"Hide" labels
3. Inline styling for a modern, minimalist appearance
4. Conditional rendering (&& operator) to display the message
5. Responsive layout with centered content
Program code:
import React, { useState } from 'react';
export default function ToggleMessage() {
const [show, setShow] = useState(false);
return (
<div style={{
minHeight: '100vh',
display: 'grid',
placeItems: 'center',
background: 'linear-gradient(to bottom, #1e3c72 0%, #2a5298 100%)',
padding: 20,
color: 'white',
fontFamily: 'Arial, sans-serif'
}}>
<div style={{ textAlign: 'center' }}>
<h1 style={{ marginBottom: 20 }}>Rainy Day Toggle</h1>
<button
onClick={() => setShow(!show)}
style={{
padding: '12px 24px',
background: 'rgba(255,255,255,0.15)',
color: 'white',
border: '1px solid rgba(255,255,255,0.3)',
borderRadius: 8,
cursor: 'pointer',
backdropFilter: 'blur(5px)',
fontSize: 16
}}
>
{show ? 'Stop Rain' : 'Start Rain'}
</button>
{show && (
<div style={{ marginTop: 30 }}>
<div style={{ fontSize: 40 }}></div>
<p style={{ marginTop: 10 }}>The rain is falling peacefully...</p>
</div>
)}
</div>
</div>
);
}
Output:-
5)
Aim:-
To demonstrate how to use string literals (template strings) in React for dynamic
text display.
Description:
This React program shows how to create dynamic text using template literals ($
{variable}) for flexible string formatting. It displays a simple restaurant menu
where item descriptions and prices are rendered using string interpolation, making
the text easily customizable. The example highlights multi-line strings and
embedded expressions without complex concatenation.
Program code:
import React, { useState } from 'react';
function RestaurantMenu() {
const [order, setOrder] = useState([]);
const menuItems = [
{ id: 1, name: 'Dum Biryani', price: 180 },
{ id: 2, name: 'Special Biryani', price: 200 },
{ id: 3, name: 'Hyderabadi Biryani', price: 260 }
];
const addToOrder = (item) => setOrder([...order, item]);
const total = order.reduce((sum, item) => sum + item.price, 0);
return (
<div style={{
minHeight: '100vh',
background: 'linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url(https://images.unsplash.com/photo-1589302168068-964664d93dc0?ixlib=rb-
1.2.1&auto=format&fit=crop&w=1350&q=80)',
backgroundSize: 'cover',
color: 'white',
padding: '40px'
}}>
<div style={{ maxWidth: '600px', margin: '0 auto' }}>
<h1 style={{ fontFamily: 'Georgia', borderBottom: '1px solid
goldenrod' }}>Biryani House</h1>
<div style={{ display: 'grid', gap: '20px', margin: '30px 0' }}>
{menuItems.map(item => (
<div key={item.id} style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
background: 'rgba(255,255,255,0.1)',
padding: '15px',
borderRadius: '5px'
}}>
<div>
<h3 style={{ margin: 0 }}>{item.name}</h3>
<p style={{ color: 'goldenrod', margin: '5px 0 0' }}>₹{item.price}</p>
</div>
<button onClick={() => addToOrder(item)} style={{
background: 'goldenrod',
border: 'none',
padding: '8px 15px',
borderRadius: '3px',
cursor: 'pointer'
}}>+ Add</button>
</div>
))}
</div>
{order.length > 0 && (
<div style={{
background: 'rgba(0,0,0,0.7)',
padding: '20px',
borderRadius: '5px'
}}>
<h2>Your Order</h2>
{order.map((item, i) => (
<p key={i} style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>{item.name}</span>
<span>₹{item.price}</span>
</p>
))}
<p style={{
borderTop: '1px solid goldenrod',
paddingTop: '10px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'space-between'
}}>
<span>Total:</span>
<span>₹{total}</span>
</p>
</div>
)}
</div>
</div>
);
}
export default RestaurantMenu;
Output:-
