Learn ReactJS - Core Concepts & Main Architecture

#Introduction

In episode 1 you learned why React exists. Now it's time to see how it works behind the scenes. Concepts that sound technical — the Virtual DOM, reconciliation, the render cycle, React Fiber — are actually simple once you understand them in order.

Episode 2 dissects React's main architecture and introduces the core components you'll use every day: function components, props, state, one-way data flow, and hooks. This is the most important foundational episode; the entire series is built on the concepts covered here.

#How It Works Behind the Scenes

#The Virtual DOM and Reconciliation

The Virtual DOM is a JavaScript representation of the UI structure. When you write JSX, React turns it into descriptive objects instead of directly manipulating the browser DOM. When state changes, React creates a new virtual tree and then compares it with the old tree — this process is called reconciliation:

state berubah
  -> render pohon virtual baru
  -> diff dengan pohon sebelumnya
  -> tentukan perubahan minimum
  -> patch DOM nyata

The reason for using this intermediate step is simple: creating and comparing JavaScript objects is far cheaper than touching the browser DOM, and the end result is minimal DOM changes.

#The Render Cycle and Commit Phase

React's rendering process is split into two major phases:

• Render phase: React runs your component functions, produces a new virtual tree, and does the diff. This phase can be interrupted by React.
• Commit phase: React applies the changes to the real DOM and runs side effects. This phase runs synchronously and cannot be interrupted.

Understanding these two phases helps you avoid bugs: don't read or mutate the DOM during the render phase, because the results can be inconsistent.

#The Roles of JSX, Babel, and the Bundler

JSX is HTML-like syntax written inside JavaScript. Browsers don't understand JSX, so Babel (via the Vite toolchain) transforms it into React.createElement function calls. The bundler then combines all the JavaScript modules into files the browser can load.

JSX and its transformed result

const elemen = <h1>Halo, React</h1>
// hasil transformasi Babel:
const elemen = React.createElement("h1", null, "Halo, React")

The code const elemen = <h1>Halo, React</h1> is written by you; the transformation into React.createElement is handled automatically by the build tool. You don't need to call React.createElement manually in modern React.

#React Fiber and Concurrent Rendering

React Fiber is the new reconciliation algorithm introduced in React 16. The core idea: rendering can be split into small units of work (fibers) that can be interrupted and prioritized. That's what paved the way for concurrent rendering — React can pause a non-urgent render to handle more pressing user interactions, keeping the UI responsive. We'll cover its stable patterns in episode 23.

#The Core Components

#Function Components vs Class Components

Modern React recommends function components. The only significant difference from class components is how they manage state and lifecycle — classes use this.state and lifecycle methods, functions use hooks:

Function component vs class component

function Counter() {
  const [jumlah, setJumlah] = React.useState(0)
  return <button onClick={() => setJumlah(jumlah + 1)}>{jumlah}</button>
}

Function components are more concise, don't use this, and const [jumlah, setJumlah] = React.useState(0) is the most common example of the useState hook. Class components are still valid but are no longer the first choice.

#Props, State, and Component Lifecycle

• Props: data passed from parent to child, read-only.
• State: internal data owned by the component that can change.
• Lifecycle: the sequence of events from when a component is created, updated, to when it's removed. In modern React, the lifecycle is accessed through hooks like useEffect.

Props in, internal state

function Kartu({ judul }) {
  const [dibuka, setDibuka] = React.useState(false)
  return (
    <div>
      <h3>{judul}</h3>
      {dibuka ? <p>Konten kartu</p> : null}
    </div>
  )
}

The Kartu function receives judul as props and manages dibuka as state. {dibuka ? <p>Konten kartu</p> : null} is conditional rendering, which we'll cover fully in episode 7.

#One-Way Data Flow and Component Composition

React enforces one-way data flow: data flows from parent components to children via props, and children communicate with parents through callback functions also passed as props. There's no direct two-way communication between arbitrary components. This keeps the data flow easy to trace and debug.

#Hooks as React's Core API

Hooks are functions that give function components access to state and the lifecycle. The four most basic hooks:

• useState: stores local state.
• useEffect: runs side effects after render.
• useContext: reads context (episode 10).
• useRef: stores values that don't trigger re-renders.

npm create vite@latest arsitektur-react -- --template react
cd arsitektur-react
npm install
npm run dev

Run the commands above, then replace the contents of src/App.jsx with the Counter example above. If the button counts up, you've understood how rendering and state work — two concepts that will be the foundation of the entire series.

#Conclusion

Episode 2 lifted the curtain hiding React: the Virtual DOM and reconciliation, the render cycle with the commit phase, the roles of JSX and Babel, the React Fiber architecture, and the core components — function components, props, state, one-way data flow, and hooks.

Key takeaways:

• The Virtual DOM is the middleman: React renders a virtual tree, then diffs and patches the real DOM.
• The render phase can be interrupted; the commit phase runs synchronously.
• JSX is transformed by Babel into React.createElement; the bundler combines modules.
• React Fiber enables concurrent rendering with prioritized work.
• Function components with hooks are the modern pattern; useState is the most common hook.
• Data flows one way: parent to child via props, child to parent via callbacks.

In the next episode, episode 3, we'll start a React project — dissecting the Vite folder structure, running the dev server with live reload, and configuring ESLint, Prettier, and gitignore so your project is clean from the start. Get your terminal ready; we're going to write a lot of code.