💻Lecture
Notes Of Class 3
Components - Introduction
🎯 Objective
Understand what components are in React, learn the
difference between Functional and Class components, and learn how
to use props to pass data to components.
📌 What is a Component?
In React, a component is a reusable piece of UI.
Think of it as a JavaScript function or class that returns HTML using JSX.
🔸 Why use components?
- Reusability: Build once, use
anywhere.
- Modularity: Break UI into
smaller, manageable pieces.
- Maintenance: Easier to manage
and update code.
🧩 Types of Components
React provides two main ways to define components:
✅ 1. Functional Components
(Recommended)
These are JavaScript functions that return JSX.
Syntax:
function Welcome() {
return <h1>Hello, React!</h1>;
}
ES6 Arrow Function Syntax:
const Welcome = () => {
return <h1>Hello, React!</h1>;
}
These are now the most commonly used components in React.
✅ 2. Class Components (Older Method
- Less Used Today)
These use ES6 class syntax and were more common before React
introduced Hooks.
Syntax:
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>Hello, React!</h1>;
}
}
Functional components are preferred today because they are
simpler and support Hooks.
📦 What are Props?
Props
stands for Properties.
They allow you to pass data from one component
(usually the parent) to another (child component).
✅ How to Use Props in Functional
Components:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
✅ Usage in App Component:
function App() {
return <Greeting name="John" />;
}
👉 Output:
Hello, John!
Props are read-only, meaning the child component cannot change them.
🛠️ Class Activity: Create a Greeting
Component
✅ Steps:
1. Open your React project (e.g.,
created with npx create-react-app).
2. Create a new file: Greeting.js.
3. Write the following code:
// Greeting.js
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
4. Import and use it in App.js:
// App.js
import Greeting from './Greeting';
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
export default App;
📚 Summary
|
Topic |
Details |
|
Component |
Reusable UI block |
|
Functional Component |
JavaScript function returning JSX |
|
Class Component |
ES6 class with render() method |
|
Props |
Used to pass data to components |
📝 Homework
🔹 Task: Create 3 functional components and
render them in App.js.
➤ Example Idea:
1. Header component – displays the title.
2. Content component – displays a message.
3. Footer component – displays a copyright.
✍️ Sample Code:
// Header.js
function Header() {
return <h1>My Website</h1>;
}
export default Header;
// Content.js
function Content() {
return <p>This is the content area.</p>;
}
export default Content;
// Footer.js
function Footer() {
return <footer>© 2025 My Website</footer>;
}
export default Footer;
// App.js
import Header from './Header';
import Content from './Content';
import Footer from './Footer';
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
export default App;
