React Basics

1. What is React?

React is a JavaScript library for building user interfaces (UIs) on the frontend.

Its main idea is to let us build the UI from small, reusable pieces of code called components.

These components behave like custom HTML elements.

For example:

export default function App() {
  return (
    <>
      <MyButton />
      <MyButton />
    </>
  );
}

function MyButton() {
  return <button>Click me</button>;
}

Here, <MyButton /> is a component.
We defined it once and reused it twice inside App.

React is powerful because it encourages breaking your UI into many small, maintainable, reusable components.

---

2. What is JSX?

JSX is a syntax extension for JavaScript used in React.
It looks like HTML, but it is not HTML — it’s JavaScript that gets compiled into React function calls.

JSX allows you to:

1. Write HTML-like code inside JavaScript
2. Insert JavaScript expressions directly inside the markup
3. Use custom components as if they were HTML tags

Example:

const users = [
  { name: "Erlan" },
  { name: "Erlan2" },
  { name: "Erlan3" }
];

const listUsers = users.map(user => (
  <h1>{user.name}</h1>
));

export default function App() {
  return <>{listUsers}</>;
}

In JSX:

• { ... } is used to insert JavaScript expressions.
• You can render arrays, components, variables, and results of functions directly.

So JSX = JavaScript + markup in one place, which makes UI code cleaner and easier to understand.

---

3. Conditional rendering

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

More compact version:

return (
  <div>
    {isLoggedIn? (
      <h1>Welcome</h1>
    ): (
      <h1>Log in</h1>
    )}
  </div>
)

---

4. Events

export default function App() {
  function handleClick() {
    console.log("Don't fu..ing click! ")
  }

  return (
    <div>
      <button onClick={handleClick}>Click me please</button>
    </div>
  )
}

---

5. What's a State?

A state is a built-in React feature that allows components to:

• Store data
• Track changes
• Automatically re-render when data changes

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

2 buttons, 2 separate states:

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

---

6. What's Hook?

All React built-in functions that start with use are called Hook.

---

7. Sharing data between components

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton count={count} onClick={handleClick}/>
      <MyButton count={count} onClick={handleClick}/>
    </div>
  );
}

function MyButton({count, onClick}) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}