Folder Structure

Function-based components

Throughout this course, we’ll use a component-based approach to separate the entire React app into individual components. This will help us organize our code more efficiently. The main point of utilizing React is to make code more readable and easier to arrange. Components are self-contained UI elements that can be used anywhere in our project. They’re similar to JavaScript functions in that they can be called from anywhere in the code and only require that arguments be passed. The two types of components are class-based and function-based. We’ll use a function-based approach because we’re using advanced React.

Folder structure

When creating components, it’s best if they only do one thing, similar to the suggested format of JavaScript functions. As previously stated, the components should be fully self-contained independent UI elements. There’s a common naming convention that must be followed while creating the components in React:

• Component file names should be capitalized.
• Component function names should also be capitalized.
• Components are mostly exported using the default export, whereas values and specific functions in the component can use a named export.

The following is an example of the application: