How I Finally Understood React — Before Learning Next.js!

If you're reading this, I'm guessing you're planning to learn Next.js.

From my experience, Next.js truly feels like stepping into a smoother, more comfortable phase of web development. But here's the key: you'll get way more out of it if you first understand React — not just its syntax, but how to think in React.

This post is my personal summary of what clicked for me while going through the React Foundations section on the official Next.js Learn site. It's not a tutorial — it's the "aha!" moments I had along the way.

React and Next.js: What's the Difference?

Both React and Next.js are tools for building web applications — but they play different roles:

• React is a JavaScript library for building interactive user interfaces (UIs). It gives you powerful APIs to create UI components, but it doesn’t decide how you structure your app, handle routing, or fetch data. That’s up to you.

• Next.js is a React framework. It takes React and adds structure, built-in solutions, and optimizations for common needs like routing, data fetching, rendering, and more.

Think of it like this:

React gives you the bricks.

Next.js gives you the whole blueprint — and even the construction crew!

So… What Even IS a Web Application?

The Next.js Learn course breaks it down beautifully: every modern web app is made of building blocks, like:

1. User Interface – What users see and interact with (e.g., a list of blog posts, a comment section).
2. Routing – How users move between pages (e.g., from /posts to /posts/my-first-post).
3. Data Fetching – Where your data lives (like a database) and how you get it (via APIs or Server Actions).
4. Rendering – When and where content is generated (statically at build time? dynamically on the server?).
5. Integrations – Third-party services (authentication, CMS, payments) and how you connect to them.
6. Infrastructure – Where your app is deployed (Vercel, Netlify, etc.).
7. Performance – How fast it loads and feels.
8. Scalability – How it handles growth in users, content, or team size.
9. Developer Experience – How easy and enjoyable it is to build and maintain.

When I imagined building a personal blog, these ideas suddenly made sense:

• Users browse all posts → that’s UI + routing.
• They click into a single post → more routing + data fetching.
• They leave a comment → UI + data mutation + maybe auth.

👉 React helps you build the UI layer.

👉 Next.js helps you wire up everything else — cleanly and efficiently.

Back to Basics: The DOM and How We Update It

Like most of us, I started web dev with HTML → CSS → JavaScript. And I used the DOM (Document Object Model) to update pages dynamically.

The DOM is the bridge between your code and what users see. You can read it, change it, and add to it using JavaScript.

But here’s the thing: updating the DOM manually is tedious.

For example, to add a simple <h1> with plain JavaScript, you’d write:

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

That’s five lines just to show a heading!

This style is called imperative programming: you tell the browser exactly how to build the UI, step by step.

Enter React: A Declarative Approach

React flips this around. Instead of describing how to build the UI, you describe what you want — and React figures out the “how.”

With React, the same heading becomes:

const domNode = document.getElementById('app');
const root = ReactDOM.createRoot(domNode);
root.render(<h1>Develop. Preview. Ship.</h1>);

Much cleaner, right?

This is declarative programming:

“I want an <h1> with this text inside #app.”

(React handles the DOM updates for you.)

It’s like ordering a pizza instead of baking the dough, slicing the tomatoes, and grilling the cheese yourself. 🍕

💡 Note: React itself isn’t a “declarative language” — it’s a library that enables a declarative style using JavaScript + JSX.

Wait… What’s JSX?

That line root.render(<h1>Hello</h1>) isn’t valid JavaScript — so how does it work?

Meet JSX (JavaScript XML): a syntax extension that lets you write HTML-like code inside JavaScript. Browsers don’t understand JSX natively, so it gets compiled to regular JavaScript (usually by tools like Babel).

JSX has just three simple rules:

• Wrap everything in a single root element (e.g., you can’t return two sibling <div>s without a parent).
• Close all tags (e.g., <img />, not <img>).
• Use camelCase for attributes (e.g., className instead of class).

Once you get used to it, JSX feels natural — and it makes your UI code way more readable.

How to Think in React: The 3 Core Concepts

To truly “get” React, focus on these three pillars (as taught in the React Foundations course):

🔍 Don’t just read — build!

The ideas below are meant to give you a mental map, not replace hands-on practice. To truly understand them, open your editor, type out the examples, break them, fix them, and create your own tiny components. Reading alone won’t make it stick — writing code will.

1. Components = Reusable UI Pieces

Components are JavaScript functions (with capitalized names!).

They return JSX that describes part of your UI.

You can nest them like LEGO bricks: <Header /> inside <HomePage />, etc.

function Header() {
  return <h1>My Blog</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <main>...</main>
    </div>
  );
}

Learn more:

• Building UI with Components
• Your First Component (React Docs)

2. Props = Data Flow from Parent to Child

Props let you pass data into components (like function arguments).

They’re read-only and help make components reusable.

function Post({ title, author }) {
  return <article><h2>{title}</h2><p>By {author}</p></article>;
}

// Usage:
<Post title="My First Post" author="Ali" />

Learn more:

• Displaying Data with Props

3. State = Managing Changing Data

State holds data that changes over time (e.g., form inputs, toggle buttons).

Use the useState Hook to add state to a component.

import { useState } from 'react';

function CommentBox() {
  const [comment, setComment] = useState('');
  return (
    <input 
      value={comment} 
      onChange={e => setComment(e.target.value)} 
    />
  );
}

Learn more:

• Updating State

Final Advice: Don’t Just Read — Build!

This post is just a launchpad. The real learning happens when you:

• Write code alongside the tutorials
• Break things and fix them
• Rebuild small projects (like a blog, todo app, or profile page)

The React Foundations course is beginner-friendly and assumes only HTML/CSS/JS knowledge — no React experience needed.

And remember: you don’t need to master everything before starting Next.js. But understanding these fundamentals will save you hours of confusion later.

Happy coding — and welcome to the React + Next.js world!