🧩 What Are Components?
In React, components are reusable building blocks that define how parts of your UI look and behave.
Each component is a function (or class) that returns JSX — a syntax extension that looks like HTML.
👉 Example:
A button, header, or profile card can all be components.
⚙️ 1. Create a Simple Component
You can define a component as a function that returns JSX.
// Greeting.js
function Greeting() {
return <h1>Hello, world!</h1>;
}
export default Greeting;
Then you can import and use it in another file:
// App.js
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting />
</div>
);
}
export default App;
✅ Output:
Hello, world!
🧱 2. Using Props (Component Inputs)
Props let you pass data into a component — like function parameters.
// Greeting.js
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
Now pass props from the parent:
// App.js
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}
✅ Output:
Hello, Alice!
Hello, Bob!
🧠 3. Using State (Dynamic Components)
Components can store state — data that changes over time.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times!</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
Use it in App.js just like before:
import Counter from './Counter';
function App() {
return <Counter />;
}
✅ Output:
A working button that increases the number when clicked.
🧩 4. Nesting Components
You can compose multiple components together — this is React’s superpower.
function Header() {
return <h1>My App</h1>;
}
function Footer() {
return <p>© 2025 My App</p>;
}
function App() {
return (
<div>
<Header />
<p>Welcome to my app!</p>
<Footer />
</div>
);
}
🧰 5. Component Types (Quick Summary)
Type Example Description
Functional Component function MyComp() {} The modern standard
Class Component class MyComp extends React.Component {} Older, less common now
Pure Component Optimized version of class component Used for performance
Higher-Order Component (HOC) A function that returns another component For advanced use cases
👉 Today, almost everyone uses functional components with Hooks (like useState, useEffect, etc.).
🎯 Summary
Concept Description
Component A reusable piece of UI
Props Pass data into components
State Manage dynamic data inside components
JSX HTML-like syntax for describing UI
Composition Combine components together
Learn Full Stack JAVA Course in Hyderabad
Read More
React vs Angular: Which One to Learn?
Angular Basics for Full Stack Java Developers
Introduction to React for Java Developers
⚛️ Frontend Frameworks (React, Angular)
Visit Our Quality Thought Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments