Step 5

There are many ways to structure your React app files. The choice also affects how you modularize your application. Moreover, it reflects how you think in React!

I like to make a distinction between "components" and "pages." For me, a component is a piece of UI that you can reuse across your application. You put components together (like lego pieces) to build pages. A page encapsulates the layout and presentation of a "UI view" in your application. Technically, a "page" is a React component. However, its purpose is different; some developers like to call pages "presentational components."

Let's revisit the wireframes for our application.

We have at least two pages: a landing page and another to add notes. Moreover, we can think of at least two components: a search bar and one to display each note.

Let's structure the src folder as follows:

src
├── App.js
├── components
│   ├── Note.js
│   └── Search.js
├── index.js
└── pages
    ├── AddNote.js
    └── DisplayNotes.js

Add a placeholder function component for each file inside the components and pages folders.

function MyComponent () {
  return <>MyComponent</>;
}

export default MyComponent;

Rename MyComponent accordingly.