Your First React Application

Now that your React development environment is ready, it is time to build your first React application.

React applications are built by combining small, reusable pieces of user interface called components. Instead of creating one large file containing an entire application’s interface, React allows you to divide the interface into smaller components and combine them to create complete applications.

In this chapter, you will create your first React component, render it in the browser, modify the application, create multiple components, import and export components, and understand how these components form a component tree.

By the end of this chapter, you will understand the basic workflow behind a React application:

Create Component
       ↓
Export Component
       ↓
Import Component
       ↓
Use Component
       ↓
Render Component
       ↓
Build Component Tree
       ↓
Display User Interface

Create Your First Component

A React component is a reusable piece of user interface. Components allow developers to divide an application’s interface into smaller, manageable parts.

A component can represent something simple, such as a button or heading, or something more complex, such as a navigation bar, product card, dashboard, or complete page.

In modern React, components are commonly written as JavaScript functions that return JSX.

Creating a Function Component

For example:

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

Here, Welcome is a React component.

The function returns:

<h1>Welcome to React!</h1>

This JSX describes what should appear in the user interface.

Understanding the Component

Let’s break the component into its important parts.

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

Component Name

Welcome

The component is named Welcome.

React component names should begin with an uppercase letter.

Correct:

function Welcome() {
  return <h1>Welcome</h1>;
}

Incorrect:

function welcome() {
  return <h1>Welcome</h1>;
}

Using an uppercase name helps React distinguish a user-defined component from regular HTML elements.

For example:

<Welcome />

is treated as a React component, while:

<h1>

is treated as an HTML element.

The return Statement

The component returns JSX:

return <h1>Welcome to React!</h1>;

The returned JSX represents the user interface that React should render.

A component can return more complex JSX as well:

function Welcome() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>This is my first React component.</p>
    </div>
  );
}

The parentheses are not required in every situation, but they make multiline JSX easier to read.

Components Are Reusable

One of the most important benefits of components is reusability.

For example:

function Button() {
  return <button>Click Me</button>;
}

You can use the component multiple times:

function App() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

Instead of writing the button markup three times, you define the component once and reuse it.

This becomes extremely valuable when applications contain dozens or hundreds of similar interface elements.

Creating a Component File

As your application grows, it is usually better to place reusable components in separate files.

Inside the src directory, create a folder called:

components

Your project can now look like:

src/
├── components/
│   └── Welcome.jsx
├── App.jsx
├── main.jsx
└── index.css

Inside Welcome.jsx, write:

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

export default Welcome;

You have now created your first separate React component.

Component Naming Convention

React projects commonly use PascalCase for component names and component files.

Examples:

Navbar.jsx
Header.jsx
Footer.jsx
ProductCard.jsx
UserProfile.jsx
LoginForm.jsx

Using PascalCase makes components easier to identify throughout a project.

Image Placement: Creating Your First Component

Place this image immediately after explaining the first component.

Create a clean 16:9 visual showing:

src/
└── components/
    └── Welcome.jsx
             ↓
      function Welcome()
             ↓
        <h1>Welcome</h1>

The image should visually explain that a component is a JavaScript function that returns JSX.

Caption:
The basic structure of a React function component.

Alt text:
React function component returning JSX from a Welcome component

Render Your First Component

Creating a component is only the first step. The component must also be used somewhere in the application’s component tree so React can render it.

Open:

src/App.jsx

Import your component:

import Welcome from "./components/Welcome";

Then use it inside the App component:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

export default App;

When the application runs, React renders the Welcome component inside App.

The relationship looks like this:

App
 ↓
Welcome
 ↓
<h1>Welcome to my React application!</h1>

What Does <Welcome /> Mean?

This:

<Welcome />

looks similar to an HTML element, but it is actually a React component.

React sees the uppercase Welcome and understands that it refers to a component defined in your JavaScript code.

For example:

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

When you write:

<Welcome />

React renders the JSX returned by the Welcome component.

Conceptually:

<Welcome />
     ↓
Welcome()
     ↓
<h1>Hello React!</h1>
     ↓
Browser UI

Rendering Flow

The rendering process can be simplified as:

index.html
     ↓
#root
     ↓
main.jsx
     ↓
<App />
     ↓
<Welcome />
     ↓
<h1>Hello React!</h1>
     ↓
Browser

The main.jsx file normally renders the App component into the root DOM element.

For example:

createRoot(document.getElementById("root")).render(
  <App />
);

Then App can render other components.

This is how React applications gradually form a hierarchy of components.

Image Placement: Rendering Your First Component

Place the image after the rendering-flow explanation.

Show a visual sequence:

main.jsx
   ↓
<App />
   ↓
<Welcome />
   ↓
Welcome component
   ↓
Browser

Use arrows to clearly show the direction of rendering.

Caption:
React renders the App component and its child components to create the user interface.

Alt text:
React rendering App and Welcome components to the browser

Modify Your First React App

Now that your first component is running, you can modify the application.

Open:

src/components/Welcome.jsx

Change the component to:

function Welcome() {
  return (
    <section>
      <h1>Welcome to My React App</h1>
      <p>I am learning how to build user interfaces with React.</p>
    </section>
  );
}

export default Welcome;

Save the file and check your browser.

If your Vite development server is running, the application should update automatically. This development experience is one of the reasons modern React tooling is productive. Vite provides Hot Module Replacement during development, allowing changes to appear without requiring a full manual browser refresh in many cases.

Adding CSS

You can also style your component.

For example:

function Welcome() {
  return (
    <section className="welcome">
      <h1>Welcome to My React App</h1>
      <p>I am learning React.</p>
    </section>
  );
}

export default Welcome;

Then add CSS:

.welcome {
  padding: 2rem;
  text-align: center;
}

.welcome h1 {
  margin-bottom: 0.5rem;
}

.welcome p {
  font-size: 1.1rem;
}

Notice that React uses:

className

instead of:

class

This is because JSX uses JavaScript syntax, and class is a JavaScript keyword. Therefore, JSX uses className for CSS classes.

Your First Modified Application

Your project might now look like:

my-react-app/
│
├── public/
│
├── src/
│   ├── components/
│   │   └── Welcome.jsx
│   │
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
│
├── package.json
└── vite.config.js

Your App.jsx might contain:

import Welcome from "./components/Welcome";

function App() {
  return (
    <main>
      <Welcome />
    </main>
  );
}

export default App;

Your Welcome.jsx:

function Welcome() {
  return (
    <section>
      <h1>Welcome to My React App</h1>
      <p>I am learning how to build user interfaces with React.</p>
    </section>
  );
}

export default Welcome;

This is already a small component-based React application.

Create Multiple Components

Real-world applications rarely consist of a single component. Instead, interfaces are divided into multiple components, with each component responsible for a specific part of the user interface.

For example, a simple website might contain:

Header
Navbar
Hero
About
Services
Contact
Footer

Each part can become a separate React component.

Create the following structure:

src/
├── components/
│   ├── Header.jsx
│   ├── Hero.jsx
│   ├── About.jsx
│   └── Footer.jsx
│
├── App.jsx
└── main.jsx

Header Component

Create:

src/components/Header.jsx

Add:

function Header() {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

export default Header;

Hero Component

Create:

src/components/Hero.jsx

Add:

function Hero() {
  return (
    <section>
      <h2>Build Something Amazing</h2>
      <p>Welcome to my React application.</p>
    </section>
  );
}

export default Hero;

About Component

Create:

src/components/About.jsx

Add:

function About() {
  return (
    <section>
      <h2>About Us</h2>
      <p>
        We create modern and interactive web applications.
      </p>
    </section>
  );
}

export default About;

Footer Component

Create:

src/components/Footer.jsx

Add:

function Footer() {
  return (
    <footer>
      <p>© 2026 My Website</p>
    </footer>
  );
}

export default Footer;

Combining Multiple Components

Now import all four components into App.jsx:

import Header from "./components/Header";
import Hero from "./components/Hero";
import About from "./components/About";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />
      <Hero />
      <About />
      <Footer />
    </div>
  );
}

export default App;

The browser will display all four components as part of the same application.

The important point is that App does not need to contain all of the markup itself. Instead, it combines smaller components.

This is one of the fundamental ideas behind React.

Why Use Multiple Components?

Breaking an interface into components provides several advantages.

Benefit	Explanation
Reusability	A component can be used in multiple locations.
Maintainability	Smaller components are generally easier to understand and modify.
Organization	Different parts of the application can have their own files and responsibilities.
Collaboration	Multiple developers can work on different components more easily.
Scalability	A component-based structure makes it easier to expand an application.

Image Placement: Multiple Components

Place this infographic after the multiple-components explanation.

Show:

                 App
                  │
       ┌──────────┼──────────┐
       ↓          ↓          ↓
    Header      Hero       About
                              │
                              ↓
                           Footer

Use actual component cards such as <Header />, <Hero />, <About />, and <Footer />.

Caption:
React applications can be divided into smaller reusable components and combined to create complete interfaces.

Alt text:
React application divided into Header Hero About and Footer components

Import Components

A component defined in one file cannot automatically be used in another file. You need to export the component from its file and import it where you want to use it.

For example, suppose you have:

src/
└── components/
    └── Header.jsx

Inside Header.jsx:

function Header() {
  return <h1>My Website</h1>;
}

export default Header;

Then inside App.jsx:

import Header from "./components/Header";

Now you can use:

<Header />

The complete process is:

Header.jsx
     ↓
export default Header
     ↓
App.jsx
     ↓
import Header
     ↓
<Header />

Understanding the Import Path

Consider:

import Header from "./components/Header";

The path:

./components/Header

means that the module is located inside the components folder relative to the current file.

If App.jsx is inside src:

src/
├── App.jsx
└── components/
    └── Header.jsx

then:

./components/Header

is the correct relative path.

Common Import Paths

Project Structure	Import
Same folder	./Header
Child folder	./components/Header
Parent folder	../Header
Parent’s child folder	../components/Header

Understanding relative paths is important because React applications frequently contain many files and folders.

Export Components

There are two common ways to export components in JavaScript modules:

• Default exports
• Named exports

Both are useful, but they have different syntax and import behavior.

Default Export

A default export can be written as:

function Header() {
  return <h1>My Website</h1>;
}

export default Header;

You can then import it using:

import Header from "./components/Header";

The imported name can technically be different:

import SiteHeader from "./components/Header";

However, using the component’s actual name is usually clearer:

import Header from "./components/Header";

Named Export

A named export can be written as:

export function Header() {
  return <h1>My Website</h1>;
}

Then import it using curly braces:

import { Header } from "./components/Header";

The name must match the exported name.

Default vs Named Exports

Default Export	Named Export
export default Header	export { Header }
Import without {}	Import with {}
import Header from "./Header"	import { Header } from "./Header"
One default export per module	Multiple named exports are allowed

For beginners, default exports are often straightforward for component files because each file commonly represents one primary component.

Multiple Named Exports

A single file can contain multiple named exports:

export function Header() {
  return <header>Header</header>;
}

export function Footer() {
  return <footer>Footer</footer>;
}

Then:

import { Header, Footer } from "./components/Layout";

You can use both components:

function App() {
  return (
    <>
      <Header />
      <Footer />
    </>
  );
}

export default App;

As applications become larger, developers often separate major components into their own files to keep the project organized.

Component Tree

One of the most important concepts to understand before moving into advanced React topics is the component tree.

A React application is composed of components that are arranged in a hierarchical structure.

For example:

App
├── Header
├── Navbar
├── Main
│   ├── Hero
│   ├── About
│   └── Services
└── Footer

This structure is called a component tree.

The component at the top is the root component of the application’s UI tree. Child components are rendered inside their parent components.

Understanding Parent and Child Components

Consider:

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

Here, App acts as the parent component.

Header, Main, and Footer are child components of App.

If Main contains additional components:

function Main() {
  return (
    <main>
      <Hero />
      <About />
    </main>
  );
}

then the structure becomes:

App
├── Header
├── Main
│   ├── Hero
│   └── About
└── Footer

This hierarchy is the foundation for understanding how data and events can move through a React application.

A Complete Component Tree Example

Imagine you are building an online store.

Your application could have:

App
│
├── Header
│   ├── Logo
│   └── Navigation
│
├── Main
│   ├── Hero
│   ├── ProductList
│   │   ├── ProductCard
│   │   ├── ProductCard
│   │   └── ProductCard
│   │
│   └── Newsletter
│
└── Footer

Each component has a specific responsibility.

Component	Responsibility
App	Controls the overall application structure
Header	Contains the website header
Navigation	Provides navigation links
ProductList	Displays a collection of products
ProductCard	Displays an individual product
Footer	Displays footer information

This approach allows complex interfaces to be constructed from relatively small pieces.

Image Placement: Component Tree

This is an important visual for the chapter. Place it immediately after introducing the component tree.

Create a professional 16:9 tree diagram:

                         App
                          │
          ┌───────────────┼───────────────┐
          ↓               ↓               ↓
        Header           Main           Footer
          │               │
      ┌───┴───┐       ┌───┼────────┐
      ↓       ↓       ↓   ↓        ↓
     Logo   Navbar   Hero Products Newsletter
                         │
                    ┌────┼────┐
                    ↓    ↓    ↓
                 Card  Card  Card

Use different visual levels to make parent-child relationships easy to understand.

Caption:
The component tree represents the hierarchical structure of a React application’s user interface.

Alt text:
React component tree showing parent and child components in an application

Why Component Trees Matter

Understanding component trees becomes especially important as you learn more advanced React concepts.

For example, later you will learn about:

• Props
• State
• Event handling
• Context
• Hooks
• Conditional rendering
• Lists
• Routing
• State management

Many of these concepts become easier to understand when you know which component is the parent and which components are its children.

Consider:

Parent Component
      ↓
    Props
      ↓
Child Component

A parent can pass information to a child through props.

Later, you will learn how child components can communicate with their parents using event handlers passed through props.

Understanding the component tree therefore provides the foundation for understanding React’s data flow.

Putting Everything Together

Let’s create a small React application using everything learned in this chapter.

Project Structure

src/
│
├── components/
│   ├── Header.jsx
│   ├── Hero.jsx
│   ├── About.jsx
│   └── Footer.jsx
│
├── App.jsx
├── index.css
└── main.jsx

Header.jsx

function Header() {
  return (
    <header>
      <h1>My React App</h1>
    </header>
  );
}

export default Header;

Hero.jsx

function Hero() {
  return (
    <section>
      <h2>Learn React</h2>
      <p>Build modern user interfaces with reusable components.</p>
    </section>
  );
}

export default Hero;

About.jsx

function About() {
  return (
    <section>
      <h2>About This App</h2>
      <p>
        This application demonstrates how React components
        work together.
      </p>
    </section>
  );
}

export default About;

Footer.jsx

function Footer() {
  return (
    <footer>
      <p>© 2026 My React App</p>
    </footer>
  );
}

export default Footer;

App.jsx

import Header from "./components/Header";
import Hero from "./components/Hero";
import About from "./components/About";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />
      <main>
        <Hero />
        <About />
      </main>
      <Footer />
    </div>
  );
}

export default App;

The component tree now looks like:

App
├── Header
├── Main
│   ├── Hero
│   └── About
└── Footer

This small example demonstrates one of the central ideas behind React: build the interface from independent components and combine them into a larger application.

Common Mistakes Beginners Make

Using Lowercase Component Names

Incorrect:

function header() {
  return <h1>Header</h1>;
}

Correct:

function Header() {
  return <h1>Header</h1>;
}

Use PascalCase for React component names.

Forgetting to Export the Component

If you create:

function Header() {
  return <header>Header</header>;
}

and then try to import it from another file, the module needs to expose the component.

Use:

export default Header;

Forgetting to Import the Component

If you write:

<Header />

inside App.jsx, you need to import Header if it is defined in another module:

import Header from "./components/Header";

Using an Incorrect File Path

If your structure is:

src/
├── App.jsx
└── components/
    └── Header.jsx

then this is correct:

import Header from "./components/Header";

But this is incorrect:

import Header from "./Header";

because Header.jsx is not directly inside src.

Forgetting the Closing Tag

Components must be written with valid JSX syntax.

Incorrect:

<Header>

Correct:

<Header />

For components that contain children:

<Header>
  <Navigation />
</Header>

the component needs a closing tag:

</Header>

Practical Exercise

Now create your own small React website.

Create these components:

Header
Navbar
Hero
About
Contact
Footer

Your folder structure should look like:

src/
└── components/
    ├── Header.jsx
    ├── Navbar.jsx
    ├── Hero.jsx
    ├── About.jsx
    ├── Contact.jsx
    └── Footer.jsx

Then import them into App.jsx:

import Header from "./components/Header";
import Navbar from "./components/Navbar";
import Hero from "./components/Hero";
import About from "./components/About";
import Contact from "./components/Contact";
import Footer from "./components/Footer";

function App() {
  return (
    <>
      <Header />
      <Navbar />
      <Hero />
      <About />
      <Contact />
      <Footer />
    </>
  );
}

export default App;

Run the application:

npm run dev

Then open the application in your browser.

Practice Challenge

After successfully creating the application, try changing the content of each component without modifying App.jsx.

This exercise helps you understand why component-based development is useful and how individual components can be changed independently.

Key Takeaways

After completing this chapter, you should understand:

• What a React component is
• How to create a function component
• Why React component names usually begin with uppercase letters
• How JSX is returned from a component
• How to render a component inside another component
• How to create multiple components
• How to organize components into separate files
• How to import components
• How to export components
• The difference between default and named exports
• What parent and child components are
• What a component tree represents
• How multiple components combine to form an application

The fundamental pattern to remember is:

Component
    ↓
Export
    ↓
Import
    ↓
Use
    ↓
Render
    ↓
Component Tree
    ↓
User Interface

React applications become much easier to understand once you stop thinking of the interface as one large page and start thinking of it as a collection of components working together.

Chapter Summary

Your first React application does not need to be complicated. A simple application can already demonstrate the fundamental architecture used by much larger React projects.

You created a component, exported it from its file, imported it into another component, rendered it in the application, and combined multiple components into a hierarchy.

The most important idea is that React applications are built by composing components:

                    App
                     │
          ┌──────────┼──────────┐
          ↓          ↓          ↓
       Header       Main       Footer
                     │
              ┌──────┼──────┐
              ↓      ↓      ↓
            Hero    About  Contact

Once you understand this structure, concepts such as props, state, hooks, events, routing, and state management become much easier to learn because they all build upon the component model.