Create React Application Using Multiple Components

Create React Application Using Multiple Components

Creating react application using multiple components is a simple and basic example. Using multiple components is easy to manage the layouts of the web applications. So, let’s have a look at how we can create react application using multiple components and how we can connect components with each other.

Suppose you are going to create a very big react application and that could have many pages. So in this case, you have to create multiple components. This means every repeatable or common section should have a different components file. By doing this, you don’t need to write a common section on every page of the application and you just can import that section.

In general, I would say even if it is a big application or small you should definitely create multiple components with separating the sections.

We will follow three steps to create react application using multiple components.

  • Create react application
  • Create separate components
  • Connect multiple components

We will go through each step one by one with code examples. So let’s have a look at the first step create react application.

Create React Application

First of all, we will create react application with default files and folder structure. To create a react application, your system must have installed the latest version of NPM / Node.js.

NodeJS is an open-source backend JavaScript runtime environment that executes the JavaScript code and it comes with NPM.

NPM is a node pack manager to manage the dependency files to install in our applications. So download the stable version of the node from the official website.

After download, install the nodejs and then open your terminal to check the installed version of nodejs and NPM. Use node -v and npm -v commands to check the version. If you get the version of both then it means you have successfully installed the nodejs and NPM.

So, to install the react application, first, you need to install the create-react-app global package using the following command.

Now, you are ready to install the react application. So run the following command to install the react application.

It will create a default folder and files structure to install the react application. After finishing the installation, run the npm start command in the root folder of the application to start it.

You can check in detail in our tutorial how to install reactjs and create an application?

Create separate components

In this step, we will create separate components of each page of the application and a common section in the application.

We will split our application layout into five different components. You can see the following list of different components.

  • Header Component
  • Navbar Component
  • Sidebar Component
  • Content Component (like Home, About, Contact)
  • Footer Component

Let’s create all components one by one. Before creating components, create the “Components” folder in the src folder. Then create all components in this folder because it will be easy to manage the structure of the application.

src/Components/Header.js

src/Components/Navbar.js

Recommend tutorial: Create navigation using the react-router

src/Components/Sidebar.js

src/Components/Home.js (Content component)

src/Components/Footer.js

You have created all the components. You can design them using the src/App.css or you can create a new custom CSS file and then import it into the component.

You can also use the inline style in react application component. For more detail, you can check our tutorial on how to inline style in reactjs?

Now let’s connect all react components in a single component.

Connect multiple components

In this step, we will connect all react components that we have created above in one single component. We will use the src/App.js file and import all components in this file.

See the following code format of the src/App.js file.

Now run the react application using the npm start command. The application will start on the default 3000 port. If you want to change this port then you can change it using the .env file and declare the PORT variable in it.

When you start the application then it will open automatically in the default browser of your system. If it’s not open then you can check your application using this link localhost:3000 (localhost:PORT).

That’s it!!!

Conclusion

So in this tutorial, you learned about create react application using multiple components. First, we installed the basic react application with the default structure, and then we have created the multiple components of each separated section.

Finally, we imported all the components into one single component and use them in the src/App.js file.

If you have any doubts please let me know in the comment section I’ll help you with that.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.