🧠 React Components Deep Dive: Props, State, Composition & Hooks (2025)

In this tutorial, you'll get a complete understanding of React components including how to build and structure them using best practices. You'll learn about functional components, props, state, JSX, hooks, composition, and how to break an app into reusable modules.

📽️ YouTube Video Title (High CTR)

---

🔧 Step-by-Step Tutorial

1. 📦 What is a Component in React?

• A component is a reusable and self-contained part of the UI.

• It’s either a function or class (function preferred).

• Allows splitting the UI into isolated pieces.

function MyComponent() {
  return <div>Hello World</div>;
}

---

2. 🧩 Types of Components

✅ Functional Components (modern, preferred)

const Welcome = () => <h1>Welcome!</h1>;

❌ Class Components (legacy)

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

---

3. 🛠 Using Props

Props = "properties" → input data passed to a component.
They are read-only and passed via JSX attributes.

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

<Greeting name="Norbert" />

---

4. 🔁 State Management

State = data that can change.
Use useState to manage it in a functional component.

const [count, setCount] = useState(0);

Updating state triggers a re-render of the component.

---

5. ⏱ Lifecycle with useEffect

React uses useEffect() for side effects like fetching data.

useEffect(() => {
  console.log("Component Mounted");
}, []); // Empty array = run once

---

6. 💻 JSX Syntax

JSX = HTML + JavaScript hybrid syntax.
It compiles to React.createElement() behind the scenes.

const App = () => (
  <div>
    <h1>Hello JSX!</h1>
  </div>
);

---

7. 🧱 Component Composition

Components can include other components → reusable UIs.

const Page = () => (
  <Layout>
    <Header />
    <Main />
    <Footer />
  </Layout>
);

---

8. 📦 Exporting and Importing Components

Create a component:

const Footer = () => <footer>© 2025</footer>;
export default Footer;

Use it:

import Footer from './components/Footer';

---

9. 📁 Project Refactor Example

We extracted Footer.jsx, Home.jsx, Page.jsx, RecipePage.jsx, RecipeCard.jsx, and RecipeModal.jsx components into a structured folder system.

Folder Structure:

src/
├── components/
│   ├── Footer.jsx
│   ├── Page.jsx
├── pages/
│   ├── Home.jsx
│   ├── RecipePage.jsx
│   ├── Recipes/
│   │   ├── RecipeCard.jsx
│   │   ├── RecipeModal.jsx

---

10. 📚 Best Practices

• ✅ Name components with capital letters

• ✅ One export default per file

• ✅ Keep components small & focused

• ✅ Use props to customize components

• ✅ Return a single parent element

---

---