Write a program to work with props and states
Files Used
public/index.html
src/index.js
src/App.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Props and State Example</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
App.js
import React from "react";
/* ---------- Function Component (Props) ---------- */
function User(props) {
return (
<div>
<h3>User Component</h3>
<p>Name : {props.name}</p>
<p>Age : {props.age}</p>
</div>
);
}
/* ---------- Class Component (State + Props) ---------- */
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h3>Counter Component</h3>
<p>Count : {this.state.count}</p>
<p>Message : {this.props.msg}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
/* ---------- Parent Component ---------- */
function App() {
return (
<div>
<h1>Working with Props and State</h1>
{/* Passing props */}
<User name="Anil" age="21" />
<Counter msg="State Example" />
</div>
);
}
export default App;
output:
Working with Props and State
User Component
Name : Anil
Age : 21
Counter Component
Count : 0
Message : State Example
[Increment Button]
********************************
Props → data passing
State → data management
Props are immutable
State is mutable
setState() updates UI
**************************************
Write a program to add styles (CSS & Sass Styling) and display data.
npx create-react-app react-style-demo
cd react-style-demo
npm install sass
npm start
Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends normal CSS by adding useful features such as variables, nesting, mixins, and functions. Developers write styles in .scss or .sass files, which are then compiled into standard CSS that browsers can understand. This makes styling more organized, reusable, and easier to manage, especially in large web applications.
Sass helps reduce repetition in CSS by allowing the reuse of styles and values, improving code readability and maintainability. With features like variables for colors and sizes, nesting for cleaner structure, and mixins for reusable style blocks, Sass enables faster development and better management of complex UI designs in frameworks like React, Angular, and Vue.
Project Structure
src/
App.js
App.css (CSS styling)
styles.scss (Sass styling)
index.js
App.js
import React from "react";
import "./App.css"; // CSS
import "./styles.scss"; // Sass
function App() {
const students = [
{ id: 1, name: "Ramesh", marks: 85 },
{ id: 2, name: "Lokesh", marks: 92 },
{ id: 3, name: "Kiran", marks: 78 }
];
return (
<div className="container">
<h1 className="title">Student Marks List</h1>
<div className="card">
{students.map((s) => (
<div key={s.id} className="student">
<span>{s.name}</span>
<span className="marks">{s.marks}</span>
</div>
))}
</div>
</div>
);
}
export default App;
App.css
.container {
text-align: center;
margin-top: 40px;
font-family: Arial, sans-serif;
}
.title {
color: #2c3e50;
}
.student {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
styles.scss
$primary-color: #4CAF50;
$card-bg: #f4f6f7;
.card {
width: 300px;
margin: auto;
padding: 20px;
background-color: $card-bg;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
.student {
font-size: 18px;
.marks {
color: $primary-color;
font-weight: bold;
}
&:hover {
background-color: #e8f8f5;
cursor: pointer;
}
}
}
Comments
Post a Comment