React.js Refresher

💡 Imperative vs. declarative programming

The code above is a good example of imperative programming. You're writing the steps for how the user interface should be updated. But when it comes to building user interfaces, a declarative approach is often preferred because it can speed up the development process. Instead of having to write DOM methods, it would be helpful if developers were able to declare what they want to show (in this case, an h1 tag with some text).

In other words, imperative programming is like giving a chef step-by-step instructions on how to make a pizza. Declarative programming is like ordering a pizza without being concerned about the steps it takes to make the pizza. 🍕

---

What is JSX?

JSX is a syntax extension for JavaScript, but browsers don't understand JSX out of the box, so you'll need a JavaScript compiler to transform your JSX code into regular JavaScript.

---

React core concepts

1. Components

• A component is a function that returns UI elements.
• React components should be capitalized to distinguish them from plain HTML and JavaScript
• Use React components the same way you'd use regular HTML tags, with angle brackets <>

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
const root = ReactDOM.createRoot(app);
root.render(<Header />);

---

2. Props (properties)

• Are inputs read-only information you pass to a React component to make it dynamic and reusable. And can be passed to components similarly to HTML attributes, but you can pass any JavaScript value through them, including objects and functions.
• Props is an object { title: "React" }

Accessing props

• Dot Notation (props.title)

You write in JSX	You access in component
title="React"	props.title
name="Heba"	props.name

• Destructuring in Parameters (recommended)

function Header({ title }) {
  return <h1>{title}</h1>;
}

---

3. State

• the logic for updating the state should be kept within the component where state was initially created.
• Every time React re-renders, it runs the function again from scratch.

function HomePage() {
  console.log('Component re-rendered');

  // vanilla js
  let normalLikes = 0; 
  function handleNormalClick() {
    normalLikes += 1;
    console.log('normalLikes:', normalLikes);
  }

  // using react states
  const [stateLikes, setStateLikes] = React.useState(0);
  function handleStateClick() {
    setStateLikes(prev => prev + 1);
  }

  return (
    <div>
      <h2>Normal: {normalLikes}</h2>
      <button onClick={handleNormalClick}>Normal +1</button>

      <h2>State: {stateLikes}</h2>
      <button onClick={handleStateClick}>State +1</button>
    </div>
  );
}

Key Difference

• let normalLikes = 0

  • Lives inside the function
  • Gets recreated on every render
  • Value is lost

• useState

  • Lives inside React
  • Value is stored outside the function
  • Value persists between renders

---

💡 Mental Model

• Render = run function again
• Normal variables = reset every time
• State = saved and restored by React

---

💡 Events Handling (onClick)

React event handlers (like onClick) expect a function, not a function call.

Incorrect:

<button onClick={console.log('rb')}>Like</button>

• Executes immediately during the render
• Nothing happens on click

Correct:

<button onClick={() => console.log('rb')}>Like</button>

or

function handleClick() {
  console.log('rb');
}
<button onClick={handleClick}>Like</button>

Key Idea:

• onClick={fn} → pass function (correct)
• onClick={fn()} → execute immediately (wrong)