React Components & Props (Function vs Class Components)
Introduction to React Components
React components are the building blocks of a React application. They allow developers to split the UI into reusable, independent pieces. Components make it easier to manage and maintain complex user interfaces.
There are two main types of components in React:
1️⃣ Function Components – Modern, simple, and easier to use.
2️⃣ Class Components – Older, more powerful but less commonly used now.
1️⃣ Function Components
A function component is a JavaScript function that returns JSX. It is the recommended way to write React components because it is simpler and supports hooks.
Example of a Function Component
import React from ‘react’;
function Greeting() {
return <h1>Hello, Welcome to React!</h1>;
}
export default Greeting;
✔️ This component simply returns a JSX element (<h1>).
Advantages of Function Components
✅ Simpler Syntax – Just a function that returns JSX.
✅ Better Performance – Uses fewer resources compared to class components.
✅ Supports Hooks – Can use useState, useEffect, and other React hooks.
2️⃣ Class Components
A class component is a JavaScript class that extends React.Component and requires a render() method to return JSX.
Example of a Class Component
import React, { Component } from ‘react’;
class Greeting extends Component {
render() {
return <h1>Hello, Welcome to React!</h1>;
}
}
export default Greeting;
✔️ This class extends Component and includes a render() method that returns JSX.
Why Class Components Are Less Common Now
✅ More complex syntax compared to function components.
✅ Requires this keyword to access properties and state.
✅ Cannot use hooks (Hooks are exclusive to function components).
Understanding Props (Properties)
Props (short for properties) allow you to pass data from one component to another. They make components reusable and dynamic.
Using Props in Function Components
✅ Here we create a Child Component (Welcome.js) File.
✅ The child component receives props from the parent.
mport React from “react”;
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Welcome;
✔️ The props object contains all the properties passed from the parent.
Passing Props
✅ Here we create the Parent Component (App.js)
✅ The parent component passes a prop (name=”John”) to Welcome.
import React from “react”;
import Welcome from “./Welcome”; // Import the child component
function App() {
return <Welcome name=”John” />;
}
export default App;
✔️ name=”John” is passed as a prop to Welcome.
Alternative: Using Destructuring in the Child Component
Instead of using props.name, you can destructure props for cleaner code:
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
Passing Multiple Props
Props can include multiple values, like age and city:
function Welcome({ name, age, city }) {
return <h1>Hello, {name}! You are {age} years old and live in {city}.</h1>;
}
👉 Passing multiple props in App.js:
function App() {
return <Welcome name=”Alice” age={25} city=”New York” />;
}
Output: Hello, Alice! You are 25 years old and live in New York.
Passing Props as an Object
If there are many props, pass them as an object:
const user = { name: “David”, age: 30, city: “Los Angeles” };
function App() {
return <Welcome {…user} />;
}
✔️ This spreads the user object into name, age, and city props.
Using Props in Class Components
Props allow data to be passed from a parent component to a child component. In class components, props are accessed using this.props.
✅ Here we create a Class Component (Welcome.js)
✅ The class component receives props and displays the name.
import React, { Component } from “react”;
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Welcome;
✔️ this.props.name accesses the name prop passed from the parent.
Passing Props
✅ Here we create the Parent Component (App.js)
✅ The parent component passes name=”John” as a prop to Welcome.
import React from “react”;
import Welcome from “./Welcome”; // Import child component
function App() {
return <Welcome name=”John” />;
}
export default App;
✔️ Props (name=”John”) are passed to Welcome.
Passing Multiple Props
Props can include multiple values, like age and city:
Updated Welcome.js to Accept Multiple Props
class Welcome extends Component {
render() {
return (
<h1>
Hello, {this.props.name}! You are {this.props.age} years old and live in{” “}
{this.props.city}.
</h1>
);
}
}
Pass Multiple Props from App.js
function App() {
return <Welcome name=”Alice” age={25} city=”New York” />;
}
Output:
“Hello, Alice! You are 25 years old and live in New York.”
Passing Functions as Props
You can pass a function from a parent to a child component.
Updated Welcome.js
class Welcome extends Component {
render() {
return (
<h1 onClick={this.props.handleClick}>
Hello, {this.props.name}!
</h1>
);
}
}
Pass a Function from App.js
function App() {
const greetUser = () => alert(“Hello from React!”);
return <Welcome name=”John” handleClick={greetUser} />;
}
✔️ Clicking on “Hello, John!” will trigger an alert.
Props Are Read-Only
Props cannot be modified inside a component. If you need to change data, use state instead.
❌ Trying to Modify Props (Incorrect Example)
If you try to change props, React will show an error.
class Welcome extends React.Component {
render() {
// ❌ This will cause an error!
this.props.name = “New Name”;
return <h1>Hello, {this.props.name}!</h1>;
}
}
🛑 Error: Cannot assign to read-only property ‘name’
👉 Props are read-only, so modifying them directly is not allowed.
✅ Correct Approach: Use State for Modifications
If a component needs to modify a value, use state instead of props.
Example: Changing Name Using State
import React, { Component } from “react”;
class Welcome extends Component {
constructor(props) {
super(props);
this.state = { name: props.name }; // Store prop in state
}
changeName = () => {
this.setState({ name: “New Name” }); // ✅ Modify state, not props
};
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
<button onClick={this.changeName}>Change Name</button>
</div>
);
}
}
export default Welcome;
✔️ Clicking the “Change Name” button updates the name without modifying props.
Function vs. Class Components: Comparison
| Feature | Function Components | Class Components |
|---|---|---|
| Syntax | Simple function | ES6 class with render() method |
| Performance | Faster, optimized | Slightly slower |
| State Management | Uses Hooks (useState) | Uses this.state |
| Props Handling | props parameter | this.props |
| Usage | Recommended | Older, less common |
Conclusion
Function components are now the preferred way to write React components due to their simplicity and better performance. Props help in making components reusable by passing data dynamically. You can create efficient and scalable React applications by understanding components and props!
