Creating Static Components: Building Your First React UI Layout

Previously in this course, we covered the essentials of Mastering JSX Syntax: Writing Declarative React Components. We moved beyond standard HTML to describe our UI as a tree of JavaScript functions.

Now, we’re going to take that knowledge and organize it. Instead of dumping all our code into a single file, we’ll learn to break our interface into reusable, maintainable functional components. This is the core of professional React development—building a clean, modular UI layout that scales as your project grows.

Defining Functional Components

A functional component in React is just a plain JavaScript function that returns JSX. If you can write a function, you can write a React component.

Here is the mental model: A component is a blueprint for a piece of your user interface. When React renders, it calls your function, receives the JSX, and updates the DOM to match.

JSX
// A simple functional component
function Header() {
  return (
    <header>
      <h1>Movie Browser</h1>
    </header>
  );
}

There are two strict rules for naming and defining components:

1. Capitalization: Always name your components with a capital letter (e.g., Header, not header). React treats lowercase tags as standard HTML elements and capitalized tags as custom components.
2. Return Value: A component must return valid JSX. If you need to return multiple elements, wrap them in a parent element or a React Fragment (<>...</>).

Structuring the App Layout

To build our movie browser, we need a standard React structure. We'll separate our concerns by creating a components directory. This keeps our root App.jsx clean and readable.

Let’s create our first two components: Header and Footer.

1. Creating the Header

Create a file named src/components/Header.jsx:

JSX
export default function Header() {
  return (
    <header style={{ padding: CE9178">'1rem', background: CE9178">'#333', color: CE9178">'#fff' }}>
      <h1>My Movie Browser</h1>
    </header>
  );
}

2. Creating the Footer

Create a file named src/components/Footer.jsx:

JSX
export default function Footer() {
  return (
    <footer style={{ marginTop: CE9178">'2rem', textAlign: CE9178">'center' }}>
      <p>&copy; 2023 Movie Browser Inc.</p>
    </footer>
  );
}

Exporting and Importing Components

In modern React, we use ES modules to share code. By using export default, we make the component available to be imported elsewhere.

Now, open your src/App.jsx file. We will import these components and assemble our basic UI layout:

JSX
import Header from CE9178">'./components/Header';
import Footer from CE9178">'./components/Footer';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to my movie app!</p>
      </main>
      <Footer />
    </div>
  );
}

export default App;

By organizing our code this way, we've successfully transitioned from a single-file script to a component-based architecture. If you need to change the header later, you only touch Header.jsx.

Hands-on Exercise: Build the Sidebar

To solidify this, let’s add a Sidebar component.

1. Create a new file src/components/Sidebar.jsx.
2. Define a function that returns a <nav> element with a list of links (e.g., "Home", "Popular", "Favorites").
3. Export it, import it into App.jsx, and place it inside the <main> container, next to your existing paragraph.

Common Pitfalls

• Forgetting the Export: If you define a component but forget export default, your App.jsx will throw an error saying the module cannot be found.
• Case Sensitivity: React is strict. If your file is header.jsx but you try to import Header, some build tools might complain, or you might run into issues when deploying to case-sensitive servers (like Linux). Always use PascalCase for component filenames.
• Returning Multiple Top-Level Elements: Remember, return (<div>...</div> <div>...</div>) is invalid. If you need two adjacent elements, wrap them in a single div or a Fragment: return (<><div>...</div><div>...</div></>).

Recap

We've moved from writing basic JSX to architecting a real application. By defining functional components, we’ve created modular, reusable pieces of UI. We used export and import to manage our React structure, ensuring that our App.jsx remains a clean entry point for our layout. This modularity is the foundation of everything else we will build in this course, including Introduction to Component-Based Architecture in React.

Up next: We will bring these static components to life by learning how to apply styles and make them look professional.