What is React?

A JavaScript library for building user interfaces.

Year What happened
2011 Built at Facebook
2013 Open-sourced
Today Instagram, Airbnb, Netflix, and almost every major tech company

Imperative vs Declarative

Imperative (vanilla JS): you tell the browser step by step what to do. Find this element. Create that element. Set the text. Attach it to the page.

Declarative (React): you describe what the page should look like. React handles the rest.

1. JSX

HTML inside JavaScript. No more document.createElement. You see what the page looks like just by reading the code.

🧑‍💻 Example

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

Curly braces for JavaScript expressions inside JSX:

const name = "Ahmed";

return <h1>Hello, {name}</h1>;

return <p>{2 + 2}</p>;

Rules:

  1. One parent element (wrap in <div> or <>...</>)
  2. Use className instead of class
  3. Self-closing tags: <img />, <input />, <br />
// Wrong
return (
  <h1>Title</h1>
  <p>Text</p>
);

// Right
return (
  <div>
    <h1>Title</h1>
    <p>Text</p>
  </div>
);

📌 Summary