React Components
Building blocks of React applications
🧩 What are React Components?
Components are reusable pieces of UI that work like JavaScript functions. They accept inputs called props and return React elements describing what should appear on screen.
function Welcome() {
return <h1>Hello, React!</h1>;
}
Types of Components
Function Components
Simple JavaScript functions that return JSX
function Greeting() {
return <h1>Hi!</h1>;
}Reusable
Use components multiple times
<Greeting />
<Greeting />Independent
Each component manages its own logic
function Button() {
return <button>Click</button>;
}Composable
Combine components to build UIs
<App>
<Header />
<Content />
</App>🔹 Creating Your First Component
Components are simple functions that return JSX. They must start with a capital letter to distinguish them from HTML tags.
// Simple function component
function Welcome() {
return <h1>Welcome to React!</h1>;
}
// Using the component
function App() {
return (
<div>
<Welcome />
</div>
);
}Output:
Welcome to React!
🔹 Component with Multiple Elements
Components can return multiple elements wrapped in a parent element or React Fragment.
function UserCard() {
return (
<div>
<h2>John Doe</h2>
<p>Web Developer</p>
<button>Follow</button>
</div>
);
}Output:
John Doe
Web Developer
🔹 Reusing Components
The power of components is reusability. Create once, use multiple times throughout your application.
function Card() {
return (
<div style={{ border: '1px solid #ddd', padding: '20px' }}>
<h3>Card Title</h3>
<p>Card content goes here</p>
</div>
);
}
function App() {
return (
<div>
<Card />
<Card />
<Card />
</div>
);
}Output:
Card Title
Card content goes here
Card Title
Card content goes here
Card Title
Card content goes here
🔹 Nesting Components
Components can contain other components, creating a component tree that represents your UI structure.
function Header() {
return <h1>My Website</h1>;
}
function Content() {
return <p>Welcome to my website!</p>;
}
function Footer() {
return <p>© 2025 My Website</p>;
}
function App() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}Output:
My Website
Welcome to my website!
© 2025 My Website
🔹 Component Naming Rules
Follow these important rules when creating React components:
✅ Do's:
-
Start with capital letter:
function Button() -
Use PascalCase:
UserProfile,NavBar -
Descriptive names:
LoginForm,ProductCard
❌ Don'ts:
-
Lowercase start:
function button()❌ -
Generic names:
Component1,Thing❌ -
Special characters:
User-Profile❌