Ebenezer

Posted on Apr 17

Stop Calling React a Framework. It's Embarrassing.

#react #webdev #beginners #javascript

My trainer asked one simple question yesterday that stopped me mid-note.

"Is that React is Library or Framework?."

Half the class looked confused. Someone asked, "What's the difference?" And instead of opening a textbook, sir said this:

"Think about your school library. Tamil books are in one shelf. English books in another. Maths in another. You walk in, pick the book you need, and walk out. The library doesn't tell you what to study. It just gives you what you ask for."

That's React. A library. You call it when you need it. It doesn't control your code — you control it.

That one sentence made everything click. Here's everything I understood from yesterday's class — explained the same way.

Here's what you'll learn:

Why React is a library and not a framework
What Functional Components actually are and why they exist
Why Facebook built React, and what problem it was solving

1. Library vs Framework — And Why People Always Confuse Them

A library is a collection of ready-made tools you can pick up and use whenever you want. You're in control.

A framework is like a blueprint. It tells you how to structure your entire project. You follow its rules — it controls the flow.

React is a library. When you write this:

// You are calling React — React isn't calling you
import React from 'react';

You decide when React runs. You call it. That's the library behaviour.

Angular, on the other hand, is a framework. It comes with routing, HTTP tools, form handling — everything bundled. You follow Angular's conventions. It calls your code.

React only does one thing: builds the UI. For everything else — routing, data fetching, state management — you bring your own tools. That's why frameworks like Next.js are built on top of React. React is the foundation; Next.js is the complete house.

2. The DOM Problem — Why Vanilla JS Gets Painful Fast

Before we understand why React exists, understand what it's solving.

Imagine you're building a navbar in plain JavaScript. Every time the user logs in, you have to manually find the element, change the text, maybe hide a button, show another one.

// Plain JS — you're doing DOM surgery by hand
document.getElementById('login-btn').style.display = 'none';
document.getElementById('user-name').textContent = 'Welcome, Ebenezer';
document.getElementById('logout-btn').style.display = 'block';

This works for 3 elements. But a real app has hundreds of elements changing based on data. You end up writing getElementById fifty times, losing track of which element you updated, and creating bugs that take hours to find.

React exists to automate this.

React automates the DOM. You describe what the UI should look like based on data, and React figures out what changed and updates only that part. You stop writing DOM instructions and start writing what the screen should show.

3. SPA — Why Facebook Needed to Reinvent How Websites Work

Do you remember early websites? Every time you clicked anything, the entire page would reload. White flash. Loading spinner. Annoying.

Facebook had a problem. They had millions of users with live notifications, chat messages, and news feed updates happening every second. If every "like" or new message triggered a full page reload, the experience would be unusable.

So Facebook needed a way to update parts of the page without reloading the whole thing. That idea became the Single Page Application (SPA).

In an SPA, the browser loads one HTML file once. After that, JavaScript handles everything — navigation, data updates, page transitions — without ever fully reloading. The URL changes, content changes, but the page never actually reloads.

Facebook built React in 2011, used it internally, and then open-sourced it in 2013.

Why open source? Because open source gets contributions from thousands of developers around the world — people finding bugs, building new features, writing better documentation. React became stronger because of the community. That's why it became the most popular UI library on the planet.

4. Functional Components — Stop Repeating Yourself

Imagine you have a navbar on every page. In plain HTML, you copy-paste the same navbar code on every single page. When you need to update one link, you update it on 20 files.

That's the problem components solve.

A Functional Component in React is a JavaScript function that returns a piece of UI. Write it once, use it everywhere.

// Navbar.jsx — write this once
function Navbar() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  );
}

export default Navbar;

Now use it on any page:

// You just dropped a full navbar with one line
import Navbar from './Navbar';

function HomePage() {
  return (
    <div>
      <Navbar />
      <h1>Welcome</h1>
    </div>
  );
}

That <Navbar /> line brings in the entire navbar — with all its links, styling, and logic. Change it in one file, it changes everywhere.

This is the whole philosophy of React: build once, reuse everywhere. Every button, card, sidebar, footer — it's all a component you write once and stamp across your app.

5. CRA vs Vite — How You Actually Start a React Project

When you're starting a React project, you need a tool to set up all the boring configuration — the file structure, the build system, the development server. You don't write that by hand.

There are two popular ways:

Create React App (CRA) was the official way for years. One command and you had a full React project:

npx create-react-app my-app

But CRA got slow. The dev server took a long time to start. Builds were sluggish. The community started looking for something faster.

Vite is what most developers use now. It starts in milliseconds, hot-reloads instantly, and handles modern JavaScript much better.

npm create vite@latest my-app -- --template react

For learning, Vite is the better choice today. CRA is older and no longer actively maintained.

And none of this works without Node.js. Node lets you run JavaScript outside the browser and comes with npm — the package manager that installs React, Vite, and every other tool you need. When your trainer says "run npm install", Node is what's actually doing the work behind the scenes.

6. Checking the Latest React Version

Every few months, React releases updates. Features improve. Old patterns get replaced. As a developer, you should always know which version you're using.

Check your current React version inside any project:

# Run this in your project folder terminal
npm list react

Or open package.json in your project — you'll see the version number next to "react".

To always check the latest official release, visit react.dev. At the time of writing this post, React 19 is the latest stable version, which brought significant improvements to how forms and state work.

What You Learned Today

React is a JavaScript library — it builds the UI and nothing else. You call it, it doesn't call you
Functional Components exist to stop copy-pasting the same UI across files — write once, use everywhere
Facebook built React to create SPAs — apps that update content without reloading the whole page
React is open source because community contributions made it stronger than any one company could alone
Vite is the modern, fast way to start React projects — CRA is outdated
Everything runs through Node.js, which manages your packages and runs your dev environment

Over to you: What part of React confused you the most when you first heard about it? Was it the library vs framework thing, or something else?

Drop it in the comments — I read every single one. 👇

DEV Community