• Techblog369, India
  • September 29, 2022

How to create PHP QR code and Save it to Database?

Hi In this Article I am going to show how to create QR code and save it to database also fetch QR Code in a Table Create a Page addqrcode.php in …

How to Send Multiple Files Attachment Mail using Laravel

Hi in this article i am going to show how to send multiple files attachment mail in Laravel. It’s simple example of Laravel send multiple attachment in mail. I explained simply …

In this article, I am going to show how to create a responsive website using React

Let’s Start

npx create-react-app projectname

Create 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-wavify

Now 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 navigation

First, 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 App

First, 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 Common

Here 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 About

We 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 Home

Open 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 data

Now 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

Author

admin@techblog369.in

Leave a Reply

Your email address will not be published.