https://virgool.io/feed/@siavash_sattari Front-end Developer fa 2026-06-07 16:49:27 https://files.virgool.io/upload/users/8396/avatar/Ozimol.jpg?height=120&width=120 https://virgool.io/@siavash_sattari https://virgool.io/@siavash_sattari/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-utility-type-%D9%87%D8%A7%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-typescript-ja9igf59oxlp سلام عزیزان 👋 امیدوارم ایام به کام باشه و حال دلتون حسابی خوب باشه. تو این مقاله قصد دارم به برخی از Utility Type های کاربردی Typescript که در لیست زیر آورده شدن بپردازم و پیشاپیش امیدوارم که براتون مفید باشه. Partial Required Readonly Record Pick Omit Exclude Extract NonNullable ReturnType Awaited ReadonlyArrayThisParameterTypeTemplate Literal TypesUppercaseLowercaseCapitalizeUncapitalizeParameters۰۱. تایپ <Partial<Typeتایپ Partial تمام پراپرتی‌ های یک تایپ رو اختیاری میکنه. به مثال زیر توجه کنید:در مثال بالا با Partial کردن تایپ مورد نظر، در واقع تمام پراپرتی‌ ها optional در نظر گرفته شدن. در واقع Partial مشابه کد زیر عمل میکنه، با این تفاوت که با وجود Partial، دیگه نمیتونیم بصورت دستی پراپرتی های تایپ User رو بصورت اختیاری تعریف کنیم!۰۲. تایپ <Required<Typeتایپ Required برخلاف Partial عمل میکنه و تمام مقادیر رو اجباری میکنه، حتی اگر پراپرتی ها optional در نظر گرفته شده باشن. مثال:۰۳. تایپ <Readonly<Typeهمونطور که از اسم این تایپ مشخصه، به کمک Readonly میتونیم پراپرتی های یک interface یا یک type رو بصورت Readonly تعریف کنیم. به مثال زیر توجه کنید: به نکته ی مهمی که در اینجا باید بهش توجه کنیم این هست که فقط برای interface ها و type ها میتونیم از Readonly استفاده کنیم و برای متغیرها قابل استفاده نیست! به عنوان مثال در قطعه کد زیر با وجود اینکه برای تایپ متغیر از Readonly استفاده کردیم، هیچ اتفاقی نمیفته و متغیر firstName همچنان قابل تغییر هست:همونطور که میدونید برای رفع این مشکل باید برای تعریف متغیر از const استفاده کنیم:۰۴. تایپ <Record<Keys, Typeتایپ Record یکی از پرکاربردترین Utility Type هاست. به اینصورت که دو تایپ رو به عنوان ورودی دریافت میکنه و اونهارو باهم ترکیب میکنه! به عبارتی اگر بخوایم تایپی داشته باشیم که با اون بتونیم نوع دقیق Key و Value پراپرتی‌ های یک آبجکت‌ رو مشخص کنیم، تایپ Record به کمکمون میاد! این تایپ به عنوان پارامتر اول، تایپ Key ها و به عنوان پارامتر دوم، تایپ Value ها رو دریافت میکنه. برای درک بهتر، به مثال های زیر توجه کنید:مثال دوم:۰۵. تایپ <Pick<Type, Keysبا استفاده از تایپ Pick میتونیم یک تایپ شخصی‌ سازی شده جدید بر اساس پراپرتی‌ های دلخواه مون تعریف کنیم. تایپ Pick دو تا ورودی میگیره. ورودی اول تایپ موردنظرمون هست که میخوایم پراپرتی‌ هاش رو انتخاب کنیم و ورودی دوم هم شامل کلید پراپرتی‌ هایی هست که میخوایم توی تایپ جدید حضور داشته باشن. برای درک بهتر به مثال زیر توجه کنید: توی کد بالا گفتیم که از تایپ User میخوایم یک تایپ جدید با پراپرتی‌ های id و name داشته باشیم.۰۶. تایپ <Omit<Type, Keysتایپ Omit هم یکی از پرکاربردترین Utility type هاست. Omit مشابه Pick عمل میکنه، با این تفاوت که برای پارامتر دومش، باید فیلدهایی رو تعریف کنیم که نمیخوایم در تایپ جدید وجود داشته باشن. به مثال زیر توجه کنید:۰۷. تایپ <Exclude<UnionType, ExcludedMembersتایپ Exclude دو تا ورودی میگیره. ورودی اولش یک Union Type هست که میخوایم ازش یک تایپ جدید بسازیم و ورودی دومش هم شامل تایپ‌ هایی هست که میخوایم اونهارو از تایپ اول حذف کنیم! در واقع نحوه ی عملکرد Exclude به اینصورته که مقادیر پارامتر دوم که با پارامتر اول یکسان هستن رو حذف میکنه! برای درک بهتر به مثال های زیر توجه کنید:در قطعه کد بالا ما یک تایپ جدید از AllTypes ساختیم که توی اون Function حذف شده. دقت کنید که ما Boolean رو هم مشخص کردیم، اما چون توی AllTypes مقدار Boolean نداشتیم، نادیده گرفته شده!مثال دوم:۰۸. تایپ <Extract<Type, Unionنحوه ی عملکرد Extract به اینصورته که به عنوان پارامتر اول، تایپ موردنظر رو میگیره و به عنوان پارامتر دوم هم تایپی که میخوایم از تایپ اول استخراج کنیم رو دریافت میکنه. مثال:به لاین ۳ دقت کنید. در این لاین خواستیم a , f رو از تایپ اول بگیریم اما چونکه f در UnionType وجود نداره، فقط a به عنوان تایپ نهایی انتخاب میشه.۰۹. تایپ <NonNullable<Typeاز NonNullable برای حذف مقادیر null و undefined استفاده میکنیم. مثال:۱۰. تایپ <ReturnType<Typeبا استفاده از ReturnType، تایپ خروجی یک تابع رو مشخص میکنیم. مثال:برای درک بهتر، در مثال زیر حالت‌ های مختلف ReturnType رو میتونید بررسی کنید:11. تایپ <ReadonlyArray<Typeاگه بخوایم یک آرایه Readonly داشته باشیم (یعنی کاری کنیم که اعضای آرایه ثابت و بدون تغییر باقی بمونن)، میتونیم از این تایپ استفاده کنیم:همونطور که میبینیم با این کار امکان تغییر اعضای آرایه و حتی اضافه و حذف کردن آیتم ها وجود نداره!12. تایپ <Awaited<Typeاگر یک تایپ از نوع خروجی یک Promise لازم داشته باشیم، میتونیم از Awaited استفاده کنیم. برای درک بهتر به مثال زیر توجه کنید:همونطور که میبینیم میتونیم نوع Promise های تو در تو رو هم بدست بیاریم :)13. تایپ <ThisParameterType<Typeهمونطور که میدونیم توی تایپ‌ اسکریپت در حالت عادی نوع this توی یک تابع any هست و اگه بخوایم نوع this رو صراحتاً مشخص کنیم میتونیم از روش زیر استفاده کنیم:حالا اگه بخوایم یک تایپ از نوع this یک تابع داشته باشیم‌، میتونیم از ThisParameterType استفاده کنیم:14. تایپ های Template Literal :تایپ های Template Literal مشابه فرمت template strings در جاوااسکریپت نوشته میشن و این امکان رو به ما میدن که نوع های ترکیبی union ایجاد کنیم! مثال:برای کمک به ساخت تایپ های template literal، چند نوع utility type کاربردی در تایپ اسکریپت وجود داره که در ادامه باهاشون آشنا میشیم.15. تایپ <Uppercase<StringTypeاین تایپ همه کاراکتر های یک رشته رو به حروف بزرگ تبدیل میکنه. مثال:۱۶. تایپ <Lowerercase<StringTypeاین تایپ همه کاراکتر های یک رشته رو به حروف کوچیک تبدیل میکنه. مثال:۱۷. تایپ <Capitalize<StringTypeاین تایپ اولین حرف یک رشته رو به حرف بزرگ تبدیل میکنه. مثال:۱۸. تایپ <Uncapitalize<StringTypeاین تایپ اولین حرف یک رشته رو به حرف کوچیک تبدیل میکنه. مثال:خوب عزیزان به پایان این مقاله رسیدیم. امیدوارم براتون مفید بوده باشه و استفاده ی لازم رو برده باشین :) 19. تایپ <Parameters<Typeاین تایپ به عنوان پارامتر اول تایپی از نوع function دریافت میکنه و تمام پارامترهای اون function رو در قالب یک آرایه برامون برمیگردونه. برای درک بهتر به مثال زیر توجه کنید:به لاین 5 دقت کنید. تابع ما پارامتر s با تایپ string رو به عنوان ورودی دریافت کرده، پس ما تایپ ["string"] رو خواهیم داشت که در مثال زیر ازش استفاده کردیم:خوب دوستان به پایان این مقاله رسیدیم. امیدوارم براتون مفید بوده باشه. ممنون میشم اگر نکته ای داشتین در قالب کامنت باهام به اشتراک بزارین تا پست رو ویرایش کنم :) مخلصیم 🌱 سیاوش ستاری سیاوش ستاری Mon, 01 Jan 2024 16:59:56 +0330 https://virgool.io/@siavash_sattari/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-git-bisect-yneaw9wu9vxd سلام عزیزان، امیدوارم حالتون عالی باشه. چند ماهی از دیدنتون دور بودم و الان با انرژی بیشتری برگشتم و خوشحالم که دوباره اینجام. تو این مقاله (که مقاله کوتاهی هم خواهد بود) قرار هست با git bisect آشنا بشیم و ببینیم که در چه مواقعی برامون کاربردی خواهد بود! خوب اگر آماده این بیاین شروع کنیم :)فرض کنید در جایی از پروژه تون مشکلی پیش اومده و میخواید ببینید که این مشکل اولین بار در کدوم commit ایجاد شده! راه حل ساده و زمانبری که برای این رفع این مشکل وجود داره، این هست که commit ها رو یکی یکی بررسی کنید و به عقب برگردید و برای هر کامیت چک کنید که آیا در این کامیت مشکلی وجود داره یا نه! اما همونطور که میدونید اگر تعداد کامیت‌ ها زیاد باشه، این کار خیلی زمان‌ بر خواهد بود و در همچین مواقعی باید حرفه ای تر عمل کنیم :) تو این شرایط میتونیم از ترفندی به نام git bisect استفاده کنیم! این ابزار با استفاده از جستجوی دودویی (binary serach)، تعداد کامیت‌ هایی که باید بررسی کنیم رو خیلی کمتر میکنه! به عنوان مثال، اگر ۱۰۰ کامیت داشته باشیم، با روش اول ممکنه که همه ی کامیت هارو بررسی کنیم، در حالی که با کمک git bisect ممکنه فقط با بررسی ۸ کامیت به نتیجه دلخواهمون برسیم! برای استفاده از git bisect، ابتدا دستور زیر رو اجرا میکنیم: حالا باید شناسه (id) کامیتی که حدس میزنیم مشکلی در اون وجود داره و کامیتی که مطمئنیم مشکلی در اون وجود نداره رو پیدا کنیم. طبیعتا کامیت فعلی دارای مشکل هست و برای کامیت بدون مشکل هم میتونیم یک کامیت قدیمی که هیچ مشکلی نداره رو انتخاب کنیم :) فرض کنید id این دو کامیت به ترتیب <LAST-COMMIT-ID> و <OLD-COMMIT-ID> باشن، حالا دستورات زیر رو اجرا میکنیم:این دستورات در واقع به bisect میگن که ‍<OLD-COMMIT-ID> کامیت خوبیه (چون مشکلی در اون وجود نداره) و <LAST-COMMIT-ID> هم کامیت بدیه (چون مشکلی در اون وجود داره)! با اجرای دستور دوم، bisect کامیتی که از نظر ترتیب وسط <LAST-COMMIT-ID> و <OLD-COMMIT-ID> هست رو برامون checkout میکنه و از ما میخواد که چک کنیم آیا این کامیت هم مشکلی داره یا نه! سوالی که ممکنه پیش بیاد این هست که یعنی چی که bisect کامیت رو checkout میکنه؟ مگه فقط برنج‌ها نبودن که‌ checkout میشدن :) ؟ منظور از checkout شدن در اینجا این هست که فایل ها به شکلی که تو اون کامیت بودن، تغییر میکنن تا بتونیم چک کنیم که آیا واقعا مشکلی در داخلشون وجود داره یا نه! همونطور که میدونید برای branch هم دقیقا همین مفهوم وجود داره و وقتی checkout میکنیم، فایل ها به شکلی که در اون branch نوشته شده بودن تغییر میکنن! بعد از بررسی،‌ اگر مشکلی وجود داشت، دستور زیر:و اگر مشکلی وجود نداشت دستور زیر رو اجرا میکنیم:این دستورات در واقع به bisect گزارش میدن کامیتی که برامون checkout کرده، خوبه یا بده (به قول خودمون بچه ی خوبیه یا نه :) . بعد از اجرای هر کدوم از دستورات بالا، bisect مجددا کامیت دیگه ای رو برامون checkout میکنه تا ما good یا bad بودنش رو بررسی کنیم. بعد از چند بار تکرار این کار، bisect کامیتی که اولین بار این مشکل رو ایجاد کرده رو گزارش میکنه. برای درک یهتر توضیحات تصویر زیر میتونه بهتون کمک کنه:در آخر یادتون باشه وقتی کارتون با git bisect تموم شد، این دستور رو اجرا کنید تا bisecting خاتمه پیدا کنه: سیاوش ستاری سیاوش ستاری Mon, 25 Dec 2023 10:15:33 +0330 https://virgool.io/@siavash_sattari/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-3-%D9%85%D9%88%D8%AA%D9%88%D8%B1-%D9%82%D8%A7%D9%84%D8%A8-expressjs-%D8%A8%D8%AE%D8%B4-%D8%A7%D9%88%D9%84-pugjs-tvdzuxraaxtw مقدمه : سلام عزیزان ، امیدوارم حالتون خوب باشه ? من اینبار دست پر تر برگشتم و قرار هست یکی از مطالبی که بشخصه از طرفدارهای پروپارقصش هستم رو باهاتون به اشتراک بزارم و پیشاپیش امیدوارم مورد استقبالتون قرار بگیره . همونطور که میدونین HTML بطور عادی استاتیک یا ایستا هست ، یعنی اگر بخوایم در داخل قالبمون داده ‌های پویایی نمایش بدیم ، باید از جاوااسکریپت یا تکنولوژی ‌های مشابه اون استفاده کنیم . خوب اینجاست که Template Engine ها پا به میدون میزارن و خیلی از مشکلات ما رو حل میکنن ! اما خوب یک موتور قالب اصلا چی هست و چه کاری رو برای ما انجام میده که باید بهش توجه کنیم ? با من همراه باشید ...تعریف موتور قالب : یک Template Engine یا اصطلاحا یک موتور قالب ، در ساده ‌ترین حالت یک برنامه ای هست که قالب ‌های نوشته شده به زبان ‌های مختلف رو به HTML واقعی کامپایل میکنه . به عبارت دیگه یک Template Engine داده ‌هایی رو از یک منبع خارجی دریافت میکنه و اونهارو به Template موردنظرمون تززیق میکنه تا نهایتا یک قالب داینامیک داشته باشیم ! نحوه ی عملکرد یک Template Engine به اینصورته که منطق و ظاهر برنامه رو از هم جدا میکنه و اونهارو در داخل یک محیط ایزوله قرار میده ! برای درک بهتر ساختار مدل‌ معروفی مثل MVC رو تصور کنید :) همونطور که میدونید در مدل MVC نحوه ‌ی نمایش عناصر صفحه ، مربوط به View هست و منطق برنامه توسط Controller مدیریت میشه . حالا وظیفه‌ ی Template Engine هم دقیقا همینه که مقادیر مورد نیاز View رو برای ما بارگذاری میکنه .پس تا اینجا فهمیدیم که برای رندر کردن صفحات HTML بصورت داینامیک ، به یک موتور رندرینگ نیاز داریم . تقریبا هر فریمورک قدرتمندی که در دنیای وب فعالیت داره ، حداقل یک Template Engine یا موتور قالب داره که خوشبختانه در Nodejs هم موتورهای قالب متعددی وجود دارن و موتور قالب هایی که ما قصد داریم در ادامه باهاشون آشنا بشیم ، به ترتیب 3 موتور قالب Handlebars ، PUG و EJS هستن که هر کدومشون پیکربندی ها ، قابلیت ها و سینتکس منحصر به فرد خودشون رو دارن !راستی همونطور که از تاپیک این مقاله مشخصه برای اینکه محتوامون زیادی طولانی نشه ، قصد دارم محتوای این مقاله رو به 3 قسمت تقسیم کنم و تو هر قسمت به یکی از 3 موتور قالبی که گفتم اشاره کنم ، پس تو این قسمت صرفا با موتور قالب پرطرفدار و کاربردی Pug.js آشنا میشیم :) موتور قالب PUG :برای شروع ، ساختار پروژه و قطعه کدهای از پیش تعریف شده ی زیر رو در نظر بگیریم :همونطور که تا اینجا فهمیدیم ، به طور کلی وظیفه موتور های قالب (Template Engines) ، جایگزینی مقادیر دریافت شده از سمت سرور در قالب (Template) هست که توسط Controller در اختیار موتور قالب قرار میگیرن . Pug.js یکی از Template Engine های کاربردی Node.js هست و یکسری ویژگی های قدرتمندی مثل شرط ها ، حلقه ها ، include ها و . . . داره که با استفاده از اون ها میتونیم بر اساس ورودی کاربر یا داده های مرجع ، کدهای قالبمون رو به HTML تبدیل کنیم . برای نصب این موتور قالب ، باید تو محیط ترمینال دستور زیر رو اجرا کنیم :npm i pugبعد از نصب PUG ، نیازی به هیچگونه ایمپورت کردنی نیست و برای استفاده از اون تنها کافیه که بصورت زیر از متد set استفاده کنیم :اما این یعنی چی ? ما از طریق متد ( )app.set یک چیزی رو به صورت گلوبال به Express میفهمونیم تا بتونیم در هر جایی که بهش نیاز داشتیم ازش استفاده کنیم . مثلا در دستور اول موتور قالب PUG رو به Express معرفی کردیم و بهش گفتیم که آقا ( منظور از آقا ، Express بزرگوار هست ) برای رندر کردن Template ها باید از موتور قالب PUG استفاده کنی و در دستور بعدی هم بهش گفتیم قالب هایی که برای رندر کردن باید دنبالشون بگردی ، در داخل فولدری بنام views قرار دارن !به نکته ای که در اینجا باید بهش توجه کنیم این هست که پارامتر اول متد مربوط به معرفی موتور قالب (دستور اول) و پارامتر اول متد مربوط به معرفی فولدر قالب ها (دستور دوم) در قطعه کد بالا ثابت هست !توجه : متد مربوط به معرفی فولدر قالب ها در قطعه کد بالا رو بصورت زیر هم میتونیم بنویسیم :چون Express بصورت پیشفرض خودش میدونه قالب هایی که باید رندر بشن در داخل فولدری به نام views قرار دارن ، اما اگر ما قالب هامون در داخل یک فولدر دیگه ای به نام Templates قرار بدیم ، حتماً باید اسم فولدر قالب هارو توی پارامتر دوم متد ( )app.set ذکر کنیم ، پس حواستون به این مورد باشه رفقا :)برای شروع کار با موتور قالب PUG ، یک فولدر جدید به نام views و در داخل پوشه ی views هم یک فایل جدید به نام index.pug ایجاد میکنیم . حالا اگر تو ویرایشگری مثل vscode علامت ! ( از فیچرهای پلاگین Emmet ) رو تایپ کنیم و بعد Enter رو بزنیم ، فرمت اولیه سند PUG رو بصورت زیر خواهیم دید :که ما این قطعه کد رو بصورت زیر تغییر میدیم :حالا که قالبمون رو داریم ، برای رندر کردنش باید در داخل فایل app.js به اینصورت عمل کنیم :همونطور که میبینید به متد ( )res.render فقط اسم قالب index رو دادیم ، یعنی نیازی به هیچ گونه آدرس ‌دهی و دادن پسوند خاصی نیست ! حالا اگر در داخل مرورگر به آدرس localhost:3000 بریم ، همچین چیزی رو خواهیم دید :و بعد اگر از صفحه مون یک inspect بگیریم ، میبینیم که کل محتوای قالبمون به HTML واقعی تبدیل شدن . حالا سوالی که پیش میاد این هست که چطور میتونیم پیام Hello World ی که توی صفحه مرورگر نمایش داده شده و همچنین عنوان پروژه مون که pug هست رو به صورت داینامیک تغییرشون بدیم ? برای این منظور تنها کافیه آبجکتی از داده هایی که نیاز داریم رو به صورت key/value به پارامتر دوم متد ( )app.render پاس بدیم ! یعنی مثلاً به این صورت :حالا بعد از اینکه دیتاهامون رو به سمت قالبمون ارسال کردیم ، برای استفاده از اونها باید در داخل فایل index.pug به اینصورت عمل کنیم :حالا اگر به مرورگر بریم میبینیم که عنوان صفحه با newTitle و متن Hello World هم با متن Hi Guys جایگزین شده :حلقه ها :قبل از آشنایی با ساختار حلقه ها در PUG ، ابتدا در داخل فایل app.js یک آرایه بصورت زیر تعریف میکنیم و اون رو هم به سمت قالبمون میفرستیم :حالا اگر بخوایم در داخل قالبمون از حلقه ها استفاده کنیم ( روی آرایه ای که فرستادیم پیمایش کنیم ) باید به صورت زیر از ساختار each . . . in استفاده کنیم :خروجی :شرط ها :حالا اگر بخوایم در داخل قالب مون از شرط ها استفاده کنیم ، مثلا اگر بخوایم نام افراد رو تنها در صورت برقرار بودن شرط خاصی رندر کنیم ، باید به این صورت عمل کنیم :آشنایی با Layout ها و Block ها :همونطور که میدونیم اگر بخوایم یک سایت بزرگی رو پیاده سازی کنیم ، اکثر مواردی که تو قالب هامون هست ، برای بعضی از صفحات پروژه مون تکراریه و اگر بخوایم برای هر قالبی این موارد رو از دوباره بنویسیم ، با حجم زیادی از کدهای تکراری مواجه خواهیم شد و این خوب نیست ! برای رفع این مشکل میتونیم از Layout ها استفاده کنیم ، یعنی میتونیم موارد تکراری رو در داخل فایل های جدا قرار بدیم تا هرجایی که نیاز داشتیم ازشون استفاده کنیم و از نوشتن کدهای تکراری جلوگیری کنیم ! برای این منظور ابتدا یک فولدر جدید به نام layouts و در داخل اون هم یک فایل جدید به نام main.pug ایجاد میکنیم و سپس موارد تکراری رو از فایل index.pug به این فایل منتقل میکنیم ( مثلاً همونطور که میدونیم قطعه کد زیر در همه ی قالب ‌ها مشترکه ، پس اونو در داخل فایل main.pug قرار میدیم ) : از طرفی در برخی شرایط هم نیاز داریم که برای هر قالبی استایل های خاصی رو اعمال کنیم ، چون ممکنه در یک قالب فرمی داشته باشیم که استایل های منحصر به فرد خودش رو داره ! برای این منظور یعنی برای تفکیک استایل های هر قالب ، باید بصورت زیر از ویژگی Block ها در PUG استفاده کنیم :همونطور که میبینیم برای body هم از یک block استفاده کردیم ، چراکه هر قالبی قطعا محتوای منحصر به فرد خودش رو داره ! حالا برای اینکه در داخل فایل index.pug بتونیم از این layout استفاده کنیم ، باید بصورت زیر عمل کنیم ( به نحوه ی استفاده از block ها و ایمپورت کردن فایل main.pug توجه کنید ) :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که همه چیز به درستی و مثل قبل کار میکنه :خوب دوستان به پایان این مقاله رسیدیم و امیدوارم لذت کافی رو برده باشین . واقعا برای تهیه ی این مقاله زمان زیادی صرف شده و تمام سعیم بر اینه دو مقاله ی بعدی که مرتبط با این مطلب هستن رو هم به همین صورت باهاتون به اشتراک بزارم! برای ادامه ی این سفر نیازمند حمایت و نظراتتون هستم :) خلاصه که حتما با نظر دادن و به اشتراک گذاشتن ازم حمایتم کنید تا پرانرژی تر پیش بریم :) دمتون گرم سیاوش ستاری سیاوش ستاری Sun, 08 May 2022 22:06:29 +0430 https://virgool.io/@siavash_sattari/%D8%AF%D8%B3%D8%AA%D9%88%D8%B1-git-log-%D9%88-%D9%85%D8%B4%D8%AA%D9%82%D8%A7%D8%AA-%D8%A2%D9%86-itwmvlbjfpsi سلام عزیزان ، امیدوارم حالتون خوب باشه و سرشار از انرژی باشید . در این مقاله قصد داریم با دستور git log و بعضی از مشتقات پرکاربردش آشنا بشیم و ببینیم که چطور میتونیم commit های یک repository خاص رو اصطلاحا فیلتر کنیم!خیلی اوقات پیش میاد که ما نیاز به دیدن کامیت‌ های گذشته داریم و میخوایم ببینیم که یک کامیت خاص حاوی چه تغییراتی هست! این تنها به این معنی نیست که میخوایم لیست همه ی کامیت‌ هایی که قبلا انجام شدن رو ببینیم ؛ بلکه میخوایم یطوری بین کامیت‌ های گذشته سرچ کنیم ! به عنوان مثال، میخوایم کامیت‌ هایی رو که یک شخصی خاص در یک تاریخ خاصی انجام داده رو بررسی کنیم. برای این منظور، از git log استفاده میکنیم. خوب بیایم با این دستور بیشتر آشنا بشیم :) دستور زیر رو در نظر بگیریم :این دستور برای هر کامیتی که در branch فعلی انجام شده اطلاعاتی رو نمایش میده. این اطلاعات عبارتند از:‏‌Commit : مقدار هش کامیت رو نمایش میده. این مقدار در واقع شناسه یکتای کامیت هست.‏‌Author : اطلاعات مربوط به کسی که ایجاد کننده کامیت بوده رو نمایش میده.‏‌Date : تاریخ و زمانی که این کامیت انجام شده رو نمایش میده.همچنین پیام مربوط به کامیت انجام شده هم دیده میشه.حالا اگر بخوایم دستور git log رو روی برنچ خاصی ( مثلا برنچ profile ) اجرا کنیم، میتونیم بصورت زیر عمل کنیم :همونطور که بالاتر هم بهش اشاره شد، ما معمولا نمیخوایم همه ی کامیت‌ ها رو ببینیم :) خوشبختانه git log موارد زیادی رو برای جستجو بین کامیت‌ های گذشته در اختیارمون قرار میده و معمولا روند یادگیری این موارد به اینصورته که وقتی در حین انجام پروژه ‌ای نیاز به پیدا کردن کامیت‌ های خاصی داریم، میتونیم با متوسل شدن به گوگل و یک سرچ ساده ، دستور مناسب رو پیدا کنیم و با چند بار تکرار، اونو فرا بگیریم. به همین دلیل، در اینجا فقط بعضی از مواردی که کاربرد بیشتری دارن رو با هم مرور میکنیم. پس با من همراه باشید :)گزارش ۵ کامیت آخری که انجام شده :گزارش کامیت ‌هایی که توسط شخصی به نام X انجام شده :گزارش کامیت‌هایی که قبل از تاریخ 2022/01/10 انجام شدن :حالا میخوام بهتون یه نکته ی کول بگم که خودم بشخصه خیلی باهاش حال میکنم :) نکته ی جالب اینه که git موارد زیر رو هم میفهمه بچه ها :برای دیدن کامیت‌ های از یک تاریخ خاص به بعد هم میتونیم از فلگ after مشابه before استفاده کنیم. همچنین میتونیم این دستورات رو باهم ترکیب کنیم ! به عنوان مثال، دستور زیر گزارشی از ۵ کامیت آخری که بعد از تاریخ 2022/01/01 و تا قبل از دیروز توسط شخصی به نام X انجام شده رو نمایش میده :راستی گاهی اوقات هم نیاز داریم کامیت ‌هایی رو پیدا کنیم که فایل خاصی ( مثلا app.js ) رو تغییر دادن! برای این منظور باید از دستور زیر استفاده کنیم (به فاصله‌ی بین -- و app.js دقت کنید رفقا) :خوب حالا بیایم کمی حرفه ای تر عمل کنیم ؟ نظرتونه :) بچه ها دستور زیر کامیت‌ هایی رو نمایش میده که عبارت bug fix رو در جایی از ریپازیتوری اضافه کردن :همچنین این دستور، کامیت ‌هایی رو نمایش میده که در پیام هاشون (که در زمان کامیت کردن با m- مشخص شدن) ، عبارت X وجود داشته باشه :خوب تا اینجا صرفا دست گرمی بود :) حالا به عنوان تمرین فکر کنید و بگید که دستور زیر چه کامیت ‌هایی رو نمایش میده؟پاسخ : دو کامیت آخری که توسط John Doe از ۱۰ ساعت پیش تا الان انجام شده و عبارت def رو در app.js اضافه کردن.خوب دوستان به پایان این مقاله رسیدیم و امیدوارم که لذت کافی رو برده باشین و تونسته باشم بهتون کمکی کرده باشم . راستی اگر هر نوع سوال ، نظر یا انتقادی داشتین ، خوشحال میشم که در قسمت کامنت ها به اشتراک بزارین . مخلصیم :) سیاوش ستاری سیاوش ستاری Thu, 13 Jan 2022 22:00:38 +0330 https://virgool.io/@siavash_sattari/14-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D9%85%D9%81%D9%87%D9%88%D9%85-props-drilling-zqe6ztpgdq1r سلام عزیزان ، به پارت چهاردهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . در این قسمت در اصل باید با مفهوم Context Api آشنا بشیم ، اما قبلش بهتره که مفهوم Prop Drilling رو کاور کنیم تا به این نتیجه برسیم که در چه مواقعی باید از Context Api استفاده کنیم ! در حالت کلی به فرآیند ارسال props از کامپوننت والد به یکی از کامپوننت های فرزند بصورت آبشاری در درخت کامپوننت ها ، Props Drilling گفته میشه . بزارین روون تر توضیح بدم :)فرض کنین کلی کامپوننت داریم و میخوایم داده ای رو از طریق props از کامپوننت A انتقال بدیم به کامپوننت D . به اینصورت که دیتای مورد نظرمون رو اول از کامپوننت A انتقال میدیم به کامپوننت B و بعد از کامپوننت B انتقال میدیم به کامپوننت C و نهایتا از کامپوننت C هم انتقال میدیدم به کامپوننت D ! خوب اگر دقت کنیم متوجه میشیم که این مابین کامپوننت B و C اصلاً از اون دیتا استفاده نمیکنن و فقط وظیفه ی پاس دادن اون رو برعهده دارن ! کلیت Props Drilling همین چیزی بود که الان خوندین ، ولی به نظر من کافی نیست ! پس بیاین این موضوع رو یکم عمیق تر بررسی کنیم :)احتمالا با مفهوم متغیرهای سراسری در دنیای برنامه نویسی آشنایی دارید . علت اینکه بعضی از برنامه نویس ها استفاده از متغیرهای سراسری رو دوست ندارن ، این هست که این کار ناچاراً موجب یک مدل داده‌ ای گیج کننده در اپلیکیشن ها میشه ، یعنی با این کار پیدا کردن جایی که داده ای مقدار اولیه گرفته ، آپدیت شده و مورد استفاده قرار گرفته یکم سخت میشه . به عبارت دیگه ، جواب دادن به این سوال که " آیا میتونیم فلان کد رو ویرایش یا حذف کنیم ، بدون اینکه منجر به خرابکاری برنامه بشه ؟" در این مدل نوشتن به مراتب سخت تر هست و این همون سوالی هست که موقع کدنویسی باید براش بهینه سازی انجام بدیم و به همین دلیله که استفاده از کامپوننت ها به متغیرهای سراسری ترجیح داده میشن .از جمله دلایلی که میتونیم کامپوننت ها رو به متغیرهای سراسری ترجیح بدیم ، میتونیم به موارد زیر اشاره کنیم :· کامپوننت ها بهمون کمک میکنن درمورد محلی که مقادیر ( اعم از توابع و آرایه ها و ورودی ها و ... ) مورد استفاده قرار میگیرن صریح تر عمل کنیم .· با وجود کامپوننت ها ، پروسه تشخیص دادن اینکه تغییر در قسمتی از برنامه چه تاثیری روی قسمت های دیگه برنامه میزاره برامون ساده تر میشه .· در این روش دنبال کردن مراحل ارسال و دریافت داده ها بصورت واضح مشخصه و فقط با دنبال کردن روند دریافت داده ها توسط کامپوننت ها ، میتونیم تغییرات احتمالی در برنامه مون رو پیش بینی کنیم .البته اینها صرفا مزیت های Props Drilling بودن و اگر قرار باشه که با یک پروژه بزرگ دست و پنجه نرم کنیم ، قطعا استفاده از روش Props Drilling برای انتقال داده ها طاقت فرسا خواهد بود و ممکنه اتفاقاتی در برنامه مون رخ بده که هندل کردنشون برامون سخت و وقت گیر باشه ! به عنوان مثال :· تغییر نام prop ها در میانه مسیر ارسال ها ، دنبال کردن prop ها رو برای ما سخت میکنه .· تغییر شکل قالب بعضی از داده ها مثل داده ی زیر ، برامون مشکل ایجاد خواهد کرد :· در میان انتقال props ها اگر کامپوننتی رو بنا به دلیلی حذف کنیم یا مکانی که درش ذخیره شده رو تغییر بدیم ، روند انتقال props ها با مشکل مواجه میشه .خوب حالا که با همه ی این موارد آشنا شدیم ، بهتره که به پروژه مون برگردیم و یکمی هم دست به کد بشیم تا این موضوع رو بهتر درک کنیم :) البته اگر دقت کنیم متوجه میشیم که ما تا الان هم در برنامه مون به نحوی داشتیم از Props Drilling استفاده میکردیم ، به اینصورت که در کامپوننت App اومدیم personDelete و personChange رو به کامپوننت Persons انتقال دادیم و بعد personDelete و personChange رو از کامپوننت Persons به کامپوننت Person انتقال دادیم ( البته در این جا این مورد نیاز هم هست ، چراکه ما تو خود کامپوننت Person به idدسترسی نداریم ) ! اما به هر حال قبل از اینکه بخوایم با مفهوم Context Api در React آشنا بشیم ، میخوایم با یک مثال ساده مفهوم Props Drilling رو بهتر درک کنیم !برای این منظور وارد فایل index.js میشیم و عنوان پروژه مون که "مدیریت کننده اشخاص" هست رو بصورت props به کامپوننت App انتقال میدیم :سپس در پوشه ی Components یک پوشه جدید به نام Common و در داخل پوشه Common هم یک فایل جدید به نام Header.jsx ایجاد میکنیم ( کلاً بهتره یک پوشه بنام Common ایجاد کنیم و مواردی که مثل Header رایج هستن رو در داخلش قرار بدیم ) و بعد این دو قطعه کد که در فایل App.js قرار دارن رو انتخاب میکنیم :و بعد اون هارو به اینصورت به داخل فایل Header.jsx انتقال میدیم :سپس به اینصورت در داخل کامپوننت App از کامپوننت Header استفاده میکنیم ( توجه کنیم که عنوان پروژه مون رو هم به صورت props بهش پاس دادیم ) :و نهایتاً در داخل کامپوننت Header به اینصورت از‌ props ای که بهش انتقال دادیم استفاده میکنیم :خوب ما در ابتدا اومدیم عنوان (title) پروژه مون رو از فایل index.js بصورت props به کامپوننت App انتقال دادیم و دیدیم که کامپوننت App بدون اینکه از این داده استفاده کنه ، فقط اون رو به عنوان props به کامپوننت Header پاس میده ، این موضوع دقیقا داره مفهوم Props Drilling رو بیان میکنه ! البته ما در اینجا مشکل خاصی نداریم ولی با توجه به دلایلی که در بالاتر گفته شد ، اگر پروژه مون بزرگ تر بشه ، قطعا استفاده از Prop Drilling طاقت فرسا خواهد بود و ممکنه که با دردسرهای مختلفی مواجه بشیم و اونموقع هست که دیگه این روش ، روش بهینه ای نخواهد بود و ناچارا برای ارسال یا به اشتراک گذاشتن داده هامون باید از روش های دیگه ای استفاده کنیم ! به همین دلیل قرار هست که در بخش بعدی با مفهوم Context Api آشنا بشیم :) سیاوش ستاری سیاوش ستاری Wed, 29 Sep 2021 13:33:31 +0330 https://virgool.io/@siavash_sattari/13-%D8%A8%D9%87%D8%A8%D9%88%D8%AF-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-bootstrap-%D9%88-react-toastify-dmqsaz4egf5a سلاام رفقا ، حالتون چطوره ؟ ردیفین :) ؟ به پارت سیزدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . همونطور که در قسمت قبل هم بهتون قول داده بودم ، در این قسمت قرار هست که رنگ و لعاب مینی پروژه مون رو کلا تغییر بدیم و در خلال تغییر استایل هاش با موارد جدیدی آشنا بشیم . رفقا همونطور که میدونین در بخش های قبلی با موارد پایه ای React آشنا شدیم و تونستیم همچین مینی پروژه ای رو پیاده سازی کردیم :اما همونطور که میبینیم ظاهر برنامه مون اصلا کاربر پسند نیست و به همین دلیل در این بخش قصد داریم تمام تمرکزمون رو بزاریم روی بهتر کردن استایل برنامه مون ، به اینصورت که قرار هست از پکیج هایی نظیر Bootstrap 5 ، font-awesome و react-toastify استفاده کنیم و ظاهر برنامه مون رو به اینصورت تغییر بدیم :برای شروع پکیج Bootstrap 5 رو بصورت زیر از طریق npm نصب میکنیم :و در قدم بعدی پکیج font-awesome رو هم به اینصورت از طریق npm نصب میکنیم :توجه کنیم که npm بصورت خودکار آخرین نسخه ی Bootstrap یعنی نسخه ی Bootstrap 5 و آخرین نسخه ی رایگان font-awesome رو برامون نصب میکنه !حالا سوالی که پیش میاد این هست که بهترین روش استفاده از این دو پکیجی که نصب کردیم به چه صورته ؟ احتمالاً جواب خیلی هاتون به اینصورته که میگین فایل هایی که از این دو پکیج نیاز داریم رو در داخل فایلindex.js ایمپورت میکنیم ، خوب آره درسته اما از نظر منطقی اصلا روش بهینه و درستی نیست !- عه چرا ؟ :|+ یکم که بریم جلوتر خودتون متوجه میشید :) به هر حال ما فعلاً فایل های مورد نیازمون رو به اینصورت در داخل فایلindex.js ایمپورت میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که بله Boootstrap مون یکسری تغییرات جزئی رو به ظاهر برنامه مون اعمال کرده :اگر از برنامه مون یک inspect بگیریم و به محتوای تگ head دقت کنیم ، میبینیم که بله واویلاست :) چون React اومده تمام استایل هایی که در خلال کامپوننت ها و برنامه مون استفاده کردیم رو به عنوان استایل های internal در داخل تگ های <style> قرار داده و اونارو به تگ <head> اضافه کرده که جالب نیست ، چون بشدت رو پرفورمنس برنامه مون تاثیر منفی میزاره !برای رفع این مشکل باید فایل هایی که در داخل فایلindex.js ایمپورت کرده بودیم رو کامنت کنیم ( یا حذف کنیم ) و اونارو به خود index.html اضافه کنیم ، اما دیگه نمیایم مثل حالت قبل عمل کنیم ! یعنی دیگه نمیایم از پوشهnode_modules شروع به آدرس ‌دهی کنیم ، بلکه میایم فایل های مورد نیازمون رو در جای مناسب تر ذخیره میکنیم و هر چیزی که غیرضروری هست رو حذف میکنیم ، یا به عبارت دیگه بعد از اینکه فایل های مورد نیازمون رو در قسمت public برنامه مون ذخیره میکنیم ، میایم پکیج هایی که از طریقnpm نصب کرده بودیم روuninstall میکنیم ! حالا اگر گفتین چرا ؟ :) آفرین ، یک اینکه حجم node_modulesبرنامه مون کمتر میشه و دو اینکه طرز آدرس دهی فایل هامونclean تر میشه و دیگه نیازی نیست که دو متر آدرس دهی کنیم ! البته روش های دیگه ای هم هستن که میتونیم با کانفیگ کردنشون خیلی حرفه ای تر عمل کنیم ولی در حال حاضر خارج از بحث ماست! خوب همونطور که گفته شد در وهله ی اول میایم فایل هایی که در داخل فایل index.js ایمپورت کرده بودیم رو کامنت میکنیم ( یا حذف میکنیم ) :و بعد فایل های موردنیازمون رو از دل پکیج هایی که نصب کردیم میکشیم بیرون و اونهارو در جای مناسب تری ذخیره میکنیم ! به اینصورت که در ابتدا فایل های ضروری css پکیج bootstrap رو انتخاب میکنیم و اون ها رو به پوشه ی css در پوشه public انتقال میدیم :سپس فایل های ضروری js پکیج bootstrap رو انتخاب میکنیم و اون ها رو به پوشه ی js در پوشه public انتقال میدیم . ( البته توجه کنیم که فایل bootstrap.bundle.min.js به تنهایی شامل هر دو فایل bootstrap.min.js و popper.min.js هست ، یعنی ما برای بخش جاوااسکریپت bootstrap یا میتونیم به تنهایی فقط فایل bootstrap.bundle.min.js رو ضمیمه سند index.html مون کنیم ، یا اینکه میتونیم اول فایل popper.min.js و بعد فایل bootstrap.min.js رو ضمیمه کنیم ) :سپس فایل ضروری css پکیج font-awesome رو انتخاب میکنیم و اون رو به پوشه ی css در پوشه public انتقال میدیم :و بعد تمام فونت های پکیج font-awesome رو انتخاب میکنیم و اون هارو به پوشه ی fonts در پوشه public انتقال میدیم :سپس پکیج های bootstrap و font-awesome رو بصورت زیر unistall میکنیم ، چون همونطور که در بالاتر هم گفته شد بعد از ذخیره کردن فایل های موردنیازمون ، دیگه به خود پکیج ها نیازی نداریم :سپس بعد از انجام اینکارها فایل های مورد نیازمون رو به اینصورت ضمیمه سند index.html میکنیم :همونطور که مشخصه علاوه بر ضمیمه کردن فایل های موردنیازمون ، به تگ html هم اتریبیوت dir="rtl" رو اضافه کردیم تا قالبمون راست چین بشه . خوب حالا که همه چیز آمادست ، میتونیم استایل دهی برنامه مون رو شروع کنیم ! برای این منظور ، در ابتدا تمام استایل هایی که تا به الان در داخل کامپوننت App و Person تعریف کردیم رو حذف میکنیم و به اینصورت با استفاده از bootstrap ، کامپوننت App و Person رو استایل دهی میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، میبینیم که ظاهر برنامه مون به اینصورت تغییر کرده :استایل دهی داینامیک (Dynamic Styling) :در ادامه میخوایم با استایل دهی داینامیک یا اصطلاحاً Dynamic Styling آشنا بشیم. استایل دهی داینامیک یعنی بیایم لاجیکی رو پیاده سازی کنیم که به ازای برقرار بودن شرط خاصی در برنامه ، استایل فلان المنت برنامه مون بطور خودکار عوض بشه ! میدونم احتمالا مغز بعضی هاتون رگ به رگ شد :) اما بزارین بهتر توضیح بدم ...به عنوان مثال فرض کنیم میخوایم طوری استایل دهی کنیم که وقتی تعداد Person ها برابر 0 یا 1 بود ، رنگ badge بصورت danger ، زمانی که تعداد Person ها برابر 2 بود ، رنگ badge بصورت warning و زمانی که تعداد Person ها برابر 3 یا بیشتر بود ، رنگ badge بصورت success نمایش داده بشه یا به عنوان یک مثال دیگه ، فرض کنیم میخوایم طوری استایل دهی کنیم تا اگر کاربر روی دکمه "مخفی کردن اشخاص" کلیک کرد تا Person ها Hide بشن ، رنگ دکمه بصورت danger نمایش داده بشه و اگر مجدداً روی دکمه "نمایش اشخاص" کلیک کرد تا Person ها نمایش داده بشن ، رنگ دکمه بصورت info نمایش داده بشه ! خوب حالا اگر بخوایم همین ایده هارو در برنامه مون پیاده سازی کنیم ، باید در ابتدا برای استایل دهی داینامیک دکمه "نمایش اشخاص" ، به اینصورت عمل میکنیم :و بعد برای استایل دهی داینامیک badge مون هم به اینصورت عمل کنیم :سپس مقدار متغیر badgeStyle رو به اینصورت به لیست کلاس های span مون اضافه میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، به ازای هر بار ایجاد و حذف Person ها و همچنین به ازای هر بار کلیک بر روی دکمه ی "نمایش اشخاص" ، متوجه تغییر استایل badge و دکمه ی موردنظرمون خواهیم شد !پکیج react-toastify :در ادامه میخوایم پکیج react-toastify رو هم به پروژه مون اضافه کنیم تا از طریق اون بتونیم هنگام ایجاد یا حذف هر Person ، پیغام مناسبی رو به کاربر نمایش بدیم ! برای آشنایی با نحوه ی استفاده از این پکیج ، میتونیم لینک زیر رو مطالعه کنیم :https://www.npmjs.com/package/react-toastifyبرای نصب پکیج react-toastify از طریق npm ، باید دستور زیر رو تو محیط ترمینال اجرا کنیم :سپس بعد از اینکه مراحل نصبش تموم شد ، طبق داکیومنتش باید 3 مرحله ی زیر رو به ترتیب انجام بدیم تا بتونیم از این پکیج استفاده کنیم :قدم اول : در داخل فایل یا کامپوننتی که میخوایم از این پکیج استفاده کنیم ، باید آبجکت ToastContainer و toast رو به اینصورت ایمپورت کنیم :قدم دوم : سپس در انتهای قسمت return همون فایلی که آبجکت ToastContainer رو در داخلش ایمپورت کردیم ، باید کامپوننت ToastContainer رو به اینصورت فراخونی کنیم :قدم سوم : و بعد فایل ReactToastify.css رو به اینصورت در داخل فایل index.js ایمپورت میکنیم :خوب تا اینجا تمام موارد ضروری رو انجام دادیم و حالا آماده ایم که از react-toastify استفاده کنیم . به عنوان مثال اگر بخوایم به ازای ایجاد هر Person جدید یک Toast با پیغام مناسب رو نمایش بدیم ، باید در داخل متد handleNewPerson به اینصورت عمل کنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که به ازای ایجاد هر Person جدید ، یک Toast بصورت زیر بهمون نمایش داده میشه :اگر کمی دقت کنیم متوجه میشیم که ظاهر Toastمون دو تا مشکل داره :) یک اینکه راست چین نیست و دو اینکه فونتش اصلا جالب نیست ! برای رفع این مشکل باید فایل ReactToastify.css رو باز کنیم و مقدار پراپرتی های direction و font-family سلکتور Toastify__toast. رو بصورت زیر دستکاری کنیم :حالا اگر مجددا خروجی برنامه مون رو چک کنیم ، خواهیم دید که مشکل ظاهری Toast مون هم حل شده ( اگر همچنان مثل حالت قبل بود ، باید برنامه مون رو مجددا با npm start اجرا کنیم ) :حالا اگر بخوایم برای عمل Delete هم یک Toast تعریف کنیم تا به ازای حذف هر Person ، یک Toastمتفاوت نمایش داده بشه و بهمون بگه که فلان کاربر حذف شد ، باید در داخل متد handleDeletePerson به اینصورت عمل کنیم :حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که به ازای حذف هر Person ، یک Toast بصورت زیر بهمون نمایش داده میشه :خوب در نهایت به پایان این بخش رسیدیم و تونستیم ظاهر کلی برنامه مون رو به اینصورت تغییر بدیم :خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . مبحث استایل دهی هم دیگه کلا تموم شد و از قسمت های بعدی با مفاهیم مهم تر React در خدمتتون خواهم بود ! در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین و همچنین اگر مایل بودین مقاله های من رو با بقیه دوستان به اشتراک بزارین تا هم اینکه خستگیم در بره و هم اینکه با انرژی بیشتری براتون بنویسم :) در آخر ، مراقب خودتون باشید :) سیاوش ستاری سیاوش ستاری Mon, 27 Sep 2021 20:20:04 +0330 https://virgool.io/@siavash_sattari/12-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-key-%D9%88-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D9%84%DB%8C%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%D9%85%D9%86%D8%B9%D8%B7%D9%81-fjea0smhtrk8 سلام عزیزان ، به پارت دوازدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . در این مقاله قرار هست که اول با مفهوم key در React آشنا بشیم و بعد چند لاجیک مختلف رو به برنامه مون اضافه کنیم .قبل از شروع این بخش ، state ای که در کامپوننت App تعریف کردیم رو بصورت زیر تغییر میدیم :و حالا چونکه state برنامه رو تغییر دادیم ، پس قاعدتا باید فایل های Persons.jsx و Person.jsx رو هم تغییر بدیم :در ادامه اگر به کنسول مرورگرمون مراجعه کنیم میبینیم که همچین هشداری بهمون نمایش داده میشه :این هشدار به ما میگه که React به دنبال یک prop خاص بنام key میگرده اما نمیتونه اونو پیدا کنه ! بطور خلاصه Key یک property خاص هست که هنگام کار با لیست ها باید تعریف بشه . در واقع بدون تعریف key ، ممکنه برنامه مون با اختلال مواجه بشه و در پروژه های مختلف بخصوص در پروژه های بزرگ ، Resource زیادی مصرف بشه . بزارین براتون بیشتر بشکافم :ری اکت یک چیزی به اسم virtual DOM داره و هنگام مقایسه ی اون با DOM فعلی ، هر قسمتی از DOM جدید که با DOM قبلی متفاوت باشه ، اون قسمت رو از دوباره برامون render میکنه . حالا مشکل اینجاست که در لیست ها باید چیزی مثل یک id وجود داشته باشه که به React اجازه بده هر کدوم از المنت ها رو بصورت خاص شناسایی کنه تا به جای render کردن دوباره ی کل عناصر در لیست ، فقط عناصری رو مجددا render کنه که تغییر کردن ! حالا برای اینکه قابلیت شناسایی عناصر لیست رو برای React فراهم کنیم ، باید از key ها استفاده کنیم . همین :)در ادامه به نکته ی مهمی که باید بهش توجه کنیم این هست که مقدار هر key باید یک مقدار منحصر به فرد و یکتا باشه ! همونطور که میدونیم در حالت عادی اطلاعات هر Person باید از پایگاه داده دریافت بشه و id مخصوص به خودش رو داشته باشه ، اما از اونجایی که ما در کدمون از پایگاه داده استفاده نمیکنیم ، بنابراین باید بصورت دستی براشون مقدار خاصی رو تعیین کنیم :حالا بصورت زیر از این id ها به عنوان مقدار key در داخل کامپوننت Persons استفاده میکنیم :حالا اگر مجددا کنسول مرورگرمون رو چک کنیم متوجه میشیم که دیگه با خطای key در قسمت console مواجه نیستیم و حالا یک لیست کاملا پویا داریم :حالا بعد از رفع این مشکل ، میتونیم چند فیچر دیگه که وابسته به ID هستن رو به برنامه مون اضافه کنیم :) به عنوان مثال در ادامه میخوایم کاری کنیم تا هنگام کلیک بر روی هر شخص ، با توجه به ID ای که اون شخص داره ، اون رو از لیست نمایش مخاطبین حذف کنیم ! برای این منظور در داخل کامپوننت App یک handler جدید بصورت زیر تعریف میکنیم :و بعد این متد رو بصورت آبجکت در قالب props به کامپوننت Persons انتقال میدیم :سپس متد موردنظرمون رو در داخل فایل Persons.jsx به اینصورت از کامپوننت Persons به کامپوننت Person انتقال میدیم :و در نهایت این متد رو بصورت زیر در کامپوننت Person صدا میزنیم تا هنگام کلیک بر روی هر کاربر فراخونی بشه :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز به درستی داره کار میکنه ! خوب خسته که نیستین ؟ امیدوارم تا اینجا همه چیز اوکی باشه :) بنظرم بیاین دو تا فیچر دیگه رو هم به برنامه مون اضافه کنیم و بعد این بخش رو به اتمام برسونیم ...در ادامه میخوایم برای هر فرد یک input عادی از نوع text قرار بدیم تا همزمان با نوشتن در input مربوط به هر Person ، اسمش بصورت Real Time تغییر کنه . برای این منظور ابتدا وارد فایل Person.jsx میشیم و یک input عادی به کامپوننتمون اضافه میکنیم :حالا اگر به مرورگر بریم ، میبینیم که ظاهر برنامه مون به اینصورته :خوب همونطور که میبینیم استایل برنامه مون یک مشکل کوچیک داره و اونم این هست که نوشته ی داخل input ها بصورت ltr دارن نمایش داده میشن . برای رفع این مشکل میتونیم پراپرتی direction:”rtl” رو به استایل های فایل Person.module.css اضافه کنیم :حالا اگر مجددا به مرورگر بریم ، میبینیم که مشکل استایلمون حل شده اما برنامه مون یک باگ مهم داره و اونم این هست که اگر رو هر input کلیک کنیم ، به ما اجازه ی تایپ رو نمیده ! بنظرتون چرا این اتفاق میفته ؟ بهش فکر کنین جوابش خیلی سادست ! دلیلش اینه که ما تو کامپوننت Person اومدیم رویداد ای که برای حذف بود رو به عنصر div ریشه ای دادیم :برای رفع این مشکل ، میتونیم برای کامپوننت مون یک button تعریف کنیم و عمل حذف رو به اون واگذار کنیم :حالا اگر خروجی برنامه مون رو چک کنیم ، میبینیم که همه چیز داره به درستی کار میکنه :خوب بریم سراغ اصل موضوع که گفتیم میخوایم همزمان با نوشتن در داخل input مربوط به هر Person ، اسمش رو بصورت Real Time تغییر بدیم . برای این منظور در داخل کامپوننت App یک handler جدید به اینصورت تعریف میکنیم :و بعد این متد رو بصورت آبجکت در قالب props به کامپوننت Persons انتقال میدیم :سپس متد موردنظرمون رو در داخل فایل Persons.jsx به اینصورت از کامپوننت Persons به کامپوننت Person انتقال میدیم :و در نهایت این متد رو بصورت زیر در کامپوننت Person صدا میزنیم تا هنگام عمل فراخونی بشه :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز داره به درستی کار میکنه و اگر در داخل Input هر Person چیزی بنویسیم ، اسمش بطور Real Time تغییر میکنه که در زیر مشاهده میکنیم :حالا بیایم یک مقدار حرفه ای تر عمل کنیم ، یعنی بیایم ساختار پروژه رو طوری تغییر بدیم که خودمون بتونیم افراد مختلف رو به برنامه مون اضافه کنیم و در صورت نیاز اون هارو حذف یا ویرایش کنیم . برای این منظور در داخل کامپوننت App یک تگ input و یک تگ button جدید تعریف میکنیم :و بعد محتوای state مون رو بصورت زیر تغییر میدیم :و در مرحله ی بعد یک handler جدید به اینصورت تعریف میکنیم :و در آخر این دو متد رو به تگ input و تگ button ی که تعریف کردیم انتساب میدیم :حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که عمل اضافه کردن هم داره به درستی کار میکنه :قبل از اضافه کردن :بعد از اضافه کردن 2 نفر :خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . ما تا به اینجا لاجیک های موردنیازمون رو پیاده سازی کردیم و حالا وقتشه که در قسمت بعدی به برنامه مون یک رنگ و لعاب اساسی بدیم تا رابط کاربریش بهتر بشه . در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین . سیاوش ستاری سیاوش ستاری Mon, 27 Sep 2021 19:41:07 +0330 https://virgool.io/@siavash_sattari/11-%D8%AA%DA%A9%D9%85%DB%8C%D9%84-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C-%D8%AF%D8%B1-react-jnurwbjhjxp9 سلام عزیزان ، به پارت یازدهم از سری مقالات " آموزش مقدماتی React" خیلی خوش اومدین . اگر مقاله ها رو تا به اینجا به ترتیب خونده باشین ، قطعا میدونین که "در پارت نهم" اومدیم با نحوه ی استایل دهی در React آشنا شدیم و اون آخر آخراش خدمتتون گفتم که در رابطه با موضوع استایل دهی بازهم مقاله خواهیم داشت و نتیجتا این مقاله ای که الان دارین میخونین ، همون پارت تکمیل کنندست :) واقعیت از این قراره که در رابطه با استایل دهی یکسری نکات مهم و ضروری وجود داره که من سعی کردم داخل این مقاله همشونو کاور کنم و پرونده ی استایل دهی رو ببندم دیگه :) خوب منتظر چی هستین ؟ بیاین شروع کنیم ...تا به اینجا اگر به کدهای پروژه مون نگاهی بندازیم ، متوجه میشیم که استایل های ساده ای داریم اما ما گاهی اوقات نیاز داریم که از استایل های پیشرفته تری هم استفاده کنیم . به طور مثال دکمه ی "نمایش اشخاص" یک دکمه ی سادست و اگر روی اون hover کنیم ، هیچ اتفاقی نمیفته و ظاهرش تغییر نمیکنه . در واقع مشکل استایل های inline ، این هست که قابلیت استفاده از pseudo-selector هایی مثل hover رو ندارن و در عین حال خوبی این روش این هست که استایل هامون scope دارن ، یعنی مخصوص همین دکمه هستن و بصورت سراسری اعمال نمیشن ، بنابراین اگر دکمه های دیگه ای ایجاد کنیم ، استایل موردنظرمون بر روی اونها اعمل نخواهند شد .از طرفی استفاده از فایل هایCSS باعث میشه که استایل های ما scope خودشونو از دست بدن ، یعنی فرضا اگر مشابه دکمه ی "نمایش اشخاص" ، دکمه های دیگه ای ایجاد کنیم ، اون دکمه ها هم استایل هایی که برای این دکمه تعریف کردیم رو به ارث میبرن ، اما در عوضش میتونیم از pseudo-selector هایی مثل hover و سایر امکانات دیگه CSS استفاده کنیم ! خوب فکر کنم کم کم لامپ مغزتون روشن شد که در این قسمت میخوایم چیکار کنیم :) بله در این قسمت قرار هست با نحوه ی رفع این مشکلات آشنا بشیم :)رفع مشکلات استایل دهی inline با Radium :همونطور که گفته شد استایل های inline دارای scope هستن ، اما مشکل اینجاست که چنین استایل هایی قابلیت استفاده از pseudo-selector هایی مثل hover رو ندارن ! برای رفع این مشکل و فعال کردن این قابلیت ، میتونیم از پکیج Radium استفاده کنیم ! پکیج Radium یک کتابخونه برای React هست که به ما اجازه میده هنگام کار با استایل های inline ، بتونیم از قابلیت های پیشرفته تر CSS مثل pseudo-selector ها ، media query ها و غیره استفاده کنیم ! برای نصب Radium از طریق npm ، کافیه که در محیط Terminal دستور زیر رو اجرا کنیم :بعد از اجرای این دستور باید منتظر بمونیم تا Radium برامون نصب بشه . قبل از شروع کار با Radium ، در هر فایلی که میخوایم ازش استفاده کنیم ، در وهله ی اول باید اونو import کنیم و چونکه ما میخوایم استایل دکمه ی موجود در فایل App.js رو تغییر بدیم ، پس Radium رو به اینصورت در داخل فایل App.js ایمپورت میکنیم :سپس هنگام export کردن کامپوننت App ، باید اونو در داخل کامپوننت Radium قرار بدیم :حالا ما آماده ی استفاده از radium هستیم . به عنوان مثال اگر بخوایم برای دکمه مون hover تعریف کنیم ، باید بصورت زیر عمل کنیم :همونطور که مشخصه هنگام تعریف pseudo-selector ها در استایل دهی inline ، باید pseudo-selector مورد نظرمون رو مثل قطعه کد بالا در داخل یک دابل کوتیشن ( " " ) قرار بدیم و برای مقدارش یک آبجکت جاوااسکریپتی رو در نظر بگیریم و پراپرتی های موردنظرمون رو در داخلش بنویسیم ! به عنوان مثال با توجه به استایلی که نوشتیم اگر بر روی دکمه ی موردنظرمون hover کنیم ، خواهیم دید که مقدار color ش برابر black و مقدارbackgroundColor ش برابر lightgreen خواهد شد ! حالا اگر در شرایط خاصی بخوایم این استایل هارو تغییر بدیم ، باید بصورت زیر عمل کنیم : همونطور که میبینیم برای تغییر مقادیر pseudo-selector مون از علامت براکت ( [ ] ) استفاده کردیم . خوب حالا بیایم یکی دیگه از قابلیت های radium رو بررسی میکنیم ، یعنی استفاده از media query ها ! برای این منظور فایل Person.jsx رو باز میکنیم و بعد از import کردنradium یک media query بصورت زیر تعریف میکنیم :همونطور که مشخصه media query مورد نظرمون رو در داخل یک دابل کوتیشن ( " " ) قرار دادیم . حالا بطور مثال اگر فرض کنیم که میخوایم در عرض های بیشتر از 500 پیکسل ، عرض کادر مربوط به هر Person رو روی 450 پیکسل نگه داریم ، باید به اینصورت عمل کنیم :سپس استایل موردنظرمون رو به اینصورت به کامپوننت مون اضافه کنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، با همچین اروری مواجه خواهیم شد :این یعنی اگر بخوایم هنگام استایل دهی inline از pseudo-selector هایی مثل hover استفاده کنیم ، هیچ مشکلی نخواهیم داشت اما اگر بخوایم از ویژگی هایی مثل keyframe ها و یا media query ها استفاده کنیم ، باید کامپوننت والد برنامه مون که در اینجا App هست رو در داخل یک کامپوننت خاص بنام styleRoot قرار بدیم ! برای این منظور در ابتدا کامپوننت styleRoot رو به اینصورت در داخل فایل App.js ایمپورت میکنیم ( همونطور که گفته شد فایل App.js نه Person.jsx ) :سپس اونو به عنوان المنت root به کامپوننت App اضافه میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که مشکلمون رفع شده و media query مون داره به درستی کار میکنه ! خوب ما تا اینجا با radium آشنا شدیم و دیدیم که یکی از راه های استفاده از تمام ویژگی های CSS در استایل دهی ها (استایل دهی inline) ، استفاده از پکیج radium هست . در ادامه با CSS Module ها که یکی دیگه از راه های استایل دهی هستن ، آشنا میشیم !آشنایی با CSS Module در React :خوب رسیدیم به بخش شیرین مارجرا :) بچه ها CSS Module ها روشی هستن که با استفاده از اونها میتونیم از فایل های CSS در جاوااسکریپت استفاده کنیم تا حتی اگر اسم کلاس های چند عنصر رو مشابه هم قرار دادیم ، استایل های اون فایل CSS فقط بر روی عنصر مربوطه اعمال بشن و بر روی عناصر دیگه اعمال نشن !قبل از استفاده از CSS Module ها ، باید در وهله ی اول تمام مواردی که تا به اینجا به برنامه مون اضافه کردیم رو حذف کنیم ، به اینصورت که ابتدا وارد فایل Person.jsx میشیم و دستور import مربوط به radium و استایل هایی که تعریف کردیم رو از داخلش حذف میکنیم ، یعنی محتوای فایلمون بعد از اعمال تغییرات باید به اینصورت باشه :سپس وارد فایل App.js میشیم و دستور import مربوط به radium و StyleRoot ، کامپوننت <StyleRoot> و استایل هایی که تعریف کردیم رو هم حذف میکنیم. سپس برای کامپوننت App هم یک فایل CSS جدا بنام App.css ایجاد میکنیم و استایل های inline ای که در داخل کامپوننتمون تعریف کردیم رو به اینصورت در داخلش قرار میدیم :و بعد اونو در داخل کامپوننتمون import میکنیم :بعد از انجام این مراحل ، قاعدتا باید قسمت return رو هم بصورت زیر اصلاح کنیم :حالا بیایم به اصل موضوع بپردازیم :) برای استفاده از CSS Module ها ، قبل از هر چیزی باید پسوند فایل های CSS رو از فرمت filename.css به فرمت filename.module.css تغییر بدیم تا به عنوان CSS Module به حساب بیان ! مثلا باید اسم فایل Person.css رو به Person.module.css و اسم فایل App.css رو به App.module.css تغییر بدیم ! همچنین دستور مربوط به import کردنشون رو هم باید بصورت زیر اصلاح کنیم :توجه کنیم که در دستورات بالا classes یک آبجکت جاوااسکریپتی هست که استایل هارو در داخل خودش نگهداری میکنه و ما میتونیم به جای اون از هر اسم دیگه ای مثل styles استفاده کنیم ، این موضوع کاملا اختیاری هست ! بعد از انجام این کار ، فایل های CSS مون دارای Scope خواهند بود . بطور مثال فایل App.module.css ای که در داخل فایل App.js ایمپورت کردیم ، فقط و فقط مختص همین کامپوننت هست و روی کامپوننت های دیگه هیچ تاثیری نداره ! حالا برای استفاده از این استایل ها ، باید در کامپوننت App و در کامپوننت Person به اینصورت عمل کنیم :کامپوننت App :کامپوننت Person :حالا نوبت اضافه کردن Media Query هاست ! برای این منظور وارد فایل Person.module.css میشیم و Media Query موردنظرمون رو به اینصورت تعریف میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که استایل هامون به درستی اعمال شدن ! در آخر بخاطر اینکه مباحث استایل دهی یک مقدار طولانی شد ، بهتره یک جمع بندی کلی داشته باشیم :)جمع بندی :ما تا به اینجا یاد گرفتیم که چطور میتونیم کامپوننت ها و عناصر مختلف رو در React استایل دهی کنیم و بطور مفصل با مشکلات و راه حل های موجود آشنا شدیم ! خلاصه ای از نکات مهم مرتبط با استایل دهی رو در زیر میبینیم :استایل دهی عناصر در React به دو صورت inline و یا استفاده از فایل های External قابل انجامه.هر دو روش ذکر شده دارای مشکلات خودشون هستن ، مثلا در استایل دهی inline نمیتونیم از pseudo selector هایی مثل hover و media query ها استفاده کنیم و در فایل های CSS هم استایل هامون دارای scope نیستن و روی کل پروژه اعمال میشن . راه حل موجود برای استایل دهی inline ، استفاده از کتابخونه هایی مثل Radium هست و راه حل استفاده از فایل های CSS هم استفاده از CSS Module هاست که با هر دوشون بطور مفصل آشنا شدیم .خوب عزیزان این قسمت هم به پایان رسید و امیدوارم که لذت برده باشین . انتظار میره که بعد از خوندن این مقاله دیگه با نحوه ی استایل دهی عناصر در React مشکل خاصی نداشته باشین ! در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین . در آخر ، تا پابلیش پارت بعدی مراقب خودتون باشید :) فعلا ... سیاوش ستاری سیاوش ستاری Thu, 05 Aug 2021 14:45:06 +0430 https://virgool.io/@siavash_sattari/10-%D9%85%D9%81%D9%87%D9%88%D9%85-conditional-rendering-%D8%AF%D8%B1-react-wbk2rzsinv1s سلام عزیزان ، به پارت دهم از سری مقالات "مقدمات React" خوش اومدین . امیدوارم پارت های قبلی رو به خوبی کاور کرده باشین و بعد اومده باشین سراغ این مقاله ! در این قسمت میخوایم با مفهوم رندر شرطی یا اصطلاحا Conditional Rendering آشنا بشیم ، یعنی میخوایم تنها در صورت برقرار بودن شرط خاصی کامپوننت مورد نظرمون رو رندر کنیم . برای درک بهتر شمارو به ادامه ی این مقاله دعوت میکنم :)به عنوان مثال فرض کنیم دکمه ای داریم که میخوایم هنگام کلیک بر روی اون ، لیست افراد پنهون بشه و هنگامیکه مجددا بر روی اون کلیک میشه ، لیست افراد از دوباره نمایش داده بشه (عمل Toggle) . برای این منظور در ابتدا در داخل کامپوننت App یک دکمه ساده بصورت زیر تعریف میکنیم :و بعد یک state جدید به state قبلیمون اضافه میکنیم :سپس یک handler جدید بصورت زیر تعریف میکنیم تا به ازای هر بار کلیک کردن بر روی دکمه ، وضعیت state رو تغییر بده :در مرحله ی بعد برای اینکه بتونیم منطق برنامه مون رو تکمیل کنیم ، باید به اینصورت عمل کنیم :در نهایت با استفاده از روش استایل دهی inline میایم button مون رو به اینصورت استایل دهی میکنیم تا ظاهر بهتری داشته باشه :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که همه چیز داره به درستی کار میکنه :قبل از کلیک بر روی دکمه :بعد از کلیک بر روی دکمه :حالا بهتره که عنوان و استایل دکمه ی موردنظرمون رو هم بصورت داینامیک تغییر بدیم ! یعنی زمانیکه افراد نمایش داده میشن ، Button مون با عنوان "پنهان کردن اشخاص" و با رنگ قرمز نمایش داده بشه و هنگامیکه افراد نمایش داده نمیشن ، Button مون با عنوان "نمایش اشخاص" و با رنگ سبز نمایش داده بشه ! برای این منظور کافیه بصورت زیر عمل کنیم :حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، به ازای هر بار کلیک بر روی دکمه شاهد تغییرات خواهیم بود :)قبل از کلیک بر روی دکمه :بعد از کلیک بر روی دکمه :خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم بعد از خوندن این مقاله مفهوم Conditional Rendering به خوبی براتون جا افتاده باشه و لذت برده باشین . در رابطه با این مقاله هم اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن محتوای مقالات کمک کنین . راستی یادتونه گفته بودم در رابطه با موضوع استایل دهی بازهم مقاله خواهیم داشت !؟ خوب در قسمت بعدی دقیقا به این موضوع میپردازیم و برای همیشه پرونده ی استایل دهی در React رو باهم میبندیم ! سیاوش ستاری سیاوش ستاری Sun, 01 Aug 2021 16:07:06 +0430 https://virgool.io/@siavash_sattari/09-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D9%86%D8%AD%D9%88%D9%87-%DB%8C-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-react-bqty3y5uigfp خوب عزیزان ، همونطور که میدونین در قسمت قبلی ساختار اولیه مینی پروژه مون رو ایجاد کردیم و اونو تا حدی توسعه دادیم ، اما مشکل اینجاست که پروژه ی ما اصلا ظاهر خوبی نداره و باید استایل دهی بشه ! به همین دلیل در این قسمت قرار هست که با نحوه ی استایل دهی در React آشنا بشیم . ما به دو روش میتونیم عناصرمون رو در React استایل دهی کنیم که در ادامه ی همین بخش ، با هر دو روش آشنا خواهیم شد . روش اول :برای شروع در پوشه ی Person یک فایل جدید به نام Person.css ایجاد میکنیم و استایل های موردنظرمون رو بصورت زیر تعریف میکنیم ( البته میتونیم هر اسم دیگه ای رو انتخاب کنیم ، اما برای اینکه بتونیم استایل های مربوط به هر کامپوننت رو بصورت جدا و بهتر مدیریت کنیم ، اسم فایل style و اسم فایل کامپوننت مربوط به هم رو همنام در نظر میگیریم ) : و بعد به فایل Person.jsxمیریم و این کلاس رو به div ریشه ای اضافه میکنیم :حالا اگر تغییرات ذخیره کنیم و به مرورگر بریم متوجه میشیم که هیچ اتفاقی نیفتاده !خوب دلیلش واضحه ، چون فایل ها بصورت پیشفرض به پروژه ی ما اضافه نمیشن .بنابراین فایل CSSما )به نامPerson.css (اصلا به پروژه مون اضافه نشده و خودمون باید اونو به صورت دستی ایمپورت کنیم:به نکته ای که در اینجا باید بهش توجه کنیم این هست که در قطعه کد بالا ، پسوند فایل فقط برای فایل های جاوااسکریپت قابل حذف هست و برای فایل های دیگه مثل فایل های CSS ، حتما باید پسوند فایل رو ذکر کنیم ! خوب حالا اگر به مرورگر برگردیم متوجه میشیم که استایل های ما به اینصورت اعمال شدن :و اگر از قسمت dev tools مرورگر به تگ <style> در داخل <head> نگاهی بندازیم ، متوجه میشیم که استایل های ما به صورت internal به این قسمت از داکیومنت HTML مون تزریق شدن : خوب این یک روش استایل دهی عناصر بود . حالا در ادامه میخوایم با روش دوم استایل دهی یعنی استایل دهی inline آشنا بشیم .روش دوم :در واقع برای اینکه بتونیم در داخل خود کامپوننت ها استایلی بنویسیم ، باید از روش استایل دهی inline استفاده کنیم . این نوع استایل دهی با نحوه ی استایل دهی در بیرون از خود کامپوننت ( استایل دهی در یک فایل CSS مجزا ) کاملا متفاوت هست . به اینصورت که باید یک آبجکت جاوااسکریپتی ایجاد کنیم و بعد در داخل اون ، از خصوصیات استایل دهی در جاوااسکریپت استفاده میکنیم (همونطور که میدونیم استایل های CSS در داخل جاوااسکریپت فرمت خاص خودشونو دارن ، به طور مثال background-color در CSS برابر با backgroundColor در جاوااسکریپت هست). حالا به عنوان مثال اگر بخوایم در داخل کامپوننت App از این روش استفاده کنیم و دو نوشته ی اول صفحه رو هم در وسط صفحه قرار بدیم ، باید به اینصورت عمل کنیم :در این نوع استایل دهی علامت { } اول مربوط به expression جاوااسکریپت و علامت { } دوم هم مربوط به همون ابجکتی هست که باید استایل هامون رو در داخلش بنویسیم . پس در نتیجه کد بالا رو به اینصورت هم میتونیم بنویسیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که استایل های موردنظرمون بر روی دو نوشته ی اول صفحه هم اعمال شدن و خروجی نهایی مون بصورت زیر هست :حالا بیایم ببینیم که چطور میتونیم استایل Global داشته باشیم ؟ یعنی به عنوان مثال چطور میتونیم یک فونت فارسی رو طوری تعریف کنیم که کل اپلیکیشنمون ازش استفاده کنه ؟ برای این منظور در داخل پوشه ی public یک پوشه بنام css و یک پوشه بنام fonts ایجاد میکنیم و فونت موردنظرمون رو در داخل پوشه ی fonts قرار میدیم :سپس در داخل پوشه ی css یک فایل جدید بنام style.css ایجاد میکنیم و استایل های زیر رو در داخلش قرار میدیم :و بعد این فایل رو به سند HTML مون لینک میکنیم :حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که اینبار فونتمون هم اعمال شده :خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم شمارو به خوبی با نحوه ی استایل دهی در React آشنا کرده باشم ، البته در رابطه با استایل دهی بازهم مقاله خواهیم داشت و برای نکات تکمیلی اونجا در خدمتتون خواهم بود :) . راستی تا یادم نرفته اینم بگم که در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین .و در آخر پیشنهاد میکنم که مقاله ی بعدی رو به هیچ عنوان از دست ندید چراکه قرار هست با مفهوم Conditional Rendering آشنا بشیم و ببینیم چه قابلیتی بهمون میده ! خوب دوستان به زودی میبینمتون :) سیاوش ستاری سیاوش ستاری Fri, 30 Jul 2021 20:29:29 +0430 https://virgool.io/@siavash_sattari/08-%D8%B4%D8%B1%D9%88%D8%B9-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D9%85%DB%8C%D9%86%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-person-manager-tw5dvev1z7vb سلام عزیزان ، به پارت هشتم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم پارت های قبلی رو به خوبی کاور کرده باشین و بعد اومده باشین سراغ این مقاله ! از این قسمت به بعد قرار هست که با هم از صفر یک مینی پروژه رو تو چند پارت بصورت پیوسته توسعه بدیم تا هم پایه مون رو قوی تر کنیم و هم اینکه در خلال توسعه اش موارد جدیدتری رو یاد بگیریم !برای شروع با استفاده از پکیج create-react-app یک پروژه جدید بنام person manager ایجاد میکنیم و بعد تمام فایل های داخل پوشه ی public و src رو مثل قبل پاک میکنیم و فقط فایل index.html رو نگه میداریم :سپس در پوشه ی srcیک فایل جدید بنام App.js ایجاد میکنیم و بعد برای اینکه اولین کامپوننت مون رو بصورت class component بنویسیم ، در داخل فایل App.js به اینصورت عمل میکنیم :حالا نوبت رندر کردن کامپوننت مون هست ، برای این منظور در داخل پوشه ی src یک فایل جدید به نام index.js ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :در مرحله ی بعد میایم برای کامپوننت مون یک state تعریف میکنیم که حاوی آرایه ی persons هست و اطلاعات یکسری از افراد مختلف رو در داخل خودش نگهداری میکنه :حالا برای اینکه محتوای پوشه ی src زیاد شلوغ نشه و پروژه مون ساختار بندی بهتری داشته باشه ، میایم در داخل پوشه ی src یک پوشه ی جدید بنام Components ایجاد میکنیم و از این به بعد تمام کامپوننت های جدید رو در داخل این پوشه قرار میدیم . سپس در داخل پوشه ی Components یک پوشه ی جدید به نام Person و در داخل پوشه ی Person هم یک فایل جدید بنام Person.jsx ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :در اینجا اطلاعات state ای که در کامپوننت App تعریف کردیم رو اومدیم بصورت props دریافت کردیم (توجه کنیم بجای اینکه بیایم بطور مستقیم از آبجکت props استفاده کنیم ، اومدیم از تکنیک Object Destructuring استفاده کردیم ) ! تا الان ما میومدیم لیست افراد رو در داخل کامپوننت App رندر میکردیم ، اما اینکار باعث شلوع شدن کامپوننت App میشه و راهکار بهتر این هست که بیایم در داخل پوشه ی Person و کنار فایل Person.jsx ، یک فایل جدید به نام Persons.jsx ایجاد میکنیم و عمل رندر کردن افراد رو به اینصورت در داخلش قرار بدیم :حالا میایم این کامپوننت رو در داخل کامپوننت App رندر میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :همونطور که مشخصه برنامه مون اصلا ظاهر خوبی نداره و باید بهش استایل بدیم . به همین دلیل در قسمت بعدی با نحوه ی استایل دهی در React آشنا خواهیم شد ! خوب بیاین اونجا که منتظرتونم :) سیاوش ستاری سیاوش ستاری Fri, 30 Jul 2021 20:29:05 +0430 https://virgool.io/@siavash_sattari/07-%D8%AF%D8%B1%DA%A9-%D9%85%D9%81%D9%87%D9%88%D9%85-state-%D8%AF%D8%B1-react-%D9%88-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%A2%D9%86-%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7-geliq1cdmw0p سلام عزیزان ، به پارت هفتم از سری مقالات "مقدمات React" خوش اومدین . همونطور که میدونین در بخش قبلی به طور کامل با داده های پویا و آبجکت props آشنا شدیم و دیدیم که چطور میتونیم data ای رو از یک کامپوننت (کامپوننت والد) به یک کامپوننت دیگه (کامپوننت فرزند) انتقال بدیم . در کنار این موضوع ما گاهی اوقات نیاز داریم که داده ها رو از داخل خود کامپوننت تغییر بدیم و به همین دلیل در این بخش قرار هست که با نحوه ی انجام این کار و مفهوم state آشنا بشیم ! خوب بیاین شروع کنیم ...در مرحله اول کامپوننت App رو به یک کامپوننت کلاس محور تبدیل میکنیم ( البته در نسخه ی 16.8 کتابخونه ی react ، قابلیت جدیدی به نام hooks معرفی شده که با استفاده از اون میتونیم از state در کامپوننت های تابعی هم استفاده کنیم ، ولی فعلا تمرکزمون رو میزاریم روی کامپوننت های کلاس محور ) :در واقع state در واقع یک آبجکت هست که property های مختلفی رو در داخل خودش نگهداری میکنه و ما میتونیم هر نوع داده ای مثل آرایه ، رشته و . . . رو در داخلش قرار بدیم . در اصطلاح به مقادیری که state دریافت میکنه ، initial state یا state اولیه گفته میشه . اصولا ما state هارو در داخل کامپوننت والد تعریف میکنیم تا بتونیم از طریق props نتیجه رو به کامپوننت های فرزند یا زیر مجموعه هاش ارسال کنیم . ما به دو روش میتونیم state رو در کامپوننت های کلاس محور تعریف کنیم . روش اول این هست که state رو در داخل سازنده ی کلاس به اینصورت تعریف کنیم :همونطور که میبینیم در داخل state یک آرایه به نام persons تعریف کردیم که اطلاعات افراد مختلف رو در داخل خودش نگهداری میکنه و شامل چند آبجکت هست که هر کدومشون به عنوان یک عضو این آرایه محسوب میشن . این مقدار میشه state اولیه یا حالت اولیه ی برنامه ی ما ! حالا برای اینکه بتونیم داده هایی که در داخل state تعریف کردیم رو به کامپوننت Person انتقال بدیم ، باید بصورت زیر عمل کنیم :خوب ما به اینصورت تونستیم به اطلاعات state مون دسترسی داشته باشیم . در قطعه کد بالا کلمه ی کلیدی this به کلاس App اشاره میکنه (یعنی بهش میگیم داخل همین کلاسی که هستیم به دنبال فلان چیز بگرد) . حالا همین کارو برای سایر افراد هم انجام میدیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خواهیم دید که خروجی برنامه مون دقیقا مشابه حالت قبل هست :اما این روش زیاد جالب نیست و کد تمیزی رو به ما ارائه نمیده ! برای رفع این مشکل میتونیم با استفاده از متد map رو آرایه ی persons حلقه بزنیم :حالا بیایم با نحوه ی بروز رسانی state آشنا بشیم . فرض کنیم در کامپوننت App یک Button ای بصورت زیر داریم که میخوایم با کلیک کردن بر روی اون اسامی افراد تغییر کنه :همونطور که گفتیم آبجکت state یک آبجکت خاص هست ، از این جهت که اگر تغییری در اون ایجاد بشه React مجددا عمل رندرینگ رو انجام میده و تنها اون بخشی از DOM که تغییر کرده رو برامون رندر میکنه ! برای اینکه بتونیم state مون رو بروزرسانی کنیم ، باید کدنویسی دکمه ی موردنظرمون رو هم انجام بدیم . به اینصورت که باید از رویداد استفاده کنیم تا هنگام کلیک کردن بر روی اون یک تابعی اجرا بشه ! چون همونطور که میدونیم تغییر state یک فرآیند هست و طبیعتا به کمک توابع میشه این کارو انجام داد . نکته ای که در اینجا باید بهش توجه کنیم این هست که در جاوااسکریپت و HTML عادی رویداد به همین صورت ( با c کوچیک ) نوشته میشه ، اما اگر بخوایم در JSX ازش استفاده کنیم باید حتما از C بزرگ استفاده کنیم ، بنابراین :روش معمول برای کدنویسی این دکمه این هست که یک متد رو بهش پاس بدیم ، بنابراین باید یک متد تعریف کنیم . برای تعریف اسم متدهای از این نوع ، بهتره که در آخر اسم متد موردنظرمون از واژه ی Handler به معنی مدیریت کننده استفاده کنیم ، چون این یک قرارداد هست و میگه که ما از این تابع بصورت عادی استفاده نمیکنیم مگر اینکه رویدادی رخ بده ( بنابراین الزامی برای پیروی از این روش وجود نداره ) ! حالا در داخل متد موردنظرمون یک دستور log ساده قرار میدیم تا از نحوه ی عمل کردش مطمئن بشیم :و بعد این متد رو بصورت زیر به دکمه ی موردنظرمون پاس میدیم :به نکته ای که در اینجا باید بهش توجه کنیم این هست که هیچوقت نباید در انتهای اسم متد موردنظرمون پرانتز قرار بدیم ! چون اگر چنین کاری انجام بدیم ، متدمون به صورت خودکار و بدون نیاز به کلیک کردن و به محض render شدن DOM اجرا میشه ! حالا اگر به مرورگر بریم و از قسمت developer tools به سربرگ console بریم ، خواهیم دید که به ازای هر بار کلیک بر روی دکمه ی change ، عبارت !was clicked در کنسول چاپ میشه :بعد از اینکه از صحت عملکرد دکمه مون مطمئن شدیم ، میتونیم بجای چاپ یک پیام ساده در کنسول ، کد دیگه ای رو بنویسیم :حالا اگر به مرورگر بریم و روی دکمه Change کلیک کنیم ، متوجه میشیم که هیچ تغییری ایجاد نمیشه چونکه تغییر دادن state به صورت مستقیم (مثل کد بالا) کار درستی نیست ! برای اینکه بتونیم کد مربوط به تغییر state رو بطور صحیح بنویسیم ، باید از یک متد از پیش تعریف شده به نام setState استفاده کنیم ! این متد به عنوان آرگومان ورودی ، یک آبجکت رو دریافت میکنه و بعد اون رو با state قبلی مقایسه میکنه و چک میکنه که کدوم قسمت از state مون تغییر کرده و همون رو برامون بروزرسانی میکنه ! برای استفاده از setState باید بصورت زیر عمل کنیم :همونطور که مشخصه ما در اینجا همون property ای که قبلا داشتیم یعنی persons رو با تغییرات کوچیکی به setState پاس دادیم ( نام Scott رو به Jack و سن David رو به 32 تغییر دادیم( . در این حالت setState تفاوت های بین آرگومان خودش و state قبلی رو پیدا میکنه و اون هارو بروزرسانی میکنه !حالا اگر تغییرات رو ذخیره کنیم و به مرورگر برگردیم و روی دکمه Change کلیک کنیم ، متوجه تغییر مقادیر میشیم ، چون همونطور که گفته شد React متوجه تغییر state میشه و جاهایی که در DOM نیاز به تغییر دارن رو مجددا برای ما render میکنه :حالا باید به چند نکته ی مهم توجه کنیم :1. همونطور که گفته شد ما به دو روش میتونیم state رو در کامپوننت های کلاس محور تعریف کنیم که با روش اول یعنی تعریف state در داخل سازنده ی کلاس آشنا شدیم . روش دوم که برگرفته از ES7 و نوین تر هست ، به اینصورته که میتونیم state رو خارج از سازنده و بصورت زیر تعریف کنیم :2. ما توابع Handler رو در کلاس کامپوننت ها به دو صورت میتونیم تعریف کنیم که تا اینجا با ساختار اول آشنا شدیم . حالا اگر تابع ( )personChangeHandler که بصورت Arrow Function تعریفش کردیم رو بصورت زیر تعریف کنیم ، هنگام کلیک بر روی دکمه ی Cahnge با خطا مواجه خواهیم شد ، چون در اینصورت باید this رو bind کنیم :برای این منظور میتونیم بصورت زیر عمل کنیم :حالا اگر مجددا تغییرات رو ذخیره کنیم و به مرورگر برگردیم و روی دکمه Change کلیک کنیم ، خواهیم دید که برنامه مون مشابه حالت قبل کار میکنه . در کل برای تعریف توابع Handler در کلاس کامپوننت ها ، بهتره از همون روش اول که برگرفته از ES7 هست استفاده کنیم !خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم تونسته باشم مفهوم state رو به خوبی براتون جا انداخته باشم . در رابطه با این مقاله اگر هر نوع سوال ، نظر یا انتقادی دارین ، خوشحال میشم که در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . پیشنهاد میکنم مواردی که تا به اینجا منتشر شدن رو حتما حتما مرور کنین و بعد بخشهای بعدی رو دنبال کنین ، چراکه میخوایم با هم از پایه یک مینی پروژه مفهومی رو تو چند پارت بصورت پیوسته توسعه بدیم تا هم پایه مون رو قوی تر کنیم و هم اینکه موارد جدیدتری رو یاد بگیریم ! میبینمتون :) سیاوش ستاری سیاوش ستاری Fri, 23 Jul 2021 23:09:18 +0430 https://virgool.io/@siavash_sattari/06-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D8%AE%D8%B1%D9%88%D8%AC%DB%8C-%D9%BE%D9%88%DB%8C%D8%A7-%D9%88-%D8%AF%D8%B1%DA%A9-props-%D8%AF%D8%B1-react-bspbguqutozb سلام عزیزان ، خدا قوت . به پارت ششم از سری مقالات "مقدمات React" خیلی خوش اومدین ، قدم رنجه فرمودین ، منت بر سر بنده حقیر گذاشتین ، خلاصه یطوری خوشحالمون کردین :) خوب چخبرا ؟ همه چی روبه راهه ؟ امیدوارم مقاله ی قبلی رو به خوبی کاور کرده باشین و اولین کامپوننت خودتون رو مثل هلو توسعه داده باشین و با انرژی کافی اومده باشین سراغ این مقاله ! رفقا در این قسمت قصدا داریم با مفهوم ارسال داده از یک کامپوننت والد به یک کامپوننت فرزند از طریق props آشنا بشیم . اما قبل از شروع این موضوع بهتره با مفهوم خروجی داینامیک آشنا بشیم و ببینیم که اصلاً چطور میتونیم داده ای رو بصورت داینامیک تو خروجی نمایش بدیم !؟ ما تا اینجا تونستیم یک کامپوننت ساده رو ایجاد کنیم و داده ی خودمون رو نمایش بدیم ، اما هنوز یک مشکلی وجود داره ! چون در اکثر اوقات در برنامه های React ی ، داده های برنامه ی ما صرفا بصورت یک رشته ی ساده و ثابت نیستن و ما نیاز داریم که در طی روند توسعه ی برنامه هامون ، داده ها رو بصورت داینامیک یا پویا تعریف کنیم . بطور مثال به کامپوننت Person سری میزنیم و اونو به شکل زیر تغییر میدیم :حالا اگر بخوایم به جای X یک عدد نمایش بدیم ، برای شروع میتونیم از متد ( )Math.random استفاده کنیم تا برامون یک عدد تصادفی تولید کنه :تو کد بالا ، از متد Math.floor( ) هم استفاده کردیم تا عدد تصادفی خروجی بصورت اعشاری در نیاد و به سمت پایین گرد بشه ! حالا اگر فایل Person.jsx رو در همین حالت ذخیره کنیم و به مرورگر بریم میبینیم که خروجی ما به این شکل خواهد بود و مقدار age به ازای هر بار رفرش صفحه بصورت رندوم تغییر میکنه :توجه کنیم که ما نمیتونیم در داخل curly braces ها عناصر پیچیده ای مثل کلاس ها و . . . رو تعریف کنیم ، بلکه فقط میتونیم expression های ساده و تک خطی مثل همین عدد تصادفی یا صدا زدن توابع رو در داخلش بنویسیم . حالا بیایم به مفهوم props بپردازیم ! اگر بخوام خیلی روون توضیح بدم ، باید خدمتتون بگم که ما اگر بخوایم از طریق کامپوننت والد که در اینجا کامپوننت App هست ، به یک کامپوننت فرزند که در اینجا کامپوننت Person هست ، داده ای رو ارسال کنیم باید از props استفاده کنیم ! در واقع props روشی برای ارسال داده هست . حالا سوالی که پیش میاد این هست که props به چه صورتی عمل میکنه ؟همونطور که میدونیم ما میتونیم به عناصرمون خصوصیات (attributes) مختلفی مثل className اضافه کنیم ، اما حالا اگر بخوایم در فایل App.js به کامپوننت Person چنین attribute هایی اضافه کنیم چطور ?همونطور که مشخصه در اینجا ما برای هر Person خصوصیات fname و lname و age رو تعریف کردیم . همچنین برای Person دوم تگ پایانی هم قرار دادیم و بین دو تگ عبارت My Hobbies : Racing رو نوشتیم . حالا اگر تغییرات رو ذخیره کنیم و به مرورگرمون بریم ، خواهیم دید که هیچ تغییری ایجاد نشده ! چون react نمیدونه که با این اطلاعات باید چیکار کنه ! در واقع نکته ی جالب اینجاست که react این attribute ها رو میگیره و در شئ ای بنام props که مخفف properties هست قرار میده و بعد ما میتونیم از طریق کامپوننت دریافت کننده ، این اطلاعات رو دریافت کنیم و ازشون استفاده کنیم ! پس react آبجکت props رو بصورت آرگومان ورودی به کامپوننت Person ارسال میکنه و ما باید این آبجکت رو دریافت کنیم (البته توجه کنیم که نیازی نیست اسم آرگومان رو حتما props بزاریم ، اما برای راحت تر بودن یادگیری ، از همون props استفاده میکنیم) :حالا باید اطلاعات دریافتی از شئ props رو بصورت زیر وارد JSX مون کنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین خروجی ای رو مشاهده خواهیم کرد :حالا سوالی که ممکنه پیش بیاد این هست که چرا قسمت My Hobbies : Racing در خروجی برنامه مون نمایش داده نشده !? برای رفع این مشکل ، React برای ما یک راه حلی به اسم props.children داره ، به اینصورت که در داخل خود کامپوننت Person ما میتونیم یک مقدار JSX جدید بنویسیم و این مقدار جدید رو برای زمانی تعیین کنیم که کامپوننتمون قرار هست به عنوان content یک دیتای nested داشته باشه :در واقع وقتی ما این کارو میکنیم ، یک مقدار JSXساخته میشه و این به این معنی هست که وقتی کامپوننت Person فراخونی میشه ، میتونه مقادیر nested یا content هم در داخلش داشته باشه . پس این دستور رو به فایل Person.jsx اضافه میکنیم :حالا اگر فایل Person رو در همین حالت ذخیره کنیم و به مرورگر بریم ، میبینیم که خروجی ما به این شکل خواهد بود :نکات مهم :خاصیت children به ما اجازه میده که به تمام چیزهایی که بین تگ آغازین و پایانی یک کامپوننت قرار دارن دسترسی داشته باشیم . به عنوان مثال در قطعه کد بالا ، ما بین تگ های آغازین و پایانی فقط از یک متن ساده استفاده کردیم ، در حالیکه میتونیم ساختارهای پیچیده تر رو هم در داخلش قرار بدیم .برای استفاده از children نیازی نیست که اونو حتما در داخل تگ p قرار بدیم ، بلکه میتونیم اونو در هر قسمتی از کد JSX خودمون قرار بدیم . کاری که ما در این قسمت انجام دادیم کاملا سلیقه ای هست .در نهایت برای حرفه ای تر عمل کردن میتونیم به اینصورت از خاصیت Object Destructuring استفاده کنیم :خوب دوستان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . همچنین اگر که این مطلب براتون مفید بوده ، میتونین با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)راستی بخش بعدی که میشه بخش هفتم از سری مقالات آموزشی مقدماتی React رو به هیچ عنوان از دست ندید ، چراکه قرار هست مفهوم State در React رو ببریم زیر ذره بین و دل و روده اش رو مثل سایر مفاهیم بشکافیم بریزیم بیرون و ببینیم که کلا چیه و چطور میتونیم ازش استفاده کنیم :) سیاوش ستاری سیاوش ستاری Fri, 23 Jul 2021 16:51:41 +0430 https://virgool.io/@siavash_sattari/05-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%DB%8C-%DB%8C%DA%A9-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D8%B3%D8%A7%D8%AF%D9%87-%D8%AF%D8%B1-react-ahf7u1cf5snk سلام عزیزان ، به پارت پنجم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم حالتون عالی باشه و تا به اینجای کار از مقاله های قبلی نهایت بهره رو برده باشید . همونطور که در مقاله ی قبلی هم خدمتون گفتم ، در این بخش قرار هست تاحدی با نحوه ی توسعه کامپوننت ها ، ساختار Class Component ها و Functional Component ها آشنا بشیم و از صفر مطلق کامپوننت هامون رو توسعه بدیم تا کم کم خودمونو برای پیاده سازی یه مینی پروژه مفهومی که بتونه تمام مقدمات React رو به خوبی کاور کنه ، آماده کنیم ! اما قبل از اینکه در این بخش با من همراه باشید ، بهتون پیشنهاد میکنم برای درک بهتر مفهوم کامپوننت ها اگر مقاله ی زیر رو نخوندین ، چند دقیقه وقت بزارید و حتما مطاله اش کنید :مفهوم کامپوننت ها در دنیای واقعی و در Reactخوب همونطور که گفته شد در این قسمت میخوایم با موارد پایه ای React آشنا بشیم ، یعنی میخوایم توسعه ی برنامه مون رو از صفر مطلق شروع کنیم و در خلالش با موارد جدیدتری اشنا بشیم ! قبل از شروع ، تمام فایل‌ های غیر ضروری فولدرهای public و src رو حذف میکنیم و ساختار پروژه مون رو به اینصورت تغییر میدیم ( یعنی فقط فایل index.html رو میزاریم بمونه ) :البته فایل index.css رو هم نگه داشتیم که استایل های کلی برنامه رو در داخل خودش نگهداری میکنه ( من بخاطر نمایش بهتر ظاهر فونت برنامه این فایل رو نگه داشتم وعلا کاملا اختیاری هست و میتونین این فایل رو هم حذف کنین :) البته توجه کنین که در رابطه با استایل دهی در React هم بطور مفصل مقاله خواهیم داشت ) . خوب بیاین ادامه بدیم ...ما تو فولدر src به یک کامپوننت والد نیاز داریم ! همونطور که قبلا هم گفته شد react یک کامپوننت والد داره که شامل تمام کامپوننت های قطعه قطعه شده هست . ما این کامپوننت اصلی رو App.js مینامیم ، البته هر اسم دیگه ای میتونه داشته باشه ولی استاندارد به این صورت هست . پس در فولدر src یک فایل جدید بنام App.js ایجاد میکنیم و بعد برای اینکه اولین کامپوننت مون رو بصورت class component تعریف کنیم ، در داخل فایل App.js به اینصورت عمل میکنیم :چند نکته در مورد ساختار class component ها :· ساختار class component ها به اینصورته که هر کامپوننتی باید کلاس React.Component رو extend کنه .هر کلاسی در داخل سازندش ، میتونه با استفاده از متد super ، سازنده والدش رو فراخونی کنه .هر کلاسی یک متد به نام render داره و ما در داخل متد render هست که چیزی رو return میکنیم .اگر کامل متوجه نشدین نگران نباشید ، جلوتر که بریم بهتر درکش میکنین !حالا برای اینکه بتونیم به کامپوننت مون استایل بدیم (در این حد که مثلا بتونیم وسط چینش کنیم) ، در داخل فولدر src و در کنار App.js ، یک فایل جدید به نام App.css ایجاد میکنیم و استایل زیر رو در داخلش قرار میدیم :و بعد برای اینکه بتونیم در داخل کامپوننت مون از این استایل استفاده کنیم ، باید در وهله ی فایل App.css رو در داخل فایل App.js ایمپورت کنیم و بعد کلاس App. رو به root (عنصر ریشه ای) کامپوننت مون اضافه کنیم: و بعد کامپوننت مون رو export میکنیم چون تو دنیای جاوااسکریپت هر فایل js مجزاست ، به عبارت دیگه هر فایل جاوااسکریپت یک ماژول محسوب میشه که به محتوای بیرون از خودش دسترسی نداره ، حالا برای اینکه بتونیم این مشکل رو رفع کنیم ، مثلاً دو فایل مجزا App.js و index.js رو به هم ربط بدیم ( به این صورت که در فایل index.js بتونیم از کامپوننت App استفاده کنیم ) ، باید اول کامپوننت App رو به اینصورت export کنیم :حالا نوبت رندر کردن کامپوننت مون هست ، برای این منظور در داخل فولدر src یک فایل جدید به نام index.js ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم :حالا اگر تغییرات رو ذخیره کنیم و با npm start برنامه مون رو اجرا کنیم ، در مرورگر همچین چیزی رو خواهیم دید :نکته : ما با استفاده از قابلیت Object Destructuring میتونیم ساده تر هم عمل کنیم ( اگر نمیدونین نحوه ی عملکردش به چه صورته پیشنهاد میکنم حتما در رابطه باهاش سرچ کنید و پایه ی جاوااسکریپتتون رو آپدیت کنید ) :خوب ما تا اینجای کار با مفاهیم اولیه و پایه ای react مثل JSX به خوبی آشنا شدیم و حالا وقتشه که یک کامپوننت واقعی برای خودمون تعریف کنیم ! برنامه ی ما ممکنه از کامپوننت های متعددی تشکیل بشه ولی کامپوننت اصلی ما همون کامپوننت APP هست ، یعنی ما کامپوننت های دیگه رو در داخل پروژه مون توسعه میدیم و سپس اون هارو در داخل کامپوننت APP فراخونی میکنیم ! معمولاً کاری که توسعه دهنده های React انجام میدن به اینصورته که در داخل پوشه ی src ، یک پوشه جدید بنام Components ایجاد میکنن و همه ی کامپوننت ها رو در داخل اون قرار میدن تا راحت تر بتونن کامپوننت هاشون رو توسعه بدن !توجه : یک قراردادی بین برنامه نویس های react وجود داره که همیشه حرف اول اسم کامپوننت ها رو بصورت حرف بزرگ مینویسن ، اما ما مجبور به پیروی از این موضوع نیستیم . با این حال از اونجایی که این موضوع یک قرارداد فراگیر هست ، ماهم ازش پیروی میکنیم و ساختار کامپوننت های خودمون رو بر همین اساس ایجاد میکنیم !حالا فرض کنیم میخوایم کامپوننتی بنام Person داشته باشیم که اطلاعاتی راجع به یک فرد رو در داخل خودش نگهداری میکنه . در قدم اول همونطور که گفته شد ، برای اینکه محتوای فولدر src زیاد شلوغ نشه و پروژه مون ساختار بندی بهتری داشته باشه ، میایم در داخل فولدر src یک فولدر جدید به نام Components ایجاد میکنیم و از این به بعد کامپوننت های جدید رو در داخل این فولدر قرار میدیم . سپس در داخل فولدر Components یک فولدر جدید به نام Person و در داخل فولدر Person هم یک فایل جدید بنام Person.jsx ایجاد میکنیم و قطعه کد زیر رو در داخلش قرار میدیم ( برای اینکه بین کامپوننت ها و فایل های عادی js تمایز قائل بشیم و همچنین هنگام پیاده سازی کامپوننت ها intellisence بهتری داشته باشیم ، میتونیم برای کامپوننت ها از پسوند .jsx استفاده کنیم ، البته این موضوع اجباری نیست ولی در کل پیشنهاد میشه که ازش پیروی کنیم ) :از این به بعد میتونیم از این کامپوننت ساده در فایل های دیگه ی پروژه مون استفاده کنیم ! مثلا اگر بخوایم از کامپوننت Person در داخل کامپوننت App استفاده کنیم ، باید در وهله ی اول اون رو در داخل کامپوننت App ایمپورت کنیم و بعد ازش استفاده کنیم :سوال : چرا کدهایی که در داخل کامپوننت Person نوشتیم رو مستقیما به JSX موجود در داخل فایل App.js اضافه نکردیم و از روش طولانی ایجاد کامپوننت جدید و . . . استفاده کردیم ?پاسخ : دلایل مختلفی برای انجام این کار وجو داره ! یک اینکه با استفاده از این روش میتونیم کامپوننت هامون رو جداگونه و به صورت ماژولار در فایل های جدا قرار بدیم تا مدیریت و نگهداریشون آسون تر باشه (چون در غیر اینصورت باید تمام کدها رو در داخل App.js قرار بدیم که اینطوری خیلی شلوغ میشه) و دو اینکه کامپوننت های جداگونه ( به شکلی که ما ساختیم ) قابلیت استفاده ی مجدد دارن !همونطور که میدونیم یکی از ویژگی های مهم کامپوننت هایی که بصورت جداگونه تعریف میشن و باعث میشه که کامپوننت ها کاربردی تر به نظر برسن ، بحث reusable بودنشون هست ! یعنی ما بسته به نیازمون میتونیم بارها و بارها از یک کامپوننت استفاده کنیم ! به عنوان مثال همونطور که در قطعه کد زیر مشخصه ، ما اومدیم کامپوننت </ Person> رو 3 بار فراخونی کردیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، خروجی زیر رو مشاهده خواهیم کرد :اگر بخوایم ساختار کامپوننت های App و Person که بصورت کلاس محور هستن رو بصورت کامپوننت تابعی بنویسیم ، باید به اینصورت عمل کنیم :کامپوننت App :کامپوننت Person :همونطور که مشخصه تفاوت های ظاهری کامپوننت تابعی با کامپوننت کلاس محور به اینصورته :برای Functional Component ها دیگه نیازی به ایمپورت کردن و استفاده از React.Component نیست.برای تعریف Functional Component ها ، دیگه متدی مثل ()render نداریم.خوب اینا صرفا تفاوت های ظاهری بودن و نسبت به هم تفاوت های دیگه ای هم دارن ، اما فعلا زمانش نرسیده که بهشون بپردازیم ، و فعلا در همین حد بدونین کفایت میکنه !خوب دوستان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . همچنین اگر که این مطلب براتون مفید بوده ، میتونین با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :) راستی بخش بعدی رو به هیچ عنوان از دست ندید ، چراکه قرار هست با نحوه ی نمایش خروجی پویا و مفهوم props در React آشنا بشیم ! پس اونجا میبینمتون ... سیاوش ستاری سیاوش ستاری Fri, 23 Jul 2021 15:49:49 +0430 https://virgool.io/@siavash_sattari/04-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%DB%8C-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%DA%A9%D8%AF-react-%D9%88-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-jsx-bpwpe2o0qolk سلام عزیزان ، خداقوت . به پارت چهارم از سری مقالات "مقدمات React" خیلی خوش اومدین . امیدوارم مقالات قبلی رو به خوبی کاور کرده باشین و کم کم آماده باشین که باهم کدنویسی React رو استارت بزنیم. میدونم که ممکنه 3 پارت قبلی زیاد دلچسب نبوده باشه ، چراکه بیشتر مقدمات بود و توسعه دهنده جماعت همیشه دوست داره خیلی زود دست به کیبورد و برنامه نویسی بشه ، بله میدونم ! :) خوب ما هم به خاطر گل روی شما و هم بخاطر اینکه ماجرا رو خفن تر کنیم تو این بخش قرار هست اولین کد React مون رو توسعه بدیم و بعد با JSX آشنا بشیم و ببینیم که اگر JSX نبود ، چه بلایی سرمون میومد ؟! اگر آماده این من با جازه تون شروع کنم :)قبل از شروع این بخش ، ابتدا کل محتوای فایل index.js و کل محتوای فایل App.js رو حذف میکنیم و فعلا فقط در داخل فایل index.js کد میزنیم . برای نوشتن برنامه های React ای ، اولین کاری که باید انجام بدیم این هست که آبجکت React رو از پکیج react ایمپورت کنیم تا بتونیم از طریق اون به متدهاش دسترسی داشته باشیم :یکی از متدهای مربوط به آبجکت React ، متد ( )createElement هست که برای ایجاد تگ های HTML ازش استفاده میکنیم . این متد میتونه به عنوان ورودی بی نهایت آرگومان دریافت کنه و ما حداقل باید سه مورد رو بهش پاس بدیم :آرگومان اول ، همون عنصری هست که میخوایم در DOM نمایش داده بشه و میتونیم اونو یک عنصر عادی HTML مثل یک تگ h1 در نظر بگیریم .آرگومان دوم ، تمام Attribute های تگ موردنظر رو بصورت یک آبجکت جاوااسکریپتی دریافت میکنه ! به عبارت دیگه یک آبجکت جاوااسکریپتی هست که تنظیمات پیکربندی المنتی که در پارامتر اول تعریف میکنیم رو بر عهده داره و اگر قصد پیکربندی چیزی رو نداشته باشیم ، میتونیم بهش مقدار null رو پاس بدیم .آرگومان سوم هم محتوای تگ موردنظر رو مشخص میکنه .حالا ما میخوایم یک المنت بسازیم تا در نهایت در صفحه ی index.html نمایش داده بشه ، برای این منظور به شکل زیر عمل میکنیم :مرحله ی بعدی این هست که المنت h1 ای که ساختیم رو باید یطوری ارتباط بدیم به index.html یا همون DOM اصلی ! همونطور که قبلا هم گفته شد در داخل فایل index.html یک تگ div با ”id=”root وجود داره و برنامه ی ما نهایتا قرار هست که در داخل این div رندر بشه . پس باید با این تگ div ارتباط برقرار کنیم . برای این منظور اول باید آبجکت ReactDOM رو از پکیج react-dom ایمپورت کنیم تا بتونیم به متدهاش دسترسی داشته باشیم :حالا میتونیم از طریق آبجکت ReactDOM به متد ( )render دسترسی داشته باشیم تا بتونیم المنت موردنظرمون رو از طریق اون رندر کنیم . متد ( )render مطابق ساختار زیر ، 2 تا پارامتر ورودی دریافت میکنه :پارامتر اول همون المنتی که قرار هست رندر بشه رو مشخص میکنه ( در اینجا متغیر element )پارامتر دوم هم همون مکانی که المنت موردنظرمون باید در اونجا رندر بشه رو مشخص میکنه .پس برای رندر کردن المنت h1 در داخل سند index.html ، باید بصورت زیر عمل کنیم :قطعه کد نهایی رو در زیر مشاهده میکنیم :حالا اگر فایلمون رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :همونطور که مشاهده میکنیم ، تگ h1 ای که ساختیم در داخل تگ div باid=”root” قرار گرفته !آشنایی با JSX :خوب دوستان یادتونه تو مقاله اول بهتون قول دادم که اگر یکم صبوری کنین مفهوم JSX رو براتون مثل هلو توضیح میدم ؟! خوب الان وقتشه :) رفقا Javascript Extention یا Javascript XML یا JSX یک افزونه ری اکت هست که به ما اجازه میده کدهای جاوااسکریپت رو مشابه HTML بنویسیم . همین :) ! عه اقا یعنی چی همین ؟ مگه قرار نبود دل و روده اش رو بشکافی :| ؟ بله همچنان روی قولم هستم :) با من همراه باشید ... برای شروع به عنوان مثال قطعه کد زیر رو در نظر بگیریم :این خط ، یک کد HTML نیست بلکه فقط یک سینتکس متفاوت و مبتنی بر HTML/XML هست و به همراه کدهای React استفاده میشه . همچنین توجه کنیم که JSX یک قالب یا فریمورک جدید نیست بلکه همون جاوااسکریپت خودمونه و فقط با ساختار دستوری دیگه ای در ایجاد کامپوننت ‌ها و المان ‌های مختلف برای React DOM کاربرد داره . حالا قبل از اینکه بفهمیم JSX هنگام کامپایل چطوری به جاوااسکریپت معمولی تبدیل میشه ، بهتره با مفهوم و ساختار اکسپرشن در JSX آشنا بشیم !فرض کنید یک متغیر با نام name داریم و میخوایم اونو در قالب JSX در برنامه‌ ی خودمون به کار ببریم . برای این منظور کافیه به صورت زیر عمل کنیم :همونطور که در قطعه کد بالا میبینیم ، مقدار متغیر name رو در داخل علامت curly braces قرار دادیم و یک jsx رو در داخل متغیری بنام element قرار دادیم و در نهایت element رو به DOM اضافه کردیم . دقت کنیم که علاوه بر یک رشته ‌ی ساده ، ما میتونیم هر عبارت معناداری رو داخل { } قرار بدیم و به عنوان JSX ازش استفاده کنیم . این عبارت معنادار میتونه یک عبارت ریاضی مثل x+y یا 8+4 یا حتی میتونه خروجی یک تابع یا یک متغیر بولین مثل true یا false باشه ! به عنوان مثال ، در قطعه کد زیر دو عبارت something و example.com در تابع print کنار هم قرار گرفتن و در نهایت به DOM اضافه شدن :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :همونطور که مشاهده میکنیم ، المنت موردنظرمون در داخل تگ div باid=”root” قرار گرفته !امیدوارم مفهوم و ساختار اکسپرشن در JSX رو تا اینجا به خوبی براتون جا انداخته باشم ! البته نکته ی دیگه ای که باید بهش توجه کنیم این هست که ما نمیتونیم یک تگ رو در داخل { } قرار بدیم . در واقع { } یک سینتکس برای گرفتن مقدار متغیر در قالب DOM هست و برای خود المنت ‌های DOM معنی نداره !خوب حالا بیایم با اصل موضوع یعنی نحوه ی کامپایل JSX به جاوااسکریپت معمولی آشنا بشیم و ببینیم که اگر JSX نبود چه سختی هایی رو باید تحمل میکردیم :)همونطور که قبلاً هم فهمیدیم وظیفه Babel این هست که کد نوین یا همون jsx رو به کد جاوااسکریپت معمولی تبدیل میکنه تا برای تمام مرورگرها قابل فهم باشه . برای اینکه نحوه ی کامپایل و عملکرد Babel رو بهتر متوجه بشیم ، میتونیم به سایت Babeljs.io مراجعه کنیم و با کلیک بر روی گزینه try in now ، از کامپایلر آنلاینش استفاده کنیم :کد JSX زیر رو در نظر بگیریم :این کد هنگام کامپایل به جاوااسکریپت معمولی ، به کد زیر تبدیل خواهد شد :کدنویسی به شکل ساختار دوم و بدون استفاده از JSX واقعا خسته کننده و طاقت فرساست ، مخصوصا زمانی که ده ها عنصر تو در تو داشته باشیم چون خوانایی کد به شدت کاهش پیدا میکنه . به همین دلیل JSX به وجود اومد تا این مشکل رو برای ما حل کنه . به عبارتی میتونیم بگیم JSX یک کد جاوااسکرپتی هست که به ما اجازه میده بجای هربار فراخونی تابع ( ) React.createElement از کدهای شبیه به HTML استفاده کنیم ! برای درک بهتر این موضوع کد JSX زیر رو در نظر بگیریم :حالا اگر این کد رو اجرا کنیم میبینیم که هنگام کامپایل توسط Bable به اینصورت به کد جاوااسکریپت معمولی تبدیل میشه :خوب واضحه که استفاده از JSX تا چه اندازه حجم کدها رو کاهش میده و باعث افزایش خوانایی کد میشه . در واقع یکی از دلایل اصلی اینکه میایم قبل از تعریف کامپوننت مون react رو import میکنیم ، این هست که react در پشت صحنه با Babel ارتباط برقرار میکنه و کد JSX رو به کد جاوااسکریپت خام تبدیل میکنه .با توجه به این توضیحات میتونیم بگیم که JSX برای استفاده از React لازم نیست و ما میتونیم بدون استفاده از JSX هم با React کار کنیم ، اما باید خیلی دقیق و پرحوصله باشیم و مشکلات و سختی های زیادی رو تحمل کنیم . به عنوان یک مثال دیگه کد زیر که با JSX نوشته شده رو در نظر بگیریم :حالا اگر بخوایم این قطعه کد رو هم بدون JSX بنویسیم ، باید بصورت زیر عمل کنیم :البته توجه کنیم که برای جلوگیری از تکرار زیاد React.createElement ، میتونیم از الگوی زیر استفاده کنیم تا راحت تر بتونیم از React بدون JSX استفاده کنیم ، اما خوب بازهم طاقت فرساست :تفاوت JSX و HTML یا محدودیت های JSX :1. کد JSX باید فقط و فقط یک عنصر root داشته باشه و بقیه عناصر باید در داخل اون قرار بگیرن ، در غیر اینصورت با خطا مواجه میشیم ! به عنوان مثال ساختار کد زیر غلط است :چون div ما یک عنصر برادر برای h1 محسوب میشه و بین عناصر HTML یک رابطه ی خواهر برادری (کنار هم بودن) برقرار میشه اما ما گفتیم که فقط و فقط یک عنصر باید وجود داشته باشه و تمام عناصر دیگه باید در داخل اون قرار بگیرن (رابطه ی پدر و فرزندی) ! البته با معرفی نسخه ی 16 کتابخونه ی React این محدودیت تا حدی از بین رفته و میتونیم این کارو انجام بدیم اما بر اساس استانداردی که جا افتاده ما هم از این قانون پیروی میکنیم .2. در JSX به جای اتریبیوت class باید از اتریبیوت className استفاده کنیم ، چون همونطور که میدونیم یکسری از کلمات در داخل جاوااسکریپت رزور شده هستن و ماهم باید از این قانون پیروی کنیم ! همچنین اگر اسم اتریبیوت یا استایلی دو یا چندبخشی باشه ، JSX برای نام ‌گذاری‌ ها از فرمت camelCase استفاده میکنه . یعنی حرف اول کلمه‌ ی اول کوچیک و حرف اول کلمات بعدی باید بزرگ نوشته بشه . مثلا بجای background-color باید بنویسیم backgroundColor .3. برای تگ های self closing حتماً باید علامت / رو قرار بدیم ، در غیر اینصورت با خطا مواجه میشیم :4. همونطور که میدونیم در HTML برای کامنت کردن از دستور <--comment!--> استفاده میکنیم ، ولی همچین چیزی برای JSX قابل فهم نیست و به جای این دستور باید از سینتکس {/*comment*/} استفاده کنیم !خوب عزیزان این قسمت هم به پایان رسید ، امیدوارم لذت کافی رو برده باشین و نهایت بهره رو از این مقاله ببرین . در رابطه با این مقاله هم اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و به هر چه بهتر شدن مقالات کمک کنین . اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)در بخش بعدی میایم با ساختار Class Component ها و Functional Component ها تاحدی آشنا میشیم و از صفر مطلق کامپوننت هامون رو توسعه میدیم و کم کم خودمونو برای پیاده سازی یه مینی پروژه مفهومی که بتونه تمام مقدمات React رو به خوبی کاور کنه ، آماده میکنیم !پس فعلا تا قسمت بعدی ... مراقب خودتون باشید :) سیاوش ستاری سیاوش ستاری Tue, 20 Jul 2021 15:37:39 +0430 https://virgool.io/@siavash_sattari/03.-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1-%D9%BE%D9%88%D8%B4%D9%87-%D9%87%D8%A7-%D9%88-%D9%81%D8%A7%DB%8C%D9%84-%D9%87%D8%A7%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-xjzhlbn2zpw9 سلام رفقا ، به پارت سوم از سری مقالات "مقدمات React" خوش اومدین . تا اینجا ما اومدیم بطور کامل با پکیج create-react-app اشنا شدیم و با استفاده از اون پروژه مون رو ایجاد کردیم و قرار شد که با ساختار اولیه فایل ها و پوشه های پروژه مون در این قسمت آشنا بشیم و ببینیم که هر کدومشون چه نقشی رو بر عهده دارن ؟! خوب منتظر چی هستین ؟ بیاین شروع کنیم ... بعد از اینکه با create-react-app پروژه ی جدیدی رو ایجاد میکنیم ، ساختار پیش فرض پروژه مون بصورت زیر هست :پوشه ی node-modules : · تمام پکیج های create-react-app و تمام Dependency هایی که به مرور به پروژه مون اضافه میکنیم در داخل این فولدر قرار میگیرن و ما اصلا قرار نیست که با اون ها و محتوای این فولدر سروکار داشته باشیم .پوشه ی public : · این پوشه ، محل قرارگیری فایل های استاتیک پروژه هست که توسط وب سرور بین کاربرها توزیع میشه . معمولا فایل های داخل پوشه ی public در مرورگر کش میشن و نیازی نیست که هر بار توسط مرورگر کاربر دانلود بشن . در داخل این پوشه ، تنها یک فایل HTML بنام index.html وجود داره و تا آخر پروژه هیچ فایل HTML دیگه ای رو قرار نیست به این پوشه اضافه کنیم ! در داخل این فایل یک تگ div با آیدی root داریم و نهایتا تمام کامپوننت هایی که تعریف میکنیم ، توسط React در داخل این تگ رندر میشن ! محتوای فایل index.html رو بصورت زیر تغییر میدیم :همونطور که مشخصه در داخل این فایل ، یک تگ div با “id=”root وجود داره . بازهم تاکید میکنم که این عنصر خیلی مهمه ، چون عنصری هست که کل برنامه ی ما در داخل اون قرار میگیره . البته اگر نیاز داشتیم که فایلهای دیگه ای مثل فایلهای CSS رو در داخل فایل HTML بارگذاری کنیم یا meta تگ های بیشتری اضافه کنیم ، میتونیم این کارها رو در داخل همین فایل HTML انجام بدیم ، از این نظر مشکلی وجود نداره !فایل manifest.json : یک فایل JSON هست که اطلاعات meta مثل اسم برنامه ، Favicon مورد استفاده ، url ابتدایی و غیره رو در داخل خودش نگهداری میکنه و ازش در داخل نرم افزارهای PWA استفاده میشه و چون که ما با PWA کاری نداریم این فایل رو حذف میکنیم .پوشه ی src : مهم ترین پوشه برای ما پوشه ی src هست ، چراکه تمام فایل های داینامیک در داخل این پوشه قرار میگیرن . اگر قرار هست فایلی توسط کدهای جاوااسکریپت import بشه یا توسط کدهای js محتواش تغییر کنه ، باید اون فایل رو در داخل همین پوشه قرار بدیم . از بین تمام فایل هایی که بصورت پیشفرض در داخل این پوشه هستن ، فایلی به نام index.js وجود داره که فایل خیلی مهمی هست . اگر بازش کنیم ، میبینیم که کامپوننت App رو داره به اینصورت render میکنه :شاید در نگاه اول عجیب بنظر برسه که ما چطور میتونیم فایل هایCSS رو در داخل یک فایل جاوااسکریپتیimport کنیم ?!جواب این سوال به وجودwebpack مربوط میشه ، چون webpackهنگام کامپایل نهایی محتوای فایل ها رو در داخل فایل HTMLمون تزریق میکنه . اگر به قطعه کد بالا دقت کنیم متوجه میشیم که فایلApp.js به اینصورت import شده و خبری از پسوند .js نیست و اگر نزاریمش مشکلی پیش نمیاد:حالا اگر وارد فایل App.js بشیم ، اولین و تنها کامپوننت پروژه ی فعلیمون رو مشاهده میکنیم که بصورت زیر هست :اما از اونجایی که ما با این کدها کاری نداریم و میخوایم پروژه ی خودمونو بنویسیم ، پس تمام کدهای JSX بالا رو حذف میکنیم و فقط div با کلاس className=”App” رو میزاریم بمونه و بعد در داخلش یک تگ h1 ایجاد میکنیم و عبارت Hi , I’m a React App رو در داخلش مینویسیم و همچنین کد مربوط به import کردن logo رو هم از داخلش حذف میکنیم :حالا اگر تغییرات رو ذخیره کنیم و به مرورگر بریم ، همچین چیزی رو خواهیم دید :در داخل پوشه ی src ، یک فایل دیگه به اسم App.css وجود داره که حاوی استایل های کامپوننت App هست . تمام کدهای این فایل به جز استایل مربوط به کلاس App. رو هم حذف میکنیم و در نتیجه محتوای این فایل باید بصورت زیر باشه :یک فایل دیگه به اسم index.css هم وجود داره که استایل های کلی برنامه رو در خودش نگهداری میکنه :فعلا این فایل رو میزاریم بمونه و باهاش کاری نداریم . فایل App.test.js هم فایلی هست که به ما اجازه تست نویسی میده و چون قرار نیست که ما فعلا کار تست نویسی انجام بدیم ، پس این فایل رو هم حذف میکنیم .فایل package.json : تمام اطلاعات نرم افزار مون مثل اسم و نسخه ی نرم افزار (در حال حاضر نسخه ی 17.0.2 کتابخونه ی React) و dependency ها یا وابستگی های پروژه (اسکریپت هایی که پروژه بهشون نیاز داره تا به طور صحیح کار کنه) در داخل این فایل قرار دارن . در واقع فایل package.json یکجورایی شناسنامه ی برنامه مون هست :) همونطور که در زیر میبینیم پروژه مون 4 تا وابستگی داره :پکیج react ، قسمت اصلی React هست .پکیج react-dom ، ارتباط بین React و DOM رو برای ما برقرار میکنه و مسئول رندر کردن یک کامپوننت در DOM اصلی هست .پکیج react-scripts که میشه گفت مراحل اجرای برنامه مون به عهده این پکیج هست . وقتی که ما npm start رو اجرا میکنیم عملاً دستور react-scripts start هست که اجرا میشه . این پکیج حاوی مواردی مثل web server و bable و غیره هست .پس در حالت کلی ما میتونیم بعضی از فایل هایی که در پروژه مون بهشون نیازی نداریم رو حذف کنیم و ساختار پروژه رو بصورت زیر تغییر بدیم :خوب عزیزان این قسمت هم به پایان رسید ، اگر از مقدمات خسته شدین براتون یه خبر خوش دارم :) چراکه از قسمت بعدی قرار هست رسما کدنویسی با React رو شروع کنیم ! در آخر اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین و اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :) پس فعلا تا قسمت بعدی ... مراقب خودتونم باشید :) سیاوش ستاری سیاوش ستاری Tue, 20 Jul 2021 15:32:50 +0430 https://virgool.io/@siavash_sattari/02-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D9%85%D8%AD%DB%8C%D8%B7-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%A8%D8%A7-create-react-app-poh1znvw7hc6 سلام رفقا ، به پارت دوم خیلی خوش اومدین . تا اینجا ما اومدیم با مقدمات React و همچنین با ویژگی های اون اشنا شدیم و همونطور که قولش رو داده بودم ، در پارت دوم قرار هست به کمک هم محیط توسعه مون رو راه اندازی کنیم و با پکیج create-react-app آشنا بشیم و ببینیم که اگر همچین پکیجی وجود نداشت با چه مشکلاتی مواجه میشدیم ! خوب منتظر چی هستین ؟ بیاین شروع کنیم ...ما برای کار با پروژه های React ، نیاز به یک محیط کار محلی داریم یعنی محیطی که روی سیستم خودمون باشه نه اینکه از وب سایت هایی مثل codepen استفاده کنیم . در واقع زمانی که بحث از محیط های توسعه ی محلی میشه ، دو سوال اصلی به ذهن کاربرهای تازه کار میاد : چرا باید از محیط های توسعه محلی استفاده کنیم؟ و اینکه چطور میتونیم یک محیط توسعه ی محلی داشته باشیم ؟ خوب من با اجازتون دل و روده ی این موضوع رو میشکافم ...سوال اول : چرا باید یک محیط توسعه ی محلی داشته باشیم ؟دلایل زیادی برای انجام این کار وجود داره که همگی زیرمجموعه ی یک دلیل اصلی هستن و اون دلیل ، این هست که قابلیت های بیشتری در محیط توسعه محلی وجود داره ! مثلا ما باید کدهامون رو بهینه سازی کنیم ، یعنی کدهامون باید تا حد ممکن سریع و کم حجم باشن . چنین قابلیتی در وب سایت های آنلاین به صورت درست و حسابی وجود نداره ، از طرفی میخوایم از قابلیت های جدید جاوا اسکریپت یعنی ES6 هم استفاده کنیم چراکه کارمون رو خیلی ساده تر میکنه . البته در هنگام کار با ادیتور آنلاینی مثل codepen میتونیم از Babel استفاده کنیم تا کدهای ES6 رو تا حدی در اختیار ما قرار بده اما بازهم به محیط خیلی کامل تری نیاز داریم تا بتونه کدهای ما رو به کدهایی کامپایل کنه که روی تمام مرورگرها قابل اجرا باشه ! البته به این موضوع هم توجه کنیم مشکلاتی که بهشون اشاره شد با وجود اپ هایی مثل codesandbox ، stackblitz ، cloud9 یا codespaces زیاد معنی نمیدن و از جمله دلایل اصلی که ما از محیط توسعه لوکال استفاده میکنیم ، میتونیم به Developer Experience بهتر و مشکلات اینترنت تو ایران اشاره کنیم :) سوال دوم : چطور میتونیم یک محیط توسعه ی محلی داشته باشیم ؟اول از همه به یک سیستم مدیریت وابستگی مثل npm یا yarn احتیاج داریم . ما در طول این آموزش از npm استفاده میکنیم و بعد به یک module bundler مثل Webpack نیاز داریم .ما کدهامون رو به صورت ماژولار مینویسیم ، یعنی تمام کدها در یک فایل نیستن بلکه در فایل های متعددی قرار میگیرن و هر فایل مسئول بخشی از کدها هست . حالا وظیفه ی bundler ها این هست که میان تمام این فایل ها رو در نهایت به یک یا دو یا سه ( تعداد محدودی ) فایل تبدیل میکنن تا کاربر ها مجبور نشن تعداد زیادی از فایل ها رو دانلود کنن .در قدم بعدی به یک کامپایلر نیاز داریم تا کدهای ES6 رو به کدهای ساده تر و قدیمی تر جاوا اسکریپت تبدیل کنه تا روی تمام مروگرها قابل اجرا باشن ، چون ممکنه بعضی از مرورگر ها نسخه های متفاوتی داشته باشن و نتونن برنامه ی ما رو به درستی تفسیر کنن . ما برای این منظور از Babel که یک کامپایلر جاوااسکریپتی هست استفاده خواهیم کرد .در نهایت میخوایم از یک development server یا یک سرور توسعه محلی استفاده کنیم تا از طریق اون بتونیم کدهامون رو به صورت محلی روی سیستم خودمون تست کنیم و نیازی به سرور واقعی و هزینه های اون نداشته باشیم . همه ی این ها رو میتونیم به کمک Node.js انجام بدیم . درسته که Node.js یعنی اجرای جاوااسکریپت در خارج از مرورگر ، اما Node.js در اینجا برای ما نقش یک Runtime رو داره تا بتونیم تمام این ابزارها رو در کنار هم داشته باشیم و در داخل یک سرور محلی اون ها رو مدیریت کنیم .پس بطور کلی برای توسعه ی نرم افزار با React و داشتن یک محیط توسعه ی محلی ، به موارد زیر احتیاج داریم: · یک سیستم مدیریت وابستگی مثل npm یا yarn· یک module bundler مثل Webpack· کامپایلر Babel· نود جی اس (Node.js)ممکنه ما جلوتر به یکسری از ابزار های دیگه هم نیاز داشته باشیم ، مثلاً ممکنه یک نسخه از webpack رو نصب کنیم که با یک نسخه خاص از babel تداخل داشته باشه و به درستی برای ما کار نکنه و کار ما رو سخت کنه ! برای رفع این مشکل ، تیم توسعه دهنده ی React یک ابزار خیلی کاربردی برای ما تهیه کرده که کل محیط توسعه رو بدون هیچ پیکربندی از سمت ما راه اندازی میکنه و از ما هیچ چیزی نمیخواد ! خوب چه چیزی از این بهتر رفقا ؟! واقعا یه لحظه فکر کنید اگر create-react-app معرفی نمیشد چه بلایی سر توسعه دهنده های یکی از یکی گل تر میومد :)اسم این پکیج create-react-app هست و ما میتونیم اونو به کمک npm نصب کنیم تا همه ی ابزار هایی که نیاز داریم رو یکجا داشته باشیم و نگران تداخل ورژن ابزارها هم نباشیم ! با مراجعه به لینک پایین میتونیم به صفحه ی گیت هاب این پکیج بریم و در موردش مطالعه کنیم :https://github.com/facebook/create-react-appهمونطور که گفته شد برای راه اندازی و نصب این پکیج ، به npm نیاز داریم . بنابراین اول باید Node.js رو از آدرس https://nodejs.org/en/ دانلود و نصب کنیم ، چون همونطور که میدونیم همراه با نصب Node.js ، پکیج منیجر npm هم برامون نصب میشه و ما به کمک اون میتونیم پکیج create-react-app رو نصب کنیم . برای نصب پکیج های npm از این ساختار استفاده میکنیم :البته به جای install میتونیم از i که مخفف install هست هم استفاده کنیم . معمولاً بهتره که قبل از اسم پکیج ، از علامت g- استفاده کنیم که مخفف globally هست ، چون وقتی ما پکیجی رو به صورت سراسری نصب میکنیم ، میتونیم از اون پکیج در تمام قسمت های کامپیوترمون استفاده کنیم ! پس در حالت کلی برای نصب بسته ی نرم افزاری create-react-app به صورت سراسری به صورت زیر عمل می کنیم :توی قدم بعدی باید تعیین کنیم که قرار هست در چه محلی از حافظه ی کامپیوتر یا به عبارت بهتر در چه آدرسی یک پروژه ری اکتی ایجاد کنیم . همونطور که میدونیم محیط CMD به صورت پیشفرض تو ‌مسیر user قرار داره ، اگر دستور dir رو اجرا کنیم ، تمام فایل ها و فولدرهای موجود در اون بهمون نمایش داده میشه و حالا اگر فرضا بخوایم از user به Desktop بریم و اونجا یک فولدر برای پروژه ‌های React بسازیم باید به این صورت عمل کنیم: سپس برای ایجاد پروژه در دسکتاپ به اینصورت عمل میکنیم :حالا ما مثلاً اسم پروژه رو میزاریم firstProject :بعد از اجرای دستور بالا باید چند دقیقه صبر کنیم تا پروژه ی جدید برامون ساخته بشه .توجه : ما برای ساخت پروژه جدید با استفاده از create-react-app ، میتونیم خودمون فولدر پروژه رو بصورت دستی ایجاد کنیم و سپس توی ترمینال به مسیر فولدر پروژه مون بریم و بعد دستور زیر رو اجرا کنیم تا تمام Dependency ها و موارد مورد نیاز رو برامون کنه :بعد از ایجاد پروژه حالا برای راه اندازی سرور مجازی باید از طریق ترمینال به پوشه ی firstProject بریم ( یا هر پوشه ای که برای اسم پروژه انتخاب کردین ) و بعد دستور زیر رو اجرا کنیم :بعد از اجرای دستور بالا مرورگرمون بطور خودکار باز خواهد شد و حالا ما یک سرور محلی داریم . بعد از اجرای پروژه مون در مرورگر چنین چیزی رو خواهیم دید :همونطور که میبینیم این صفحه ی ساده ی HTML ، صرفا یک قالب خوشامدگویی هست و چیز خاصی نداره .نکته ی مهم : در طول توسعه و کار با کدها ، هیچ وقت command line یا ترمینال رو نباید ببندیم و باید بزاریم که سرور مجازی در حال اجرا باشه چون در حالت عادی سرور مجازی کدهای ما رو زیر نظر میگیره و اگر کدها رو تغییر بدیم ، بصورت خودکار صفحه ی مرورگر رو برای ما refresh میکنه تا تغییرات رو مشاهده کنیم اما اگر command line یا ترمینال رو ببندیم ، سرور مجازی دیگه کدهای ما رو زیر نظر نمیگیره ! در کل هر زمانی که کار توسعه و کدنویسی ما تموم شد میتونیم command line رو ببندیم و دفعه ی بعد دوباره دستور npm start رو اجرا کنیم .نکته ی مهم : همونطور که میدونیم وقتی از طریق کامند npm install -g create-react-app میخوایم پکیج create-react-app رو روی سیستممون نصب کنیم ، Node.js این پکیج رو برامون از سرور npm دانلود و نصب میکنه ! اما ممکنه که در هنگام فرآیند نصب ، بنا به دلایلی مثل کند بودن سرعت اینترنت یا قطعی اینترنت یا مشکلات مربوط به سرور و … ، این پکیج به درستی روی سیستممون نصب نشه و بعدها مشکلاتی رو به بار بیاره (مثلا ممکنه نتونیم از طریق اون پروژه ی جدیدی ایجاد کنیم !) . برای رفع این مشکل یا میتونیم اونو حذف کنیم و از دوباره نصبش کنیم و یا میتونیم هر بار که میخوایم پروژه ی جدیدی ایجاد کنیم ، از کامند زیر استفاده کنیم:این کامند دیگه کاری به این نداره که آیا پکیج create-react-app روی سیستم ما نصب هست یا نه و تفاوتی که با کامند قبلی داره این هست که وقتی ما پکیج create-react-app رو بصورت global نصب میکنیم دیگه نمیتونیم از به روز بودن Dependency ها اطمینان حاصل کنیم ، در حالی که با npx آخرین تغییرات مربوطه برامون از سرور گرفته و نصب میشه ! در آخر به نکته ی دیگه ای که باید توجه کنیم این هست که npx هم مشابه npm همراه نصب nodejs برامون نصب میشه و برای استفاده از اون حتما باید ورژن npm بالاتر از ورژن 5.2 باشه !خوب عزیزان این هم از این قسمت ، امیدوارم شمارو به خوبی با نحوه ی راه اندازی محیط توسعه React آشنا کرده باشم . اگر سوال ، نظر یا انتقادی دارین ، خوشحال میشم در قسمت کامنت ها باهام به اشتراک بزارین . اگر که این مطلب براتون مفید بوده ، میتونید با به اشتراک گذاشتنش انرژی من رو دو چندان کنین :)بخش بعدی رو هم به هیچ عنوان از دست ندید ، چراکه قرار هست با ساختار اولیه تمام فایل ها و پوشه هایی که هنگام ایجاد پروژه بصورت دیفالت ایجاد میشن آشنا بشیم و کم کم خودمون رو برای کدنویسی آماده کنیم :) سیاوش ستاری سیاوش ستاری Mon, 19 Jul 2021 21:15:04 +0430 https://virgool.io/@siavash_sattari/01.-%D9%85%D9%82%D8%AF%D9%85%D9%87-%DA%86%DB%8C%D9%86%DB%8C-:%29-x6rdh0tejm82 سلام عزیزان ، امیدوارم حالتون خوب باشه و سخت مشغول پیشرفت و یادگیری باشین . من قرار هست با چند مقاله ی چند پارتی در رابطه با کل مقدمات React در خدمتتون باشم و سعیم بر اینه که بطرز کاملا روون و جامع مقدمات React رو پوشش بدم تا هم برای کسایی که در حال حاضر React بلد نیستن ولی قصد دارن که در آینده یادش بگیرن مفید باشه ، هم برای کسایی که React رو بلدن ولی بازم میخوان زیر و بم مقدماتش رو یه مرور اساسی کنن مفید باشه . خوب ما هم مثل خیلی از منابع با مقدمه چینی شروع میکنیم :) .ری اکت (React) چیه ؟ری اکت (React) یک کتابخونه open-source جاوااسکریپتی هست که به منظور ایجاد رابط کاربری (UI) وب اپلیکیشن ها بخصوص وب اپلیکیشن های SPA مورد استفاده قرار میگیره . در واقع ما برای مدیریت لایه View برنامه هامون از React استفاده میکنیم . React در ابتدا توسط یکی از مهندسین ارشد فیسبوک یعنی Jordan Walke ایجاد شد و برای اولین بار در سال 2011 توسط خود فیسبوک مورد استفاده قرار گرفت و بعد در سال 2012 در اینستاگرام استفاده شد . یکی از نکات مهمی که در رابطه با پشتیبانی و بروز رسانی های React وجود داره ، این هست که خود تیم توسعه دهنده React ، تمام بهبود‌ها و ویژگی ‌های جدیدی که قرار هست برای React معرفی بشه رو به خوبی روی خود Facebook تست میکنن و این کار باعث میشه که اعتماد بیشتری نسبت به بروزرسانی ‌ها و مواردی از این قبیل کسب کنیم .ویژگی های React :حالا بیایم نگاهی هم به ویژگی های مهم React بندازیم و ببینیم که چه فیچرهایی رو در اختیار ما قرار میده :Virtual DOMری اکت با استفاده از ساختارin-memory با کش کردن رخداد های قابل پیشبینی ، سیستم Virtual DOM رو ایجاد کرده تا مرورگر با استفاده از این قابلیت بتونه در صورت تغییر اطلاعات ، DOM رو به روز رسانی کنه . اما یعنی چی ؟ React بر خلاف اکثر کتابخونه های قدیمی جاوااسکریپت ، بطور مستقیم با Dom مرورگر کار نمیکنه ، بلکه از یک Virtual DOM یا اصطلاحا DOM مجازی استفاده میکنه . Virtual DOM شامل دستوراتی هست که مربوط میشه به خود React و کاری که انجام میده این هست که انگار یک کپی از یک قسمت خاص از DOM رو در خودش نگهداری میکنه و بعد از پردازش کردن ، نتیجه رو به DOM اصلی میفرسته ، یعنی Process ها هر بار روی DOM اصلی اجرا نمیشن ، بلکه یک DOM مجازی داریم که Process ها روی اون اجرا میشن و نتیجه ی نهایی به DOM اصلی ارسال میشه و به همین دلیل هست که سرعت اجرای برنامه ی ما افزایش پیدا میکنه .Reusable Componentsری اکت این امکان رو در اختیار ما قرار میده تا بتونیم کامپوننت هایی با قابلیت استفاده مجدد ایجاد کنیم . خوب این یعنی چی ؟ مثلا اگر فرض کنیم که از یک کامپوننت در سه جای مختلف استفاده کردیم ، دیگه نیازی نیست که مثل گذشته برای تغییر این سه کامپوننت هر کدوم رو بصورت جدا جدا بروزر رسانی کنیم ، بلکه ما فقط یکبار کامپوننت اصلی رو تعریف میکنیم و در جاهای مختلف بسته به نیازمون ازش استفاده میکنیم ، حالا اگر زمانی نیاز به بروزر رسانی این سه کامپوننت داشته باشیم ، فقط خود کامپوننت اصلی رو آپدیت میکنیم !JSXدر React به جای استفاده از جاوااسکریپت معمولی ، میتونیم برای templating از JSX استفاده کنیم که یک فرمت نوین جاوااسکریپتی برای ایجاد DOM های HTML در قالب یک کامپوننت هست که نهایتا هنگام کامپایل توسط Babel به کدهای جاوااسکریپت معمولی تبدیل میشه تا برای مرورگرهای مختلف قابل فهم باشه . نگران نباشید ، تو بخش های بعدی شمارو به خوبی با JSX آشنا میکنم .React Nativeری اکت نیتیو (React Native) یک فریمورک جاوااسکریپتی هست که برای توسعه اپلیکیشن های موبایل بصورت Native برای دو سیستم عامل Android و ios مورد استفاده قرار میگیره و در سال 2015 معرفی شد . این فریمورک بر پایه جاوااسکریپت و کتابخانه React هست ، یعنی ما با تسلط بر React میتونیم تو یادگیری React Native نسبت به بقیه خیلی جلوتر باشیم .Simplicityدرک کردن React ساده هست . مواردی مثل رویکرد مبتنی بر کامپوننت ها ، lifecycle هایی که به بهترین نحو تعریف شدن و استفاده از جاوااسکریپت و موارد دیگه ، React رو برای یادگیری و ساخت وب اپلیکیشن های حرفه ای آسون تر میکنه . همونطور که در بالاتر هم گفتم ما برای توسعه اپلیکیشن React از JSX استفاده میکنیم که اجازه میده (HTML)XML و جاوااسکریپت رو باهم ترکیب کنیم . البته ضروری نیست که برای templating حتما از JSX استفاده کنیم ، چراکه از خود جاوااسکریپت هم میتونیم برای اینکار استفاده کنیم ولی اگر با JSX و سادگی اون آشنا باشید ، هیچوقت نمیاین برای templating از خود جاوااسکریپت استفاده کنین . اگر یکم صبور باشین قول میدم این موضوع رو مثل هلو براتون اثبات کنم :) .Performanceامروزه کتابخانه React از نظر کارایی بهتر از فریمورک های موجود عمل کرده و یکی از مزیت های اصلیش این هست که سرعت اپلیکیشن ما رو بیشتر میکنه . معمولاً ما زمانی با مشکل سرعت و یا در مجموع با مشکل پرفورمنس برنامه مواجه میشیم که پارامترهای گرافیکی که روی قسمت view برنامه مون داریم ، یکم پیچیده و زیاد باشن . برای درک بهتر این موضوع فرض کنیم یک رابط کاربری به این شکل داریم :هنگامی که ما از React استفاده میکنیم ، میتونیم رابط کاربری مون رو مطابق شکل زیر به یکسری از قسمت های جدا از هم تقسیم کنیم :بخش Navbar Menu که شامل منوها هست ، بخش Product که اطلاعات مربوط به یک محصول رو در داخل خودش نگهداری میکنه و بخش Cart که مربوط به سبد خرید هست ! توی React به هر کدوم از اینها ، کامپوننت گفته میشه و همشون در کنار هم ، در داخل یک کامپوننت اصلی به نام App قرار میگیرن . پس اولین قدم React این هست که میاد تمام قسمت ‌های مختلف برنامه ی مارو از هم جدا میکنه تا هر کدوم از اون ها به شکل مجزا و جدا از هم قابل توسعه باشن ! حالا اگر هر کدوم از این کامپوننت ها تغییری کنه ، کل DOM اصلی مجددا رندر نمیشه ، چون همونطور که گفته شد React یک DOM مجازی داره که Process ها روی اون انجام میشن و سپس نتیجه ی نهایی به DOM اصلی ارسال میشه . پس هنگامی که تغییری روی کامپوننتی یا Data ای صورت میگیره ، ما میتونیم بدون عمل reload شدن صفحه مرورگر ، شاهد تغییرات باشیم .محبوب ترین پروژه هایی که دارن ازReact استفاده میکنن :در تصویر زیر عناوینی رو میبینیم که دارن از React استفاده میکنن :دلیل استفاده از React :حالا سوالی که ممکنه پیش بیاد این هست که چرا باید یک نفر از ReactJs استفاده کنه ؟ در دنیای front-end که هر روز تغییرات گسترده ای داره ، ممکنه سخت باشه که زمانی رو به یاد گرفتن فریمورک ها و کتابخانه های جدید اختصاص بدیم ، بخصوص ابزارهایی که عمر کوتاهی دارن و نمیتونیم روی زمان ریسک کنیم . بنابراین اگر شما هم به دنبال یک تکنولوژی ای هستید که جزء بهترین های حوزه خودش باشه و ارزش ریسک رو داشته باشه ، پیشنهاد من صددرصد React هست ، چون علاوه بر تمام نکاتی که تااینجا خدمتتون گفتم ، React کامیونیتی خیلی بزرگی داره ، یعنی به عنوان مثال اگر برای اولین بار با یک مشکل خاصی مواجه بشین ، به راحتی میتونین با یک سرچ ساده به جواب برسین و مشکلتون رو حل کنین .البته توجه کنید که برای استفاده از React حتما باید دانش CSS , HTML و جاوااسکریپت داشته باشید و بهترین گزینه این هست که قبل از یادگیری مفاهیم ری اکت ، ES5 و ES6 رو حتما مطالعه کنید تا راحت تر بتونید با React کار کنید تا اگر مثلا فلان جا سینتکس Object Destructuring یا Spread Operator یا امثالهم رو دیدین بدونین که چه اتفاقی داره میفته .خوب رفقا مقدمه چینیمون تموم شد و امیدوارم لذت برده باشین . در اخر اگر که نظر یا انتقادی داشتین ، خوشحال میشم در قسمت کامنت ها به اشتراک بزارین . راستی بخش بعدی رو به هیچ عنوان از دست ندید ، چراکه قرار هست با نحوه ی راه اندازی محیط توسعه React با create-react-app آشنا بشیم ! پس اونجا میبینمتون :) سیاوش ستاری سیاوش ستاری Mon, 19 Jul 2021 21:11:12 +0430 https://virgool.io/@siavash_sattari/%D9%85%D9%81%D9%87%D9%88%D9%85-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7-%D8%AF%D8%B1-%D8%AF%D9%86%DB%8C%D8%A7%DB%8C-%D9%88%D8%A7%D9%82%D8%B9%DB%8C-%D9%88-%D8%AF%D8%B1-react-xdh1bz6nmrii سلام عزیزان ، امیدوارم حالتون خوب باشه و سرشار از انرژی باشید . در این مقاله میخوایم با مفهوم کامپوننت ها در دنیای واقعی و در React آشنا بشیم و ببینیم که اصلا چی هستن و چرا باید ازشون استفاده کنیم ?!مفهوم کامپوننت در دنیای واقعی :تعریف اول : به هر عضو کوچیک از یک مجموعه بزرگ کامپوننت گفته میشه یا به عبارت دیگه کامپوننت ها قطعاتی هستن که مجموعه ی اونا ، یک مجموعه بزرگتر و در اصطلاح یک کامپوننت اصلی رو تشکیل میده .تعریف دوم : به هر کدوم از اجزایی که کنار هم قرار میگیرن و یک موجودیت کلی رو به وجود میارن ، یک کامپوننت گفته میشه .به عنوان مثال یک خودرو رو تو دنیای واقعی در نظر بگیریم . همونطور که میدونیم اجزای اصلی تشکیل دهنده ی اونو میتونیم به بدنه ، موتور ، چرخ ها ، باتری ، سیستم سوخت رسانی و موارد دیگه تقسیم کنیم :در حالت کلی به هر کدوم از این اجزا ، یک کامپوننت کلی یا یک کامپوننت اصلی گفته میشه . حالا میتونیم هر کامپوننت مثلاً کامپوننت سیستم Power Train یا همون سیستم محرک چرخ های جلوی ماشین رو به یکسری کامپوننت های کوچیک تر و مستقل از هم تقسیم کنیم :همچنین بازهم میتونیم جلوتر بریم و موتور این سیستم محرک رو به قطعات کوچیک تر و مستقل از هم تقسیم کنیم :در نهایت به یک جایی میرسیم که دیگه اون کامپوننت یا اون عضو رو نمیتونیم به اجزا یا کامپوننت های کوچیک تر تقسیم کنیم ! مثلاً در تصویر زیر هر قطعه ، خودش به تنهایی یک موجودیت مجزاست و ما دیگه نمیتونیم اونو به اجزای کوچیک تر تقسیم کنیم :پس اگر یک شرکت خودروسازی بخواد یک خودرویی رو تولید کنه ، در قدم اول میاد میبینه که مثلاً اون خودرو هزار تا قطعه یا اصطلاحا هزارتا کامپوننت نیاز داره و در قدم بعدی شروع به تهیه ی اون کامپوننت ها میکنه ، به اینصورت که بعضی هاشون رو خودش ایجاد میکنه و بعضی هاش رو هم از شرکت های زیر مجموعه تهیه میکنه و در نهایت با مجموعه ی کل کامپوننت ها ، اون خودرو رو ایجاد میکنه !ما برای مفهوم کامپوننت ها در دنیای واقعی یک خودرو رو مثال زدیم ، درحالیکه میتونیم این مفهوم رو برای مثال های واقعی دیگه مثل تلویزیون ، موبایل ، کامپیوتر ، انسان ، ساختمان و هر موجودیت دیگه ای شبیه سازی کنیم . مفهوم کامپوننت در React :تعریف کامپوننت توی خود سایت رسمی React به اینصورته :کامپوننت‌ ‌ها به ما اجازه میدن که رابط کاربری پروژه مون رو به بخش ‌های مستقل از هم تقسیم کنیم و هر بخش‌ رو بصورت مجزا در نظر بگیریم و هر کدوم رو جدا جدا توسعه بدیم . از لحاظ مفهومی هر کامپوننت‌ مثل یک تابع توی جاوااسکریپت هست که یکسری ورودی (props) دریافت میکنه و در نهایت یک react element ‌رو برای ما برمیگردونه که قرار هست در صفحه ی مرورگر نمایش داده میشه . به عبارت دیگه کامپوننت ها یکسری موارد قطعه قطعه شده (مثل header و footer و navbar و غیره) هستن که با کنار هم قرار گرفتن ، میتونن یک وبسایت کلی رو ایجاد کنن !نکته ی مهمی که در رابطه با کامپوننت ها وجود داره ، این هست که هر کامپوننت قابلیت استفاده ی مجدد داره و در اصطلاح reusable هست ، یعنی در هرجایی از پروژه که به یک کامپوننت خاصی نیاز داشته باشیم ، میتونیم ازش استفاده کنیم !حالا سوالی که پیش میاد این هست که ما چرا باید از کامپوننت ها استفاده کنیم و استفاده از اونا‌ برای ما چه مزیتی داره !؟در گذشته برنامه نویس ها برای توسعه برنامه ها هزاران خط کد مینوشتن و چون اون اپلیکیشن ها از ساختار سنتی DOM استفاده میکردن ، برای انجام یکسری کارها با چالش های زیادی مواجه میشدن ، مثلاً بروزرسانی این ساختار قبلاً به صورت دستی انجام میشد که روش مناسبی نبود تا اینکه برای غلبه به این موضوع ، مفهوم کامپوننت ها به وجود اومد ! در این رویکرد کل برنامه به قطعه کدهای منطقی کوچیک تر و مستقل از هم تقسیم میشه و هر قسمت به صورت جدا در فایل مختص به خودش نگهداری میشه تا بتونیم برنامه مون رو‌ حرفه ای تر توسعه بدیم و هرجا که نیاز داشتیم اونو به راحتی بروز رسانی کنیم ! این موضوع باعث تمیز بودن کد و ساختار پروژه و همچنین افزایش سرعت اجرای برنامه میشه ! مثلا اگر فرض کنیم که از یک کامپوننت در سه جای مختلف استفاده کردیم ، دیگه نیازی نیست که مثل قبل برای تغییر این سه کامپوننت هر کدوم رو به صورت جدا جدا تغییر بدیم ، بلکه ما تنها فقط یکبار کامپوننت اصلی رو تعریف میکنیم و در جاهای مختلف بسته به نیازمون ازش استفاده میکنیم ، حالا اگر زمانی نیاز به تغییر این سه کامپوننت داشتیم ، فقط خود کامپوننت اصلی رو تغییر میدیم !مزیت بعدی استفاده از کامپوننت ها ، به کار تیمی مربوط میشه ! به اینصورت که هر کسی میتونه مسئول ساخت یک کامپوننت خاص رو بر عهده بگیره تا در آخر با کنار هم قرار دادن تمام کامپوننت ها یک محصول کلی رو بشه ایجاد کرد .برای درک بهتر کامپوننت ها فرض کنیم یک رابط کاربری داریم که به این شکل هست :هنگامی که ما از React استفاده میکنیم ، میتونیم رابط کاربری مون رو مطابق شکل زیر به یک سری از قسمت های جدا از هم تقسیم کنیم :بخش Navbar Menu که شامل منوها هست ، بخش Product که اطلاعات مربوط به یک محصول رو در داخل خودش نگهداری میکنه و بخش Cartکه مربوط به سبد خرید هست ! توی React به هر کدوم از اینها ، کامپوننت گفته میشه و همشون در کنار هم ، در داخل یک کامپوننت اصلی به نام App قرار میگیرن . پس اولین قدم React این هست که میاد تمام قسمت ‌های مختلف برنامه ی مارو از هم جدا میکنه تا هر کدوم از اون ها به شکل مجزا و جدا از هم قابل توسعه باشن !در نهایت به عنوان کلام آخر باید گفت که کامپوننت ها قلب React هستن :)خوب دوستان به پایان این مقاله رسیدیم و امیدوارم لذت کافی رو برده باشین . منتظر نظرات و انتقادهای گرمتون هستم . مخلصیم | سیاوش ستاری - 23 تیر 1400 سیاوش ستاری سیاوش ستاری Wed, 14 Jul 2021 22:26:24 +0430