9. ارتباط برنامه React با Express

یه قضیه رو روشن کنیم اینجا.

شما وقتی با npm create react app یک پروژه می سازید ، یک سری فایل و این ها درست میکنه. که درواقع Front-end پروژتون هست. برنامه Reactتون هست.

و هنگامی که فایل های پروژه Express رو درست میکنید در واقع دارید Back-end رو می سازید. حالا امروز میخوایم با هم ساختار یک برنامه رو ایجاد کنیم که پروژه Front و Back رو پیکربندی کرده باشه به بدرسته.

ابتدا پروژه React رو در پوشه Client می سازیم.

پروژه Express رو هم در پوشه ی در کنارش به اسم API می سازیم. به صورتی که دیروز انجام دادم:

https://virgool.io/ReactForSemiBeginner/%D8%B1%D9%88%D8%B2-%D9%87%D8%B4%D8%AA%D9%85-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D8%B3%D8%B1%D9%88%D8%B1-%D8%A8%D8%A7-express-orbyaxxlxkoi


میریم سمت Client وارد فایل app بشیم . اول یک State تعریف میکنیم (برای ذخیره اطلاعات دریافتی از Api )

const [ data , setData ] = useState(&quot &quot);


حالا با استفاده از UseEffect تعریف میکنیم که در هربار رندر شدن صفحه ، اطلاعات رو از API دریافت کنه.

useEffect(() => {
                              fetch(&quothttp://localhost:8000/signin&quot)
                                       .then((res) => res.text())
                                       .then((data) => setData(data)); } , [ ] );
return ( <div>
              <p>  { data }  </p>
              </div>)

در آخر هم گفتیم اطلاعات دریافت شده از API رو داخل تگ P نشون بده به کاربر.

یه نکته میمونه که زیاد وارد جزییاتش نمیشم. برای اینکه از پورت 3000 بتونیم به پورت 9000 دسترسی پیدا کنیم یه ماژولی باید نصب کنید به اسم cors (داحل API) و در فایل app.js هم معرفیش کنی:

var cors = require ( &quot cors &quot );
app.use ( cors( ) );

حالا می تونید برنامه React رو اجرا کنید و با وارد کردن آدرس signin/ نتیجه رو مشاهده بفرمایید.