Create React Application using Multiple Components

This one is a basic example of the react application using multiple components. We are going to show you how to create a basic website layout in React. We will create a separate component of website and link with each other.

Creating a basic react application using multiple components, How to create a component in react application, Create a website in React JS. Project structure of React application.

Here we are going to create a basic layout of react application using multiple components like below.

Layout - Clue Mediator
Layout – Clue Mediator

Way to Create React Application using Multiple Components

  1. Create react application
  2. Create separate components
  3. Add multiple components in single component

1. Create react application

First, we have to create react application and for that, we used create-react-app npm package. Please check the link below for your reference.

Create React Application

2. Create separate components

We will split our layout into five different components listed below.

  • Header Component
  • Navbar Component
  • Sidebar Component
  • Content Component
  • Footer Component

Create folder name as “pages” to manage the structure of application and we will add all the components inside the folder.

src/pages/Header.js

src/pages/Navbar.js

src/pages/Sidebar.js

src/pages/Content.js

src/pages/Footer.js

To apply style for application, we will add below style in App.css file.

src/App.css

After creating the components, your structure will be display look like below.

React Application Structure - Clue Mediator
React Application Structure – Clue Mediator

There are lots of things to take care during the creation of react application but for now please make sure about the below things.

  • In react component “class” should be “className”
  • React component must have one parent element
  • The “style” prop expects a mapping from style properties to values, not a string. In other words please pass object in style attributes (see Content.js)

3. Add multiple components in single component

Import all components in App.js file and add it in below format.

src/App.js

That’s it for your basic react application.

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

4 Responses

  1. Rajdip says:

    Very easy explanation to implement it in step by step flow. It’s very useful for fresher developer to understand how components work in React JS.

    Keep it up.

  2. Gunjan says:

    It’s very useful and easy to learn. Keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *