In this tutorial, you will learn about how to make a website designing by ReactJS. Here we need to arrange all project assets in the folder structure. 

Project Start from the src folder. So, let's see the

Project Structure:

ecommerce <- Your Project name
  - public <- It's contents with index.html or public resources
  - src
    - app // Here put all Application js/ts and TSX/JSX codes
      - layouts
        - cta.tsx
        - display.tsx
        - footer-nav.tsx
        - footer.tsx
        - header.tsx
        - navbar.tsx
        - product.tsx
        - products.tsx

     - fonts // Some Fonts styles put here
       - Audiowide
       - ....
       - ....
     - images // All Project images here
       - banner.jpg
       - display.jpg
       - ....
       - ....
     - scss // All SCSS files put here
       - _fonts.scss
       - _header.scss
       - _navbar.scss

     - App.css // It's initial compiled file by node-scss
     - App.scss // It's a Global SCSS file where linked all scss files
     - App.test.tsx // It's a testing file, but we are not using this right now.
     - App.tsx // It's a main application file, here all app/*.tsx files linked here.
     - index.tsx // It is the main file of this project 
     - ...
     - ... // So many will be here. But don't need more discussed here.

  - ....
  - package.json // Here we can manage all project dependencies or build process management.
  - ....
  - .... 

After creating this project structure. we will know about the codes which are used here.

app/layouts/cta.tsx

export default function CTA(){
    return (
        <div className="call-to-action">
            <div className="container">
                <div className="row">
                    <div className="col-md text-center text-md-start">
                        <h2 className="text-yellow">Connect with us quickly</h2>
                    </div>
                    <div className="col-md text-center text-md-end">
                        <a className="icon-link" href="#"><i className="fas fa-map-marked"></i></a>
                        <a className="icon-link" href="#"><i className="fab fa-whatsapp"></i></a>
                        <a className="icon-link" href="#"><i className="fab fa-youtube"></i></a>
                        <a className="icon-link" href="#"><i className="fab fa-facebook"></i></a>
                        <a className="icon-link" href="#"><i className="fab fa-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>
    );
}

app/layouts/display.tsx

import img from '../../images/display2.jpg';

export default function Display() {
    return (
        <div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel">
            <div className="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div className="carousel-inner">
                <div className="carousel-item active">
                    <img src={img} className="d-block w-100" alt="Image 1" />
                </div>
                <div className="carousel-item">
                    <img src={img} className="d-block w-100" alt="Image 2" />
                </div>
                <div className="carousel-item">
                    <img src={img} className="d-block w-100" alt="Image 3" />
                </div>
            </div>
            <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                <span className="visually-hidden">Previous</span>
            </button>
            <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span className="carousel-control-next-icon" aria-hidden="true"></span>
                <span className="visually-hidden">Next</span>
            </button>
        </div>
    );
}

app/layouts/footer-nav.tsx

export default function FooterNav() {
    return(
        <div>
            <ul className="nav justify-content-center">
                <li className="nav-item">
                    <a className="nav-link text-yellow" href="#">Home</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link text-yellow" href="#">About</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link text-yellow" href="#">Terms and Condition</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link text-yellow" href="#">Privacy Policy</a>
                </li>
                <li className="nav-item">
                    <a className="nav-link text-yellow" href="#">Contact</a>
                </li>
            </ul>
        </div>
    );
}

app/layouts/footer.tsx

import FooterNav from './footer-nav';

export default function Footer(){
    return(
        <footer>
            <div className="container">
                <FooterNav />
            </div>
            <hr />
            <div className="container pb-4">
                <div className="row">
                    <div className="col-md">
                        <h5 className="text-md-start text-center">&copy; Copyright By example.com, 2021</h5>
                    </div>
                    <div className="col-md">
                        <ul className="nav justify-content-center justify-content-md-end">
                            <li className="nav-item">
                                <a className="nav-link text-yellow" href="#"><i className="fab fa-google"></i></a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link text-yellow" href="#"><i className="fab fa-youtube"></i></a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link text-yellow" href="#"><i className="fab fa-facebook"></i></a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link text-yellow" href="#"><i className="fab fa-twitter"></i></a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link text-yellow" href="#"><i className="fab fa-whatsapp"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="call-btn">
                <a className="btn btn-warning btn-circle" href="tel:+918786543432"><i className="fas fa-phone-alt"></i></a>
            </div>
        </footer>
    );
}

app/layouts/header.tsx

import banner from '../../images/banner.jpg';

export default function Header() {
    return (
        <header>
            <div className="bg-light">
                <div className="container">
                    <div className="row py-2">
                        <div className="col">
                            Mobile: 8778xxxx56
                        </div>
                        <div className="col text-end">
                            Email: info@mywebsite.com
                        </div>
                    </div>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-md-5 p-3">
                        <a href="/" className="logo">
                            <h1><span className="logo-front">My</span><span className="logo-end">Website</span></h1>
                            <p>This is the awasome website</p>
                        </a>
                    </div>
                    <div className="col">
                    <div className="ads-box">
                            <a href="#"><img src={banner} alt="ads-banner" /></a>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </header>
    );
}

app/layouts/navbar.tsx

export default function Navbar(){
    return(
        <nav className="navbar navbar-expand-lg navbar-light bg-yellow">
            <div className="container">
                {/* <a className="navbar-brand" href="#">Navbar</a> */}
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                            <a className="nav-link active" aria-current="page" href="#">
                            <i className="fas fa-home"></i> Home
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Product</a>
                        </li>
                        <li className="nav-item dropdown">
                            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a className="dropdown-item" href="#">Action</a></li>
                                <li><a className="dropdown-item" href="#">Another action</a></li>
                                <li><hr className="dropdown-divider" /></li>
                                <li><a className="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item">
                            <a className="nav-link" href="#">Cart(0)</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

app/layouts/product.tsx

import food from '../../images/food1.jpg';

export default function Product(props: any) {
    const data = <div dangerouslySetInnerHTML={{ __html:  
        `<span class="badge bg-primary">Primary</span>
        <span class="badge bg-secondary">Secondary</span>
        <span class="badge bg-success">Success</span>
        <span class="badge bg-danger">Danger</span>
        <span class="badge bg-warning text-dark">Warning</span>
        <span class="badge bg-info text-dark">Info</span>
        <span class="badge bg-light text-dark">Light</span>
        <span class="badge bg-dark">Dark</span>` 
    }} />

    return (
        <div className="product">
            <div className="card">
                <div className="card-image">
                    <img src={props.img || food} className="card-img-top" alt={props.title || 'Product'}></img>
                    <div className="btns-group">
                        <button className="p-3" onClick={ () => props.addToCart? props.addToCart(): null }><i className="fas fa-cart-plus"></i></button>
                        <button className="p-3" onClick={ () => props.addToFav? props.addToFav(): null }><i className="fas fa-heart"></i></button>
                    </div>
                </div>
                <div className="card-header">
                    <div className="row">
                        <div className="col">
                            {props.title || 'Product Title'}
                        </div>
                        <div className="col text-end">
                            <del className="text-danger">₹:{props.actualAmount || '300/-'}</del>&nbsp; | &nbsp;
                            <strong className="text-success">₹:{props.offerAmount || '100/-'}</strong>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    { props.children || data }
                </div> 
            </div>
        </div>
    );
}

app/layouts/products.tsx

import Product from './product';

export default function Products(){

    return(
        <div className="row">
            <div className="col-md-4 col-sm-6">
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
            </div>
            <div className="col-md-4 col-sm-6">
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
            </div>
            <div className="col-md-4 col-sm-6">
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://post.greatist.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
                <Product img="https://pbs.twimg.com/media/E2PSJMfXMAoaOUk.jpg" />
            </div>
        </div>
    );
}

Now we can use scss codes for this app designing.

scss/_fonts.scss

@font-face {
    font-family: 'Fuggles';
    src: url('./fonts/Fuggles/Fuggles-Regular.ttf');
}
@font-face {
    font-family: 'Libre_Franklin';
    src: url('./fonts/Libre_Franklin/LibreFranklin-VariableFont_wght.ttf');
}
@font-face {
    font-family: 'Pacifico';
    src: url('./fonts/Pacifico/Pacifico-Regular.ttf');
}
@font-face {
    font-family: 'Audiowide';
    src: url('./fonts/Audiowide/Audiowide-Regular.ttf');
}
@font-face {
    font-family: 'Courgette';
    src: url('./fonts/Courgette/Courgette-Regular.ttf');
}
@font-face {
    font-family: 'Merienda-Regular';
    src: url('./fonts/Merienda/Merienda-Regular.ttf');
}
@font-face {
    font-family: 'Merienda-Bold';
    src: url('./fonts/Merienda/Merienda-Bold.ttf');
}
@font-face {
    font-family: 'Sacramento';
    src: url('./fonts/Sacramento/Sacramento-Regular.ttf');
}

scss/_header.scss

.logo{
    @extend .text-center;
    @extend .text-md-start;
    text-decoration: none;
    p{
        font-family: 'Merienda-Regular';
        @extend .mb-0;
        color: black;
    }

    .logo-front{
        font-family: 'Courgette';
        color: rgb(252, 112, 19);
        text-shadow: -2px 2px 1px gray;
    }
    .logo-end{
        font-family: 'Courgette';
        color: rgb(86, 226, 86);
        text-shadow: -2px 2px 1px gray;
    }
}

.ads-box{
    box-sizing: content-box;
    @extend .h-100;
    @extend .d-flex;
}
.ads-box img{
    width: 100%;
    @extend .d-flex;
    @extend .align-items-center;
    @extend .my-2;
}

scss/_header.scss

.bg-yellow{
    background-color: rgb(255, 230, 0) !important;
}

@keyframes change {
    from{
        color: rgb(160, 133, 12);
    }
    to{
        color: rgb(94, 77, 2);
    }
}

.text-yellow{
    color: rgb(160, 133, 12);
}
.text-yellow:hover{
    // color: rgb(94, 77, 2);
    animation: change 500ms forwards;
}

a.navbar-brand{
    font-family: 'Merienda-Bold';
    // color: green !important;
}
.navbar-nav a{
    font-family: 'Merienda-Bold';
    // @extend .text-yellow;
}
.navbar-nav li.nav-item a.nav-link{
    @extend .text-center;
    @extend .text-sm-center;
    @extend .text-md-start;
}

App.scss

@import "../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
@import "../node_modules/bootstrap/scss/bootstrap.scss";

@import "./scss/fonts";
@import "./scss/header";
@import "./scss/navbar";

h1{
    color: red;
}
.text-yellow{
    color: rgb(207, 178, 11);

    &:hover{
        color: rgb(134, 115, 5);
    }
}

.icon-link{
    @extend .p-3;
    @extend .text-yellow;
    font-size: x-large;
}

.call-to-action{
    @extend .bg-yellow;
    @extend .p-3;
    text-align: center;
}

@keyframes productOver {
    from{
        background-color: rgba(0, 0, 0, 0);
        color: rgba(255, 255, 0, 0) !important;
    }
    to{
        background-color: rgba(0, 0, 0, 0.801);
        color: rgb(255, 255, 0) !important;
    }
}
.favorite{
    color: rgba(255, 0, 0, 0.979) !important;
}
.product{
    @extend .py-2;

    .card-image{
        position: relative;
    }
    .card-image img{
        position: relative;
    }
    .card-image .btns-group{
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0, 0, 0, 0);
        display: block;
        button{
            position: relative;
            top: 45%;
            left: 40%;
            transform: translate(-50%, -50%);
            font-size: 3em;
            margin-top: 16px;
            color: rgba(255, 255, 0, 0);
            @extend .btn;
        }
        &:hover{
            animation: productOver 500ms forwards;
            button{
                color: yellow;
                &:hover{
                    color: rgb(216, 184, 0);
                }
            }
        }
    }
}

footer{
    @extend .bg-yellow;
    @extend .p-3;
    position: relative;

    a{
        font-family: 'Merienda-Bold';
    }
    .call-btn{
        position: fixed;
        left: 2rem;
        bottom: 2rem;
        @extend .d-block;
        @extend .d-md-none;
        .btn-circle{
            padding: 1rem 1.5rem;
            border-radius: 50%;
            font-size: large;
        }
    }
}

App.tsx

import React from 'react';
import './App.css';
import CTA from './app/layouts/cta';
import Display from './app/layouts/display';
import Footer from './app/layouts/footer';
import Header from './app/layouts/header';
import Navbar from './app/layouts/navbar';
import Products from './app/layouts/products';

function App() {
  return (
    <div>
      <Header />
      <Navbar />
      <Display />
      <CTA />
      <div className="container">
        <h1>Welcome To ReactJS</h1>
        <Products />
      </div>
      <Footer />
    </div>
  );
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap';
import App from './App';
import reportWebVitals from './reportWebVitals';
import WebFontLoader from 'webfontloader';

WebFontLoader.load({
  google:{
    families: ['Fuggles', 'Libre_Franklin', 'Pacifico', 'Audiowide', 'Courgette', 'Merienda-Regular', 'Merienda-Bold', 'Sacramento']
  }
})


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

It is all about this article contents. Here I give all source codes. These are the design codes.