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
Way to Create React Application using Multiple Components
- Create react application
- Create separate components
- 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
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<div className="header">
<h1>Demo Application</h1>
<p>Demo application created in React App</p>
</div>
);
}
}
export default Header
src/pages/Navbar.js
import React, { Component } from 'react';
class Navbar extends Component {
render() {
return (
<div className="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" className="right">Contact</a>
</div>
);
}
}
export default Navbar
src/pages/Sidebar.js
import React, { Component } from 'react';
class Sidebar extends Component {
render() {
return (
<div className="side">
<h2>Arcu bibendum</h2>
<h5>Sit amet mattis vulputate</h5>
<div className="fakeimg" style={{ height: 200 }}>Image</div>
<p>Non blandit massa enim nec dui nunc mattis enim. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla..</p>
<h3>Massa enim</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div className="fakeimg" style={{ height: 60 }}>Image</div><br />
<div className="fakeimg" style={{ height: 60 }}>Image</div><br />
<div className="fakeimg" style={{ height: 60 }}>Image</div>
</div>
);
}
}
export default Sidebar
src/pages/Content.js
import React, { Component } from 'react';
class Content extends Component {
render() {
return (
<div className="main">
<h2>Lorem ipsum dolor</h2>
<h5>quam pellentesque, Dec 10, 2018</h5>
<div className="fakeimg" style={{ height: 200 }}>Image</div>
<p>Nisi vitae suscipit..</p>
<p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum. Ornare aenean euismod elementum nisi quis eleifend quam.</p>
<br />
<h2>Placerat vestibulum</h2>
<h5>elementum integer enim neque, Sep 21, 2018</h5>
<div className="fakeimg" style={{ height: 200 }}>Image</div>
<p>Bibendum est ultricies..</p>
<p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum.</p>
</div>
);
}
}
export default Content
src/pages/Footer.js
import React, { Component } from 'react';
class Footer extends Component {
render() {
return (
<div className="footer">
<h2>Footer</h2>
</div>
);
}
}
export default Footer
To apply style for application, we will add below style in App.css file.
src/App.css
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #269faf;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
After creating the components, your structure will be display look like below.
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
import React from 'react';
import './App.css';
import Header from './pages/Header';
import Navbar from './pages/Navbar';
import Content from './pages/Content';
import Sidebar from './pages/Sidebar';
import Footer from './pages/Footer';
function App() {
return (
<div>
<Header />
<Navbar />
<div className="row">
<Content />
<Sidebar />
</div>
<Footer />
</div>
);
}
export default App;
That’s it for your basic react application.
