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.

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.

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.

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