Hero Component | Fervor Coding

Creating a hero component in React involves defining a reusable component that accepts props for a title, a statement, and an image. This hero component can then be styled and structured to display a background image with a title and statement overlay. This tutorial will guide you through creating such a component step-by-step.

Prerequisites

Basic knowledge of React and its component structure.
A React project set up (using Create React App, Vite, or any other setup you prefer).

Step 1: Creating the Hero Component

Create a new file for your component, e.g., Hero.js, in your project’s src/components directory (you might need to create the components directory if it doesn’t already exist).
Define the Hero component by accepting title, statement, and image as props. Use these props to render the component’s HTML structure.

// src/components/Hero.js

import React from 'react';

const Hero = ({ title, statement, image }) => {
  return (
    <div className="hero" style={{ backgroundImage: `url(${image})` }}>
      <h1>{title}</h1>
      <p>{statement}</p>
    </div>
  );
};

export default Hero;

Step 2: Styling the Hero Component

To ensure the hero component looks appealing and functions as expected, you’ll need to add some CSS. You can do this in an external stylesheet or inline if you prefer, but for maintainability, using a CSS file is recommended.

Create a CSS file for your component, e.g., Hero.css, in the same directory as your component.
Add styles for the .hero class. Ensure the background image covers the area and that the text is readable over it.

/* src/components/Hero.css */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px; /* Adjust based on your needs */
  background-size: cover;
  background-position: center;
  color: white; /* Ensure text contrasts well with your images */
  text-align: center;
  padding: 20px;
}

Import the CSS file in your Hero.js to apply the styles.

// At the top of your Hero.js file
import './Hero.css';

Step 3: Using the Hero Component

Now that your hero component is created and styled, you can use it in your application.

Import the Hero component in the file where you want to use it, typically in one of your page components or directly in App.js.

import Hero from './components/Hero';

Use the Hero component by passing the required props (title, statement, and image URL).

function App() {
  return (
    <div className="App">
      <Hero
        title="Welcome to Our Website"
        statement="Discover the world of possibilities with us."
        image="https://example.com/your-image-url.jpg"
      />
      {/* Other components */}
    </div>
  );
}

export default App;

Conclusion

You’ve now created a reusable hero component in React that accepts a title, a statement, and an image as props. This component can be used and customized across your application, providing a consistent and dynamic hero section wherever needed. By passing different props, you can easily adjust the content and appearance of the hero sections throughout your site.

Remember, the styling provided here is quite basic. You’re encouraged to further customize the CSS to match your specific design requirements, ensuring the hero component fully aligns with your website’s aesthetic.