My First React Project (Without Tutorials)

Hi, I'm Ayra👋
I'm an aspiring front-end developer, and instead of watching another React tutorial... I decided to build something on my own.

After practicing HTML, CSS, and JavaScript, I wanted to challenge myself:

Can I build a React project without following step-by-step guidance?

So I chose Frontend Mentor's Digital Bank Landing Page Challenge and rebuilt it using React, even though the challenge was originally meant for plain HTML, CSS and JavaScript.

Here's what I learned.

Why I chose React

React is component-based, which means you can break your UI into small, reusable pieces instead of writing everything in one large file.

Instead of traditional HTML tags, React uses JSX, which lets you write HTML-like syntax directly inside JavaScript.

Even more interesting:

• React uses virtual DOM
• It applies a diffing algorithm
• It updates only what has changed

That means no manual DOM manipulation. No querySelector. No addEventListener for every interaction.

Just state → UI

Building the Header Component

I started with the Header component.

Instead of hardcoding navigation links, I stored them in an array and rendered them dynamically using map():

const links = ["Home", "About", "Contact", "Blog", "Careers"];

<ul className="nav__links" aria-label="navigation links">
  {links.map(link => (
    <li key={link}>
      <a href="#">{link}</a>
    </li>
  ))}
</ul>

Why this matters

• No duplication
• Easier to maintain
• Scalable if links change
• Cleaner code structure

It felt like a small decision, but it made the component much more flexible.

Implementing the Mobile Menu (State!)

This was the part that truly made me understand React.

In vanilla JavaScript, I would normally:

• Select the button
• Add an event listener
• Toggle a class manually

In React, we manage UI changes using state.

Here's how I handled the toggle:

import { useState } from "react";

function Header() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button
      className={`toggle ${isOpen ? "toggle--open" : ""}`}
      aria-label="menu toggle"
      aria-expanded={isOpen}
      onClick={() => setIsOpen(!isOpen)}
    >
      <span></span>
      <span></span>
      <span></span>
    </button>
  );
}

Now, instead of "manually changing the DOM," I just update the state.

React handles the rest.

That mental shift of thinking declaratively instead of imperatively was huge for me.

Component Architecture and Props

I didn't want my Header component to become too large.

So I split things into:

• MobileMenu
• Backdrop

Both depend on the same isOpen state, so I passed it down as props:

<MobileMenu links={links} isOpen={isOpen} />
<Backdrop isOpen={isOpen} onClose={() => setIsOpen(false)} />

You can check out the full MobileMenu and Backdrop components in my GitHub repo: https://github.com/ayra-baet/bank-landing-page-react

This made everything:

• Cleaner
• More reusable
• Easier to reason about

It also forced me to think about:

• Where should the state live
• How components communicate
• How to avoid unnecessary duplication

This is something you don't really experience when building static HTML pages.

What This Project Taught Me

Even though I only rebuilt the header section, I learned a lot:

1. Component Architecture Matters

Should everything live in one file?
Or should it be broken into smaller pieces?

2. State Placement Is Important

If multiple components need the same state, it should probably live higher up.

3. Reusability > Repetition

Arrays + props + dynamic rendering = scalable UI

4. React Is About Thinking Differently

It's not just "JavaScript with different syntax."
It's a shift in mindset.

The Biggest Realization

React felt confusing when I just watched tutorials.
But when I built something on my own, struggled a bit, and solved real UI problems... it finally clicked!

What's Next?

In my next post, I'll share how I built the rest of the landing page...