React Programs with Components and App.
js
Program 1: Welcome Message using Class Component
Component File:
import React, { Component } from "react";
class Welcome extends Component {
render() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1>Welcome to React Class Component!</h1>
<p>This is a simple class-based component example.</p>
</div>
);
}
}
export default Welcome;
[Link]:
import React from "react";
import Welcome from "./Welcome";
function App() {
return (
<div>
<Welcome />
</div>
);
}
export default App;
Program 2: Counter using Class Component
Component File:
import React, { Component } from "react";
class CounterClass extends Component {
constructor() {
super();
[Link] = { count: 0 };
}
increment = () => {
[Link]({ count: [Link] + 1 });
};
render() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h2>Count: {[Link]}</h2>
<button onClick={[Link]}>Increment</button>
</div>
);
}
}
export default CounterClass;
[Link]:
import React from "react";
import CounterClass from "./CounterClass";
function App() {
return (
<div>
<CounterClass />
</div>
);
}
export default App;
Program 3: Greeting using Functional Component
Component File:
import React from "react";
function Greeting() {
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1>Hello from Functional Component!</h1>
<p>This is a simple React functional example.</p>
</div>
);
}
export default Greeting;
[Link]:
import React from "react";
import Greeting from "./Greeting";
function App() {
return (
<div>
<Greeting />
</div>
);
}
export default App;
Program 4: Theme Switcher with CSS
Component File:
import React, { useState } from "react";
function ThemeSwitcher() {
const [dark, setDark] = useState(false);
return (
<div style={{
backgroundColor: dark ? "#222" : "#fff",
color: dark ? "#fff" : "#000",
textAlign: "center",
padding: 40,
borderRadius: 10,
width: "60%",
margin: "50px auto"
}}>
<h1>{dark ? "■ Dark Mode" : "■■ Light Mode"}</h1>
<p>Click the button to change theme.</p>
<button onClick={() => setDark(!dark)}>
Switch to {dark ? "Light" : "Dark"} Mode
</button>
</div>
);
}
export default ThemeSwitcher;
[Link]:
import React from "react";
import ThemeSwitcher from "./ThemeSwitcher";
function App() {
return (
<div>
<ThemeSwitcher />
</div>
);
}
export default App;
Program 5: Greeting with Props
Component File:
import React from "react";
function GreetingProps(props) {
return (
<div style={{ border: "2px solid #2196f3", padding: 20, borderRadius: 10, margin: 20, textAl
<h2>Hello, {[Link]}!</h2>
<p>Welcome to {[Link]}</p>
</div>
);
}
export default GreetingProps;
[Link]:
import React from "react";
import GreetingProps from "./GreetingProps";
function App() {
return (
<div>
<GreetingProps name="Rajesh" place="Hyderabad" />
<GreetingProps name="Aarav" place="Chennai" />
</div>
);
}
export default App;
Program 6: Profile Card with Multiple Props
Component File:
import React from "react";
function ProfileCard({ name, role, image }) {
return (
<div style={{ border: "1px solid #ccc", borderRadius: 10, width: 200, textAlign: "center", p
<img src={image} alt={name} style={{ width: 70, height: 70, borderRadius: "50%" }} />
<h3>{name}</h3>
<p>{role}</p>
</div>
);
}
export default ProfileCard;
[Link]:
import React from "react";
import ProfileCard from "./ProfileCard";
function App() {
return (
<div>
<ProfileCard name="John Doe" role="Developer" image="[Link] />
<ProfileCard name="Jane Smith" role="Designer" image="[Link] />
</div>
);
}
export default App;
Program 7: Message Box with Conditional Props
Component File:
import React from "react";
function Message({ text, type }) {
const messageClass = {
success: { backgroundColor: "#d4edda", color: "#155724", padding: 15, borderRadius: 8 },
error: { backgroundColor: "#f8d7da", color: "#721c24", padding: 15, borderRadius: 8 }
};
return (
<div style={messageClass[type]}>{text}</div>
);
}
export default Message;
[Link]:
import React from "react";
import Message from "./Message";
function App() {
return (
<div>
<Message text="Operation Successful" type="success" />
<Message text="Something went wrong!" type="error" />
</div>
);
}
export default App;
Program 8: Product using Object Props
Component File:
import React from "react";
function Product({ details }) {
return (
<div style={{ border: "2px solid #f1c40f", backgroundColor: "#fef9e7", borderRadius: 10, pad
<h3>{[Link]}</h3>
<p>Category: {[Link]}</p>
<p>Price: ■{[Link]}</p>
</div>
);
}
export default Product;
[Link]:
import React from "react";
import Product from "./Product";
function App() {
const product1 = { name: "Laptop", category: "Electronics", price: 55000 };
const product2 = { name: "Chair", category: "Furniture", price: 3500 };
return (
<div>
<Product details={product1} />
<Product details={product2} />
</div>
);
}
export default App;
Program 9: CardContainer using Children
Component File:
import React from "react";
function CardContainer(props) {
return (
<div style={{ border: "2px solid #0078d4", padding: 20, margin: 20, borderRadius: 10 }}>
{[Link]}
</div>
);
}
export default CardContainer;
[Link]:
import React from "react";
import CardContainer from "./CardContainer";
function App() {
return (
<div>
<CardContainer>
<h2>Welcome to React!</h2>
<p>This content is passed using [Link].</p>
</CardContainer>
<CardContainer>
<h3>Reusable Component</h3>
<p>This is another card.</p>
</CardContainer>
</div>
);
}
export default App;
Program 10: AlertBox using Children + Conditional
Component File:
import React from "react";
function AlertBox({ type, children }) {
const styles = {
success: { backgroundColor: "#d4edda", color: "#155724", padding: 15, borderRadius: 8, margi
error: { backgroundColor: "#f8d7da", color: "#721c24", padding: 15, borderRadius: 8, margin:
info: { backgroundColor: "#d1ecf1", color: "#0c5460", padding: 15, borderRadius: 8, margin:
};
return <div style={styles[type]}>{children}</div>;
}
export default AlertBox;
[Link]:
import React from "react";
import AlertBox from "./AlertBox";
function App() {
return (
<div>
<AlertBox type="success">■ Data saved successfully!</AlertBox>
<AlertBox type="error">■ Something went wrong!</AlertBox>
<AlertBox type="info">■■ Please check your input.</AlertBox>
</div>
);
}
export default App;