React In a Nutshell

A Brief History of React (a.k.a. Why Does This Exist?)

Once upon a time (2011, to be exact), a guy named Jordan Walke at Facebook got tired of dealing with spaghetti-code UI updates.

He decided to create a JavaScript library that made updating the UI faster, smoother, and more predictable. And thus, React was born.

It officially went open-source in 2013, and since then, it’s been taking over the frontend world like a JavaScript Godzilla.

React on Wikipedia

What is Declarative Programming and How Does it Relate to React?

Declarative programming is a paradigm where you describe what you want the program to do, rather than how it should do it.

React embraces this approach by letting developers declare UI structures and state changes, leaving the rendering optimizations to React itself.

Instead of manually manipulating the DOM, you describe the UI state and React handles updates efficiently.

React vs Next.js vs Remix

React alone is a library for building UI components but does not handle server-side rendering, routing, or static generation. Next.js and Remix are React-based frameworks that provide additional features for server-side rendering, routing, and performance optimizations.

More on Next.js | More on Remix

Virtual DOM & Reconciliation

React’s Virtual DOM creates a memory-based representation of the real DOM, compares changes, and efficiently updates only the necessary parts.

This process, called reconciliation, avoids unnecessary re-rendering, making React highly performant.

More on Virtual DOM

React Hooks: Why They Were Introduced

Before Hooks, React relied on class components with lifecycle methods. Hooks were introduced in React 16.8 to make managing state and side effects in functional components easier.

Example: useState Hook

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Hook Limitations

• Hooks can’t be used inside loops or conditions.
• Hooks only work in functional components.

More on Hooks

React Server Components

Introduced in React 18, Server Components allow components to render on the server, improving performance by reducing client-side JavaScript.

1
2
3
4

export default async function ServerComponent() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Class Components & Lifecycle Methods

Before Hooks, React used class components with lifecycle methods like componentDidMount and componentDidUpdate.

1
2
3
4
5

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Lifecycle methods include:

• componentDidMount() – Runs after component is inserted into the DOM.
• componentDidUpdate() – Runs after an update occurs.
• componentWillUnmount() – Cleanup before unmounting.

React & Routing

React does not include built-in routing. Libraries like React Router handle navigation.

1
2
3
4
5
6
7
8

import { BrowserRouter, Route, Routes } from "react-router-dom";

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>;

More on Routing

JSX: The Magic Behind React

JSX (JavaScript XML) allows writing HTML inside JavaScript.

1

const element = <h1>Hello, JSX!</h1>;

More on JSX

Unidirectional Data Flow & State Management

React enforces one-way data binding through props and state. For large apps, state management tools like Redux or Context API help maintain global state.

Conclusion

React remains the top choice for modern UI development due to its flexibility, performance, and large ecosystem. Whether using React alone, Next.js, or Remix, understanding its core principles and best practices is key to mastering modern frontend development.

Key Ideas

Reference Links

• React Official Docs
• React Wikipedia
• Angular Wikipedia
• Next.js
• Remix
• Virtual DOM
• JSX
• React Router
• Redux

Keep up with the latest React updates at React Official Blog.