In this article, I am going to show how to create a responsive website using React
Let’s Start
npx create-react-app projectnameCreate images folder under src. we will store all images for this project.
Now we will install dependencies one by one
npm install react-router-dom
npm install bootstrap@next
npm install react-bootstrap@next bootstrap@5.1.0
npm i react-simple-typewriter
npm i react-wavifyNow we will create the required page one by one under src folder
- Home.jsx
- contact.jsx
- About.jsx
- Myservice.jsx
- Navigation.jsx
Note: Here you can see other files but please ignore those file which is not mentioned.
Now we will create Navbar, so go to the Navigation.jsx file and open it with any code editor then copy and past the below code.
Navigation.jsx
import React from 'react'
import { Navbar, Nav, Container } from 'react-bootstrap';
import { NavLink } from 'react-router-dom'
const navigation = () => {
return (
<>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand to="/">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavLink exact activeClassName="menu_active" to="/">Home</NavLink>
<NavLink activeClassName="menu_active" to="/service">Service</NavLink>
<NavLink activeClassName="menu_active" to="/about">About</NavLink>
<NavLink activeClassName="menu_active" to="/contact">Contact</NavLink>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
)
}
export default navigationFirst, we import React from react. it’s imported by default for all pages. we are using react-bootstrap for the navigation bar so, we have to import Navbar, Nav, Container from react-bootstrap as you can see we used that component under the navigation function. Now we used NavLink for redirecting the page import from react-router-dom and previously we have already installed this dependency.
Now go to the App.jsx file
import'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Navigation from './Navigation'
import { Redirect, Route, Switch } from 'react-router'
const App= ()=> {
return (
<>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/service" component={Myservice} />
<Route exact path="/contact" component={Contact} />
<Redirect to="/" />
</Switch>
</>
)
}
export default AppFirst, we have to import Navigation. jsx file because the navbar is required for all pages. then we import react-router
Switch :
Switches toggle the state of a single setting on or off. The switch is useful when we want users to toggle between any value, like iPhone Silent Button, etc. … We can use the Switch Component in ReactJS using the following approach
Route:
React Router is the standard routing library for React. From the docs: “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”
Redirect:
We can redirect using <Redirect> component by simply passing the route we want to redirect to and rendering the component. It already comes loaded in the react-router-dom library.
exact:
The exact param disables the partial matching for a route and makes sure that it only returns the route if the path is an EXACT match to the current url. The docs explain exact in detail and give other examples. Then you have to put the exact keyword to the Route which its path is also included by another Route’s path.
Note: we have added some CSS for the Navigation file
index.css
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Mulish', sans-serif;
}
.navbar{
margin-bottom: 15px;
}
.navbar-brand{
font-size: 1.9rem !important;
color: #f03a0d;
padding-right: 150px;
}
.menu_active{
font-weight: bold;
border-bottom: 1px solid #565387;
}
.navbar a:hover{
color:#3498db !important;
}
.navbar a {
font-size: 1.3rem;
text-decoration: none;
padding: 10px;
}
@media (max-width: 991px){
.navbar-brand{
font-size: 1.5rem !important;
padding-right: 0% !important;
}
.menu_active{
font-weight: bold;
border-bottom: none;
}
}
/* #Main Landing Section */
#header h1{
margin: 0 0 10px 0;
/* margin-top: 150px; */
font-size: 48px;
font-weight: 700;
color: black;
margin-top: 150px;
}
#header .brand-name {
color:#3498db;
}
#header h2{
color:#484848;
font-size: 24px;
}
#header .btn-get-started{
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 30px;
border-radius: 50px;
transition: 0.5s;
color: #3498db;
border: 2px solid #3498db;
text-decoration: none;
}
#header .btn-get-started:hover{
background: #3498db;
color: #fff;
}
.btn-get-service{
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 30px;
border-radius: 50px;
transition: 0.5s;
color: #3498db;
border: 2px solid #3498db;
text-decoration: none;
margin: 0 auto;
display: block;
}
.btn-get-service:hover{
background: #3498db;
color: #fff;
}
.wave{
margin-top: -100px;
}
.Typewriter{
display: flex;
justify-content: center;
}
.header-img{
text-align: right;
}
#header .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
@-webkit-keyframes up-down{
0%{
transform: translateY(10px);
}
100%{
transform: translateY(-10px);
}
}
@keyframes up-down{
0%{
transform: translateY(10px);
}
100%{
transform: translateY(-10);
}
}
@media (max-width: 991px){
#header h1{
/* font-size: 5.5rem !important; */
margin-top: 0px !important;
}
}
Now go to your Common.js and paste the below code
Common.js
import React from 'react'
// import web from '../src/images/img2.svg'
import { Row, Col, Container } from 'react-bootstrap';
import { NavLink } from 'react-router-dom'
const Common = (props) => {
return (
<>
<Container id="header">
<Row>
<Col>
{/* <div className="col-10 mx-auto"> */}
<div className="test">
<h1>{props.name}<strong className="brand-name">Pallab Mallick</strong></h1>
<h2 className="my-3"> We are the team of talented developer making a wesites</h2>
</div>
<div className="mt-3">
<NavLink to={props.visit} className="btn-get-started"> {props.btnname}</NavLink>
</div>
{/* </div> */}
</Col>
<div className="col-lg-6 order-1 order-lg2 header-img">
<Col> <img src={props.imgsrc} className="img-fluid animated" alt="home img" /></Col>
</div>
</Row>
</Container>
</>
)
}
export default CommonHere we don’t want to write the same code for different pages that’s why we have created Common.jsx file and used props to get the data. same we import reac, react-bootstrap and react-router-dom react. In previous we have told why we are importing that dependency and how to install it.
Then go to About.jsx file and paste the below code
About.jsx
import React from 'react'
import Common from './Common'
import web from '../src/images/img2.svg'
const About = () => {
return (
<>
<Common name="Welcome to About Page" imgsrc={web} visit="/about" btnname="Contact Now" />
</>
)
}
export default AboutWe import Common file which we have created in previously. we import images from the images folder.
Go to Home.jsx file and paste the below code.
Home.jsx
import React from 'react'
import web from '../src/images/img2.svg'
import Common from './Common';
const Home = () => {
return (
<>
<Common name="Grow your business with" imgsrc={web} visit="/contact" btnname="Get Started" />
<Myservice />
</>
)
}
export default HomeOpen data.js file and paste the below code
data.js
import web from "../src/images/service.svg";
import app from "../src/images/s2.svg";
import android from "../src/images/s3.svg";
import digital from "../src/images/s4.svg";
import marketing from "../src/images/s5.svg";
import software from "../src/images/s6.svg";
const data = [
{ id:1,
img: web,
title: "Web Development",
desc:'desc 1'
},
{
id: 2,
img: app,
title: "Web Development",
desc: 'desc 2'
},
{ id:3,
img: android,
title: "Android Development",
desc:'desc 3'
},
{
id:4,
img: digital,
title: "Digital Development",
desc:'desc 4'
},
{
id:5,
img: marketing,
title: "Marketing Development",
desc:'desc 5'
},
{
id:6,
img: software,
title: "Software Development",
desc:'desc 6'
},
];
export default dataNow open Myservice.jsx file and paste the bellow code
Myservice.jsx
import React,{useState} from 'react';
import data from './data'
const Myservice = () => {
const [noOfElement, setnoOfElement] = useState(4);
const loadmore =()=>{
setnoOfElement(noOfElement + noOfElement);
}
const slice = data.slice(0, noOfElement);
return (
<section className="py-4 container">
<h1 className="my-4 display-5 text-center">Our Services</h1>
<div className="row justify-content-center">
{slice.map((item, index) => {
return (
<div className="col-11 col-md-6 col-lg-3 mx-0 mb-4">
<div className="card p-0 overflow-hidden h-100 shadow">
<img src={item.img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{item.title}</h5>
<p className="card-text">{item.desc}</p>
</div>
</div>
</div>
)
})}
</div>
<button className="btn-get-service"
onClick={()=> loadmore()}
>
Lodemore
</button>
</section>
);
};
export default Myservice
Go to App.jsx and import and link to the following
import Myservice from './Myservice'
<Route exact path="/service" component={Myservice} />If any questions you can ask me in the comments section and I will provide the full source code
