Learn ReactJS - History, Background & Why You Need ReactJS

#Introduction

Before you write your first React component, it's important to understand where React came from and what problem it solves. React wasn't created as a trend — it was born from a real problem at Facebook: a news feed that had to display constantly changing data to millions of users without making the UI janky or out of sync.

Episode 1 walks you through React's evolution, from the internal prototype in 2011 to its position today as the foundation of the largest frontend ecosystem. After this episode, you'll understand why React was designed the way it is, and that makes every following episode far more meaningful — not just memorizing syntax.

#The Evolution and History of React

#React's Birth at Facebook

React was created by Jordan Walke, a Facebook engineer, around 2011 to solve the data synchronization problem in the News Feed. The initial prototype was named FaxJS, then it was adopted for other features like Instagram in 2012, and finally released as open source in 2013. This was a pivotal moment: for the first time, a library offered the concept of a declarative UI where developers simply describe the view they want.

2011  FaxJS prototype on Facebook's News Feed
2013  React released as open source
2015  React Native for mobile apps
2016  react-router 4 and a mature Redux ecosystem
2019  Hooks officially released in React 16.8
2022  Server Components introduced

Notice the big picture: from a small library for the News Feed, React grew into an ecosystem spanning web, mobile, and server.

#The Ecosystem Evolution: ReactDOM, React Native, and Hooks

React is split into two parts: react contains the core logic, and react-dom contains the renderer for the web. This separation made it possible for React Native to be born in 2015 — a renderer that targets native iOS and Android components. Then in 2019, Hooks (React 16.8) replaced most of the class component patterns and made state logic reusable without classes.

#Classic vs Modern React

The most striking differences between classic and modern React:

• Classic: class components with this.state, lifecycle methods like componentDidMount, and rendering via the render method.
• Modern: function components with hooks like useState, useEffect, and useMemo.

Modern React is more concise, doesn't use this, and similar logic can be extracted into custom hooks. This entire series uses the modern pattern, because that's the direction fully supported by the React team.

#The Problems React Solves

#UI Composability and Reusable Component Architecture

Before React, web pages were built by writing static HTML and then manipulating it with jQuery. Every button, modal, or list was rewritten in many places. React introduced components — reusable pieces of UI that take different props:

A reusable component

function Tombol({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>
}
 
function App() {
  return (
    <div>
      <Tombol label="Simpan" onClick={() => console.log("disimpan")} />
      <Tombol label="Batal" onClick={() => console.log("dibatalkan")} />
    </div>
  )
}

The Tombol function above is used twice with different props. That's composability: small components are assembled into a large interface, and each part can be fixed without disturbing the others.

#The Virtual DOM for Efficient Updates

The biggest problem with jQuery and manual DOM manipulation: every small change forces you to find an element, modify it, and then sync state in many places — bug-prone and slow. React introduced the Virtual DOM, a JavaScript representation of the UI that's cheap to create:

state berubah -> render virtual tree -> diff (reconciliation) -> patch DOM nyata

When state changes, React creates a new virtual tree, compares it with the previous tree through a process called reconciliation, and then only modifies the parts of the real DOM that actually differ. The result: UI updates stay consistent without manual work.

#Comparison with Traditional Approaches

#jQuery vs React

jQuery solved browser compatibility issues and element selection, but it handed the entire responsibility of state synchronization to the developer. The more complex the app, the more repetitive code. React is the opposite: you describe the view based on state, and React takes care of adjusting the DOM.

#Traditional Server-Side Rendering vs SPA

Before SPAs, every interaction reloaded the page from the server. React moved rendering to the browser so navigation feels instant and interactions happen without a full reload. That's why React is a popular choice for interactive apps — dashboards, chat, e-commerce, and kanban boards.

npm install react react-dom

The command npm install react react-dom adds the two core React packages. That's enough to get started — episode 3 will use Vite for a cleaner setup.

#Why React Is Widely Chosen

Here are some reasons why React dominates UI development:

• The largest ecosystem: thousands of ready-to-use libraries for routing, state management, and testing.
• Enterprise support: used by Facebook, Instagram, WhatsApp, Netflix, and Airbnb.
• Transferable skills: the same concepts apply to React Native and Next.js.
• A huge community and job market compared to other frameworks.

React also doesn't force you into a single approach — you're free to choose your router, state manager, and folder structure. This flexibility is both a strength and a responsibility we'll manage in episode 18.

#Conclusion

Episode 1 gave you the historical context and the philosophical reasons behind React: born from a UI synchronization problem at Facebook, solving DOM complexity with components and declarative UI, and offering efficiency through the Virtual DOM.

Key takeaways:

• React was born at Facebook between 2011-2013 and released as open source in 2013.
• React is split into core logic and renderers: react-dom for the web, React Native for mobile.
• Modern React uses function components and hooks, not class components.
• The Virtual DOM and reconciliation make UI updates efficient and consistent.
• Components with props provide composability and reusability.
• React is chosen because of its large ecosystem, enterprise support, and portable skills.

In the next episode, episode 2, we'll dissect the core concepts & main architecture — how the Virtual DOM and reconciliation work behind the scenes, the render cycle and commit phase, the roles of JSX, Babel, and the bundler, as well as the React Fiber architecture with concurrent rendering. Get ready to see what happens inside React.