فهرست سرفصل‌های React
خانه (Home) مقدمه (Intro) شروع کار (Get Started) اولین اپ (First App) رندر HTML (Render HTML) ارتقا (Upgrade) آشنایی با ES6 (ES6) کلاس ها در ES6 (ES6 Classes) توابع پیکانی ES6 (ES6 Arrow Functions) متغیرها در ES6 (ES6 Variables) متد map روی آرایه ها (ES6 Array map()) دیس ترکچرینگ (تقسیم ساختاری) (ES6 Destructuring) عملگر پخش (Spread) (ES6 Spread Operator) ماژول ها در ES6 (ES6 Modules) عملگر سه تایی (Ternary) (ES6 Ternary Operator) رشته های قالبی (Template Strings) (ES6 Template Strings) مقدمه JSX (JSX Intro) عبارت ها در JSX (JSX Expressions) خصیصه ها در JSX (JSX Attributes) شرط ها در JSX (JSX If Statements) کامپوننت ها (Components) کلاس ها (Class) پراپس ها (Props) (Props) دیس ترکچرینگ پراپس ها (Props Destructuring) پراپس children (Props Children) رویدادها (Events) رندر شرطی (Conditionals) لیست ها (Lists) فرم ها (Forms) ارسال فرم (Forms Submit) فیلد Textarea (Textarea) فیلد Select (Select) چند ورودی در فرم (Multiple Inputs) چک باکس (Checkbox) دکمه های رادیویی (Radio) پورتال ها (Portals) Suspense (Suspense) استایل دهی با CSS (CSS Styling) CSS Modules (CSS Modules) CSS-in-JS (CSS-in-JS) مسیریابی (Router) (Router) ترنزیشن ها (Transitions) (Transitions) Forward Ref (Forward Ref) کامپوننت های مرتبه بالاتر (HOC) (HOC) استایل دهی با Sass (Sass) هوکس چیست؟ (What is Hooks?) هوک useState (useState) هوک useEffect (useEffect) هوک useContext (useContext) هوک useRef (useRef) هوک useReducer (useReducer) هوک useCallback (useCallback) هوک useMemo (useMemo) هوک های سفارشی (Custom Hooks) کامپایلر (Compiler) کوئیز (آزمون کوتاه) (Quiz) تمرین ها (Exercises) سیلابس (سرفصل دوره) (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) آمادگی مصاحبه (Interview Prep) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
React

React — کامپایلر (Compiler)

آخرین بروزرسانی: 1404/08/24

کامپایلر (Compiler)

اینجا درباره کامپایلر آنلاین ری اکت صحبت می کنیم؛ محیطی که توی مرورگر باز می کنی، کدت را می نویسی، همان جا اجرا و نتیجه را می بینی، بدون اینکه چیزی روی سیستم نصب کنی.

کامپایلر آنلاین ری اکت در W3Schools Spaces

در منبع، کامپایلر ری اکت همان ادیتور آنلاین W3Schools Spaces است. این محیط روی سرور Node.js اجرا می شود و تو فقط با مرورگر کار می کنی.

می توانی ظاهر سایت، کد جاوااسکریپت و اجزای ری اکت را مستقیم ویرایش کنی. همه چیز در خود مرورگر انجام می شود و نیازی به نصب VS Code یا Node.js روی سیستم نداری.

نکته: برای شروع فقط کافی است در Spaces محیط Node.js را انتخاب کنی و یک پروژه جدید بسازی.

ویژگی های مهم کامپایلر آنلاین ری اکت

منبع چند قابلیت اصلی این کامپایلر را لیست کرده است. آن ها را ساده سازی کنیم تا راحت تر درک شوند.

  • قالب ها (Templates): می توانی از صفر شروع کنی یا از قالب های آماده استفاده کنی.
  • ابری بودن: همه چیز روی سرور است؛ فقط مرورگر لازم داری.
  • ترمینال و لاگ ها: خطاها و خروجی ها را همان جا می بینی و دیباگ می کنی.
  • فایل نویگیتور: بین فایل های مختلف پروژه راحت جابه جا می شوی.
  • قابلیت های دیگر: مثل ویرایش زنده و ساختار پوشه ای منظم.

برای دیدن توضیحات کامل می توانی به صفحه رسمی Spaces بروی: W3Schools Spaces.

تمرین بیشتر با کامپایلر آنلاین ری اکت

منبع تأکید می کند که تمرین مداوم مهم ترین راه یادگیری برنامه نویسی است. کامپایلر آنلاین ری اکت کمک می کند خیلی سریع ایده هایت را تست و اجرا کنی.

در این ادیتور می توانی انواع زبان ها را تمرین کنی، نه فقط ری اکت. بخش منبع می گوید زبان های جدید مرتب اضافه می شوند؛ یعنی محیط همیشه در حال به روز شدن است.

نکته: اگر تازه با ری اکت آشنا شده ای، بهتر است همراه این ابزار، بخش های قبلی مثل هوک های سفارشی و هوک useMemo را هم مرور کنی.

مدیریت پکیج ها در محیط آنلاین

در منبع بخشی درباره Easy Package Management آمده است. منظور از پکیج، کتابخانه ها و فریم ورک هایی است که به پروژه اضافه می کنی، مثل React Router یا Axios.

داخل Spaces می توانی این پکیج ها را ببینی، اضافه کنی یا حذف کنی. همه چیز با چند کلیک انجام می شود و لازم نیست دستورهای پیچیده نصب را در ترمینال خودت بنویسی.

این مدیریت ساده باعث می شود تمرکزت روی منطق ری اکت و ساخت کامپوننت ها بماند، نه روی تنظیمات محیط.

ساخت سایت های قوی با قالب ها

منبع چند تصویر از قالب های آماده مثل فروشگاه، وبلاگ و رزومه نشان می دهد. با این قالب ها می توانی خیلی سریع یک سایت کامل بسازی.

ایده ساده است: به جای شروع از صفحه سفید، یک قالب آماده انتخاب می کنی و آن را طبق نیاز خودت تغییر می دهی. این مخصوصاً برای تمرین ری اکت روی پروژه های واقعی بسیار مفید است.

می توانی از این قالب ها به عنوان تمرین استفاده کنی؛ مثلاً هوک های سفارشی خودت را در این پروژه ها پیاده کنی.

هاست و دامنه برای پروژه های ری اکت

بخش بعدی منبع درباره اشتراک گذاری سایت با دنیا است. Spaces برای پروژه ات ساب دامین و SSL رایگان می دهد تا سایتت امن تر و قابل اعتمادتر باشد.

همچنین می توانی دامنه اختصاصی بخری یا منتقل کنی و آن را به پروژه خودت وصل کنی. این یعنی پروژه ای که در کامپایلر آنلاین ری اکت ساخته ای، خیلی سریع تبدیل به یک سایت واقعی می شود.

نکته: داشتن SSL کمک می کند سایتت در نتایج جست وجو شانس بیشتری داشته باشد.

کامپایلر چگونه کار می کند؟

در انتهای منبع، یک تصویر ساده از نحوه کار Spaces آمده است. ایده کلی این است که:

  • تو در مرورگر کد می نویسی.
  • کد روی سرور اجرا می شود.
  • نتیجه اجرا دوباره به مرورگر برمی گردد.

برای تو، همه چیز شبیه یک ادیتور ساده به نظر می رسد، اما پشت صحنه یک محیط Node.js و وب سرور فعال است.

گام های شروع کار با کامپایلر آنلاین ری اکت

  1. 1) وارد بخش Spaces در W3Schools شو.
  2. 2) یک Space جدید با محیط Node.js بساز.
  3. 3) قالب دلخواه را انتخاب کن یا از صفر شروع کن.
  4. 4) کد ری اکت را در ادیتور بنویس و اجرا کن.
  5. 5) وقتی راضی شدی، سایت را منتشر کن و لینک را به بقیه بده.

اگر دنبال توضیح تئوری تر درباره هوک ها هستی، صفحه هوک های سفارشی (Custom Hooks) می تواند مکمل خوبی برای این کامپایلر باشد.

برای لینک دادن داخلی در سایت خودت می توانی از عبارت کامپایلر آنلاین ری اکت استفاده کنی تا مستقیم به این صفحه برسی.

جمع بندی سریع

  • کامپایلر آنلاین ری اکت یعنی ادیتور مبتنی بر Spaces در مرورگر.
  • نیازی به نصب محیط محلی نیست؛ فقط مرورگر کافی است.
  • مدیریت پکیج ها، ترمینال و قالب ها همه یک جا فراهم شده اند.
  • می توانی سایت را روی ساب دامین و SSL رایگان منتشر کنی.
  • این ابزار برای تمرین و ساخت سریع پروژه های ری اکت عالی است.