How to create banner in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To create banner in React js, you have to use any banner package library or you have to write a custom banner component. It will create banner in react js.

Today, I am going to show you, how to create banner in react js.

Table of contents

• Set up the React project.
• Import necessary components.
• Create the banner component.

Let’s start with the first step.

Step 1: Set up the React project.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import necessary components.

You have to import the react component, which you can use in your React component. import App.css and import image from './img/banner.jpg'.

import React from 'react';
import "./App.css";
import banner from './img/banner.jpg';

Step 3: Create the banner component.

To create a banner. You have to use the Banner component and use html div element to classname banner, img element is rendered with the src attribute set to the imported image file.

<div className="banner">
  <img src={banner} alt="Banner" />
  <div className="banner-content">
      <h1>aGuideHub</h1>
      <p>Welcome To aGuideHub! </p>
  </div>
</div>

ReactJS create banner example.

The below code is an example of, To create a banner in React JS, we have used div element and imported the image and decorated the banner with the help of css.

App.js

import React from 'react';
import "./App.css";
import banner from './img/banner.jpg';

const Banner = () => {
  return (
    <div className="banner">
      <img src={banner} alt="Banner" />
      <div className="banner-content">
        <h1>aGuideHub</h1>
        <p>Welcome To aGuideHub! </p>
      </div>
    </div>
  );
}

export default Banner;

  .banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500 px;
    background-color: orange;
  }
  
  .banner img {
    height: 100%;
    object-fit: cover;
  }
  
  .banner-content {
    text-align: center;
    color: #333;
  }
  
  .banner-content h1 {
    font-size: 3rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .banner-content p {
    font-size: 1.5rem;
    margin-top: 0;
  }

Check the output of the above code example.

Here, we are provided code sandbox links for the above program create banner in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍