How to Make a Responsive Website in React JS from Scratch

By
Asif Ali
-
0

hey everybody, I hope you are fine today we are going to learn how to make a responsive website in React JS from scratch. Making a responsive website is crucial in the present-day world, the place customers enter websites from units of various display sizes.

React JS, a well-liked JavaScript library for constructing personal interfaces, gives a versatile basis for building responsive websites. Right here’s step-by-step information on making a responsive website in React JS from scratch.

A responsive website adjusts its structure and content material dynamically to go well with completely different display sizes and resolutions. Whether or not a person visits your website on a smartphone, pill, or desktop, the website ought to present an optimum viewing and interplay expertise. Key components of responsiveness embody versatile layouts, scalable photos, and adaptive navigation.

Make a Responsive Website in React JS

Sketch a fundamental structure for your website, together with sections corresponding to headers, navigation bars, content material areas, and footers. Decide how these components ought to seem on completely different units, corresponding to cellular, pill, and desktop screens.

Make a Responsive Website in React JS

I’ve been consistently creating a video tutorial on each project which I shared on my site. The video is helpful for everyone you can easily understand the things that are used to build a project. So, I’m going to share with you the video that will help you to make a responsive website in React js.

I hope you’ve watched the video to the end and you’ve learned many new things from the tutorial, you can find my source codes that are used below.

Setting Up React

Set up React and create a brand new mission. React makes use of a component-based structure, which lets you break the website into reusable components. These elements make it simpler to handle and elegant completely different sections of the website. I’m going to share with you each section’s codes on below.

You May Also Like:

Here is the App.jsx file inside that has many components that are used to build the complete layout. So, follow my codes on blow.

import React from "react";
import Showcase from "./components/Showcase";
import Readtogather from "./components/Readtogather";
import Notyour from "./components/Notyour";
import Yourtech from "./components/Yourtech";
import Membership from "./components/Membership";
import About from "./components/About";
import Footer from "./components/Footer";

function App() {
  return (
    <div className="container">
      <Showcase />
      <Readtogather />
      <Notyour />
      <Yourtech />
      <Membership />
      <About />
      <Footer />
    </div>
  );
}

export default App;

First of All, you need to make a one-by-one component and include it inside the App.jsx file. Let’s look at the other component codes. The First one is <Showcase/> component which used to display the image and content in the website.

import React from "react";
import Logo from "../assets/images/logo.svg";
import ShowcaseImage from "../assets/images/image-hero-desktop.webp";
import Users from "../assets/images/image-avatars.webp";
import Ratings from "./Ratings";

function Showcase() {
  return (
    <header>
      <nav>
        <img src={Logo} alt="" />
      </nav>
      <main>
        <div className="leftContent">
          <h2>Join the ultimate tech book club</h2>
          <p>
            Turn your reading time into learning time with fellow tech
            enthusiasts. Get curated recommendations, join vibrant discussions,
            and level up your skills one chapter at a time.
          </p>
          <button>REVIEW MEMBERSHIP OPTIONS</button>
          <div className="imgRating">
            <img src={Users} alt="" />
            <div className="ratings">
              {Array.from({ length: 5 }, () => (
                <Ratings />
              ))}
              <p>200+ developers joined already</p>
            </div>
          </div>
        </div>
        <div className="rightContent">
          <img src={ShowcaseImage} alt="" />
        </div>
      </main>
    </header>
  );
}

export default Showcase;

Once you do that, the next thing you need to make another component namely <Notyour/>, then paste the codes which mentioned below.

import React from "react";
import ReadImage from "../assets/images/image-not-average-desktop.webp";
import languages from "../assets/images/logos-tech.svg";

function Notyour() {
  return (
    <div className="Notwrapper">
      <div className="rightContent">
        <h2>Not your average book club</h2>
        <p>
          Connect with a community that speaks your language - from Python to
          TypeScript and everything in between. Our discussions blend technical
          depth with practical applications.
        </p>
      </div>
      <div className="leftContent">
        <img src={ReadImage} alt="" />
        <div className="overlay_img">
          <img src={languages} alt="" />
        </div>
      </div>
    </div>
  );
}

export default Notyour;

Guys, your react websites have completed two sections, let’s look at another component namely <Yourtech/>. 

import React from "react";
import Steps from "./Steps";
import arryImg from "../assets/images/pattern-arrow.svg";

function Yourtech() {
  return (
    <div className="tech_wrapper">
      <h2>Your tech reading Journey</h2>
      <div>
        <ul className="steps">
          <Steps
            num={1}
            img={arryImg}
            membership={"Choose your membership tier"}
          />
          <Steps
            num={2}
            img={arryImg}
            membership={"Get your monthly book selection"}
          />
          <Steps
            num={3}
            img={arryImg}
            membership={"join our discussion forums"}
          />
          <Steps
            num={4}
            img={arryImg}
            membership={"attend exclusive meetups"}
          />
        </ul>
      </div>
    </div>
  );
}

export default Yourtech;

Inside the <Yourtech/> component have another component namely <Steps/> you need to make it on use blow codes.

import React from "react";
import ArrayImg from "./ArrayImg";

function Steps({ num, img, membership }) {
  return (
    <li>
      <p className="numbers">{num}</p>
      <ArrayImg img={img} />
      <p>{membership}</p>
    </li>
  );
}

export default Steps;

Let’s look at the <Membership/> component codes.

import React from "react";
import Memberbox from "./Memberbox";

function Membership() {
  return (
    <div className="membership_wrapper">
      <h2>Membership Options</h2>
      <div className="boxes">
        <Memberbox
          h_heading={"Starter"}
          price={"19 / Month"}
          details={"1 book /month"}
          services={"online forums"}
          btn={"Subscribe Now"}
        />
        <Memberbox
          h_heading={"Pro"}
          price={"29 / Month"}
          details={"2 book /month"}
          services={"Virtual Meetups"}
          btn={"Subscribe Now"}
        />
        <Memberbox
          h_heading={"Enterprise"}
          price={"Custom"}
          details={"Team Access"}
          services={"Private sessions"}
          btn={"TALK TO US"}
        />
      </div>
    </div>
  );
}

export default Membership;

Inside the membership have another <Memberbox/> component that helps us to save the repetition inside the codes.

import React from "react";
import Memberbox from "./Memberbox";

function Membership() {
  return (
    <div className="membership_wrapper">
      <h2>Membership Options</h2>
      <div className="boxes">
        <Memberbox
          h_heading={"Starter"}
          price={"19 / Month"}
          details={"1 book /month"}
          services={"online forums"}
          btn={"Subscribe Now"}
        />
        <Memberbox
          h_heading={"Pro"}
          price={"29 / Month"}
          details={"2 book /month"}
          services={"Virtual Meetups"}
          btn={"Subscribe Now"}
        />
        <Memberbox
          h_heading={"Enterprise"}
          price={"Custom"}
          details={"Team Access"}
          services={"Private sessions"}
          btn={"TALK TO US"}
        />
      </div>
    </div>
  );
}

export default Membership;

Now we are almost done in the react components let’s see the <About/> component’s code.

import React from "react";
import Ratings from "./Ratings";

function About() {
  return (
    <div className="about_wrapper">
      <div className="stars">
        {Array.from({ length: 5 }, () => (
          <Ratings />
        ))}
      </div>
      <div className="about">
        <h3>
          "This book club transformed my technical reading from a solitary
          activity into an enriching community experience. The discussions are
          gold!"
        </h3>
        <p>Sarah Chen, Software Architect</p>
      </div>
    </div>
  );
}

export default About;

Inside that have another component <Rating/> let’s see the codes on below.

import React from "react";
import Rating from "../assets/images/icon-star.svg";

function Ratings() {
  return (
    <>
      <img src={Rating} alt="" />
    </>
  );
}

export default Ratings;

Finally, we have a <Footer/> codes on blow.

import React from "react";
import Users from "../assets/images/image-avatars.webp";
import Ratings from "./Ratings";
import bluesky from "../assets/images/logo-bluesky.svg";
import linkedIn from "../assets/images/logo-linkedin.svg";

function Footer() {
  return (
    <div className="footer_wrapper">
      <div className="footer_header">
        <h2>Ready to debug your reading lists?</h2>
        <button>REVIEW MEMBERSHIP OPTION</button>
        <div className="imgRating">
          <img src={Users} alt="" />
          <div className="ratings">
            {Array.from({ length: 5 }, () => (
              <Ratings />
            ))}
            <p>200+ developers joined already</p>
          </div>
        </div>
      </div>
      <div className="footer_body">
        &copy; 2025 | OnlineITtuts;
        <div className="social_icons">
          <img src={bluesky} alt="" />
          <img src={linkedIn} alt="" />
        </div>
      </div>
    </div>
  );
}

export default Footer;

Incorporating a CSS Framework or Library

Utilizing a CSS framework like TailwindCSS, Bootstrap, or Materials-UI can velocity up the method of constructing a responsive website. These frameworks present pre-built courses and elements designed for responsiveness, corresponding to grids, buttons, and navigation menus. Alternatively, you’ll be able to write customized CSS utilizing media queries for better flexibility and management.

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Martian+Mono:[email protected]&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primaryColor: #062630;
  --secondaryColor: #385159;
  --halfWhite: #e6e1df;
  --lightGray: #faf5f3;
  --lightGray100: #ffffff;
  --OrgangeColor: #fea36f;
  --lightOrange: #fff5ef;
  --lightOrgange50: #fff5ef;
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

body {
  font-family: "inter";
}

header {
  background: url("./assets/images/pattern-light-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 70vh;
}

header nav {
  margin: 2rem 0;
}

main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

h2 {
  font-size: 3.5rem;
  margin: 2rem 0;
  font-family: "Martian Mono", sans-serif;
  color: var(--primaryColor);
}

main .leftContent p {
  font-size: 1.2rem;
  line-height: 1.8;
}

main .rightContent img {
  width: 100%;
  border-radius: 10px;
}

main .leftContent button {
  background-color: var(--lightOrgange50);
  outline: none;
  border: 1px solid var(--primaryColor);
  padding: 1rem 2rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  margin: 1rem 0;
  transition: all 0.3s ease-in-out;
}

main .leftContent button:active {
  transform: scale(0.9);
}

main .leftContent .imgRating {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
}

/* ===============Togather============== */
.Readwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6rem 0;
  gap: 14rem;
}

.Notwrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6rem 0;
  gap: 14rem;
  position: relative;
}

.Readwrapper .leftContent img,
.Notwrapper .leftContent img {
  width: 100%;
  border-radius: 10px;
}

.Readwrapper .rightContent ul {
  margin: 2rem 0;
}

.Readwrapper .rightContent ul li {
  margin: 1rem 0;
  font-size: 1.2rem;
}

.Notwrapper .rightContent p {
  line-height: 1.5;
}

.Notwrapper .overlay_img {
  position: absolute;
  bottom: 50px;
  right: 520px;
}

/* ============Tech========== */
.tech_wrapper {
  background: url("./assets/images/pattern-light-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 50vh;
  margin: 6rem 0;
  background-color: var(--lightOrange);
  border-radius: 10px;
  padding: 1rem 2rem;
}

.tech_wrapper h2 {
  margin: 4rem 0;
  text-align: center;
}

.tech_wrapper .steps {
  display: flex;
  justify-content: center;
  gap: 6rem;
  position: relative;
}

.tech_wrapper ul li {
  font-family: "Martian Mono", sans-serif;
  list-style-type: none;
  width: 180px;
}

.tech_wrapper .numbers {
  border: 1px solid var(--primaryColor);
  text-align: center;
  width: 30px;
  font-size: 1.5rem;
  margin: 1rem 0;
}

.tech_wrapper .arr_img {
  position: absolute;
  top: 12px;
  left: 250px;
}

.tech_wrapper .arr_img2 {
  position: absolute;
  top: 12px;
  left: 550px;
}

.tech_wrapper .arr_img3 {
  position: absolute;
  top: 12px;
  left: 850px;
}

/* ==============Membership============ */
.membership_wrapper {
  margin: 6rem 0;
}

.membership_wrapper h2 {
  text-align: center;
  margin-bottom: 6rem;
}

.membership_wrapper .boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.membership_wrapper .box {
  border: 1px solid var(--halfWhite);
  border-radius: 10px;
  padding: 2rem;
  width: 350px;
  background-color: var(--secondaryColor);
  color: var(--halfWhite);
}

.membership_wrapper .box:nth-child(2) {
  background-color: var(--OrgangeColor);
  color: var(--primaryColor);
  transform: scale(1.2);
}

.membership_wrapper .headers h3 {
  font-family: "Martian Mono", sans-serif;
}

.membership_wrapper .price {
  display: flex;
  font-family: "Martian Mono", sans-serif;
  border-bottom: 1px solid var(--lightGray);
  padding: 1rem 0;
}

.membership_wrapper ol li {
  list-style-type: none;
  margin: 1rem 0;
}

.membership_wrapper button {
  outline: none;
  font-family: inherit;
  padding: 0.7rem 3rem;
  border: none;
  background-color: var(--lightOrange);
  border-radius: 5px;
  width: 100%;
  margin-top: 1rem;
  cursor: pointer;
  transition: all 0.3s ease-in;
}

.membership_wrapper button:active {
  transform: scale(1.1);
}

/* ==================About================= */
.about_wrapper {
  margin: 6rem 0;
  text-align: center;
}

.about_wrapper .stars {
  margin: 2rem 0;
}

.about_wrapper .about h3 {
  font-family: "Martian Mono", sans-serif;
  font-size: 2.2rem;
  line-height: 1.5;
}

.about_wrapper .about p {
  margin: 2rem 0;
}

/* ===========Footer=========== */
.footer_wrapper {
  background: url("./assets/images/pattern-light-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 50vh;
  background-color: var(--secondaryColor);
  border-radius: 10px;
  padding: 1rem 2rem;
}

.footer_wrapper .footer_header {
  text-align: center;
  margin: 0 auto;
  width: 70%;
}

.footer_wrapper .footer_header h2 {
  color: var(--halfWhite);
  margin: 4rem 0;
}

.footer_wrapper .footer_header button {
  background-color: var(--lightOrange);
  outline: none;
  border: 1px solid var(--primaryColor);
  padding: 1rem 2rem;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  margin: 1rem 0;
  transition: all 0.3s ease-in;
}

.footer_wrapper .footer_header button:active {
  transform: scale(1.2);
}

.footer_wrapper .imgRating {
  color: var(--halfWhite);
}

.footer_wrapper .footer_body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--lightGray);
}

.footer_wrapper .footer_body {
  color: var(--halfWhite);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.footer_wrapper .footer_body img {
  margin: 0 0.5rem;
  cursor: pointer;
}

Building a Flexible Layout

Design the structure of your website utilizing containers, rows, and columns. Make sure that your structure adjusts fluidly through the use of percentages or relative items like “em” and “rem” as an alternative to fastened pixel values. This flexibility ensures that components scale appropriately on completely different display sizes.

Navigation is a crucial ingredient of any website. On bigger screens, a horizontal navigation bar may fit properly, however, on smaller units, a collapsible menu or a hamburger icon is perhaps extra applicable. Plan how the navigation transitions between completely different display sizes to ensure usability.

Use photos and movies that scale gracefully with display sizes. This may be achieved by setting their width to a share of their container or utilizing the “object-fit” property in CSS. Moreover, optimize photos to scale back file sizes without sacrificing high quality, making certain sooner load occasions for customers on cellular networks.

Adding Breakpoints

Media queries in CSS permits you to apply particular types based mostly on the machine’s display dimension. Use them to regulate font sizes, padding, margins, and different design components for various units. For instance, you’ll be able to outline types for small screens (as much as 600px), medium screens (600px to 1024px), and enormous screens (1024px and above).

@media (max-width: 1024px) {
  h2 {
    font-size: 3.2;
  }

  main .leftContent p {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  /* ===============Togather============== */
  .Readwrapper {
    gap: 4rem;
  }

  .Readwrapper h2,
  .Notwrapper h2 {
    font-size: 2.5rem;
  }

  .Readwrapper .rightContent ul li {
    font-size: 1.1rem;
  }

  .Notwrapper {
    gap: 4rem;
  }

  .Notwrapper .overlay_img {
    position: absolute;
    bottom: 50px;
    right: 320px;
  }

  /* ============Tech========== */
  .tech_wrapper h2 {
    margin: 3rem 0;
    font-size: 3rem;
    text-align: center;
  }

  .tech_wrapper .steps {
    display: flex;
    justify-content: center;
    gap: 4rem;
    position: relative;
  }

  .tech_wrapper ul li {
    width: 100%;
  }

  .tech_wrapper ul li p {
    font-size: 0.8rem;
  }

  .tech_wrapper .arr_img {
    position: absolute;
    top: 12px;
    left: 80px;
  }

  .tech_wrapper .arr_img2 {
    position: absolute;
    top: 12px;
    left: 350px;
  }

  .tech_wrapper .arr_img3 {
    position: absolute;
    top: 12px;
    left: 580px;
  }

  /* ==================About================= */
  .about_wrapper h3 {
    font-size: 2rem;
    line-height: 1.5;
  }

  /* ===========Footer=========== */
  .footer_wrapper .footer_header h2 {
    font-size: 3rem;
    color: var(--halfWhite);
    margin: 2rem 0;
  }
}

@media (max-width: 768px) {
  main {
    flex-direction: column;
  }

  /* ===============Togather============== */
  .Readwrapper {
    display: flex;
    flex-direction: column-reverse;
  }

  .Notwrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .Notwrapper .overlay_img {
    position: absolute;
    bottom: 50px;
    right: 80px;
  }

  /* ============Tech========== */
  .tech_wrapper {
    display: none;
  }

  /* ==============Membership============ */
  .membership_wrapper h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 6rem;
  }

  .membership_wrapper .boxes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
  }

  .membership_wrapper .box {
    border: 1px solid var(--halfWhite);
    border-radius: 10px;
    padding: 2rem;
    width: 320px;
    background-color: var(--secondaryColor);
    color: var(--halfWhite);
  }

  .membership_wrapper .box:nth-child(2) {
    transform: scale(1);
  }

  /* ==================About================= */
  .about_wrapper {
    margin: 6rem 0;
    text-align: start;
  }

  .about_wrapper h3 {
    font-size: 2rem;
    line-height: 1.2;
  }

  /* ===========Footer=========== */
  .footer_wrapper .footer_header h2 {
    font-size: 2rem;
  }
}

Breakpoints are predefined display widths that place the structure modifications to boost usability. These are sometimes set based mostly on frequent machine dimensions. For example:

  • Small screens (cellular): 320px to 600px
  • Medium screens (pill): 600px to 1024px
  • Giant screens (desktop): 1024px and above
@media (max-width: 425px) {
  h2 {
    font-size: 1.8rem;
  }

  main .leftContent p {
    font-size: 1rem;
    line-height: 1.5;
  }

  main .leftContent button {
    width: 100%;
  }

  main .leftContent .imgRating p {
    font-size: 0.8rem;
  }

  /* ===============Togather============== */
  .Readwrapper {
    margin: 4rem 0;
    gap: 2rem;
  }

  .Readwrapper h2,
  .Notwrapper h2 {
    font-size: 2.3rem;
  }

  .Notwrapper .overlay_img {
    display: none;
  }

  /* ==============Membership============ */
  .membership_wrapper h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .membership_wrapper .boxes {
    flex-direction: column;
    gap: 2rem;
  }

  .membership_wrapper .box {
    width: 100%;
  }

  /* ==================About================= */
  .about_wrapper .about h3 {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  /* ===========Footer=========== */
  .footer_wrapper .footer_header h2 {
    font-size: 1.5rem;
  }

  .footer_wrapper .footer_header {
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }
}

Make sure that your design stays cohesive and purposeful throughout these breakpoints. Testing the Website as soon as your website is built, check it on numerous units and display sizes. Moreover, check on bodily units to make sure of real-world usability.

Optimizing Efficiency

A responsive website mustn’t solely look good but additionally load rapidly. Decrease the usage of giant records data, scale back pointless scripts, and implement caching to enhance efficiency. Instruments like Google PageSpeed Insights can be used to establish and repair efficiency bottlenecks.

Conclusion

Making a responsive website in React JS requires considerate planning and design. By specializing in versatile layouts, adaptive navigation, and scalable media, you’ll be able to construct a website that delivers wonderful personal expertise throughout units.

Whether or not you’re concentrating on cellular or desktop customers, responsiveness ensures that your website stays accessible and purposeful for everybody. With React’s modular construction and suitable CSS methods, you’ll be able to construct a website that’s dynamic and responsive from scratch.

Previous articleCrud Operation in React JS
Asif Ali
Asif Ali
https://www.onlineittuts.com
"Hi, I'm Asif Ali, a developer with a passion for creating cool stuff with code. I've got a lot of experience making software that works well and solves problems. From coming up with ideas to actually building and testing them, I love every part of the process. I pay close attention to detail to make sure everything works smoothly. I enjoy working with different programming languages and collaborating with teams to turn ideas into real projects. I'm always learning and keeping up with the latest tech trends. My goal is to create useful and effective solutions that make a difference."
Facebook Twitter

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.