Before proceeding with the styles, we must consider file folder structuring and code organization. In the previous chapter, we touched on this topic. We already know that we need the following:

• Create a separate folder for each component;
• Create a jsx file for this component;
• Create a module.css file for this component;
• Combine them so the jsx file could know about styles.

What is next? To ensure clarity, we will develop a simple app to comprehend its organization.

Note

Full project code and live page can be found in the end of this chapter.

The components comprising our app include:

• The Bar component represents the app's navigation bar, consisting of a logo and various links;
• The Information component displays an image and accompanying text content;
• The Footer component represents the copyright and all rights reserved;
• The Section component serves as a behind-the-scenes element. It acts as a wrapper, centrally aligning all the content with the assistance of CSS;
• The App component represents the entire app. We will construct the whole project within the App.jsx file and import it into the main index.js file.

Organization

When organizing our files, we follow a structure where each component has its dedicated folder. We create a jsx file within each folder and a corresponding module.css file. This approach leads to the following structure:

How does index.js know about all the components?

As previously mentioned, we construct the entire project within the App.jsx file, and subsequently, we import and render that component (App component) in the index.js file.

import { createRoot } from "react-dom/client";
import App from "./App/App";

const root = createRoot(document.getElementById("root"));

root.render(<App />);

We import a file with the help of the import statement and the correct path to the file.

import <file_name> from "<file_path>";

Let's create some components to check the syntax.

App component

The App.jsx file is the entry point where we import and assemble all other components to build the project. This entails importing all the necessary components within the App.jsx file and structuring the app accordingly.

// Import of all components
import Section from "../Section/Section";
import Bar from "../Bar/Bar";
import Footer from "../Footer/Footer";
import Information from "../Information/Information";

// Creation of the whole app
const App = () => (
  <Section>
    <Bar />
    <Information />
    <Footer />
  </Section>
);

// Component export
export default App;

You may have observed that file exports are also crucial in addition to file imports. Proper exporting makes it possible to import a component into another file. Hence, including line 17 specifically for the App component serves the purpose of exporting it. This ensures that the App component is available for other parts of the codebase to import and utilize within the application. The syntax is:

export default <component_name>;

Section component

It serves as app wrapper. It gets children prop and render them in the div element. The div has some styles that were added with the help of Section.module.css file.

Section.jsx code:

// Import of the file with styles
import s from "./Section.module.css";

// Component
const Section = (props) => (
  <div className={s.container}>{props.children}</div>
);

// Export the component
export default Section;

Section.module.css code:

.container {
  width: 800px;
  margin: 0 auto;
  padding-left: 15px;
}

Bar component

The Bar component renders a specific markup and applies corresponding styles. The overall organization of this process remains consistent. We start by importing the CSS file associated with the component, then proceed to create the component itself, where we render the necessary markup and apply class names to achieve the desired styling. Finally, we export the component, ensuring its availability in other parts of the codebase.

Bar.jsx code:

// Import the file with styles
import s from "./Bar.module.css";

// Component
const Bar = () => (
  <div className={s.container}>
    <a href="###" className={s.logo}>
      Logo
    </a>
    <ul className={s.list}>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Home
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          About
        </a>
      </li>
      <li className={s.item}>
        <a href="###" className={s.link}>
          Contact
        </a>
      </li>
    </ul>
  </div>
);

// Export the component
export default Bar;

Bar.module.css code:

.container {
  background-color: lightcoral;
  padding: 0px 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  text-decoration: none;
  font-size: 28px;
  color: lightcyan;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

.logo:hover,
.logo:focus {
  color: lightsteelblue;
}

.list {
  list-style: none;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.item:not(:last-child) {
  margin-right: 50px;
}

.link {
  text-decoration: none;
  font-size: 20px;
  color: lightblue;
  padding-top: 30px;
  padding-bottom: 30px;
  display: block;
}

Note

To avoid overwhelming the chapter, we will not delve into a detailed analysis of the other components. This is because the process followed for each component is precisely the same. Instead, I encourage you to examine the complete project provided below thoroughly. Take the time to inspect each folder and open each component to understand its organization. This is crucial because as we progress further, additional components will be added. It is important that we do not overlook any details at this stage.

Full app code:

Note

To examine the project root, click on the slider on the left side of the interface to expand it, and in the top-left corner, you will find a burger button (represented by three horizontal lines). Clicking on the burger button will provide access to the project root, allowing you to explore the files and folders within the project.