react-org-concepts-in-js.md

React Concepts and Their JavaScript Equivalents

1. Components = JavaScript Functions

React:

function Hello({ name }) {
  return <h1>Hello {name}</h1>;
}

Pure JS:

function Hello(props) {
  const h1 = document.createElement('h1');
  h1.textContent = `Hello ${props.name}`;
  return h1;
}

document.body.appendChild(Hello({ name: 'Mehdi' }));

---

2. JSX = React.createElement()

React:

return <h1 className="title">Hello</h1>;

Pure JS:

return React.createElement("h1", { className: "title" }, "Hello");

Simplified Version:

function createElement(type, props, ...children) {
  return { type, props: props || {}, children };
}

const element = createElement("h1", { className: "title" }, "Hello");

---

3. State (useState) = Closures or Variables + Re-render

React:

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

Pure JS:

let count = 0;

function render() {
  document.body.innerHTML = '';
  const button = document.createElement('button');
  button.textContent = count;
  button.onclick = () => {
    count++;
    render();
  };
  document.body.appendChild(button);
}

render();

---

4. Props = Function Parameters

React:

function Welcome({ name }) {
  return <h1>Hello {name}</h1>;
}

Pure JS:

function Welcome(props) {
  const h1 = document.createElement('h1');
  h1.textContent = `Hello ${props.name}`;
  return h1;
}

---

5. Effects (useEffect) = Event Listeners / Lifecycle

React:

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

Pure JS:

const id = setInterval(() => console.log('tick'), 1000);
window.addEventListener('beforeunload', () => clearInterval(id));

---

6. Virtual DOM = JS Object Tree + Diffing

React Virtual DOM:

const vdom1 = { type: "h1", props: { children: "Hello" } };
const vdom2 = { type: "h1", props: { children: "Hello, Mehdi" } };

if (vdom1.props.children !== vdom2.props.children) {
  // Update DOM
}

Manual JS Diffing:

if (oldText !== newText) {
  element.textContent = newText;
}

---

7. Re-rendering = Manual DOM Rebuild

Pure JS:

function render(state) {
  document.body.textContent = '';
  const div = document.createElement('div');
  div.textContent = state.message;
  document.body.appendChild(div);
}

let state = { message: "Hello" };
render(state);

state.message = "Hi!";
render(state);

---

8. Context / Redux = Global State + Observer Pattern

Pure JS:

const store = {
  state: { theme: 'light' },
  listeners: [],
  setTheme(newTheme) {
    this.state.theme = newTheme;
    this.listeners.forEach(l => l(newTheme));
  },
  subscribe(fn) {
    this.listeners.push(fn);
  }
};

store.subscribe(theme => console.log("Theme changed to", theme));
store.setTheme('dark');

---

Summary Table

React Concept	Pure JS Equivalent	Description
Component	Function returning elements	Describes UI
JSX	createElement() calls	Syntactic sugar
State (useState)	Variables + re-render	Manages internal data
Props	Function parameters	Input data
useEffect	Lifecycle / event logic	Run side effects
Virtual DOM	Object tree	DOM diff representation
Re-rendering	Manual DOM updates	UI refresh
Context / Redux	Shared object + observers	Global state sharing

---

Key Takeaway

React simplifies what you could do manually in JavaScript by:

• Abstracting DOM creation and updates.
• Automatically handling re-renders.
• Managing state efficiently.

It’s just JavaScript + a smart rendering engine.