?? ?????? React? Node.js? ??????. ?? ??? ??? ?? ?? ? ???? ?? ??? ?????. ?? ??? ? ?? ?????????! ? ?? ?? ?? ??????? ??? ??? ?? ??? ?????? ????? ??? ?? ????. ?????? ?????, ??? ??? ??????? ?? ???? ?? ?? ??????? ??? ? ????. ?? ?? ???? React? Node.js? ???? ??? ?? ??? ?? ??? ??? ???????.

1??: Node.js ? Express? ??? ???

??? ???? ??? ?????. Express? ??? ???? ??? JSON ??? ??? ?????? ????.

1. Express ??: ????? ?? ????? ?? ??? ???? Express? ?????.

   npm install express

1. ?? ??: ?? ??? ???? ???? ??? ??? ???? ??? ??? ?????.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

??:

• express ??? ???? express()? ???? ?? ????? ?????.
• ??? ???? ??? JSON ??? ???? ??? GET ??? /greet? ??????.
• ?? 3000?? ??? ???? ??? ??? ?? ??? ?????.

---

2??: React? ??? ?????

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

1. React ? ???: React ?? ?? ???? ?? ?? ??? ???? create-react-app? ???? ?? ?? ? ????.

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. ????? ?? ??: ?? ????? ???? ??? ????? App.js ??? ??? ?????.

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

??:

• useState? ???? ?? ???? ???? ? ?????.
• useEffect? ????? ???? ? ???? ??? ????? ? ?????.
• ??? fetch() API? ???? http://localhost:3000/greet? ??? ??? ??? ?????. ????? ???? ???? ???? ?? ??? ???????.
• ??? ???? ?? ????? "?? ?..."??? ??? ?????.

---

3??: ? ??

1. ??? ??: ??? ??(server.js ??? ?? ??)?? ??? ?????.

   npm install express

1. ????? ??: ????? ??(React ?? ?? ??)?? ??? ?????.

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

?? ????? ?? http://localhost:3000?? ?????. ????? ??? ??? ???? ???? "Zee here..."? ?????.

---

??

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

---

?? ???:

• ? ?? ??????? ??? ??? ????. ??? ?????? ???? ????? ??? ? ????.
• React? useState ? useEffect ??? ??? API?? ???? ???? ? ?????.
• Express? ??? API ??? ?? ???? ??? ????????.

? ??? React? Node.js? ???? ??? ??? ?????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!