???? React ???? ????: 0?? ???? ??? ???

---

??

React? ??? ????? ??? ?? ?? ???? JavaScript ????? ? ?????. ????? ??? ????? ?? ??? ??? ???? ??? ??? ?? ?? ??? ??????? ???? ? ?????. ? ?????? React ?? ?? ??, HOC(?? ?? ??)? ?? ?? ??, ??? ????? ?? ?? ? ??? ??? ?? ??? ? ?? ??? ????. ???? ????? React ??????? ???? ??? ? ?? ??? ??? ? ????.

---

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

React ?? ??? ????? JSX(JavaScript? ?? ??)? ???? UI ??? ???? JavaScript ?? ?? ??????. ?? ??? ???? UI? ????? ??? ??? ???? ??? ? ????.

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

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

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

---

HOC(?? ??)? ?? ??

HOC? ??????

?? ?? ??? ?? ??? ???? ??? ??? ?? ??? ???? ?????. HOC? ?? ?????? ??? ????? ? ?????.

??? ?? ??? ???? HOC? ????.

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

? ??? withLogging HOC? WelcomeMessage ?? ??? ???? ?? ??? ???? ??? props? ?????. ?? ?? ?? ?? ??? ???? ??? ??, ?? ?? ?? ?? ?? ???? ?? ?? ??? ???? ? ????.

---

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

React? ??? ??? ???? ??? ?? ??? ?? ? ?? ?? ??? ??? ? ????. ???? ???? ? ?? ??? ?? ? ??? useEffect???.

??? ???? ?:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

??? ??? ????.

• useState? ?? ??? ??? ???? ?????.
• useEffect? ?? ??? ?? ???? ? ???? ???? ? ?????.
• ????? ?? ??? ??? ???? ???? ??????.

??? ??? ??: useState ? useEffect? ?? ??? ???? ?? ??? ?? ???? ?? ? ???(?: ??? ????)? ?? ?? ??? ? ????.

---

useEffect? ???? ??? ??

React? useEffect ??? API ??, ??? ?? ?? DOM ??? ?? ???? ???? ? ?? ?????.

???? ?? ??:

?? ??? ??? ??? ?? ????. ?? ?? ?? ??? ??? ? ???? ???? ?? ??? ???? ????. ??? ??? ??? useEffect? ??? ? ????.

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

? ??([])? ???? ? ??? ? ?? ???? componentDidMount? ??? ??? ? ????.

?? ??:

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

?:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

? ???? useEffect ??? ???? ???? ?? ??? ??? ??? ? ??? ??? ?? ??? ?????.

??? ??? ??: ??? ??? ?? ??? ? ?? ???? ?? ??? ???? ??? ?? ??? ?? ???? ?? ??? ??? ? ????.

---

? ??

?? ?? ??? ??????? ???? ????, ?? ?? ???? ????, ???? ???? ?? ?? ??? ?????.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

? ????:

• DataFetcher? API?? ???? ??? ?????.
• withLogging HOC? DataFetcher? ???? ??? ??? ?????.
• ? ????? ?? ?? ???? ??? DataFetcher? ??? ???? ?????.

---

?? ?? ??

JSX? ??????

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

useEffect? ???? ??? ??????

useEffect? ???? ??? ?? ???? ??? ???? ?? DOM ??? ?? ???? ??? ? ????.

?? ??(HOC)?? ??????

HOC? ?? ??? ??? ??? ?? ??? ???? ???, ?? ?? ??? ???? ? ????.

---

??

? ?????? React ?? ?? ?? ? ???? ??? ?? ? ??? ?? ?? ??????. ?? ?? ??? ???? ??? ?? ?? ??? ???? ?? ??? ???? useEffect? ???? ???? ???? ??? ?? ?? ???? ??? ??? ?? ??? ???? ?? ??? ??? ?? ?????. ??? ?? ??? ??? ??? ? ?? React ??????? ??? ? ?? ???. ?? ?????!

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