ایجاد پروژه React

 مقدمات:

قبل از شروع کار با این آموزش، مطمئن شوید که موارد زیر را نصب کرده اید:

  • Node.js 
  • npm: npm به همراه Node.js نصب می شود.

مراحل: 

  1. ابتدا باید به دایرکتوریی که می خواهید پروژه خود را در آن ایجاد کنید بروید. سپس، دستور زیر را در ترمینال یا Command Prompt خود اجرا کنید و نام دلخواه خود را برای پروژه جایگزین my-react-app کنید
 npx create-react-app my-app

این دستور، پروژه React جدید شما را با نام my-react-app در دایرکتوری فعلی ایجاد می کند.

2 . برای شروع کار با پروژه ی تازه ایجاد شده، به دایرکتوری آن بروید:

cd my-react-app

سپس، دستور زیر را برای راه اندازی سرور توسعه محلی و باز کردن پروژه در مرورگر اجرا کنید:

npm start

با اجرای این دستور، مرورگر شما به طور خودکار به آدرس http://localhost:3000 باز می شود و می توانید رابط کاربری اولیه پروژه React خود را مشاهده کنید.

3. ساختار پروژه React شما به صورت زیر است:

├ ── package.json # فایل پیکربندی پروژه

├── README.md # اطلاعات مربوط به پروژه

├── src/ # کد منبع پروژه

│ ├── App.js # کامپوننت اصلی React

│ ├── index.js # نقطه ورود برنامه

│ └── ... # سایر کامپوننت ها، فایل های CSS و غیره

├── public/ # پوشه برای فایل های استاتیک مانند تصاویر و فونت ها

└── ... # سایر فایل های پیکربندی

شما می توانید کد خود را در دایرکتوری src ویرایش کنید. تغییرات شما به طور خودکار در مرورگر بازخوانی می شوند.

4. کار با کد:

فایل اصلی JavaScript در پروژه شما src/App.js است. این فایل شامل کامپوننت اصلی React شما است که رابط کاربری برنامه را render می کند.

شما می توانید با استفاده از JSX، که ترکیبی از HTML و JavaScript است، رابط کاربری خود را بسازید.

برای آشنایی بیشتر با JSX و مفاهیم پایه ی React، می توانید به منابع زیر مراجعه کنید:

استقرار پروژه:

هنگامی که پروژه خود را به پایان رساندید، می توانید آن را برای تولید و استقرار آماده کنید. برای این کار، می توانید از ابزارهایی مانند webpack یا Parcel استفاده کنید.

اطلاعات بیشتر در مورد نحوه ی استقرار پروژه های React را می توانید در مستندات رسمی React بیابید: [نشانی وب نامعتبر برداشته شد]

نکات: 

  • در صورت بروز مشکل در نصب یا راه اندازی Create React App، می توانید به مستندات رسمی آن مراجعه کنید 
  • برای یادگیری بیشتر در مورد React، از وب سایت رسمی آن دیدن کنید 
  • در این ویدیو از ویرایشگر کد VS Code برای ویرایش کد پروژه استفاده شده است. شما می توانید از هر ویرایشگر کد دیگری که با JavaScript سازگار باشد استفاده کنید.