React? ??? ??? ??? ? ?? ??? ?? ????? ? ????? ???????? ? 5??? ???? React ??? ?? ??? ? ?? ?? ??? ?? ? ????.

??

• ???? ??????
• ?? ??
• ?? ??
• ?? ???
• ?????!

???? ??????

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

?? ???? ??? ???? ??? ???. ??? ? ?? ??? ?? ?? ???? ?? ??? ??? ??? ???? ?? ? ????. React? ???? "????"?? ??? ??? ??? ???? ? ?????? ??? ? ????.

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

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

? ?? ??? JSX?? ???. ?? ???? JavaScript? HTML? ??? ??? ??? ? ????.

React? ??? ???:

• ??? UI? ?? ??? ???? ??
• Virtual DOM ???? ???? UI ? ???? ????? ??
• ???? ??? ??? ???? ???? ????

?? ??

1. ????

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

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2. ???

props? ?? ????? ?? ????? ???? ??????.

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

??: Prop? ?? ?????.

3. ???

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

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

??: useState(0)? ?? ? 0?? ??? ?????(??? ?? ??? ??? ?? ??).

4. ???

??? ????? React ??? ??? ? ?? ??? ?????. ?? "??"?? ?????.

• useState: ???? ???(??)? ?????
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

• useEffect: ?? ??? ??? ???? ??(?: API ??)
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

???? ??

??? ???

??? ?? ?? ??? ??:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

isLoggedIn? true?? "?????!"? ????, ??? ??? "??????"? ?????.

???:

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

??? ??

??? ?? ??? ???? ??:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

???? ?? ???? "ON"? "OFF"? ?????.

???:

<ToggleButton />  // Shows: "OFF" by default

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

??? ??? ?? ??? ??? ?? ????.

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '?' : '?'} {likes > 0 && likes}
    </button>
  );
}

? LikeButton ?? ??:

• ?? ???? ???? ?????
• ???? 0? ? ? ??(?) ??
• ???? ?? ?? ??? ?? ??? ??(?)? ?????. 0
• ?? ? ?? ? ?? ????

?? ?:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

?? ??! ?

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

??? ??? ?????

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

• Next.js: ???? ? ????? ???? ? ?? React ?????
• Gatsby: ?? CMS ?? ????? ?? React ?????
• Vite: React? ??? ?? ??? ??????? ???? ? ??? ????? ?? ?? ??

??? ??? ???

??? ???

? ??? ins? React ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!