Usama

Posted on Oct 21

⚛️ React Mini Project: Building a Step Progress Component (Part 1)

#webdev #react #frontend #javascript

Learning React is more fun when you build something visual and interactive.
Today, I started a new mini project — a Step Progress Component — that shows your progress through different stages.

It’s simple, clean, and a great way to understand component structure, JSX, conditional rendering, and event handling in React.

Let’s get started! 🚀

🎯 What I’m Building

The goal is to build a UI that:

Displays three steps (1, 2, 3)
Shows a different message for each step
Has Previous and Next buttons
Highlights the active step

This project helps beginners understand the foundation of dynamic UI logic — the same idea behind multi-step forms, onboarding screens, or setup wizards.

🧠 Step 1: Setting Up React

If you’re new to React, create your app with this command:

npx create-react-app step-progress
cd step-progress
npm start

Once your app is running, open the App.js file and clean it up.

⚙️ Step 2: The Component Structure

Now, let’s add a simple structure to display steps and buttons.

const messages = [
  "Learn React ⚛️",
  "Apply for jobs 💼",
  "Invest your new income 🤑",
];

function App() {
  const step = 2;

  function handlePrevious() {
    console.log("previous");
  }

  function handleNext() {
    console.log("next");
  }

  return (
    <div className="steps">
      <div className="numbers">
        <div className={`${step >= 1 ? "active" : ""}`}>1</div>
        <div className={`${step >= 2 ? "active" : ""}`}>2</div>
        <div className={`${step >= 3 ? "active" : ""}`}>3</div>
      </div>

      <p className="message">
        Step {step}: {messages[step - 1]}
      </p>

      <div className="buttons">
        <button
          style={{ backgroundColor: "#7950f2", color: "#fff" }}
          className="btn"
          onClick={handlePrevious}
        >
          Previous
        </button>
        <button
          style={{ backgroundColor: "#7950f2", color: "#fff" }}
          className="btn"
          onClick={handleNext}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default App;

This code sets up the UI skeleton — it’s not dynamic yet.
We’re logging "previous" and "next" to the console when buttons are clicked.
Tomorrow, we’ll add logic to move between steps dynamically using React’s useState hook.

🎨 Step 3: Adding Some Basic Styling

Add the following styles in your App.css file to make it look neat and modern:

.steps {
  width: 600px;
  background-color: #f7f7f7;
  border-radius: 7px;
  padding: 25px 100px;
  margin: 100px auto;
}

.numbers {
  display: flex;
  justify-content: space-between;
}

.numbers > div {
  height: 40px;
  aspect-ratio: 1;
  background-color: #e7e7e7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.numbers .active {
  background-color: #7950f2;
  color: #fff;
}

.message {
  text-align: center;
  font-size: 20px;
  margin: 40px 0;
  font-weight: bold;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.buttons button {
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: bold;

  display: flex;
  align-items: center;
  gap: 10px;
}

.buttons button span {
  font-size: 16px;
  line-height: 1;
}

h3 {
  margin: 0;
  text-transform: uppercase;
}

.close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 40px;
  color: inherit;
}

.close:hover {
  color: #7950f2;
}

After saving, your app should look clean — with clear numbers, an active step highlighted in purple, and neat buttons.

🧩 Step 4: Handling Events

The onClick events in our buttons currently trigger console messages.
That’s how we confirm our buttons are working.

function handlePrevious() {
  console.log("previous");
}

function handleNext() {
  console.log("next");
}

In Part 2, we’ll use useState to make the component truly interactive —
so the steps actually move forward or backward when clicked!

🧭 What’s Next (Tomorrow’s Plan)

Tomorrow, I’ll focus on:

Learning the useState hook
Updating step dynamically
Disabling “Previous” at step 1 and “Next” at step 3
Adding small animations for transitions

That will complete this mini project and make it a real interactive component!

💡 What I Learned Today

✅ How to structure a clean React component
✅ How to use conditional rendering in JSX
✅ How to handle events in React
✅ How to style reusable UI components

Even this small practice helps build the base for bigger projects later — like dashboards, onboarding wizards, or progress trackers.

🏁 Final Thoughts

If you’re learning React, try building small things like this.
You’ll be surprised how fast your understanding of state, props, and events improves.

Follow me here on Dev.to so you don’t miss Part 2, where I’ll add useState and complete the interactive logic! ⚡

DEV Community