React Basics #1: What Is React?

Framework React
6 min read

React is the most widely used JavaScript UI library today. Facebook, Instagram, Netflix, Airbnb — a huge portion of the services we use every day are built with React. Browse Korean developer job postings and the vast majority of frontend positions require React experience.

In this tutorial, aimed at React beginners, we’ll cover what React is, why it was created, and which problems it’s designed to solve.

The birth of React #

React was created in 2011 by Facebook software engineer Jordan Walke and was first applied to Facebook’s News Feed feature. It was open-sourced in 2013.

At the time, Facebook was struggling to manage an increasingly complex UI. When a user posted a comment, counters scattered across the screen, notification badges, and the feed state all had to update consistently — and doing this without missing anything was extremely tricky with the existing imperative DOM-manipulation approach. React was born specifically to solve this “keeping a complex UI consistent” problem.

Library or framework? #

We often call it the “React framework,” but strictly speaking React is a UI library. It doesn’t force full-stack features like routing, data fetching, or form handling — it focuses solely on “drawing the user interface.”

Thanks to this minimal philosophy, React has spawned an ecosystem of meta-frameworks and tools built on top of it. The most famous is Next.js, alongside Remix, Astro, Gatsby, and others. The schoolofweb website that hosts this tutorial also runs on Next.js.

Characteristics of React #

Let’s summarize React’s core characteristics in five points.

1. Component-based #

React starts by breaking the screen into small pieces. Buttons, input fields, cards, headers, a single comment line — every element becomes an independent unit called a component, and you compose them like LEGO blocks to build a complete screen. The same component can be reused in many places, and each component is responsible only for its own behavior and appearance.

2. Declarative #

When building UI with traditional JavaScript, you commanded the screen step by step on “how” to change. React flips this: you declare “what” should be shown, and React handles making the screen look that way. The code becomes much more concise and the intent much clearer.

For a simple example, suppose we want to build a feature where “clicking a button increases the counter by 1.” In plain JavaScript you’d write:

vanilla.js 
let count = 0;
const button = document.querySelector('#btn');
const display = document.querySelector('#count');

button.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});

The same feature in React looks like this:

App.jsx 
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

You don’t manipulate the DOM directly. When the count state changes, React updates the relevant part of the screen on its own. Instead of commanding step by step how the screen should change, you just declare what it should look like — that’s what declarative means.

3. Virtual DOM #

This is the secret behind React’s speed. The browser’s actual DOM is expensive to manipulate directly. React keeps a virtual DOM in memory as a JavaScript object, and when changes occur, it compares the new virtual DOM against the previous one and applies only the truly changed parts to the real DOM. As a developer, you don’t need to worry about this process — you just declare the new state.

4. One-way data flow #

In React, data always flows in a single direction, from parent component to child component. Children can’t freely modify a parent’s data; they can only signal an intent to change through functions the parent explicitly passes down. This predictable flow makes debugging easier and lets you trace data origins even in large applications.

5. A massive ecosystem #

One of React’s biggest strengths is its rich surrounding ecosystem. Routing (React Router, Next.js), state management (Redux, Zustand, Jotai), server communication (TanStack Query, SWR), UI kits (MUI, Chakra UI, shadcn/ui)… whatever the problem, there’s already a tool, and an active community keeps producing new answers.

What can you build with React? #

React can build almost any kind of user interface, from simple websites to massive SaaS services.

  • Single Page Apps (SPAs): Dynamic web applications that work without page transitions. The web versions of Facebook, Twitter, and Instagram are prime examples.
  • Enterprise dashboards: Complex admin screens where data changes in real time. This is where React’s component model shines brightest.
  • Content sites and blogs: Using meta-frameworks like Next.js, you can build SEO-friendly static sites and blogs in React. The site you’re reading right now is one such example.
  • Mobile apps: With React Native, you can build iOS and Android apps using the same mindset and similar code.
  • Desktop apps: Combined with Electron, you can also build desktop applications for Windows, macOS, and Linux. VS Code, Slack, and Notion were all built this way.

React, Vue, Angular… what’s the difference? #

React’s main competitors are Vue.js and Angular.

  • Angular is a full-package framework that includes everything: routing, forms, communication, dependency injection. It shines on enterprise projects in large organizations.
  • Vue sits roughly between React and Angular. It has a low entry barrier and friendly documentation, making it popular with beginners.
  • React is the most minimal. It provides only the library and leaves the rest to you (or to a meta-framework). That freedom is great, but in the beginning, having so many decisions to make can feel difficult.

All three are excellent tools, but React has by far the most hiring demand and learning material in both the Korean and global markets.

Tip
Once you learn React, switching to Vue or Angular is relatively easy. The big mental model — component-based, declarative UI — is similar across all three. Don’t agonize too long over which tool to learn first. Just start.

What this tutorial covers #

This tutorial walks beginners through React’s most fundamental core, step by step. By the end of this series, you’ll be able to:

  • Write and compose your own React components
  • Build dynamic UIs with state and props
  • Handle user input and forms
  • Understand and use core hooks like useEffect and useContext
  • Build your own custom hooks

More modern topics — Server Components, Suspense, Server Actions, and the like — will be covered in a separate “Modern React” series. After finishing this fundamentals tutorial, be sure to check that one out too.

Wrapping up #

In this post we looked at what React is, why it was created, and what its strengths are. In the next post, “React Basics #2: Setting Up the Development Environment,” we’ll install Node.js and create our first React project with Vite to start writing real code.

X