React is a Mindset, Not Just Syntax
When I first started moving from plain HTML to React, I thought I just needed to learn some new syntax. I was wrong. The real challenge wasn't the code; it was unlearning how I viewed a website.
I remember working on my first portfolio project right after finishing my CSS course. My instructor had a strict rule: No pre-made templates. I had to build everything from scratch. It was a nightmare. Even though I was using Bootstrap to speed things up, I found myself lost in a sea of thousands of utility classes. My HTML files became "div-soups," with lines like class="d-flex justify-content-center align-items-center col-lg-4 col-md-6 mb-4". Debugging a simple layout shift took me hours, and by the time I finished, it had taken nearly two full weeks of frustrating trial and error. Finding an original idea that wasn't a clone of a template while managing all those classes was the hardest part.
That struggle was my turning point. In the old days, I’d look at a page as a single, overwhelming document. React changed that. It taught me to stop seeing "pages" and start seeing "systems." Instead of micromanaging the browser, I now describe what I want the UI to look like, and React handles the heavy lifting.
Tip: Think of React components like Lego blocks. You build small, solid pieces first, and then you snap them together to create something complex.
Step 1: Ditching the Slow Lane - Why I Use Vite
Before you can build anything, you need an environment that doesn't get in your way. For a while, Create React App (CRA) was the default, but it’s become slow for today’s standards.
Why Vite Feels Like a Superpower
I switched to Vite (which means "fast" in French), and the difference was night and day. Unlike the old days of waiting for my portfolio to refresh every time I changed a Bootstrap class, Vite uses Native ESM. This means it doesn't make you wait for the whole project to bundle before you can see your changes. Your edits show up instantly.
Setting up the project scaffold
npm create vite@latest my-react-app -- --template react
Figure 1: Initializing the project using Vite and installing necessary dependencies through the terminal.
Don't forget this part! (I've missed it more than once)
cd my-react-app
npm install
npm run dev
Quick Note: If you ever run npm run dev and see a blank page or a "command not found" error, 99% of the time it's because you skipped npm install or you are not in the correct project folder. Make sure your terminal is opened inside the main directory where package.json lives. We've all been there!
| Feature | The Old Way (HTML + Bootstrap) | The New Way (React + Bootstrap) |
|---|
| Organization | One massive, confusing HTML file | Multiple small, clean files |
| Logic | Manual jQuery or JS updates | Automatic updates via Props/State |
| Debugging | Hard to find where tags end | Easy to isolate the component |
What Makes a Good Component?
A clean component should do one thing well. It takes in some info (Props) and spits out the UI (JSX). Here’s a quick example of a StatusCard I built using Bootstrap classes within React:
/**
* A simple card to show service health using Bootstrap classes.
*/
function StatusCard({ title, status }) {
// Logic to change the Bootstrap badge color based on status
const badgeClass = status === 'online' ? 'bg-success' : 'bg-danger';
return (
<div className="card shadow-sm m-2" style={{ width: '18rem' }}>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<span className={`badge ${badgeClass}`}>
{status === 'online' ? 'Service Up' : 'Service Down'}
</span>
</div>
</div>
);
}
export default StatusCard;
Figure 2: Implementing modular logic within the StatusCard component and managing the local file structure in VS Code.
What’s happening here?
Clean Logic: I use a simple variable (badgeClass) to toggle between bg-success and bg-danger. No more manual DOM manipulation.
Reusability: Instead of copying and pasting the card's HTML 10 times, I just call <StatusCard > with different props.
Figure 3: The final rendered UI in the browser, demonstrating dynamic styling and component reusability on localhost:5173.
Solving the Bootstrap "Mess": Logic over Layout
A huge part of my two-week portfolio frustration was keeping track of where one Bootstrap row ended and another began. In a giant HTML file, one missing </div> can break your entire layout.
How React Components Tamed Bootstrap
In React, I don't have to look at 500 lines of HTML at once. I can put my Navbar in one file, my Hero section in another, and my Footer in a third.
No more "Div-Soup": Each component only contains the code it needs.
Easier Debugging: If the Grid layout is broken in the Header, I know exactly which small file to check.
Component-Level Styling: I can still use Bootstrap for the heavy lifting, but React handles the structure.
JSX: It’s Like HTML, But With Brains
JSX looks like HTML, but it’s actually JavaScript. This is where most of my early "bugs" came from because I kept trying to use standard HTML attributes.
Three Rules I Learned the Hard Way
The Parent Rule: You can't return two things side-by-side. Wrap them in a tag or a Fragment <> ... <>.
CamelCase Everything: Since it’s JS, you can’t use class. You must use className.
Close Your Tags: Every tag must be closed, even <br > or <img >.
Technical Inquiry & Retrospective: Resolving Common Development Challenges
Q1: Integration of CSS Frameworks (Bootstrap)
•Inquiry: Is it feasible to maintain Bootstrap within a React-based ecosystem?
•Insight: Absolutely. However, the transition from class to className is crucial. Beyond syntax, the real shift is moving from global styling to Component-Level Styling, ensuring that Bootstrap elements remain modular and don't create "Div-Soup."
Q2: Performance and Rendering Optimization
•Inquiry: Why do initial React applications sometimes experience performance lag?
•Insight: This is often a result of inefficient component structure. During my Movie Watchlist project, I learned that a monolithic file causes unnecessary re-renders. By refactoring into specialized components, we leverage the Virtual DOM more effectively, ensuring high-speed UI updates.
Conclusion: Focus on the Logic, Not Just the Look
Moving to React is a journey of unlearning. To anyone stuck in the "Bootstrap Spaghetti" phase: focus on making your components small.
Clean code isn't about how it looks today—it's about how easily you can change it next week or later.
References
React Docs: Thinking in React
Vite: Getting Started Guide