✅ What is a Component in React?

A component is like a reusable building block in React.
Just like a house is made of bricks, a React app is made of components.

Example: A website may have a Header, Footer, Sidebar, and ProductCard — all can be separate components.

---

🧩 Types of Components

There are 2 main types of components in React:

1. Function Components (Most Common)

• Simple JavaScript functions

• Easy to write and understand

• Support React Hooks (useState, useEffect, etc.)

✅ Example:

//jsx
function Welcome() {
  return <h1>Welcome to React!</h1>;
}

---

2. Class Components (Older Way)

• Use ES6 class keyword

• Have render() method

• Used before hooks were introduced

🧠 Example:

//jsx
import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

⚠️ Today, we mostly use function components with hooks — simpler and modern.

---

🚀 Creating & Exporting Components

Let’s create a simple component step-by-step:

📁 Folder Structure:

src/
  └── components/
        └── Welcome.js

🛠 Welcome.js:

//jsx
import React from 'react';

function Welcome() {
  return <h2>Hello from Welcome Component!</h2>;
}

export default Welcome;

✅ Here:

• We created a component using a function

• Then exported it using export default

---

📥 Importing & Using Components

Now we want to use Welcome component inside App.js.

🧾 App.js:

//jsx
import React from 'react';
import Welcome from './components/Welcome'; // ⬅️ Import

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Welcome />  {/* ⬅️ Using Component */}
    </div>
  );
}

export default App;

✅ This will show:

Main App
Hello from Welcome Component!

---

📌 Component Naming Conventions

Here are some best practices for naming components:

---

🧑‍🏫 Real-Life Analogy

Think of components like LEGO blocks. You create small parts and join them together to build the full website (UI). Each block (component) is reusable and independent.

---

💡 Export & Import Tips (for Professionals)

---

✅ Summary

• Components are reusable UI pieces

• React has function and class components (function preferred)

• Components must be exported and imported properly

• Naming should follow PascalCase and organized in folders

---

🧪 Mini Project for Topic 3: "Profile Card Component"

🎯 Goal:

Create a small reusable Profile Card component using function components, import/export, and apply naming conventions.

---

✅ Project Features:

• Show a profile card with:

  • Profile Picture (you can use a random image URL)

  • Name

  • Role (e.g., Web Developer, Student, etc.)

  • A short description

• Use multiple components:

  • App.js

  • ProfileCard.js

  • Optional: Header.js, Footer.js

---

🗂 Suggested File Structure:

src/
  ├── App.js
  └── components/
        ├── ProfileCard.js
        ├── Header.js
        └── Footer.js

---

🧾 Sample ProfileCard.js:

//jsx
import React from 'react';
import './ProfileCard.css';

function ProfileCard() {
  return (
    <div className="card">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="profile" />
      <h2>Rahul Sharma</h2>
      <p>Frontend Developer</p>
      <p>I love building beautiful and responsive UIs with React.</p>
    </div>
  );
}

export default ProfileCard;

---

🧾 Sample App.js:

//jsx
import React from 'react';
import ProfileCard from './components/ProfileCard';

function App() {
  return (
    <div>
      <h1>Team Members</h1>
      <ProfileCard />
      <ProfileCard />
    </div>
  );
}

export default App;

---

🎨 Optional Styling (ProfileCard.css):

.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 12px;
  width: 250px;
  text-align: center;
  box-shadow: 2px 2px 8px #ddd;
  margin: 20px auto;
}
.card img {
  width: 100px;
  border-radius: 50%;
}

---

📚 Assignment for Students (Topic 3: Components)

📌 Instructions:

Create the following using React Functional Components:

1. Header Component

   • Show the name of your site like "My Portfolio"

2. Footer Component

   • Include your name and year (e.g., “© 2025 by Riya Sharma”)

3. ProfileCard Component

   • Reusable card that takes:

     • Name

     • Role

     • Image URL

   • Display at least 3 cards with different data

---

📦 Deliverables:

• Must use proper component naming conventions

• Code must be modular (each component in its own file)

• Use of export and import should be correct

• Use props if you want to go advanced (covered in next topic, optional for now)

---

💡 Extra Challenge (for Working Professionals):

• Add a button in each ProfileCard like “Contact” or “Follow”

• Use onClick to show an alert (onClick={() => alert("You clicked!")})

---

Would you like me to:

• explain things in more detail?

• continue with the next topic: Props (Topic 4)?

Let me know how you'd like to proceed!

🔔 Stay Connected

If you found this article helpful and want to receive more such beginner-friendly and industry-relevant React notes, tutorials, and project ideas —
📩 Subscribe to our newsletter by entering your email below.

And if you're someone who wants to prepare for tech interviews while having a little fun and entertainment,
🎥 Don’t forget to subscribe to my YouTube channel – Knowledge Factory 22 – for regular content on tech concepts, career tips, and coding insights!

Stay curious. Keep building. 🚀