Author: M Abo Bakar Aslam

Creating Multiple Components

Before continuing this lesson, you can download the starting code using the provided resources. This will help you easily run and test all examples in this lesson.

Download Starting Code - HelloWorld

1. Example 1: Multiple Containers in a Single File

In this example, you will create seven different containers within a single file (App.tsx).

Each container represents a different section of a web application, such as:

All containers are created inside the main component. Each section contains a heading and a paragraph, and different background colors are used to visually distinguish them.

This approach is useful for understanding layout structure, but it is not recommended for large applications because everything is written in a single file.

// File: App.tsx located in app-name/src/
 
export default function App() {
  return (
    <div style={{ backgroundColor: "black", color: "white", padding: "5px" }}>
      <h1>This is main componenet (App.tsx)</h1>
      {/* container 1: header */}
      <div style={{ backgroundColor: "blue", color: "white" }}>
        <h1>Web Development Course</h1>
        <p>
          In this course, you will learn about React, Next, Nest, Express and
          mongoDB
        </p>
      </div>
      {/* container 2: Navbar */}
      <div style={{ backgroundColor: "green", color: "white" }}>
        <h1>Nav Bar</h1>
        <p>This is navbar container</p>
      </div>
      {/* container 3: Home Page */}
      <div style={{ backgroundColor: "yellow", color: "white" }}>
        <h1>Home page</h1>
        <p>This is home page container</p>
      </div>
      {/* container 4: Registration */}
      <div style={{ backgroundColor: "magenta", color: "white" }}>
        <h1>Registration</h1>
        <p>This is Registration container</p>
      </div>
      {/* container 5: Login */}
      <div style={{ backgroundColor: "pink", color: "white" }}>
        <h1>Login</h1>
        <p>This is Login container</p>
      </div>
      {/* container 6: Diary */}
      <div style={{ backgroundColor: "red", color: "white" }}>
        <h1>Diary</h1>
        <p>This is Diary container</p>
      </div>
      {/* container 7: Footer */}
      <div style={{ backgroundColor: "cyan", color: "white" }}>
        <h1>Footer</h1>
        <p>This is Footer container</p>
      </div>
    </div>
  );
}

2. Example 2: Creating Separate Components and Call in main Components (Aop.tsx)

In this example, the same layout is created, but instead of writing everything in one file, each section is moved into a separate component.

This is the recommended approach in React because it improves:

Steps to Follow

Step 2.1. Creating Folder based on Website-Layout

Inside the src directory, create two new foldesr named as below.

Step 2.2. Indentifying Components and Pages for the Website

In mostly, we considers

Components as

and Pages as

Step 2.3. Creating Folder Structure and Files

Create folders structure and file (page.tsx) as given below

app-name/
│
└── src/
    │
    ├── components/
    │   │
    │   ├── Header/
    │   │   └── page.tsx
    │   │
    │   ├── Navbar/
    │   │   └── page.tsx
    │   │
    │   └── Footer/
    │       └── page.tsx
    │
    └── pages/
        │
        ├── Home/
        │   └── page.tsx
        │
        ├── Register/
        │   └── page.tsx
        │
        ├── Login/
        │   └── page.tsx
        │
        └── Diary/
            └── page.tsx

Important Note:

Step 2.4. for Components; Writing Code in page.tsx

Here are codes for each page.tsx

// File: page.tsx located in app-name/src/componenet/Header/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "blue", color: "white" }}>
        <h1>Web Development Course</h1>
        <p> In this course, you will learn about React, Next, Nest, Express and mongoDB</p>
    </div>
  )
}
// File: page.tsx located in app-name/src/componenet/Navbar/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "green", color: "white" }}>
        <h1>Navigation Bar</h1>
        <p>This is navbar container</p>
    </div>
  )
}
// File: page.tsx located in app-name/src/componenet/Footer/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "cyan", color: "white", textAlign: "center" }}>
        <h1>Signature</h1>
        <p>This is Signature section</p>
    </div>
  )
}

Step 2.5. for Pages; Writing Code in page.tsx

Here are codes for each page.tsx

// File: page.tsx located in app-name/src/pages/Home/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "yellow", color: "white" }}>
        <h1>Website Main Page</h1>
        <p>This is home page container</p>
    </div>
  )
}
// File: page.tsx located in app-name/src/pages/Login/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "pink", color: "white" }}>
        <h1>login</h1>
        <p>This is login container</p>
    </div>
  )
}
// File: page.tsx located in app-name/src/pages/Register/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "magenta", color: "white" }}>
        <h1>Registration</h1>
        <p>This is Registration container</p>
    </div>
  )
}
// File: page.tsx located in app-name/src/pages/Diary/
 
export default function page() {
  return (
    <div style={{ backgroundColor: "red", color: "white" }}>
        <h1>diary</h1>
        <p>This is diary container</p>
    </div>
  )
}

Step 4: Import Components in App.jsx

Import all components into the main file (App.tsx).

// File: App.tsx located in app-name/src/
 
import Header from "../src/components/Header/page"
import Navbar from "../src/components/Navbar/page"
import Footer from "../src/components/Footer/page"
 
import Home from "../src/pages/Home/page"
import Register from "../src/pages/Register/page"
import Login from "../src/pages/Login/page"
import Diary from "../src/pages/Diary/page"
 
 
 
export default function App() {
  return (
    <div style={{ backgroundColor: "black", color: "white", padding: "5px" }}>
      <h1>This is main componenet (App)</h1>
      {/* container 1: header */}
      <Header />
      {/* container 2: Navbar */}
      <Navbar />
      {/* container 3: Home Page */}
      <Home />
      {/* container 4: Registration */}
      <Register />
      {/* container 5: Login */}
      <Login />
      {/* container 6: Diary */}
      <Diary />
      {/* container 7: Footer */}
      <Footer />
    </div>
  );
}