React? ??? ??: ??? ??? ????

??? ??? React?? ??? ? ??????? ??? ? ???? ?????. React? ?? ?????? ???? ???? ??? ??? ????? ???? ??, ?? ??, ??? ??? ?? ??? ??? ??? ? ????.

---

1. React?? ??? ??? ??????

React? ??? ??? UI ??(?: ??, ? ???, ??? ???)?? ??? ?? ??? ???? ???????. React?? ????? ?? ??? ??? ???? ??? ?? React ?? ??? ??? ??? ??? ?? ?? ???? ????.

React? ??? ???

React? ?? DOM ???? ?? ?? ??? ????? ???? ??? ?????? ??? ??? ?????. ? ???? ?? ??? ???? ??? ??? ???? ???? ????? ?? ???? ??? ??? ???? ??? ? ??????.

---

2. React?? ???? ???? ??

React? ??? ??? camelCase ??? ???? ??? ??? ???? ?????. ??? ???? ??? ??? ?? ??? ?????.

??? ??? ?? ?? ??

<button onClick={handleClick}>Click Me</button>

??? ??? ?? ??

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

---

3. React? ???? ???

React? ??? ?? ?? ???? ???? ???? ?????.

• ??? ???: onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseMove
• ??? ???: onKeyDown, onKeyUp, onKeyPress
• ?? ???: onSubmit, onChange, onFocus, onBlur
• ??? ???: onFocus, onBlur
• ???? ???: onCopy, onCut, onPaste
• ?? ???: onTouchStart, onTouchMove, onTouchEnd

??? ??? ?? ??

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

---

4. ??? ???? ?? ??

React? ???? ??? ??? ??? ?? ??? ??? ? ????. JSX?? ?? ??? ????? ?? ??? ???? ??? ? ????.

???? ????

<button onClick={handleClick}>Click Me</button>

.bind() ??? ??(??? ?? ????)

const handleClick = () => {
  alert("Button clicked!");
};

const App = () => {
  return <button onClick={handleClick}>Click Me</button>;
};

---

5. React? ?? ???

React? ?? ??? ???? ????? ?? ??? ???? ??? ???? ? ?????. ??? ?? ??? ???? ??? ???? ???? ??? ? ????.

?? ???? ??:

• ??? ???? ???: React? ???? ?? ?????? ???? ????? ?????.
• ?? ???: React? ??? ??? ?????. ?, ? ??? ?? ???? ???? ?? ?? DOM? ??? ??? ???? ?????.

---

6. React? ??? ??

React? ??? ??? ???? ??? ??? ??????. ??? ???? ???? ???? ??? ??? ??? ????? ?? ??? ??????. ??? ??? ?????? ????? ?? ?? event.persist()? ???? ??? ???? ???.

??? ?? ??

const handleMouseOver = () => {
  console.log("Mouse is over the button!");
};

const App = () => {
  return <button onMouseOver={handleMouseOver}>Hover over me!</button>;
};

---

7. React?? ?? ??

React?? ?? ???? ?? HTML ??? ?? ?? ???? ?????. ????? ??? ???? ?? ???? ???? ?? ?? ???? ??? ???????.

React? ? ?? ??

const handleClick = (name) => {
  alert(`Hello, ${name}`);
};

const App = () => {
  return <button onClick={() => handleClick("John")}>Click Me</button>;
};

---

8. ??? ????? ??? ??

??? ?? ???? ??? ???? ????? ???? ???? ????, ?? ??? ??? ?? ???? ?????? ??? ???? ??? this ????? ????? ???.

??? ????? ??? ?? ?

<button onClick={handleClick}>Click Me</button>

---

9. ??? ?? ?? ??

• ??? ?? ?? .bind()? ?? ?? ?????. ??? ?? ???? ??? ??? JSX?? ????? ????? ??? ?? ????? ??? ???? ???? ??? ????? ????? ???.
• ?? ?? ??: ?? ???? ?? ?? ???? ??? ??? ? ?? event.preventDefault()? ?????.
• ??? ?? ????: ???? ???? ?? ??? ??? ??? ? ??? ????? ????? ??? ????? ?????.

---

10. ??

React? ??? ??? ??? UI? ??? ? ?? ???? ?????. React? ?? ??? ???? ??? ?? ?? ??? ???? ???? ???? ??? ?? ??? ????? ???? ?? ???? ?? ???? UI? ????? ? ????. ??? ??? ???? ?? ??????? ????? React?? ???? ???? ??? ???? ?? ??????.

? ??? React? ??? ??: ???? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!