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

;
}

2. 🧩 Types of Components

✅ Functional Components (modern, preferred)

const Welcome = () =>

Welcome!

;

❌ Class Components (legacy)

class Welcome extends React.Component {
render() {
return

Welcome!

;
}
}

3. 🛠 Using Props

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

function Greeting({ name }) {
return

Hello, {name}!

;
}

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 = () => (

);

7. 🧱 Component Composition

Components can include other components → reusable UIs.

const Page = () => (

);

8. 📦 Exporting and Importing Components

Create a component:

const 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

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe