فهرست سرفصل‌های 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 — آشنایی با ES6 (ES6)

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

آشنایی با ES6 (ES6)

در این صفحه آشنایی با ES6 را خیلی ساده می بینیم. می فهمی ES6 چه ربطی به جاوااسکریپت و ری اکت دارد. همچنین می فهمی چرا قبل از ری اکت باید ES6 بلد باشی.

آشنایی با ES6 دقیقا یعنی چه؟

ES6 مخفف ECMAScript 6 است. ECMAScript اسم استاندارد زبان جاوااسکریپت است. یعنی یک قانون نامه که می گوید جاوااسکریپت باید چطور کار کند. نسخه ششم این استاندارد در سال 2015 منتشر شد و به آن ECMAScript 2015 هم می گویند.

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

چرا برای ری اکت باید ES6 بلد باشیم؟

تقریبا تمام کدهای ری اکت مدرن با قواعد ES6 نوشته می شوند. اگر ES6 را بلد نباشی، کدها شبیه یک متن رمز شده می شوند. اما وقتی مفاهیم ES6 را یاد بگیری، خواندن و نوشتن کامپوننت ها خیلی راحت می شود.

در فصل های بعدی برای هر مبحث ES6 یک بخش جدا داریم. می توانی روی هر موضوع تمرکز کنی و کم کم همه چیز برایت جا بیفتد. هر کدام از این ویژگی ها در پروژه های واقعی ری اکت زیاد استفاده می شوند.

مهم ترین ویژگی های ES6 برای ری اکت

در منبع چند ویژگی مهم ES6 معرفی شده است. این ها ستون های اصلی جاوااسکریپت مدرن هستند و در ری اکت هم همیشه می بینی شان:

  • کلاس ها (Classes): ساختن الگو برای اشیا، شبیه قالب کارنامه.
  • توابع پیکانی (Arrow Functions): نوشتن تابع کوتاه و جمع وجور.
  • متغیرها با let و const: جایگزین امن تر برای var قدیمی.
  • متدهای آرایه مثل .map(): کار گروهی روی لیست ها.
  • ساختاردهی (Destructuring): باز کردن سریع اجزای آرایه و شیء.
  • ماژول ها (Modules): جدا کردن کدها در فایل های منظم و تمیز.
  • عملگر سه تایی (Ternary): نوشتن if کوتاه در یک خط.
  • عملگر پخش (Spread): پخش کردن اعضای آرایه یا شیء در جای دیگر.

نکته: هر کدام از این سرفصل ها در یک صفحه جدا توضیح داده می شود. مثلا کلاس ها در صفحه «Classes»، و توابع پیکانی در صفحه «Arrow Functions» بررسی می شوند.

چطور شروع کنم ES6 را برای ری اکت یاد بگیرم؟

برای شروع آشنایی با ES6 بهتر است یک مسیر ساده و مرحله ای داشته باشی. این کار باعث می شود مغزت قاطی نکند و هر مفهوم را جداگانه هضم کند.

  1. اول صفحه ارتقا (Upgrade) را مرور کن تا بدانی چرا نسخه های جدید مهم اند.
  2. بعد دوباره به همین صفحه آشنایی با ES6 برگرد و سرفصل ها را نگاه کن.
  3. سپس سراغ صفحه کلاس ها برو و روی همان مبحث تمرکز کن.

می توانی هر بار فقط روی یک ویژگی مثل متدهای آرایه تمرکز کنی. مثلا چند تمرین کوچک با .map() انجام بده. این کار شبیه حل تمرین ریاضی است؛ هر چه بیشتر تمرین کنی، دستت راه می افتد.

ارتباط ES6 با بخش های بعدی آموزش ری اکت

در صفحه مقدمه (Intro) دیدی که ری اکت یک کتابخانه جاوااسکریپتی است. حالا ES6 می گوید این جاوااسکریپت بهتر است چگونه نوشته شود. در صفحه کلاس ها، توابع پیکانی و بقیه سرفصل ها دقیقا همین ایده را روی کد عملی می کنیم.

تقریبا در تمام مثال های بعدی ری اکت، ES6 حضور دارد. مثلا وقتی کامپوننت می نویسی، زیاد با توابع پیکانی و ساختاردهی روبه رو می شوی. پس هر قدر این صفحه و سرفصل های مرتبط را بهتر بفهمی، خواندن مثال های بعدی برایت ساده تر می شود.

جمع بندی سریع

  • ES6 نسخه مدرن استاندارد جاوااسکریپت است.
  • ری اکت تقریبا همیشه با قواعد ES6 نوشته می شود.
  • کلاس ها، توابع پیکانی و let/const از مهم ترین ویژگی ها هستند.
  • یادگیری مرحله ای هر سرفصل ES6 فهم ری اکت را خیلی راحت تر می کند.