React.js Example: Pricing Section (Pricing Card).

byDarshan Dhanani -July 25, 2023

0

Introduction

In this post, we will create a simple pricing section using React.js and apply some custom CSS styles to make it visually appealing. Let's get started!

Step 1: Setting Up the React App

If you haven't already set up a React app, you can do so by following these steps:

Open your terminal or command prompt.
Create a new React app using Create React App:

bash
npx create-react-app pricing-section-app
cd pricing-section-app

Now, open your code editor (e.g., Visual Studio Code) and navigate to the src folder.

Step 2: Creating the PricingSection Component

Next, let's create a new file named PricingSection.js inside the src folder and add the following React component code:

jsx
import React from 'react';

const PricingSection = () => {
  return (
    <section id="pricing">
      <div className="row">
        <div className="pricing-column col-lg-4 col-md-6">
          <div className="card">
            <div className="card-header">
              <h3>FREE</h3>
            </div>
            <div className="card-body">
              <h2>Free</h2>
              <p>No Listing</p>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button className="btn btn-lg btn-block btn-outline-dark" type="button">
                Sign Up
              </button>
            </div>
          </div>
        </div>

        <div className="pricing-column col-lg-4 col-md-6">
          <div className="card">
            <div className="card-header">
              <h3>PLUS</h3>
            </div>
            <div className="card-body">
              <h2>$49 / mo</h2>
              <p>No Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button className="btn btn-lg btn-block btn-dark" type="button">
                Sign Up
              </button>
            </div>
          </div>
        </div>

        <div className="pricing-column col-lg-4">
          <div className="card">
            <div className="card-header">
              <h3>PRO</h3>
            </div>
            <div className="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button className="btn btn-lg btn-block btn-dark" type="button">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default PricingSection;

Step 3: Adding the CSS Styles

Now, let's create a new CSS file named PricingSection.css inside the src folder and add the provided CSS styles:

css
/* PricingSection.css */

html, body {
  height: 100%;
}

.row {
  height: 100%;
  align-items: center;
}

#pricing {
  height: 100%;
  padding: 100px;
  text-align: center;
}

.card {
  border: 1px solid black;
}

.card-header {
  color: white;
  background-color: black;
}

.pricing-column {
  padding: 3% 2%;
}

.btn-dark {
  background-color: black;
}

.btn-dark:hover {
  background-color: #343a40;
}

Step 4: Using the PricingSection Component

Finally, let's use the PricingSection component in the main App.js file:

jsx
import React from 'react';
import PricingSection from './PricingSection';

const App = () => {
  return (
    <div>
      {/* Your other components or sections can go here */}
      <PricingSection />
    </div>
  );
};

export default App;

Step 5: Run the React App

Save all the changes and return to the terminal. Start the development server by executing the following command:

bash
npm start

Your React app will be running at http://localhost:3000 by default. Open your web browser and go to this URL to see the pricing section in action!

That's it! You've successfully created a pricing section using React.js with custom CSS styles. Feel free to customize the content and styles to suit your project requirements.

Happy coding! 🚀