How is Facebook a ReactJS application?

Facebook is a ReactJS SPA. Despite changing URLs, it doesn’t load new pages in the traditional sense. Instead, it uses ReactJS to dynamically update the content on the same page. The browser’s History API is used to change the URL without a full page reload, creating the appearance of navigating through different pages. This is achieved through React’s component-based architecture, where components like the news feed or comments are updated independently.

See this Code below, here we’re using React Router, to load each component:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        {/* A <Route> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

In this example, Router manages the application’s navigation. Clicking on the links changes the URL without reloading the page, and the <Route> components render different content based on the current URL, demonstrating how a React SPA can handle navigation while remaining on a single page.

It’s like an index page of a book, where you can see the page names and page numbers listed. So, the complete wrapper remains the same (I.e. the book) but the pages change.