https://virgool.io/feed/@frontendi فرانت اِندی مرجع تخصصی فرانت اند برای فارسی زبانان است . هدف ما گردآوری و انتشار تخصصی ترین و بهترین مقالات و دوره های آموزشی حوزه فرانت اند در یک منبع فارسی زبان است . fa 2026-04-15 04:36:33 https://files.virgool.io/upload/users/2784499/avatar/W3Lv0h.png?height=120&width=120 https://virgool.io/@frontendi https://virgool.io/@frontendi/200-%D8%B3%D9%88%D8%A7%D9%84-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%B2%D8%B1%DA%AF%D8%AA%D8%B1%DB%8C%D9%86-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-l1ikgazxyjzn 20 سوال مصاحبه javascript !توی دنیای برنامه نویسی، جاوااسکریپت یکی از اون زبان هایی هست که توی خیلی از موقعیت های شغلی ازت انتظار دارن خوب بلدش باشی! حالا چه برای فرانت اند بخوای کار کنی، چه بک اند، یا حتی پروژه های فول استک، تسلط به جاوااسکریپت خیلی مهمه! مصاحبه های شغلی هم معمولاً پر از سوالای ریز و درشت از همین زبان محبوبه.شاید با خودت بگی: «چطور میشه آماده شد؟»خب، این لیست دقیقاً برای همین کاره! اینجا 200 تا از مهم ترین سوال های مصاحبه جاوااسکریپت رو با جواب های درست و حسابی جمع کردیم که اگه بخونی و مرور کنی، شانس موفقیتت خیلی بالاتر میره.این سوال ها فقط برای آدم های تازه کار نیست؛ حتی اگه چند ساله توی این زمینه کار می کنی، ممکنه توی بعضی مفاهیم گیر کنی. اینجاست که این لیست می تونه برات حکم برگ برنده رو داشته باشه.از سوال های پایه ای مثل فرق var و let گرفته تا مفاهیم پیشرفته تر مثل Closure یا Event Loop، همه شون رو پوشش دادیم.وقتشه که بدون استرس خودتو برای مصاحبه بعدیت آماده کنی. این سوال ها رو بخون، خوب درکشون کن و مطمئن باش وقتی مصاحبه کننده ازت چیزی می پرسه، تو با اعتماد به نفس جواب میدی.یه بار برای همیشه به جاوااسکریپت مسلط شو! 😊رفقا این لیست سوالات چون اینجا جا نمیشه لطفا از طریق https://frontendi.com/javascript-interview-questions/ مطالعشون کنید.نکات عمومی قبل مصاحبه Javascript !مرور مفاهیم پایه‌ ای و کاربردی:قبل از هر چیز، مطمئن شو که مفاهیم پایه‌ ای جاوااسکریپت مثل متغیر ها، عملگر ها، توابع و ساختار های داده‌ ای مثل آرایه‌ ها و اشیاء رو خوب بلدی. بیشتر مصاحبه‌ کننده‌ ها سوال‌ ها رو از همین مفاهیم پایه‌ ای شروع میکنن تا سطح دانش و درکت رو بسنجن.مثلاً بدونی که فرق بین let و const چیه یا this توی جاوااسکریپت چطور کار میکنه، خیلی اهمیت داره.آشنایی با مفاهیم پیشرفته‌تر:جاوااسکریپت فقط به مباحث پایه محدود نمیشه؛ مفاهیمی مثل Closure، Event Loop، Promises و Async/Await معمولاً توی سوال‌ های پیشرفته‌ تر مصاحبه‌ ها مطرح میشن. بهتره این مفاهیم رو نه فقط حفظ، بلکه به صورت عملی درک کنی. مثلاً با خودت تمرین کن که چطور میشه با استفاده از Promises یک درخواست به API ارسال کرد یا از Closure برای مدیریت داده‌ ها استفاده کرد.تمرین کدنویسی و الگوریتم‌ ها:یکی از بخش‌ های رایج مصاحبه جاوااسکریپت، حل مسئله و نوشتن کد به صورت زنده است. بهتره از قبل خودت رو با تمرین سوال‌ های الگوریتمی آماده کنی. وبسایت‌ هایی مثل LeetCode یا HackerRank میتونن برای تمرین این نوع سوال‌ ها خیلی مفید باشن. از الگوریتم‌ های ساده مثل مرتب‌ سازی گرفته تا مباحث پیچیده‌ تر مثل کار با آرایه‌ های تو در تو، باید دستت توی کدنویسی روان باشه.کار با مرورگر و DOM:بسیاری از مصاحبه‌ ها، مخصوصاً برای نقش‌ های فرانت‌ اند، به مباحث مربوط به DOM و تعامل با عناصر HTML مربوط میشن. مطمئن شو که می‌دونی چطور یک عنصر HTML رو پیدا کنی، رویدادها رو مدیریت کنی و به کمک جاوااسکریپت تغییراتی توی صفحه وب ایجاد کنی. همچنین، آشنایی با ابزارهای DevTools مرورگر برای دیباگ کدها میتونه یه امتیاز مثبت برات باشه.رفتار حرفه‌ای در مصاحبه:علاوه بر دانش فنی، مصاحبه‌ کننده‌ ها به نحوه برخورد و توانایی ارتباط برقرار کردن هم توجه میکنن. اگه جواب سوالی رو نمیدونی، با اعتماد به نفس بگو که روی اون موضوع کار نکردی ولی سریع یاد میگیری. صادق بودن و نشون دادن اشتیاق برای یادگیری همیشه یه نکته مثبت به حساب میاد.آمادگی برای سوال‌های عملی:مصاحبه‌ ها معمولاً فقط به سوال‌های تئوری ختم نمیشن و ممکنه ازت بخوان یه قطعه کد ساده بنویسی یا یه مشکل واقعی رو حل کنی. همیشه آماده باش که در زمان محدود، یک راه‌حل کاربردی و تمیز ارائه بدی. تمرین روی پروژه‌ های کوچک یا حل سوال‌های نمونه از قبل میتونه اعتماد به‌ نفس بیشتری بهت بده.با رعایت این نکات، میتونی به مصاحبه جاوااسکریپت به عنوان یه فرصت نگاه کنی، نه یه چالش استرس‌زا. وقتی خوب آماده باشی، میتونی مهارت‌ هات رو بهتر نشون بدی و شانس موفقیتت رو چند برابر کنی. 😊جمع بندیجاوااسکریپت پر از مفاهیم و جزئیات ریز و درشته که هرکدومشون میتونن موضوع یه بحث طولانی باشن. هر سوالی که اینجا آوردیم، مثل تفاوت var و let یا مفاهیمی مثل Closure، نه فقط یه جواب ساده داره، بلکه کلی نکته و کاربرد پشتشونه که میشه ساعت ها درباره شون صحبت کرد.اما تو این لیست، سعی کردیم جواب ها رو خلاصه و کاربردی ارائه بدیم تا تو زمانت صرفه جویی بشه و بتونی سریع آماده شی.اگه نیاز داشتی، میتونی درباره هرکدوم بیشتر تحقیق کنی یا سوالات جزئی تری ازشون تو کامنت ها بپرسی. هدف اینه که با این لیست سوالات مصاحبه javascript پایه و اساس رو خوب بفهمی و با اطمینان بری سر مصاحبه! 😊رفقا این لیست سوالات چون اینجا جا نمیشه لطفا از طریق https://frontendi.com/javascript-interview-questions/ مطالعشون کنید. فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sat, 23 Nov 2024 12:12:41 +0330 https://virgool.io/@frontendi/200-%D8%B3%D9%88%D8%A7%D9%84-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D8%A7%D9%86%DA%AF%D9%88%D9%84%D8%A7%D8%B1-%D8%A8%D8%B2%D8%B1%DA%AF%D8%AA%D8%B1%DB%8C%D9%86-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-angular-doey2bbumqyi اگه توسعه‌دهنده فرانت‌اند هستی و با Angular کار می‌کنی، می‌دونی که آشنایی عمیق با سوالات مصاحبه Angular می‌تونه توی استخدامی‌ها حسابی برات برگ برنده باشه! وقتی داری خودت رو برای یه مصاحبه کاری آماده می‌کنی، داشتن یه لیست از سوالات پرتکرار خیلی کمک می‌کنه؛ چون این‌طوری دقیقاً می‌دونی چه سوالایی ممکنه ازت پرسیده بشه و بهتر می‌تونی آماده شی.حالا چرا این سوالات مصاحبه اینقدر مهمه؟ تو مصاحبه‌های فنی فقط تئوری کار نیست که مطرحه؛ مصاحبه‌گر می‌خواد بدونه چقدر می‌تونی مفاهیم Angular رو تو عمل توضیح بدی و آیا آماده‌ای تو تیم و پروژه اون‌ها بتونی چالش‌ها رو حل کنی یا نه. این سوال‌ها کمک می‌کنن نقاط ضعفت رو پیدا کنی، روی اون‌ها کار کنی و آمادگی بیشتری پیدا کنی. علاوه بر این، وقتی می‌دونی احتمالاً چه سوال‌هایی قراره پرسیده بشه، استرست هم خیلی کمتر می‌شه و توی مصاحبه عملکرد بهتری داری.خب، بیشتر از این وقت رو هدر ندیم و بریم سراغ سوالات مصاحبه Angular! 😄بخش اول سوالات مصاحبه Angular !فریمورک Angular چیست و چرا ازش استفاده می‌کنیم؟درواقع Angular یک فریمورک قدرتمند جاوااسکریپتی هست که توسط گوگل توسعه داده شده و برای ساخت اپلیکیشن‌های وب تک‌ صفحه‌ای (SPA) استفاده می‌شه. دلیل اصلی استفاده از Angular اینه که توسعه‌ دهنده‌ها با استفاده از امکانات اون مثل Data Binding و Dependency Injection میتونن اپلیکیشن‌ های تعاملی و مقیاس‌ پذیر ایجاد کنن.تفاوت بین AngularJS و Angular چیست؟انگولار /AngularJS نسخه قدیمی‌ تر فریمورکه و با معماری مبتنی بر MVC کار می‌کنه. Angular (نسخه‌های 2 به بعد) یه بازنویسی کامله و از TypeScript به جای JavaScript استفاده می‌کنه و معماری مبتنی بر کامپوننت‌ها رو ارائه میده، که باعث کارایی و انعطاف‌ پذیری بیشتر میشه.معماری Angular بر چه اساسی طراحی شده؟معماری Angular شامل چند بخش مهمه:کامپوننت‌ها (Components): بخش‌های اصلی رابط کاربری.ماژول‌ها (Modules): ساختاردهی و سازمان دهی اپلیکیشن.سرویس‌ها (Services): مدیریت داده‌ ها و منطق تجاری.دایرکتیوها (Directives): اضافه کردن رفتار به عناصر HTML. این معماری کمک می‌کنه کد مرتب‌ تر و قابل نگهداری‌ تر باشه.دیتا بایندینگ/Data Binding توی Angular چطوری کار میکنه؟انگولار/Angular از دو نوع Data Binding پشتیبانی میکنه:یک طرفه (One-way Data Binding): داده‌ ها فقط از کامپوننت به view یا برعکس حرکت میکنن.دو طرفه (Two-way Data Binding): داده‌ ها بین کامپوننت و view به صورت خودکار همگام‌ سازی میشن. این ویژگی باعث میشه تغییرات توی view یا مدل به طور همزمان بازتاب پیدا کنه.تفاوت بین Decorators و Directives چیه؟میشه اینطور گفت که Decorators برای تزئین یا مشخص کردن رفتار کلاس‌ ها، متغیرها یا توابع توی Angular استفاده میشن. مثلاً @Component یه Decorator برای ساخت کامپوننت‌ هاست.دایرکتیو/ Directives عناصر HTML رو گسترش میدن و رفتاری خاص به اون‌ ها اضافه میکنن. مثلاً *ngIf یه دایرکتیوه که شرطی بودن نمایش عنصر رو کنترل میکنه.ماژول چیست و چرا توی Angular از ماژول‌ ها استفاده می‌کنیم؟ماژول توی Angular یه مجموعه از کامپوننت‌ ها، دایرکتیو ها، سرویس‌ ها و سایر بخش‌هاست که برای سازمان‌ دهی کد استفاده می‌شه. هر اپلیکیشن Angular حداقل یه ماژول به اسم AppModule داره. استفاده از ماژول‌ ها باعث میشه کد به بخش‌های کوچیکتر و قابل مدیریت‌ تر تقسیم بشه و استفاده مجدد از بخش‌ها راحت تر بشه.تفاوت بین ngIf و ngSwitch چیست ؟اول - ngIf: یه دایرکتیوه که عنصر رو بر اساس یه شرط نمایش یا پنهان می‌کنه. مثلاً: <div *ngIf="isVisible">...</div>.دوم: ngSwitch: یه دایرکتیوه که شبیه به شرط‌ های switch توی برنامه‌ نویسی عمل میکنه و به ما اجازه میده عناصر مختلف رو بر اساس مقادیر مختلف نمایش بدیم.سرویس (Service) در انگولار چیست و چه کاربردی داره؟سرویس‌ها کلاس‌هایی هستن که منطق تجاری و عملیات مشترک بین کامپوننت‌ ها رو مدیریت می‌کنن، مثل فراخوانی API ها یا مدیریت داده‌ ها. استفاده از سرویس‌ ها باعث میشه کد کامپوننت‌ ها تمیزتر بشه و منطق به صورت قابل‌ استفاده مجدد پیاده‌ سازی بشه.الگوی Dependency Injection توی Angular چیست؟الگوی Dependency Injection (DI) یه الگوی طراحی نرم‌افزاریه که Angular ازش برای مدیریت وابستگی‌ ها استفاده می‌کنه. به جای این‌ که کلاس‌ها خودشون وابستگی‌ها رو ایجاد کنن، Angular این وابستگی‌ ها رو به کلاس‌ها تزریق میکنه. این باعث می‌شه تست کردن و مدیریت وابستگی‌ ها راحت‌ تر بشه.بخش دوم سوالات مصاحبه Angular !برای مطالعه بخش دوم، سوم، چهارم و پنجم سوالات مصاحبه انگولار لطفا از طریق لینک زیر به وبسایت فِرانت اِندی مراجعه کنین :سوالات مصاحبه Angular فرانت اندی | FrontEndi فرانت اندی | FrontEndi Thu, 07 Nov 2024 18:46:02 +0330 https://virgool.io/@frontendi/200-%D8%B3%D9%88%D8%A7%D9%84-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D9%88%DB%8C%D9%88-%D8%AC%DB%8C-%D8%A7%D8%B3-%D8%A8%D8%B2%D8%B1%DA%AF%D8%AA%D8%B1%DB%8C%D9%86-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-vuejs-eaj4viu8wdxu بیاین درباره سوالات مصاحبه Vue.js یکی از دوست‌ داشتنی‌ ترین فریمورک‌های جاوااسکریپت یعنی Vue.js گپ بزنیم. اگه تو دنیای توسعه وب دستی بر آتش داشته باشی، احتمالاً اسم Vue.js زیاد به گوشت خورده. این فریمورک خیلی زود تونسته با سادگی در یادگیری، سرعت بالا و انعطاف عالی، جای خودش رو بین برنامه‌نویسا باز کنه و دلشون رو به دست بیاره!حالا تصور کن قراره توی یه مصاحبه کاری Vue.js شرکت کنی و انتظار دارن یه عالمه سوال تخصصی ازت بپرسن. کمی استرس‌زاست، مگه نه؟ این مقاله دقیقا اینجاست که اون استرس رو ازت بگیره و تو رو آماده‌تر از همیشه به مصاحبه بفرسته!توی این مجموعه سوالات مصاحبه Vue.js، از پایه‌ای‌ترین سوالات مثل "کامپوننت‌ها چه‌طوری کار می‌کنن؟" گرفته تا سوالات پیشرفته مثل "چجوری Vuex رو برای مدیریت بهینه حالت استفاده کنیم" رو بررسی می‌کنیم.این سوال و جواب‌ها حسابی به کارت میاد؛ هم مروریه روی اطلاعات خودت، هم دید عمیق‌تری بهت میده تا Vue.js رو توی پروژه‌های واقعی بهتر و حرفه‌ای‌تر به کار بگیری. با این آمادگی، می‌تونی با اعتماد به نفس کامل وارد مصاحبه شی و وقتی سوال‌های چالش‌برانگیز می‌پرسن، مثل یه کاربلد جواب بدی.اگه می‌خوای یه قدم از بقیه جلوتر باشی و توی مصاحبه Vue.js بدرخشی، این راهنما دقیقاً همون چیزیه که نیاز داری. پس بزن بریم ببینیم چی می‌تونیم یاد بگیریم و چطور می‌تونیم Vue.js رو حرفه‌ای‌تر از همیشه بفهمیم و پیاده کنیم!بخش اول سوالات مصاحبه ویو جی اسویو جی اس چیه و چرا باید ازش استفاده کنیم؟درواقع Vue.js یک فریمورک جاوااسکریپتی برای ساخت رابط‌های کاربری (UI) و اپلیکیشن‌های تک صفحه‌ای (SPA) هست. مزیت اصلی Vue.js اینه که خیلی ساده، منعطف و قابل یادگیریه، و در عین حال قدرت کافی برای ساخت پروژه‌های بزرگ رو هم داره.تفاوت Vue.js با React و Angular چیست ؟میشه گفت که Vue.js در مقایسه با React و Angular، خیلی سبک تره! ساده‌تر از Angular و کامل‌تر از React هست. Vue.js از معماری MVVM استفاده می‌کنه، در حالی که React به صورت UI-driven و Angular یک فریمورک کامل با ابزارهای خودش هست.کامپوننت در Vue.js چیست ؟کامپوننت‌ها تکه‌های کوچیک و قابل استفاده مجدد از رابط کاربری هستند که می‌تونیم توی برنامه‌هامون استفاده کنیم. هر کامپوننت شامل قالب (template)، داده‌ها (data) و رفتار (methods) خاص خودشه.دیتابایندینگ (Data Binding) در Vue.js چطور کار می‌کنه؟کتابخانه Vue.js از Data Binding برای ارتباط دادن داده‌ها با DOM استفاده می‌کنه. ما می‌تونیم به کمک قالب‌نویسی (template syntax) و دستورات مثل v-bind، اطلاعات رو به صورت پویا به عناصر HTML وصل کنیم.واکنش‌پذیری (Reactivity) در Vue.js چیه؟ویو جی اس واکنش‌پذیری رو به این شکل پیاده‌سازی می‌کنه که هر موقع داده‌های ما تغییر کنن، Vue به‌طور خودکار DOM رو به‌روزرسانی می‌کنه. این کار از طریق ردیابی وابستگی‌ها و به‌روزرسانی مؤلفه‌ها انجام می‌شه.دستور v-if چیه و چه زمانی استفاده می‌شه؟دستور v-if یک دستور شرطیه که برای نشون دادن یا پنهان کردن عناصر در DOM استفاده می‌شه. وقتی شرطی که به v-if می‌دیم true باشه، عنصر نمایش داده می‌شه.دستور v-for چطور کار می‌کنه؟دستور v-for برای تکرار کردن روی یک آرایه یا یک آبجکت و نمایش چندین عنصر استفاده می‌شه. به عنوان مثال، می‌تونیم یه لیست از آیتم‌ها رو با کمک v-for به راحتی رندر کنیم.تفاوت بین v-show و v-if چیه؟دستور v-if عنصر رو از DOM حذف می‌کنه و در صورت لزوم دوباره اضافه می‌کنه، اما v-show فقط با تنظیم استایل display عنصر رو نشون میده یا پنهان می‌کنه. بنابراین v-if برای شرط‌های سنگین‌تر بهتره و v-show برای تغییرات سریع.چطور می‌تونیم یک property به یک کامپوننت پاس بدیم؟برای پاس دادن داده‌ها به کامپوننت، از props استفاده می‌کنیم. می‌تونیم توی کد، props رو تعریف کنیم و مقادیری رو از والد به فرزند ارسال کنیم.دستور v-model چه کار می‌کنه؟دستور v-model برای دیتابایندینگ دوطرفه استفاده می‌شه. به طور خاص، برای گرفتن ورودی‌های کاربر و به‌روزرسانی داده‌ها در Vue.چطور می‌تونیم یک event رو در Vue.js هندل کنیم؟می‌تونیم از دستور v-on یا از شورتکات @ برای هندل کردن رویدادها استفاده کنیم. به عنوان مثال، برای گوش دادن به رویداد کلیک: <button @click="methodName">.چی باعث می‌شه Vue.js واکنش‌پذیر باشه؟درواقع Vue.js از یه سیستم ردیابی استفاده می‌کنه که از متدهای JavaScript مثل Object.defineProperty() استفاده می‌کنه تا تغییرات رو تشخیص بده و رابط کاربری رو به‌روزرسانی کنه.کامپوننت‌های تک فایل (Single File Components) چی هستن؟کامپوننت‌های تک فایل در Vue.js فایل‌هایی با پسوند .vue هستن که شامل قالب، اسکریپت و استایل به صورت جداگانه توی یک فایل هستن. این کار سازماندهی کد رو آسون‌تر می‌کنه.روش‌های انتقال داده بین کامپوننت‌ها چیه؟می‌تونیم از props برای انتقال داده از والد به فرزند و از event ها برای انتقال داده از فرزند به والد استفاده کنیم. همچنین Vuex برای مدیریت حالت در اپ‌های پیچیده استفاده می‌شه.دستور v-bind برای چیه؟دستور v-bind برای بایند کردن مقادیر دینامیک به ویژگی‌های HTML استفاده می‌شه. مثلا بایند کردن src به یک تصویر.ویژگی computed properties در Vue.js چیه و چه کاربردی داره؟درحقیقت computed properties محاسباتی هستن که بر اساس داده‌های ما اجرا می‌شن و نتایج رو کش می‌کنن. این ویژگی برای محاسبات سنگین و بهینه‌سازی عالیه.فرق computed properties با methods چیه؟درواقع computed properties کش می‌شن، یعنی اگه داده‌های استفاده شده در computed property تغییر نکنه، Vue از نتیجه کش شده استفاده می‌کنه. اما methods همیشه محاسبه می‌شه.ویژگی watch در Vue.js چیه و چه زمانی استفاده می‌شه؟ویژگی watch به ما اجازه میده تغییرات در داده‌های خاصی رو نظارت کنیم و کدی رو اجرا کنیم. این ابزار برای واکنش به تغییرات پیچیده تر مناسبه.لایف سایکل هوک/ lifecycle hooks در Vue.js چیه؟لایف سایکل هوک/lifecycle hooks متدهایی هستن که در مراحل مختلف زندگی یک کامپوننت اجرا می‌شن، مثل mount شدن، آپدیت شدن و نابود شدن. به کمک این متدها می‌تونیم رفتارهای خاصی رو کنترل کنیم.چطور می‌تونیم داده‌ها رو به صورت پویا در Vue.js آپدیت کنیم؟با تغییر مقادیر در data، Vue به‌طور خودکار DOM رو به‌روزرسانی می‌کنه چون سیستم واکنش‌پذیری Vue این تغییرات رو تشخیص میده.بخش دوم سوالات مصاحبه ویو جی اسبرای مطالعه بخش دوم، سوم، چهارم و پنجم سوالات مصاحبه vue.js لطفا به لینک زیر در وبسایت فِرانت اِندی مراجعه کنین :سوالات مصاحبه Vue.js فرانت اندی | FrontEndi فرانت اندی | FrontEndi Thu, 07 Nov 2024 18:36:25 +0330 https://virgool.io/@frontendi/%D8%A8%D9%84%D8%A7%D8%AE%D8%B1%D9%87-nextjs-15-%D9%85%D9%86%D8%AA%D8%B4%D8%B1-%D8%B4%D8%AF-%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D9%86%DA%A9%D8%B3%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-15-ugdkpkalxnf7 نسخه جدید Next.js 15 با تغییرات قابل توجهی عرضه شده که عملکرد و تجربه‌ی توسعه‌دهنده‌ها رو به سطح جدیدی ارتقا داده. در این مقاله با جزئیات بیشتری به بررسی این تغییرات می‌پردازیم تا ببینیم چه امکانات جدیدی رو می‌تونیم به پروژه‌هامون اضافه کنیم.توربوپک: سرعتی چشمگیر و بهینهدرواقع Next.js 15 با معرفی توربوپک (Turbopack) به جایگزینی سریع برای وب پک رسیده؛ این تغییر باعث شده تا عملکرد تا حدود 700 برابر سریع‌تر بشه. توربوپک که با زبان Rust ساخته شده، باعث بهینه‌تر شدن زمان بارگذاری اولیه سرور محلی و تسریع رفرش کدها میشه. این ویژگی به ویژه برای توسعه‌دهنده‌های فرانت‌اند که نیاز به تست مداوم و سریع دارن، ارزش بسیاری داره!پشتیبانی از React 19: بهینه‌سازی خودکارپشتیبانی از نسخه جدید React 19 همراه با کامپایلر بهینه‌تر، یکی از تغییرات هیجان‌انگیز این نسخه است. با این به‌روزرسانی، نیاز به استفاده مکرر از useMemo و useCallback کاهش پیدا کرده و خود کامپایلر به‌طور خودکار عملکرد کامپوننت‌ها رو بهینه می‌کنه. نتیجه این میشه که برنامه‌ها با دقت و سرعت بیشتری اجرا میشن و عملکرد بهتری ارائه میدن.مدیریت کش پیشرفته: کنترل بیشتردر نسخه جدید یعنی next.js 15 ، رفتار کش (Caching) به‌طور کامل بازنگری شده؛ به‌طوری که درخواست‌های fetch و مسیرهای Get و Routing سمت کلاینت، به‌طور پیش‌فرض دیگه کش نمی‌شن، مگر اینکه خودت این قابلیت رو فعال کنی. این تغییر برای پروژه‌هایی که به داده‌های جدید نیاز دارن، خیلی کارآمده و اجازه میده همیشه آخرین اطلاعات در دسترس باشه.رندرینگ ترکیبی: SSG و SSR در کنار همیکی از نوآوری‌های جالب این نسخه، قابلیت Partial Pre-Rendering یا PPR هست که به توسعه‌دهنده‌ها اجازه میده ترکیبی از رندر استاتیک و داینامیک رو در یک صفحه داشته باشن. این ویژگی برای پروژه‌هایی مثل فروشگاه‌های آنلاین که باید بعضی اطلاعات (مثل قیمت‌ها) همیشه به‌روز باشن و بعضی قسمت‌ها ثابت بمونن، بسیار ایده‌آله و به کاربرها تجربه‌ای روان و سریع ارائه میده.ارتقای CLI و ابزارهای دیباگینگدر نسخه 15، CLI به‌روزرسانی شده و قابلیت‌های جدیدی مثل @next/codemod اضافه شده که فرآیند آپدیت و انتقال پروژه‌ها به نسخه جدید رو راحت‌تر می‌کنه. ابزارهای دیباگینگ هم بهبود یافتن؛ مثلاً ارورهای hydration با جزئیات بیشتر نمایش داده می‌شن تا مسائل مربوط به تفاوت‌های رندرینگ سمت سرور و کلاینت سریع‌تر حل بشه.اضافه شدن API های جدید برای مدیریت درخواست‌هادر نسخه جدید Next.js 15، یک API به نام after معرفی شده که به توسعه‌دهنده‌ها این امکان رو میده که عملیات‌های پس از پاسخگویی به کاربر (مثل لاگ گرفتن یا آنالیز داده‌ها) رو بدون تحت تأثیر قرار دادن درخواست اصلی انجام بدن. این ویژگی باعث میشه درخواست اصلی سریع‌تر پاسخ داده بشه و وظایف ثانویه پس از اون اجرا بشن.فرم‌های بهینه با <Form />کامپوننت جدید <Form /> در نسخه 15 اضافه شده که به‌طور خودکار قابلیت Routing سمت کلاینت و Prefetching رو فراهم می‌کنه. این ویژگی به‌خصوص برای فرم‌هایی که به صفحات دیگری هدایت میشن (مثل فرم جستجو) مفیده و بدون نیاز به کد اضافه، عملکردی کامل و مستقل از جاوا اسکریپت رو فراهم می‌کنه.پشتیبانی بهتر از TypeScript و امنیت بیشتربرای علاقه‌مندان به TypeScript، نسخه جدید امکان استفاده از next.config.ts رو فراهم کرده که پروژه رو از نظر تایپ ایمن‌تر می‌کنه. همچنین، بهبودهای امنیتی متعددی انجام شده، از جمله حذف کدهای غیرضروری و ایمنی بیشتر در اجرای Server Actions با استفاده از شناسه‌های امن‌تر، که جلوی دسترسی‌های غیرمجاز رو می‌گیره.جمع‌بندینسخه 15 از Next.js با امکانات جدیدش، مسیر توسعه فرانت‌اند رو بهبود بخشیده و به خصوص برای پروژه‌های پیچیده و بزرگ، مزایای بسیاری داره. توربوپک برای افزایش سرعت، پشتیبانی بهینه‌تر از React و کنترل دقیق‌تر کشینگ از جمله ویژگی‌هایی هستن که تجربه‌ی کدنویسی رو راحت‌تر و کارایی برنامه‌ها رو بهتر می‌کنن.در نهایت، با وجود همه این مزایا، فقط باید منتظر بمونیم تا نسخه‌های بعدی هم بیان و تجربه‌ی بهتری رو برامون فراهم کنن؛ چون همیشه به روز رسانی‌های جذاب و جدید در راهه!راستی! میتونی متن کامل این مقاله رو تو وبسایت فِرانت اِندی در لینک زیر مطالعه کنی :بررسی Next.js 15 فرانت اندی | FrontEndi فرانت اندی | FrontEndi Thu, 07 Nov 2024 18:28:23 +0330 https://virgool.io/@frontendi/%D8%A8%D9%84%D8%A7%D8%AE%D8%B1%D9%87-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-19-%D9%85%D9%86%D8%AA%D8%B4%D8%B1-%D8%B4%D8%AF-%D9%87%D8%B1%DA%86%DB%8C%D8%B2%DB%8C-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1%D8%A7%D8%AA-react-19-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-szrwqzcozfjk بلاخره ری اکت 19 منتشر شد 🙂 این بروزرسانی رو اصلا دست کم نگیرید چون یک عالمه قابلیت ها و ویژگی های جدید و مفید به ری اکت اضافه شده! اگه React Developer هستید اکیدا پیشنهاد میکنم چند دقیقه وقت بزارید و این مقاله رو مطالعه کنید تا باهمدیگه با تغییرات شگفت انگیز ری اکت 19 آشنا بشیم 🙂پیش نیاز این مقالهما تو این مقاله میخوایم صرفا درمورد ری اکت 19 ( بروزرسانی جدید React ) صحبت کنیم پس اگه با خود ری اکت آشنا نیستید پیشنهاد میکنم مقاله کتابخانه ری اکت رو مطالعه کنید تا با این کتابخانه جذاب و دوست داشتنی کمی آشنایی داشته باشید.ری اکت 19 🔥بلاخره داکیومنت رسمی ریکت طی یک اطلاعیه از ویژگی های جذاب ری اکت 19 پرده برداشت و بهمون گفت که قراره تو این نسخه چه چیزایی به React اضافه بشه. تو این مقاله ما تمام ویژگی های جدید ری اکت 19 رو باهمدیگه بررسی میکنیم.توسعه دهنده های اصلی ری اکت هر ازگاهی یک توییت منتشر میکنن و از تغییرات React 19 یکم لو میدن 🙂 مثل توییت زیر :تا زمان انتشار رسمی ری اکت 19، من این مقاله رو مرتبا بروزرسانی میکنم تا شماهم در جریان بروزرسانی های این کتابخانه جذاب باشید.خب دیگه بریم ببینیم لیست این تغییرات چیا هستن ..لیست تغییرات ری اکت 19 بصورت زیر هست :کامپایلر ری اکت :تو نسخه جدید ری اکت، یک کامپایلر به اسم React Forget به ری اکت اضافه شده که یکی از مهمترین تغییرات این نسخه از ری اکت نسبت به گذشته هست! در حال حاضر اینستاگرام داره از این فناوری ( کامپایلر ری اکت ) استفاده میکنه اما این کامپایلر هنوز در اختیار عموم ( ما Developer ها ) قرار نگرفته.کامپوننت سمت سرور :بلاخره ری اکت ویژگی سرور کامپوننت ( Server Component ) رو معرفی کرد و ما میتونیم کامپوننت های سمت سرور داشته باشیم! اگه با Next.js کار کرده باشید، خبر دارید که میتونیم کامپوننت های سمت سرور یا سمت کلاینت داشته باشیم و این فوق العاده هست!خبر خوب اینکه از نسخه 19 ری اکت دیگه میتونیم Server Component داشته باشیم و کامپوننت های خودمون رو سمت سرور Render کنیم.تحول Action ها :تو این نسخه از ری اکت، Action ها نیز تغییرات زیادی داشتن. این یعنی نحوه تعامل ما با DOM خیلی متفاوت تر شده.امکان استفاده از Metadata ها :اگه با سئو آشنا باشید، خبر دارید که ما باید برای صفحات خودمون تگ Metadata مشخص کنیم. تا قبل از React 19 انجام این کار خیلی ساده نبود اما به لطف کامپونت Metadata که تو ری اکت 19 اضافه شده خیلی سریعتر و بهینه تر میتونیم اینکار رو انجام بدیم.بارگذاری بهینه Assets های پروژه:تو این نسخه، Assets های پروژه ما ( مثل عکس ها، فونت و .. ) در پشت صحنه بارگذاری میشن و این باعث میشه لود صفحات ما خیلی سریعتر بشه و همچنین UX ( تجربه کاربری ) بهتری داشته باشیم.وب کامپوننت ها :وب کامپوننت یکی از جذاب ترین ویژگی های ری اکت 19 هست که به ما اجازه میده از اجزای وب در ری اکت استفاده کنیم. ( در ادامه بیشتر راجبش صحبت میکنیم )قدرتمند تر شدن هوک ها :تو این نسخه هوک های خفن و قدرتمند جدیدی معرفی شدن که به ما React Developer ها کمک میکنن از کد زدن بیشتر از قبل لذت ببریم 🙂رفع مشکل re-render های اضافه :تیم فنی ری اکت زمان خیلی زیادی رو صرف کردن تا مشکل همیشگی ری اکت ( re-render های اضافه و بیهوده ) رو رفع کنن. خبر خوب اینکه این مشکل تو نسخه جدید رفع شده و دیگه خبری از re-render های بیهوده و اضافه نیست.همونطور که میدونیم تا به امروز برای جلوگیری از re-render های اضافه باید از تکنیک هایی مثل هوک useMemo یا هوک useCallback استفاده میکردیم. اما تو React 19 دیگه نیاز به هیچ هوک یا پروسه دستی برای رفع re-Render اضافی نیست و خود ری اکت جلوی رندر مجدد بیهوده رو میگیره!اگه لیست تغییرات بالا برای شماهم جذاب بوده، بیاید تک تک ویژگی های بالارو بصورت تخصصی و جزئی تر بررسی کنیم 🙂1 – کامپایلر ری اکت چیست ؟برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای کامل لطفا روی لینک زیر کلیک کنید :ری اکت 19 فرانت اندی | FrontEndi فرانت اندی | FrontEndi Wed, 03 Apr 2024 08:40:22 +0330 https://virgool.io/@frontendi/%D8%A8%D8%B2%D8%B1%DA%AF%D8%AA%D8%B1%DB%8C%D9%86-%D9%84%DB%8C%D8%B3%D8%AA-%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-500-%D8%B3%D9%88%D8%A7%D9%84-%D9%85%D8%B5%D8%A7%D8%AD%D8%A8%D9%87-react-rv8mdhbymhpk اگه قصد ورود به بازار کار ری اکت رو دارید و میخواید به عنوان یک React Developer توی یک شرکت استخدام بشید ، لیست سوالات مصاحبه ریکت بشدت براتون ضروریه !! میخوایم 500 سوال از لیست سوالات مصاحبه ری اکت رو باهمدیگه بررسی کنیم تا بتونیم تو جلسه فنی مصاحبه ری اکت به سوالات پاسخ درست بدیم 🙂میپرسید چرا ؟چون 95% سوالاتی که از برنامه نویس ها توی مصاحبه های استخدامی ری اکت پرسیده میشه، باهمدیگه مشترکه ! و ما این سوالات رو جمع آوری کردیم و توی این صفحه به همراه پاسخ هاشون براتون قرار دادیم.پس اگه یک قرار مصاحبه React دارید و استرس دارید که نتونید به سوالات مطرح شده تو مصاحبه فنی پاسخ درست بدید، حتما این لیست سوالات مصاحبه ری اکت رو مطالعه کنید تا بتونید با پاسخ درست به تمامی سوال ها یک موقعیت شغلی خوب بدست بیارید 🙂ری اکت چیست ؟ری اکت یک کتابخونه جاوا اسکریپتی هست که توسط فیسبوک تو سال 2013 ساخته شده. کتابخانه ری اکت برای ساختن UI ( رابط کاربری ) برای اپیکیشن های تحت وب کاربرد داره.ری اکت به ما اجازه میده که اپیکیشن های تحت وب بسیار کارآمد و بهینه رو در مدت زمان خیلی کمی بسازیم!اینکه ری اکت چیست، جز مرسوم ترین سوالات مصاحبه ری اکت هست که تو هر مصاحبه ای پرسیده میشه.افزودنی JSX در ری اکت چیست ؟درواقع JSX در ری اکت یک افزونه جاوااسکریپتی هست که به ما اجازه نوشتن کد های مشابه HTML رو در جاوااسکریپت میده! در واقع JSX به ما اجازه میده که تو فایل های جاوااسکریپتی مثل ری اکت، از HTML استفاده کنیم 🙂عبارت JSX مخفف JavaScript Syntax extention هست.بصورت پیشفرض ما نمیتونیم کد های HTML ( تگ های HTML ) رو داخل فایل های جاوااسکریپتی بنویسیم! از اونجاییکه تو ری اکت از جاوااسکریپت استفاده میشه، پس اینجا هم نمیونیم از HTML استفاده کنیم.راه حل JSX هست 🙂 به کمک JSX میشه از دستورات HMTL داخل فایل های React استفاده کرد..مفهوم Props در ریکت چیست؟ Props در ری اکت چیکار میکنه ؟درواقع Props در React برای انتقال یک دیتا از کامپوننت پدر به کامپوننت فرزند کاربرد داره !درحقیقت Propsها ، ورودی کامپوننت ها هستن ! به کمک Props در React میتونیم به کامپوننت های خودمون ورودی بدیم.اگه با جاوااسکریپت کار کرده باشید حتما با آرگومان های ورودی توابع آشنا هستین.. آرگومان های ورودی باعث میشدن ما بتونیم به تابع خودمون مقدار پاس بدیم و از اون مقدار در تابع استفاده کنیم.پراپس در ری اکت معادل آرگومان ورودی توابع در جاوااسکریپت هستن!میشه گفت که Props ها به کامپوننت ها این اجازه رو میدن که مقادیر داینامیک و سفارشی داشته باشن. ( محتوا و خروجیشون استاتیک و ثابت نباشه ).در حقیقت Props باعث میشه کامپوننت استاتیک ما ، داینامیک و reUsable ( قابل استفاده مجدد ) باشه . یعنی از یک کامپوننت بارها با اطلاعات متفاوت استفاده کنیم ( عکس ، متن و .. متفاوت )تو مقاله آموزش Props در ریکت بصورت دقیقتر و تخصصی تر به این موضوع پرداختیم و روش استفاده ، مثال و تیکه کد های Props در React رو قرار دادیم.درک Props و کاربردش معمولا تو هر جلسه استخدامی ری اکت پرسیده میشه.مفهوم State در ری اکت چیست ؟ هوک useState در ریکت چیکار میکنه ؟هوک useState ری اکت به ما این امکان رو میده که حالت ها و مقادیر کامپوننت خودمون رو در جایی ذخیره کنیم. این حالت ها (stateها) میتونن از هر نوعی ( string,number,array,object و..) باشن .با ذخیره کردن این state ها ، میتونیم تو کل اون کامپوننت ازشون مثل یه متغیر استفاده کنیم و هر زمان نیاز داشتیم مقدارشون رو بروزرسانی کنیم .در حقیقت State ها ، مقادیر یا حالت های کامپوننت ما هستن و میتونن هر مقداری داشته باشن ( عدد ، رشته ، آبجکت ، آرایه و .. )مثلا اگر میخوایم نام کاربر رو ذخیره کنیم، باید یک State براش درست کنیم ( اسمش هرچیزی میتونه باشه مثلا name )چطور از هوک useState در ریکت استفاده کنیم ؟با ساختن هر state ( توسط useState ) باید یک مقدار اولیه به اون state بدید .مثلا اگه میخواید Theme اپیکیشن رو داخل state ذخیره کنید ، باید مشخص کنید که مقدار اولیه Theme چی باشه ؟!تو مثال زیر ما به کمک هوک useState حالت اپیکیشن رو ذخیره کردیم.تفاوت Props و State در کامپوننت چیست ؟درواقع State و Props تا حدود زیادی شبیه به همدیگه هستن چون هم Props و هم State یک آبجکت جاوا اسکریپتی هستن و زمانیکه مقدارشون تغییر میکنه، کامپوننت ما re-render میشه.اما Props در کامپوننت مثل آرگومان ورودی یک تابع هست. درصورتیکه State در کامپوننت حکم یک متغیر در تابع رو داره که میتونه مقادیر مارو ذخیره کنه.درواقع هرجفتشون برای مدیریت داده تو کامپوننت کاربرد دارن اما اهداف متفاوتی دارن!پراپس هایی که از کامپوننت والد به کامپوننت فرزند فرستاده میشن صرفا قابل خوندن هستن ( قابل ویرایش نیستن ) درصورتیکه State ها قابل ویرایش هستن.این سوال از این بابت پرسیده میشه که درک عمیق شمارو نسبت به Props و State بسنجن. پس احتمالش زیاده که بین سوالات مصاحبه ری اکت ، این سوال هم وجود داشته باشه.مزایای کتابخانه ری اکت چیست ؟ ویژگی های کتابخانه React چیه ؟کتابخانه ری اکت چندین ویژگی داره که باعث شده پرطرفدارترین کتابخانه جاوا اسکریپتی محسوب بشه.دام مجازی در ریکت !اولین ویژگی ری اکت دام مجازی در ری اکت هست. Virtual DOM تو ری اکت باعث شده که اپیکیشن های ری اکتی خیلی خیلی بهینه تر بشن .در حقیقت تو اپیکیشن های ری اکتی ، ما بجای ارتباط مستقیم با DOM اصلی ، با DOM مجازی ارتباط برقرار میکنیم.بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .دام مجازی همانطور که از اسمش هم پیداست ، یک نسخه مجازی از DOM واقعیه .هربار که چیزی ( اِلِمانی ) در وبسایت ما تغییر میکنه ، بجای اینکه DOM اصلی بروزرسانی بشه ، دام مجازی بروزرسانی میشه .کامپوننت های Reusable در ریکتدومین ویژگی React ، این هست که کامپوننت هایی به ما میده که قابلیت استفاده مجدد دارن ( Reusable Components )ریکت به ما اجازه میده کامپوننت هایی بسازیم که قابلیت استفاده مجدد دارن. از این کامپوننت ها میتونیم در هر صفحه ای و به هر تعداد که لازم داریم استفاده کنیم. کامپوننت های Reusable فرایند توسعه و مدیریت اپیکیشن رو خیلی راحت تر و سریع تر میکنن.بطور خلاصه کامپوننت ها در کتابخونه ری اکت یک تیکه کد مستقل و قابل استفاده مجدد هستن. نیازی نیست در هر صفحه اون تیکه کد رو بنویسیم، میتونیم یکبار اون تیکه کد رو در قالب یک کامپوننت بنویسیم و بارها ازش استفاده کنیم.رندر سمت سرور در ریکت ( Server Side Rendering )سومین ویژگی مهم ری اکت این هست که از SSR یا همون رندر سمت سرور پشتیبانی میکنه . این یعنی صفحات ما بجای اینکه در مرورگر render بشن، میتونن سمت سرور render بشن. SSR باعث میشه که اپیکیشن ما با سرعت خیلی بیشتری Render بشه.همچنین SSR کمک میکنه تا مشکلات سئو تو اپیکیشن خودمون نداشته باشیم.هوک ها در ریکت ( React Hooks )چهارمین مورد از مزایای کتابخانه ری اکت، وجود هوک های قدرتمند ری اکت هستن. تو نسخه 16.8 ری اکت هوک های کاربردی و فوق العاده ای به React معرفی شد . هر کدوم از این Hook ها کار خاصی برای ما انجام میدن. و وجود داشتن این HOOK ها در ری اکت، قدرت ری اکت رو 2 چندان کرده.احتمال اینکه این سوال مصاحبه ری اکت رو از شما بپرسن زیاده، چون ما به عنوان یک React Developer باید مزایای این کتابخانه ری اکتی رو بدونیم.چطور در ری اکت کامپوننت بسازیم ؟ انواع کامپوننت ها در React ؟بطور کل کتابخانه ری اکت دو نوع کامپوننت داریم :کامپوننت های فانکشنال ( Functional Component ) :کامپوننت های تابعی ( Functional Component ) رایج ترین نوع کامپوننت ها تو ری اکت هستن. استفاده کردن از این نوع کامپوننت ها خیلی ساده تره. تو مثال زیر ما یک Functional Component ساختیم :function Parentheses() { return (<h1> من خروجی این کامپوننت هستم </h1>); }کامپوننت های کلاسی ( Class Component ) :تا قبل از نسخه 16.8 ری اکت که کامپوننت های تابعی وجود نداشتن ، تنها گزینه ی ما برای ساختن کامپوننت ، کامپوننت های کلاسی ( Class Component ) بود.خود داکیومنت مرجع ری اکت، صادقانه گفته که پیشنهاد نمیشه از Class Component استفاده کنیم! پس همیشه باید سعی کنیم از Functional Component استفاده کنیم .روش ساختن یک Class Component بصورت زیر هست :class Car extends React.Component { render() { return <h2>سلام من خروجی این کامپوننتم</h2>; } }مفهوم Pure Component در ری اکت چیست ؟درحقیقت Pure Component در ریکت یا همون کامپوننت های خالص هیچ مقداری رو خارج از خود کامپوننت تغییر نمیده. اگر مقدار State یا Props این نوع از کامپوننت ها با مقدار مشابه تغییر کنه، کامپوننت re-render نمیشه ( اما تو کامپوننت های عادی این مسئله باعث re-render شدن کامپوننت میشه)میشه گفت که PureComponent در React با جلوگیری از re-render اضافه باعث بهبود عملکرد اپیکیشن ما میشه.میشه State رو بصورت مستقیم آپدیت کرد ؟خیر! تغییر State بصورت مستقیم امکانپذیر نیست و صرفا از طریق متد setState امکانپذیره.یعنی اگه بخوایم مقدار name رو آپدیت کنیم باید بصورت زیر عمل کنیم :const [name,setName] = React.useState(&quotجعفر&quot); setMessage(&quotممد&quot)حالا شاید ازمون بپرسن چرا نمیشه state رو مستقیما بروزرسانی کرد ؟چند دلیل مهم برای این مورد وجود داره.اولا ری اکت یک قابلیتی داره به اسم Batching! این قابلیت اینجوریه که خود ری اکت در پشت صحنه چندین بروزرسانی state رو بصورت یکجا اعمال میکنه. اینجوری دیگه نیازی نیست به ازای هر تغییر state یکبار re-render انجام بده.مورد بعدی این هست که ساختار خود state تغییر ناپذیر ( immutable ) هست چون ما میخوایم به تاریخچه state ها دسترسی داشته باشیم.رندر شرطی ( Conditional Rendering ) چیست ؟رندر شرطی در ری اکت یک مفهوم بشدت کاربردی هست. به کمک این تکنیک ما میتونیم کامپوننت ها یا اِلِمان های خودمون رو بصورت شرطی رندر کنیم و به کاربر نمایش بدیم .مثلا میتونیم یک شرط رو بررسی کنیم و با توجه به نتیجه اون شرط، کامپوننت مدنظر خودمون یا کامپوننت های دیگری رو به کاربر نمایش بدیم.تو شرط زیر ، متغیر isGoal رو بررسی کردیم، درصورتیکه مقدار این متغیر True باشه کامپوننت MadeGoal به کاربر نمایش داده میشه، در غیراینصورت کامپوننت MissedGoal به کاربر نمایش داده میشه :{ isGoal ? <MadeGoal/> : <MissedGoal/> }ناگفته نمونه که به چند روش مختلف میشه Conditional Rendering در ریکت رو پیاده سازی کرد که ما تو این مثال رایج ترین روش رو مطرح کردیم.ممکنه این سوال مصاحبه React رو بصورت عملی از شما بپرسن. یعنی از شما بخوان تو یک محیط زنده ( Live ) کد بزنید و یک شرط در ریکت بنویسید.مقدار key تو ری اکت چیه و چه کاربردی داره ؟تو ری اکت اگه ما یک لیست داشته باشیم (مثل لیست کاربران ) یا اگه بخوایم روی یک آرایه متد .map رو اجرا کنیم باید به تک تک اِلِمان های return شده یک پارامتر به نام key بدیم.این مورد تقریبا اجباریه !در حقیقت اِلِمان هایی که داریم Return میکنیم باید یک خصوصیت منحصربفرد داشته باشن ( مثل کد ملی برای انسان ها که کاملا منحصر بفرده) پس اِلِمان ها تو react باید خصوصیت منحصربفرد داشته باشن.برای اینکه بتونیم به Element های خودمون خصوصیت منحصر بفرد یا شناسه یکتا بدیم، میتونیم از key استفاده کنیم.مثلا زمانیکه روی یک آرایه map میزنیم، میتونیم مقدار index رو به عنوان key به اِلِمان های return شده بدیم تا شناسه یکتا داشته باشن :const numbers = [1, 2, 3, 4, 5]; const updatedNums = numbers.map((number, index) => <li key={index}> {number} </li> );اگه به تیکه کد بالا دقت کنید میبینید که به اِلِمان های li خودمون key دادیم.اما مقدار index نمیتونه یک شناسه یکتا و منحصربفرد خوب باشه، تو سوال بعدی دلیل این مورد رو بررسی میکنیم.چرا مقدار index در متد map یک شناسه یکتای خوب برای key نیست ؟!شاید خیلی جاها دیده باشیم که از index به عنوان یک شناسه یکتا و منحصربفرد برای key در متد map استفاده میکنن، اما اینکار اصلا خوب نیست و ممکنه اپیکیشن شمارو دچار مشکل کنه.چون اگه ترتیب اِلِمان ها تغییر کنه ( مثلا sort بشه ) ری اکت قاطی میکنه!بهترین مقدار هایی که میشه برای key استفاده کرد، مقادیری هستن که از Back-End دریافت میشه مثل id ها.بطور مثال اگه لیست کاربران رو از سرور دریافت کردید و میخواید با متد map نمایش بدید ، میتونید آیدی کاربر رو به عنوان key در نظر بگیرید که کاملا منحصر بفرده.پاسخ صحیح به این سوال مصاحبه ری اکت نشون میده که تجربه کاری خوبی در این زمینه کاری دارید. ضمن اینکه در بین سوالات استخدامی ری اکت، این سوال خیلی زیاد مطرح میشه.مفهوم ref در ری اکت چیست ؟عبارت ref مخفف reference هست. تو ری اکت ما برای اینکه بتونیم به Element های موجود در DOM دسترسی داشته باشیم باید یک reference به اون اِلِمان ایجاد کنیم.در حقیقت زمانیکه میخوایم اون اِلِمان رو وارد DOM کنیم یک ref براش میسازیم تا زمانیکه وارد DOM شد بتونیم بهش دسترسی داشته باشیم.تو سوال بعدی بررسی میکنیم که چطور باید یک ref برای Element های خودمون در ری اکت بسازیم :چطور به اِلِمان خودمون در ری اکت ref بدیم ؟برای ساخت ref در ری اکت، باید از هوک useRef استفاده کنیم.در مرحله اول باید یک ref به کمک هوک useRef در ریکت بسازیم :const myRef = useRef();حالا باید یک این Ref ساخته شده رو به یک اِلِمان بدیم تا وقتی اِلِمان وارد DOM شد بهش دسترسی داشته باشیم:myRef.current = &quotFrontEndi"حالا میتونیم به این اِلِمان دسترسی داشته باشیم. مثلا تو مثال زیر من اِلِمان خودم رو که تو DOM وجود داره در Console چاپ میکنم :console.log(myRef.current);دام مجازی ( Virtual DOM ) در ری اکت چیست ؟بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .در React ، به ازای هر Element در DOM واقعی ، یک Element در دام مجازی وجود دارد . ( یعنی در ازای هر div در DOM ، یک div با همان خصوصیات و ویژگی ها در دام مجازی وجود دارد )باتوجه به اینکه دام مجازی ریکت، یکی از اساسی ترین و مهمترین موارد در React بحساب میاد، اکیدا توصیه میکنم خوب درکش کنید چون احتمال اینکه تو مصاحبه استخدامی ریکت، این سوال رو به عنوان یکی از سوالات استخدامی react از شما بپرسن، خیلی خیلی زیاده.مفهوم reconciliation در ری اکت چیست ؟این سوال رو احتمالا فقط تو مصاحبه های لول بالا از Senior Front-End Developer ها بپرسن.دام مجازی ( Virtual DOM ) یک مفهوم برنامه نویسیه که در آن یک نمایش مجازی از UI تو حافظه نگهداری میشه . همگام سازی این دام مجازی با دام واقعی تو ری اکت توسط کتابخونه ReactDOM انجام میشه . به این فرآیند در برنامه نویسی reconciliation میگیم .پاسخ به این سوال مصاحبه ریکت نشون میده به نحوه کار DOM آشنایی دارید و به خوبی درکش کردید!تفاوت DOM با Virtual DOM چیست ؟بروزرسانی DOM خیلی کند و زمانبره اما در عوض بروزرسانی VDOM ( دام مجازی ) خیلی سریعتره !چون در دام مجازی چیزی در صفحه ، نمایش داده نمیشه .چرا Virtual DOM سریعتر از DOM هست ؟به عنوان یک Front-End Enginner باید دلیل سریعتر بودن دام مجازی رو بدونیم .زمانیکه یک Element به UI وبسایت اضافه میشه ، بلافاصله یک دام مجازی ایجاد میشه .به محض تغییر در خصوصیات یا حالات هرکدوم از این Element ها ، یک دام مجازی دیگه ایجاد میشه .در این مرحله VDOM اول با VDOM دوم مقایسه میشه.بعد از این مقایسه ، مشخص میشه که چه Element هایی تغییر داشتن و باید توی UI هم تغییر کنن .در این مرحله دام مجازی بهترین و مناسبترین روش برای اعمال این تغییرات به DOM اصلی رو پیدا میکنه و اون تغییرات رو به DOM واقعی اضافه میکنه.انجام اینکار باعث میشه که کمترین زمان و هزینه برای بروزرسانی DOM صورت بگیره .توی تصویر زیر میتونید عملیات مقایسه دام مجازی 1 با دام مجازی 2 رو ببینید :به تصویر بالا دقت کنید .3 دام مجازی در این پروسه مشخص شده . دایره های آبی رنگ Element هایی هستند که در UI به کاربر نشان میدهیم .دایره های سبز رنگ ، Element هایی هستن که تغییر وضعیت داشتن .زمانیکه وضعیت یک Element تغییر میکنه ، بلافاصله یک VDOM ساخته میشه و بصورت کامل با VDOM قبلی مقایسه میشه .نتیجه مقایسه VDOM اول ( دام قبلی ) با VDOM دوم ( دام فعلی ) یک VDOM جدید هست که وارد DOM واقعی میشه.ری اکت فایبر چیست ؟تا قبل از نسخه 16 ری اکت، منطق و معماری Rendering ری اکت مشکلاتی داشت.همچنین پروسه reconciliation در ریکت مشکلات مشابهی داشت.فیسبوک که متوجه این مشکلات شده بود در سال 2017 فایبر رو معرفی کرد. React Fiber یکسری تغییرات الگوریتمی روی عملکرد Rendering ریکت اعمال میکرد و مشکلات اون رو رفع میکرد.در حقیقت نحوه کدنویسی و کار با React هیچ تغییری نکرد، فقط نحوه اجرا و عملکرد الگوریتمی کتابخانه React تغییر کرد. این تغییرات در نسخه 16 ری اکت در سال 2017 در دسترس عموم قرار گرفت.هدف دیگه ی معرفی React Fiber بهبود کارایی هسته ری اکت تو جاهایی بود که انیمیشن داشتیم یا میخواستیم روی Layout کار کنیم.احتمالش خیلی کمه که این سوال react از شما پرسیده بشه، اما اگه مطرح شد و جواب شما مناسب بود نشون میده که درک خیلی عمیق و مناسبی نسبت به تغییرات ری اکت از گذشته تا به امروز دارید !تفاوت متد createElement و cloneElement در JSX چیست ؟همونطور که میدونیم تو ری اکت از JSX استفاده میکنیم. تو JSX برای اینکه یک Element بسازیم ( مثل div ) باید از متد createElement استفاده کنیم ( البته ری اکت خودش پشت صحنه این متد رو صدا میزنه و نیازی نیست ما این متد رو بنویسیم، هرچند میتونیم اینکارو بکنیم )درواقع وقتی ما تو کامپوننت خودمون یک اِلِمان JSX مینویسیم ( مثل span ) ری اکت در پشت صحنه متد createElement رو صدا میزنه تا اِلِمان درخواستی مارو بسازه.اما متد cloneElement زمانی استفاده میشه که کامپوننت والد بخواد Props کامپوننت فرزند خودش رو ویرایش یا اضافه کنه.همونطور که از اسماشون پیداست، createElement برای ساختن اِلِمان کاربرد داره و cloneElement برای کلون کردن اون اِلِمان کاربرد داره.مفهوم Lifting State Up در ری اکت چیست ؟همونطور که میدونیم کامپوننت های ری اکت میتونن شامل State هایی باشن که بهشون نیاز دارن.در حقیقت میتونیم داده های هر کامپوننت رو بوسیله State تو خود کامپوننت ذخیره کنیم.حالا فرض کنید یک کامپوننت داریم که 2 کامپوننت فرزند داره و میخوایم یک داده مشترک رو تو هر 2 کامپوننت استفاده کنیم.برای این سناریو 2 راه داریم :تو هر کامپوننت فرزند یک State بسازیم و State رو اونجا مدیریت کنیم. ( یعنی دو State )با توجه به یکسان بودن State بین هر دو کامپوننت، صرفا یک State در کامپوننت والد بسازیم و به کامپوننت های فرزند پاس بدیم. ( یعنی یک State )منطقا روش 2 ، روش بهتریه چون بجای State جداگانه ، یک State مرجع ساختیم.درواقع Lift Up State همونطور که از اسمش پیداست به این معنی هست که State خودمون رو به کامپوننت والد منتقل کنیم.فرض کنید یک کامپوننت والد به اسم A داریم.این کامپوننت والد دو کامپوننت فرزند به اسم B و C داره:فرض کنید تو کامپوننت B یک input داریم و میخوایم که مقدار تایپ شده در کامپوننت C نمایش داده بشه.اگه مقدار تایپ شده در input رو تو کامپوننت B ذخیره کنیم به مشکل میخوریم.تو این سناریو کافیه که به کمک تکنیک Lifting State Up ، صرفا State خودمون رو در کامپوننت والد (A) نگهداری و مدیریت کنیم.همچنین گاهی اوغات که دیتا ها بین 2 کامپوننت یکسان هستن، نیازی به ساخت دو State نیست، صرفا ساختن یک State در کامپوننت والد کافیه.چرخه حیات کامپوننت ( Lifecycle ) چیست ؟تو ری اکت هر کامپوننت یک چرخه حیات داره. Lifecycle در ریکت همونطور که از اسمش هم پیداست به ما کمک میکنه تو پروسه حیات یک کامپوننت اون رو مدیریت و دستکاری کنیم :زمانیکه اون کامپوننت ایجاد میشه. ( Mounting )زمانیکه اون کامپوننت آپدیت میشه. ( Updating )زمانیکه اون کامپوننت از بین میره. ( Unmounting )از بین سوالات مصاحبه react ، این سوال یکی از مهمترین موارد به شمار میاد!مفهوم Higher-Order-Component چیست ؟ HOC چیست ؟درواقع HOC یا Higher-Order-Components در ری اکت یکی از مهمترین ویژگی های کتابخونه ری اکت هست که به ما اجازه میده از یک منطق ( Logic ) در چندین کامپوننت استفاده کنیم.میشه گفت HOC به ما این اجازه رو میده که یک قابلیت یا ویژگی رو به کامپوننت های خودمون اضافه کنیم، بدون اینکه اون کامپوننت هارو تغییر بدیم ( کدشون رو ویرایش کنیم ).در واقع Higher-Order-Components در ری اکت از ما یک کامپوننت به عنوان ورودی میگیره و یک کامپوننت بروز شده تحویل میده.بطور مثال ما میتونیم قابلیت احراز هویت ( Authentication ) رو به کامپوننت ها و صفحات خودمون به صورتی اضافه کنیم که لازم نباشه هیچ تغییری در کامپوننت ها و صفحات خودمون اعمال کنیم!ممکنه از بین سوالات استخدامی ریکت ، این سوال رو بصورت عملی از شما درخواست کنن تا یک HOC ایجاد کنید.ویژگی های HOC ( Higher Order Component ) چیست ؟برای Reusable کردن یک تیکه کد کاربرد داره.کامپوننت هارو ویرایش نمیکنه، بلکه یک نسخه بروز شده از اون کامپوننت میسازه.و Higher Order Component در ریکت ، pure function هست و هیچ side Effect نداره.مفهوم Context در ریکت چیست ؟کانتکس یا همون Context یک روش انتقال داده از کامپوننت والد به کامپوننت فرزند هست ( بدون اینکه اون داده رو مثل Props از کامپوننت والد به فرزند پاس بدیم )تو Context ما یک داده ( Data ) رو میتونیم در جایی ذخیره کنیم ( مثل Store در Redux ) و میتونیم از این مقدار ذخیره شده در هر کامپوننتی استفاده کنیم.به تصویر زیر دقت کنید :انتقال داده به روش React Propsبزرگترین مشکلی که تو این روش داریم ، اینه که دیتای ما داره به کامپوننت هایی ارسال میشه که تو اون کامپوننت ها اصلا به اون دیتا ها نیاز نداریم !!در واقع تو کامپوننت 2 ما نیازی به اون دیتا ها نداریم ولی برای اینکه بتونیم دیتای خودمون رو به کامپوننت شماره 4 برسونیم ، باید از کامپوننت شماره 2 و 3 هم عبورشون بدیم .حالا فرض کنید تعداد کامپوننت های درخت ما 20 تا باشه و بخوایم یه دیتایی رو از کامپوننت 1 به آخرین فرزند این درخت ( کامپوننت 20 ) بفرستیم ، اینجوری باید اون Data رو از طریق تک تک Component ها انتقال بدیم .به اینکار میگن Props Drilling و اصلا اصلا پیشنهاد نمیشه !اما خبر خوب اینه که یه روش بهتری برای اینجور وقتا داریم به اسم Context یا همون useContext 🙂انتقال داده به روش React Contextاگه به تصویر بالا دقت کنید ، یک Context ساختیم که نقش منبع دیتا رو ایفا میکنه .حالا از تمامی کامپوننت هایی که داریم ، میتونیم به این منبع Data بصورت مستقیم دسترسی داشته باشیم .دیگه اینجا مشکل Props Drilling نداریم !خیلی راحت از کامپوننت شماره 4 به Data مورد نیاز دسترسی پیدا کردیم، بدون اینکه اون Data رو وارد کامپوننت های دیگه بکنیم .در حقیقت React Context یک روش انتقال داده بین کامپوننت های مختلف اپیکیشن شماست بدون توجه به عمق اون Component !کاربرد Context در ری اکت چیه ؟ چه زمانهایی باید ازش استفاده کنیم ؟از Context در ری اکت برای به اشتراک گذاری دیتا های Global مثل تنظیمات کاربر ، تم ( دارک مود و لایت مود ) و … میشه استفاده کرد.ایده اصلی Context این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .در حقیقت بهتره بگیم از Context برای به اشتراک گذاری State هایی استفاده میکنیم که میخوایم تو بخش های مختلف اپیکیشن در دسترس باشن .مواردی مثل :تم سایت ( دارک مود / لایت مود )تنظیمات سایتنام و اطلاعات کاربر احراز شده ( وارد شده )تنظیمات کاربرزبان سایت ( سایت های 2 زبانه )باتوجه به اهمیت context ، ممکنه این سوال در بین سوالات مصاحبه react قرار بگیره.درصورت تغییر مقدار Context چه اتفاقی میوفته ؟اگر ما یک مقدار رو توسط Context به کامپوننت هامون پاس داده باشیم و این مقدار تغییر بکنه ، خود Context به تمام Consumer ها اطلاع میده که re-Render بشن !مثلا فرض کنید اطلاعات کاربر رو تو Context ذخیره کردیم و نام کاربر رو تو هدر سایت نمایش میدیم.درصورتیکه این Context خالی بشه ( با Logout کردن کاربر ) کامپوننت هدر re-render میشه تا اسم کاربر از هدر پاک بشه.این سوال هوشمندانه از این بابت پرسیده میشه تا درک عمیق مارو نسبت به context بسنجن! پس ممکنه بین سوالات استخدامی ریکت قرار داشته باشه.ویژگی Props Children در ری اکت چیست ؟شاید تو کامپوننت های ری اکتی به عبارت props.children برخورده باشید. اما بریم ببینیم که Props Children در ری اکت چیست ؟تمامی کامپوننت هایی که تو ری اکت داریم، میتونن children داشته باشن.به مثال زیر دقت کنید:<App> <Image src=”/asset/profile-img.png” /> <Detail name=”فرانت اندی” surname=”مرجع تخصصی فرانت اند” /> </App>تو مثال بالا کامپوننت App دو فرزند ( children ) داره اما کامپوننت های Image و Detail هیچ فرزندی ندارن.درواقع تو JSX میتونیم به 2 صورت کامپوننت بنویسیم :<Component/><Component> فرزند کامپوننت</Component>تو مدل اول کامپوننت ما فاقد فرزند هست اما تو مدل دوم کامپوننت ما فرزند ( children ) داره.تو مدل دوم ما هر اِلِمان یا کامپوننتی رو میتونیم به عنوان children به کامپوننت خودمون پاس بدیم.مثلا فرض کنید ما میخوایم یک کامپوننت اسلایدر بسازیم. ما نیاز داریم که به اسلایدر خودمون چندین تصویر پاس بدیم تا نمایش داده بشه.دقیقا میخوایم بصورت زیر از کامپوننت Slider استفاده کنیم :<Slider> <img src=”/assets/img-1.pg” /> <img src=”/assets/img-2.pg” /> <img src=”/assets/img-3.pg” /> </Slider>الان کامپوننت Slider یک Props داره که اسمش children هست. یعنی برای نمایش این تصاویر که با props children دریافت کردیمشون، باید کامپوننت Slider رو اینجوری بنویسیم :export default function Slider(props) { return ( <div className=”img-slider”> {props.children} </div> ); }تو کامپوننت Slider تونستیم Props های دریافت شده بصورت children رو داخل یک div قرار بدیم و نمایش بدیم.تو ری اکت چطور کامنت ( Comment ) بنویسیم ؟برای اینکه تو اپیکیشن ری اکت خودمون کامنت بنویسیم، کافیه بصورت زیر عمل کنیم :{/* من کامنت شدم و اجرا نمیشم */}چرا تو ری اکت از className بجای class استفاده میکنیم ؟تو ری اکت کلمه ی class یک کلمه رزرو شده در جاوا اسکریپت هست.به همین دلیل ما برای اینکه بتونیم به Element های خودمون تو JSX کلاس بدیم باید بصورت زیر عمل کنیم :<div className=’header’>هدر</div>مفهوم Fragment در ری اکت چیست ؟کامپوننت هایی که در React ایجاد میکنیم از این 2 حالت خارج نیستند :کامپوننت ما یک Element برمیگرداند ( Return میکند )کامپوننت ما دو یا چند Element برمیگرداند ( Return میکند )در ری اکت ، اگر قصد داشته باشیم 2 یا چند Element برگردانیم ( Return کنیم ) باید تمامی آنها را داخل یک Element مثل div قرار دهیم .چون طبق قانون JSX ، تمامی اِلِمان ها ( Elements ) باید یک والد داشته باشند .ما میتونیم حتی از یک اِلِمان div به عنوان Parent اِلِمان های خودمون استفاده کنیم اما این کار درستی نیست و کار بهتر استفاده از ویژگی Fragment هست که توسط خود React معرفی شده.تو سوال بعدی بررسی میکنیم که چرا نباید از div یا سایر اِلِمان های JSX به عنوان والد اِلِمان ها استفاده کرد و استفاده از Fragment گزینه بهتریه .روش استفاده از Fragment به عنوان والد چندین Element بصورت زیر هست :const App = () => { return ( <Fragment> // من دور اِلِمان ها پیچیده شدم <h1>من آیتم اول این کامپوننت هستم</h1> <p>من آیتم دوم این کامپوننت هستم</p> </Fragment> ); } export default Appآیا میشه از div به عنوان Wrapper استفاده کرد ؟اگر هدف شما از قرار دادن div به عنوان Wrapper ، افزون استایل است ( مثل hover ) هیچ مشکلی نیست و میتوانید از <div> استفاده کنید .اما اگر هدف شما برای استفاده از div ، صرفا بحث Wrapper بودن آن است ، قطعا انتخاب های بهتری هم وجود دارد و استفاده از div منطقی نیست .استفاده از div به عنوان Wrapper خیلی اوغات میتواند مشکلاتی مثل بهم خوردن Style های Css را بهمراه داشته باشند مخصوصا زمانیکه از FlexBox و Grid استفاده میکنید .به عنوان یک React Developer حرفه ای باید تمام تلاش خودتون رو بکنید که Element اضافی وارد DOM نکنید ! اما زمانیکه از div به عنوان والد استفاده میکنید ، اینکار را میکنید !راه حل Fragment هست که تو سوال قبلی درموردش صحبت کردیم.ممکنه که این سوال هوشمندانه در بین سوالات استخدامی ریکت شما قرار داشته باشه. اگه پاسخ مناسبی بهش بدید، فوق العادس چون هرکسی این مورد رو رعایت نمیکنه 🙂مزیت استفاده از Fragment بجای اِلِمان های JSX چیه ؟درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .کامپوننت stateless چیست ؟اگه یک کامپوننت داشته باشیم که داخلش هیچ State داخلی نداشته باشیم، به اون کامپوننت stateless Component میگیم. یعنی کامپوننت بدون State !کامپوننت statefull چیست ؟اگه تو کامپوننت خودمون حداقل یک state داشته باشیم ( به کمک هوک useState ) این یعنی کامپوننت ما stateFull هست.در کل به کامپوننت هایی که State داخلی دارن statefull component میگیم.معایب کتابخانه ری اکت چیست ؟ معایب ریکت ؟درمورد معایب ری اکت میشه یه مقاله مفصل نوشت اما با توجه به ماهیت این مقاله که میخوایم به سوالات استخدامی ریکت بپردازیم، خلاصه گویی میکنیم.سرعت بالای تغییر !ری اکت یک کتابخونه جاوا اسکریپتی هست که بشدت در معرض تغییره! تو نسخه های قبلی منتشر شده از ری اکت به وضوح دیدیم که چقدر تغییرات گسترده ای داشته.بطور مثال اضافه شدن هوک ها ، منسوخ شدن class Component ها و …قطعا این تغییرات مفید بودن اما خب پروژه هایی که با React توسعه داده میشن همیشه باید بروزرسانی بشن.این شما هستید که باید انتخاب کنید که حاضر به بروزرسانی مداوم پروژه هستید یا نه! ( کتابخونه های دیگه ای هستن که سرعت تغییر خیلی پایین تری دارن )ری اکت یک فریمورک نیست!اگه به معماری MVC نگاه کنیم میبینیم که کتابخانه ری اکت فقط بخش View رو داره کنترل میکنه! و برای Controller و Model به ابزار ها و کتابخانه های جانبی احتیاج داره.همین باعث میشه که ساختار و الگو های ضعیفی داشته باشیم. درصورتیکه در فریمورک های جاوااسکریپتی مثل Angular چنین مشکلاتی رو نداریم!مشکل سئو در ریکت !گرچه این مورد ثابت نشده اما تجربه نشون داده که Crawler ها توانایی مناسبی در سئو کردن سایت های ری اکتی ندارن. این صرفا در حد یک نگرانیه و البته که راه حل هایی برای این مشکل وجود داره.اما بهرحال سئو در ریکت یکی از چالش های اصلی این کتابخونه ی دوست داشتنیه.دونستن معایب کتابخانه React نشون میده که شما درک عمیقی از این کتابخانه دارید، پس احتمالش زیاده که از بین سوالات استخدامی React ، این سوال هم از شما پرسیده بشه.پکیج ReactDOM که تو ری اکت استفاده میشه چیه و چه کاربردی داره ؟اگه با ری اکت کار کرده باشید حتما به ReactDOM در ری اکت یا اسم react-dom در ری اکت برخوردید!اما بریم ببینیم که کار این پکیج چیه ؟درواقع ReactDOM یکسری متد برای کار با DOM مرورگر در اختیار ما و ری اکت میزاره تا بتونیم DOM رو باهاش مدیریت کنیم.در حقیقت به کمک ReactDOM در ریکت میتونیم DOM اصلی رو دستکاری کنیم.پکیج ReactDOM چندین متود و تابع در اختیار ما میزاره مثل :renderfindDOMNodeunmountComponentAtNodecreatePortalتوضیح این متود ها خیلی مفصله و حتما در یک مقاله جداگانه بررسیشون میکنیم.چطور در ری اکت استایل دهی کنیم ؟ نحوه استایل دادن به اِلِمان های ریکت ؟تو ری اکت به چندین روش مختلف میشه استایل دهی رو انجام داد:استایل درون خطی ( inline Styling ) :ما میتونیم به اِلِمان های JSX خودمون یک خصوصیت style بدیم. خصوصیت style از ما یک Object جاوا اسکریپتی میگیره که میتونیم داخل این آبجکت استایل های خودمون رو مطرح کنیم.تو مثال زیر ما به اِلِمان h1 خودمون رنگ قرمز دادیم :<h1 style={{color: &quotred&quot}}>عاطفه</h1>استایل های ما در این روش باید بصورت camelCase نوشته بشن. یعنی ما backgroundcolor رو بصورت backgroundColor باید بنویسیم.به کمک یک فایل css :ما میتونیم تمامی استایل های خودمون رو داخل یک فایل .css بنویسیم و صرفا داخل کامپوننت خودمون فراخوانیش کنیم.مثلا استایل زیر رو داخل فایل style.css مینویسیم :header{ background-color: #282c34;}فقط فراموش نکنید که کلاس header رو به اِلِمان JSX خودتون پاس بدید.به کمک یک ماژول css :یکی دیگه از روش های استایل دادن به کامپوننت ها و Element ها ، Css Modules هست.مزیت این روش این هست که دیگه نگران اسم تکراری class های خودتون نیستید، چون اون کلاس فقط در همون کامپوننت قابلیت استفاده داره.برای اینکه یک فایل CSS Modules بسازیم باید آخر اسم فایل css ، عبارت module.css. رو قرار بدیم.مثلا اسم فایل ما style.module.css باشه . حالا میتونیم داخلش استایل های معمولی css رو قرار بدیم.چطوری یک کامپوننت رو memo کنیم ؟در حقیقت memo به ما اجازه میده از re-Render اضافی کامپوننت تا زمانیکه Props اون تغییری نکرده، جلوگیری کنیم.تو تیکه کد زیر ، ما کامپوننت Music رو memo کردیم. خروجی یک کامپوننت جدید هست به اسم MemoizedMusic :export function Music({ title, description }) { return ( <div> <div>Music title: {title}</div> <div>Desc: {description}</div> </div> ); } export const MemoizedMusic = React.memo(Music);تو تیکه کد بالا ، ما کامپوننت Music رو داخل ()React.memo قرار دادیم .اگه به خط 10 دقت کنید میبینید که React.memo(music) یک مقدار جدید Return کرده به اسم MemoizedMusic .در واقع خروجی کامپوننت MemoizedMusic با خود کامپوننت Music کاملا یکسانه ! با این تفاوت که کامپوننت MemoizedMusic فقط یکبار render میشه و تا زمانی که props هاش تغییر نکنه ، re-Render نمیشه !اما کامپوننت Music هر بار render میشه ( فارغ از اینکه props های اون تغییر میکنه یا نه )درک memo نشون میده که به مبحث Performance و بهینه سازی اپیکیشن های ری اکتی، مسلط هستیم.این احتمال وجود داره که از بین سوالات استخدامی ری اکت، این سوال هم مطرح بشه.چه جاهایی باید از memo در ری اکت استفاده کنیم ؟جاهایی که فکر میکنید کامپوننت با Props های یکسان render میشه !یکی از بهترین جاهایی که میشه از react.memo استفاده کرد ، کامپوننت هایی هستن که اغلب با Props های یکسان render میشن !استفاده اشتباه از memo باعث کاهش Performance اپیکیشن ما میشه ؟قطعا!درصورت استفاده از memo در جای اشتباه ، Performance اپیکیشن شما کاهش پیدا خواهد کرد!فرض کنید یک کامپوننتی رو به memo دادید که همیشه Props های متفاوتی داره .با انجام اینکار ، ری اکت هربار که Props های این کامپوننت رو با نسخه کش شده بررسی میکنه ،همیشه به false میرسه ( یعنی Props ها متفاوت هستن ! )و خب اینجا یعنی ری اکت یک مرحله مقایسه اضافه انجام داده که خودش باعث کاهش Performance اپیکیشن میشه .نه تنها هیچ مزیتی بدست نمیارید ، کلی قضیه رو پیچیده تر هم میکنید !اگه این سوال در بین سوالات مصاحبه react شما وجود داشته باشه، نشون میده که Performance برای اون شرکت حائز اهمیته.یک کامپوننت رو memo کنیم و Stateش تغییر کنه، re-render میشه ؟اصلا مهم نیست که کامپوننت memo شده باشه یا نه!تغییر State یک کامپوننت همیشه باعث re-Render شدنش میشه ! حتی اگه داخل ()memo باشه .چطور تو ری اکت SSR یا همون Server Side Rendering انجام بدیم ؟تکنیک SSR یا همون Server Side Rendering یک تکنیک معروفه که باعث میشه بجای render صفحه سمت client ، رندر صفحه در سمت server انجام بشه. نتیجه رندر یک صفحه HTML کامل هست که به client ارسال و نمایش داده میشه.برای اینکه یک کامپوننت رو در سمت سرور render کنیم باید بصورت زیر از ReactDOMServer استفاده کنیم:ReactDOMServer.renderToString(<Blog />);به کمک متود ReactDOMServer در ری اکت میتونیم رندر سمت سرور ( SSR ) داشته باشیم. البته این موضوع خیلی مفصله و حتما در یک مقاله جداگانه بررسیش میکنیم.برای شرکت هایی که به سئو اهمیت میدن، این احتمال وجود داره که حداقل یک سوال ری اکت از مبحث SSR از شما بپرسن.مفهوم Lifecycle کامپوننت در ری اکت چیست ؟ چرخه حیات کامپوننت در ریکت یعنی چه ؟تو ری اکت، کامپوننت ها یک طول عمر ( چرخه حیات ) دارن !این چرخه حیات از زمان ساخته شدن اون کامپوننت شروع میشه و تا هنگامی که اون کامپوننت از بین میره، ادامه داره.تو این حین ما میتونیم رفتار کامپوننت خودمون رو مدیریت کنیم.مراحل چرخه حیات کامپوننت ها در ریکت رو نام ببرید ؟چرخه حیات کامپوننت در ری اکت شامل سه مرحله میشه :ایجاد شدن کامپوننت ( mounting )بروز شدن کامپوننت ( updating )از بین رفتن کامپوننت ( unmounting )منظور از mounting در Component lifecycle چیست ؟درواقع mounting اولین مرحله از سه مرحله چرخه حیات کامپوننت در react هست.این مرحله زمانی هست که کامپوننت ما ایجاد میشه و وارد DOM میشه. به عبارتی زمانیکه کامپوننت ما متولد میشه و زندگی خودش رو آغاز میکنه، مرحله mounting در کامپوننت میگیم.منظور از updating در Component lifecycle چیست ؟به زمانیکه کامپوننت ما به دلیل تغییر State یا تغییر Props، مجدد رندر میشه ( re-render میشه ) مرحله updating میگیم!منظور از unmounting در Component lifecycle چیست ؟به زمانیکه کامپوننت ما از DOM حذف میشه و دیگه نمایش داده نمیشه، مرحله unmounting کامپوننت میگیم.تو این مرحله میتونیم کنترل کنیم زمانیکه کامپوننت ما داشت از DOM حذف میشد، چه اتفاقی بیوفته.متود constructor در ری اکت چیست ؟این متد، اولین متدی هست که در زمان mounting کامپوننت اجرا میشه ( زمانیکه کامپوننت وارد DOM میشه ).این متود تو کامپوننت های کلاسی ( class component ) کاربرد داره .داخل متد constructor نمیتونیم هیچ ساید افکتی ( Side Effect ) اجرا کنیم! چون اساسا این متد یک متد pure هست! مثلا نمیتونیم داخلش یک درخواست HTTP یه سرور بزنیم و اطلاعات مدنظرمون رو دریافت کنیم!متد static getDerivedStateFromProps در ری اکت چیست ؟به کمک متد getDerivedStateFromProps در ری اکت میتونیم State خودمون رو باتوجه به Props تغییر بدیم. این موضوع زمانهایی خیلی کاربرد داره که State ما قراره از طریق Props دریافت بشه.متود render در ری اکت چیست ؟این متد تنها متد ضروری برای Class Component ها هست و در فاز Mounting ( قرار گرفتن کامپوننت در DOM ) اجرا میشه.تو متد render در class Component ها نباید هیچ ساید افکتی ( side effect ) قرار بدیم. چون اساسا متد render یک متد Pure هست. بطور مثال ما نباید State خودمون رو اینجا تغییر بدیم، یا از سرور یکسری اطلاعات درخواست کنیم ( Http Request ) یا با Local Storage کار کنیم و ..متد render در ریکت دقیقا بعد از متد قبلی ( getDerivedStateFromProps ) اجرا میشه.متود componentDidMount در ری اکت چیست ؟آخرین متدی که تو فاز Mounting ( قرار گرفتن کامپوننت در DOM ) اجرا میشه، متد componentDidMount در ری اکت هست.به کمک متود componentDidMount میتونیم ساید افکت ( side effect ) های خودمون رو اجرا کنیم.( مثل ارسال درخواست های HTTP به سرور و دریافت اطلاعات ) یا بروزرسانی State های کامپوننت.متود static getDerivedStateFromProps در ری اکت چیست ؟تو فاز Updating ( هنگام re-render شدن کامپوننت) اولین متودی که اجرا میشه متود getDerivedStateFromProps هست.این متود زمانی خیلی کاربردیه که Props ما تغییر میکنه و ما میخوایم با توجه به Props تغییر کرده، State خودمون رو بروزرسانی کنیم.متود shouldComponentUpdate در ری اکت چیست ؟به کمک متود shouldComponentUpdate میتونیم به ری اکت بگیم که درصورت تغییر State یا Props نیازی نیست re-render بشه. ( این اتفاق در حالت عادی میوفته )این متود کمک میکنه که از re-render های غیرضروری جلوگیری کنیم، اما خیلی با احتیاط باید ازش استفاده کنیم چون ممکنه جاهایی که نیاز به re-render داریم، کامپوننت ما re-render نشه.خروجی این متود یک مقدار boolean هست که تعیین میکنه کامپوننت ما re-render بشه یا نشه .مقدار پیشفرض true هست که باعث میشه درصورت تغییر State یا Props، همیشه re-render داشته باشیم.متود getSnapshotBeforeUpdate در ری اکت چیست ؟این متود به ما اجازه میده که به مقدار قبلی Props و State دسترسی داشته باشیم. ( قبل بروزرسانی کامپوننت )متود componentDidUpdate در ری اکت چیست ؟به کمک متود componentDidUpdate در ری اکت میتونیم ساید افکت ( Side Effect ) های خودمون رو اجرا کنیم. مثل دریافت اطلاعات از سرور ( Http Request ) یا بروزرسانی State های کامپوننت!متود componentDidUpdate در ریکت میتونه 3 آرگومان از ما بگیره که عبارتند از : prevProps ، PrevState و snapshot .( آرگومان snapshot فقط درصورتی دریافت میشه که از متود getSnapshotBeforeUpdate استفاده کرده باشیم.نکته ای که وجود داره این هست که این متود آخرین متود فاز updating در component lifecylce ری اکت هست.متود componentWillUnmount در ری اکت چیست ؟متود componentWillUnmount در ری اکت دقیقا قبل از حدف شدن کامپوننت از DOM اجرا میشه. اگه ما بخوایم توی کامپوننت خودمون یکسری موارد clean up اجرا کنیم، باید از این متود استفاده کنیم. مثل cancel کردن درخواست های شبکه!بعد از اجرای این متد، کامپوننت از DOM حذف میشه.حالت StrictMode در ریکت چیست ؟قابلیت StrictMode به شما کمک میکنه که در مراحل فاز توسعه پروژه ( فاز Development ) باگ ها و مشکلات رایج پروژتون رو پیدا کنید .در واقع StrictMode حالت سخت گیرانه ری اکت هست ! این ابزار فقط در فاز Development کاربرد داره و به شما کمک میکنه که مشکلات پروژتون رو در زمان توسعه پیدا کنید و اونهارو فیکس کنید .در حقیقت وقتی حالت StrictMode رو در ری اکت فعال میکنیم ، در پشت صحنه react یکسری بررسی های اضافی روی اپیکیشن ما صورت میگیره تا کوچکترین مشکلات و باگ های احتمالی ، به ما اطلاع داده بشه .میشه تو JSX از متود map استفاده کرد؟بله 🙂تو مثال زیر ما از متود map داخل JSX استفاده کردیم :<div> {items.map((item) => ( <YeComponent key={item.id} title={item.title} /> ))} </div>چطور به یک اِلِمان ( Element ) در ری اکت کلاس ( className ) شرطی بدیم ؟براحتی میتونیم یک شرط رو بررسی کنیم و باتوجه به نتیجه اون شرط، کلاس دلخواه خودمون رو به یک اِلِمان بدیم :<div className={darkMode ? ‘bg-gray-600’ : ‘bg-white’}> فِرانت اِندی </div>چطور درصورت تغییر یک State، یک کاری رو انجام بدیم؟برای اینکه درصورت تغییر یک State مشخص، یک کاری رو انجام بدیم، باید به اون State گوش بدیم.یعنی حواسمون باشه که هر زمان اون State تغییر کرد، کار دلخواه ما صورت بگیره .برای پیاده کردن چنین سناریویی، هوک useEffect به ما کمک میکنه.صرفا کافیه اون State دلخواه رو به عنوان Dependencies به هوک useEffect پاس بدیم تا حواسش به State ما باشه :const [count,setCount] = useState(); useEffect(() => { // کار دلخواه ما که درصورت تغییر استیت اجرا میشه }, [count]);میشه Props های ری اکت رو تغییر داد ؟خیر !به 2 دلیل نمیتونیم Props ها در ری اکت رو تغییر بدیم :پراپس ها immutable هستن .به دلیل ساختار داده یک طرفه ری اکت.داده ها در React ، همیشه از بالا به سمت پایین منتقل میشن. یعنی از کامپوننت والد به کامپوننت فرزند!در نتیجه کامپوننت فرزند صرفا توانایی خوندن و استفاده از props رو داره و نمیتونه اون props رو تغییر بده .به اصطلاح Props ها صرفا read-only هستن.از بین سوالات استخدامی react ، چنین سوالاتی معمولا از Senior ها پرسیده میشه که تسلط و تجربه بالایی در کار با React دارن.چطور میشه نسخه ری اکت استفاده شده در اپیکیشن رو متوجه شد ؟ساده ترین راه استفاده از React.version هست که به ما نسخه استفاده شده در ری اکت پروژه رو بهمون برمیگردونه :<div>{`نسخه ری اکت : ${React.version}`}</div>,تفاوت Component و Element در ری اکت چیست ؟ تفاوت کامپوننت و اِلِمان در ری اکت چیه ؟قبل از اینکه تفاوت Component و Element در ری اکت رو بررسی کنیم، اجازه بدید یادآوری کنیم که اصلا خود Element و Component چی هستن و چه تعریفی دارن.اِلِمان در ری اکت پایه ای ترین جز اپیکیشن هست که به ما اجازه میده اپیکیشن خودمون رو بسازیم.هر Element یک Type و Propery داره. ممکنه Element ها دارای فرزند باشن. ( مثل یک div که شامل چندین span میشه )اِلِمان ها هیچ متودی ندارن.رندر شدن Element ها خیلی سریع صورت میگیره چون اصولا سبک هستن.تو تیکه کد زیر یک Element ساختیم که اسمش el هست :const el = <h1>FrontEndi.com</h1>;همچنین ما میتونیم به کمک متود React.createElement یک Element در ریکت بسازیم :const el = React.createElement(‘h1’, { id: ‘site’ }, ‘فرانت اندی’);حالا بریم ببینیم کامپوننت چیه ؟کامپوننت یک تیکه کد مستقل و قابل استفاده مجدد هست ( reusable )خروجی کامپوننت، مجموعه ای از Element هاست.کامپوننت ها میتونن Class Component باشن یا Functional Component !تو مثال زیر ما یک کامپوننت ساختیم که نام کاربر رو دریافت میکنه و عبارت خوش آمدی {نام کاربر} رو برمیگردونه :function SayWelcomeToUser({name}) { return <div><h3>Welcome {name}</h3> </div> }حالا بریم ببینیم تفاوت Component و Element در ریکت چیه ؟اِلِمان ها، همیشه توسط کامپوننت ها Return میشن.کامپوننت ها میتونن از نوع کلاسی یا تابعی باشن اما اِلِمان ها این دو نوع رو ندارن.المان ها فاقد متود هستن اما Component ها متود های زیادی دارن.کامپوننت ها، چرخه حیات در ری اکت دارن اما Element ها چرخه حیات ندارن!کامپوننت ها شامل اِلِمان ها هستن، اما اِلِمان ها نمیتونن توی خودشون کامپوننت داشته باشن!تفاوت Class Component و Functional Component چیست ؟میدونیم که کامپوننت ها در ری اکت میتونن کلاسی ( class ) یا تابعی ( functional ) باشن. اما تفاوت این 2 نوع کامپوننت چیه ؟کامپوننت های تابعی ( Functional Component ) خیلی ساده هستن ! دقیقا مثل توابع جاوااسکریپتی نوشتن میشن و دردسر کامپوننت های کلاسی ( class Component ) رو تو نوشتن ندارن ( استفاده از متود render و extends و .. )مثلا تو مثال زیر یک کامپوننت تابعی در ری اکت ساختیم :const Car=()=> { return <h2>سلام! من یه پیکانم</h2>; }کامپوننت های کلاسی ( class Component در ری اکت ) پیچیدگی بیشتری داره. تو کامپوننت های کلاسی ( class component ) نمیتونیم از هوک ها در ری اکت استفاده کنیم.در نتیجه بخش عظیمی از قابلیت ها و ویژگی های ری اکت رو از دست میدیم.در عوض تعداد خیلی زیادی از متود های مدیریت Lifecycle رو در Class Component ها داریم که تو Functional Component ها خبری ازشون نیست.تو مثال زیر،همون کامپوننت Car رو از نوع کامپوننت کلاسی ساختیم :class Car extends React.Component { render() { return <h2>سلام! من یه پیکانم<h2>;/ } }حالا بریم چند تفاوت Class Component و Functional Component در ری اکت رو ببینیم:کامپوننت های تابعی، خیلی شبیه توابع جاوااسکریپتی هستن.اگه میخوایم کامپوننت کلاسی بسازیم باید حتما کامپوننتمون از React. Component ارث ببره ( extends ) و حتما باید متود render رو داخل کامپوننت خودمون صدا بزنیم درصورتیکه در Functional Component اینطور نیست!تو Class Component ها متود های بیشتری برای مدیریت Lifecycle در React داریم.تو کامپوننت های کلاسی امکان استفاده از هوک های ریکت رو نداریم اما تو کامپوننت های تابعی میتونیم ازشون استفاده کنیم.چرا از callback ( توابع بازگشتی ) هنگام setState ( بروزرسانی state ) استفاده میکنیم ؟گاهی اوغات لازمه که بصورت مستقیم از setState استفاده نکنیم و بروزرسانی state خودمون رو به کمک یک callback انجام بدیم. مثل :setCount(prevCount => prevCount + 1);اگه تو سوالات استخدامی ری اکت از ما پرسیدن چه زمانی از callback برای setState کردن باید استفاده کنیم، میتونیم جواب زیر رو بدیم :هر زمان بروزرسانی State ما، وابسه به مقدار قبلی State بود باید به کمک callback ، مقدار State خودمون رو بروز کنیم.مثلا اگه میخوایم با هر کلیک کاربر، مقدار State رو یکی بیشتر کنیم ( چون اینجا setState با توجه به مقدار قبلی State داره صورت میگیره باید به کمک callback این بروزرسانی رو انجام بدیم ). یعنی اینجوری :const [count, setCount] = useState(0); setCount(prevCount => prevCount + 1);اما اگه پرسیدن چرا باید زمانیکه setState وابسه به مقدار قبلی state بود از callback استفاده کنیم ، میتونیم بگیم که :چون خود هوک useState به ما مقدار قبلی state رو نمیده. تنها راهی که میتونیم به مقدار قبلی state دسترسی داشته باشیم، callback function هست.چطور از ref در ریکت استفاده کنیم ؟ چطور از هوک useRef در ریکت استفاده کنیم ؟بطور کل برای استفاده از هوک useRef در ری اکت باید 3 مرحله زیر رو انجام داد :ساختن Ref :const myRef = useRef();اختصاص مقدار به Ref :myRef.current = &quotFrontEndi"دسترسی به مقدار Ref :console.log(myRef.current);برای دسترسی به Element های موجود در Dom شما باید طبق 3 مرحله بالا عمل کنید . یعنی :یک ref به کمک ()useRef بسازید .یک Element به آن ref اختصاص دهید.حالا مطابق مرحله 3 میتوانید به Element موجود در DOM دسترسی داشته باشید.مفهوم forwardRef در ری اکت چیست ؟میشه گفت که forwardRef در ری اکت یک ویژگی بسیار کاربردی هست که به ما اجازه میده یک ref رو از کامپوننت والد، به کامپوننت فرزند منتقل کنیم.تو مقاله forwardRef در ری اکت بصورت جامع و تخصصی این ویژگی رو بررسی کردیم.بدون forwardRef امکان ارسال props از کامپوننت والد به کامپوننت فرزند رو نداریم.پورتال در ری اکت چیست ؟ پورتال در ری اکت چیست ؟پورتال در ری اکت یک ویژگی حرفه ای هست که به توسعه دهنده های React این امکان رو میده که Element های خودشون رو خارج از سلسه مراتب درختی React ، رندر کنن.اکثر Element ها یا Component ها تو ری اکت داخل سلسله مراتب درختی ری اکت render میشن و این کار رو برای ما دشوار میکنه اگه بخوایم مودال یا پاپ آپ نمایش بدیم.پورتال در ریکت چه جاهایی استفاده میشه ؟در کل هرجایی که ما میخوایم یک Element رو بالاتر از سایر Element ها و خارج از سلسله مراتب درختی ری اکت render کنیم، میتونیم از پورتال در ریکت استفاده کنیم. چند مورد از کاربرد Portal در ری اکت :نمایش پیغام اجازه دسترسی به کوکینمایش لودینگنمایش کامپوننت چت آنلاین/ پشتیبانیچطور میتونیم Props های هر کامپوننت رو اعتبار سنجی کنیم ؟ بررسی تایپ Props چجوریه ؟ما میتونیم Props های کامپوننت های خودمون رو چک کنیم تا type صحیحی داشته باشن و درصورتیکه Type اشتباهی داشتن ما warning دریافت کنیم.مثلا یکی از props های ما که اسمش name هست، صرفا باید string بگیره و اگه number بهش فرستاده شد، این اشتباهه و ما باید warning بگیریم تا مطلع بشیم.کتابخانه های مختلفی وجود دارن که نوع Props کامپوننت رو چک میکنن ( prop type )یکی از معروف ترینشون کتابخانه prop-types در ری اکت هست.مثلا میتونیم از تایپ های زیر برای Props های خودمون استفاده کنیم :PropTypes.anyPropTypes.stringPropTypes.numberPropTypes.objectPropTypes.arrayPropTypes.nodePropTypes.funcPropTypes.elementPropTypes.boolPropTypes.symbolمدیریت خطا در ری اکت یعنی چه ؟ error boundary در ری اکت چیست ؟به کمک Error Boundary در ری اکت میتونیم خطاهای اپیکیشن رو مدیریت کنیم. یعنی هر زمان خطایی صورت گرفت، بجای کرش کردن اپیکیشن بتونیم یک UI مشخص به کاربر نمایش بدیم ( fallback )یا مثلا متن “مشکلی پیش آمد” نمایش بدیم.مرورگر ها میتونن کد های JSX رو بخونن ؟خیر !مرورگر ها فقط توانایی خوندن کد های جاوااسکریپتی رو دارن.درواقع JSX ، جاوااسکریپت نیست.برای اینکه کدهای JSX برای مرورگر ها قابل درک و خوندن باشن، باید به کمک Babel به جاوااسکریپت تبدیلشون کنیم.ری اکت در پشت صحنه خودش JSX رو به جاوااسکریپت خام تبدیل میکنه ( به کمک Babel )از بین سوالات استخدامی ریکت ، این سوال از این بابت ممکنه مطرح بشه تا درک عمیق شمارو نسبت به React بسنجن.تفاوت کتابخانه ری اکت با انگولار چیه ؟ تفاوت React و Angular چیست ؟انگولار یک فریمورک کامله که تمامی ابزار های مورد نیاز شمارو داخل خودش داره اما ری کت یک کتابخانه هست هست و اکثر ابزارهای مورد نیاز رو داخلش نداره. ( باید بصورت پکیج یا کتابخانه های خارجی نصب کنید )ری اکت فقط بخش view یک MVC رو به ما میده درصورتیکه انگولار کل MVC رو پوشش میده.ری اکت از Virtual DOM استفاده میکنه ولی Angular از دام واقعی ( Real DOM ) استفاده میکنه.کامپوننت در ری اکت چیست ؟کامپوننت در ری اکت اجزای سازنده UI ما هست . به هر تیکه کد که یک وظیفه مشخص داره و یک بخش از UI رو نمایش میده کامپوننت میگیم.کامپوننت ها میتونن reusable ( قابل استفاده مجدد ) باشن.کامپوننت ها یک بخش مستقل از UI ما هستن. مثلا میتونیم هر کدوم از موارد زیر رو یک کامپوننت در نظر بگیریم :هدرفوتردکمهجدولاینکه هر کامپوننت مستقل هست، کمک میکنه تا فرایند توسعه و دیباگ اون بخش راحت تر باشه چون ارتباطی با سایر بخش ها نداره.همچنین کامپوننت ها reusable هستن یعنی اگر میخوایم 10 جدول نمایش بدیم، نیازی نیست که کد های مربوط به جدول رو 10 مرتبه ( تکراری ) بنویسیم.صرفا کافیه یکبار کامپوننت جدول رو بسازیم و 10 بار فراخوانیش کنیم.این سوال جز پایه ای ترین موارد ری اکت هست و احتمالش وجود داره که حداقل یک سوال مصاحبه ریکت در مورد کامپوننت ها از شما بپرسن.تفاوت Props و State در ری اکت چیست ؟کامپوننت والد میتونه مقدار Props کامپوننت فرزندش رو تغییر بده اما مقدار State کامپوننت فرزند رو نمیتونه تغییر بده.از داخل کامپوننت فرزند میتونیم State رو تغییر بدیم، اما Props رو نمیتونیم تغییر بدیم.شباهت Props و State در ری اکت چیست ؟هر دو میتونن از کامپوننت والد مقدار اولیه دریافت کنن.از داخل کامپوننت فرزند، میتونیم به هر دو مقدار پیشفرض ( default value ) بدیم.انواع مختلف Side Effect که کامپوننت های ری اکتی میتونن داشته باشن چی هستن ؟کامپوننت ها در React دو نوع Side Effect میتونن داشته باشن :ساید افکت های بدون Cleanupساید افکت های دارای Cleanupابزار CRA یا همون create-react-app چیست ؟ابزار CRA یا همون create-react-app یک ابزار CLI هست ( Command line interface ) که برای ایجاد پروژه های ری اکت کاربرد داره.توسط دستور زیر میشه از این ابزار برای ساخت پروژه react استفاده کرد :Create-react-app my-appمیشه از AJAX تو پروژه های ری اکتی استفاده کرد ؟بله براحتی ! ما میتونیم از هر کتابخونه ایجکس مثل axios استفاده کنیم.اگه اپیکیشن ری اکت ما کند باشه چیکار باید بکنیم ؟کند بودن اپیکیشن های ری اکتی دلایل زیادی میتونه داشته باشه اما معمولا بخاطر re-render زیادی و غیرضروری هست.برای جلوگیری از re-render اضافی در ری اکت از 2 ویژگی قوی میشه استفاده کرد :memo در ری اکت :ویژگی memo به ما کمک میکنه تا از رندر های غیرضروری جلوگیری کنیم. .PureComponent در ری اکت :درواقع PureComponent تو ری اکت ، از re-render اضافی کامپوننت جلوگیری میکنه. دقت کنید که از این ویژگی فقط تو class Component ها میشه استفاده کرد.ری اکت روتر چیست ؟ ( React Router چیست ؟ )ری اکت روتر یک کتابخانه ی استاندارد برای مدیریت Routing ( روتینگ ) در ری اکت هست. کتابخانه React Router به ما امکان جابجایی بین صفحات/کامپوننت های مختلف رو میده.به کمک این کتابخانه میتونیم url مرورگر رو عوض کنیم و UI مطابق با url رو به کاربر نمایش بدیم ( sync )تقریبا تو همه ی پروژه های ری اکتی از React Router استفاده میشه، پس احتمال اینکه بین سوالات استخدامی react چند سوال React از React Router ازتون بپرسن وجود داره.ویژگی BrowserRouter در ری اکت روتر چیست ؟به کمک BrowserRouter در ری اکت روتر میتونیم یک سیستم روتینگ ( router ) پیاده سازی کنیم. درحقیقت BrowserRouter از history API خود HTML استفاده میکنه ( مثل pushstate , replaceState , postState ) برای اینکه UI نمایش داده شده رو با url مرورگر sync کنه.کامپوننت Routes در ری اکت روتر چیست ؟کامپوننت Routes در ری اکت روتر، تو نسخه 6 ری اکت روتر معرفی شد.در واقع Routes در ریکت یک جایگزین برای Switch محسوب میشه چون بجای اینکه مسیر ها ( route ها ) بر اساس ترتیب انتخاب بشن، بر اساس بهترین تطابق انتخاب میشن.کامپوننت Route در ری اکت روتر چیست ؟کامپوننت Route در ری اکت، یک کامپوننت شرطی هست که از ما یک path و یک UI دریافت میکنه. اگه کاربر به اون path مراجعه کنه ( اون path رو در url مرورگر وارد کنه ) UI ما به کاربر نمایش داده میشه.مثلا ما میخوایم اگ کاربر به آدرس shop رفت ، کامپوننت ShopComponent نمایش داده بشه، این شرط رو کامپوننت Route در ریکت برای ما پیاده سازی میکنه.کامپوننت Link در ری اکت روتر چیست ؟اگه با تگ a تو html کار کرده باشین، میدونیم که تگ a برای ریدایرکت کردن کاربر از صفحه ای به صفحه ی دیگه کاربرد داره. تگ Link هم دقیقا همین نقش رو تو React برای ما ایفا میکنه.به کمک Link در ریکت روتر میتونیم کاربر رو از صفحه ای به صفحه ای دیگه ریدایرکت کنیم.کامپوننت NavLink در ری اکت روتر چیست ؟کامپوننت NavLink در ری اکت روتر مشابه کامپوننت Link هست. با این تفاوت که ما از NavLink در ریکت روتر برای ساختن منو هایی استفاده میکنیم که نیاز به لینک دارن.بطور مثال منوی هدر که شامل لینک صفحات وبلاگ، فروشگاه، تماس با ما و درباره ما میشه.ما همچنین میتونیم ویژگی active رو تو این کامپوننت مدیریت کنیم. یعنی زمانیکه کاربر روی اون لینک کلیک کرد، چه استایلی به اون دکمه بدیم. ( مثلا رنگش فرق کنه با سایر آیتم ها )چرا ما به React Router نیاز داریم ؟ دلیل استفاده از ری اکت روتر چیست ؟ما نیاز به اپیکیشنی داریم که صفحات زیادی داشته باشه ( از دو صفحه تا هزاران صفحه ).همچنین ما میخوایم بین این صفحات جابجا بشیم ( کاربر رو ریدایرکت کنیم ) این جابجایی بین صفحات باید بصورتی انجام بشه که صفحه reload نشه!این توقعات ما، صرفا با کتابخانه ری اکت روتر قابل انجام هست.مهمترین چیزی که باید اینجا به خودمون یادآوری کنیم، این هست که اپیکیشن های ری اکتی، SPA هستن ( single page application ).کلمه SPA یعنی اپیکیشن تک صفحه ای.تو اپیکیشن های SPA ما امکان جابجایی بین صفحات رو نداریم، مگر اینکه از کتابخانه های Routing استفاده کنیم.مزایای ری اکت روتر چیست ؟برای ما client side routing پیاده سازی میکنه تا UI اپیکیشن خودمون رو با URL مرورگر sync کنیم.به ما اجازه میده از کامپوننت Link استفاده کنیم ( بجای تگ a ) و میتونیم کاربر رو بدون reoad شدن ریدایرکت کنیم.به ما اجازه رندر شرطی یک کامپوننت درصورت وجود داشتن آدرس اون کامپوننت در URL رو میده ( path )تفاوت React Router و React Router DOM چیست ؟کتابخانه React Router شامل هسته اصلی سیستم روتینگ هست ولی کتابخانه React Router DOM شامل اجرایی هست که تو ارتباط با DOM بهشون نیاز پیدا میکنیم مثل BrowsweRouter ، Link , NavLink و ..البته که برای استفاده از ری اکت روتر ، باید هم React Router رو نصب کنیم، هم React Router DOM رو.کم پیش میاد که چنین سوالاتی در بین سوالات مصاحبه ریکت شما وجود داشته باشه، اما اگه ازش مطلع باشید 1 هیچ از بقیه جلو ترید 🙂چطور در ری اکت، کاربر رو ریدایرکت کنیم ؟به کمک useNavigate در ریکت میتونیم کاربر رو ریدایرکت کنیم :const Home = () => { const navigate = useNavigate(); return ( <button ={() => { navigate(&quot/shop&quot); }} > اگه رو من کلیک کنی، به صفحه فروشگاه میری. </button> ); };چطور در ری اکت روتر صفحه 404 بسازیم ؟تو کتابخانه React Router، ما یکسری مسیر ( path ) مشخص میکنیم که درصورت وارد شدن اون path ها در URL مرورگر، یکسری کامپوننت که خودمون مشخص کردیم به کاربر نمایش داده بشه.حالا اگه یک مسیر ( Path ) در URL مرورگر وارد بشه که اشتباهه، چه اتفاقی باید بیوفته ؟ منطقا باید یک صفحه 404 به کاربر نمایش داده بشه تا متوجه بشه که آدرس رو اشتباه وارد کرده.<Routes><Route path='*' element={<NotFound />} /><Route path=&quot/&quot element={<Home />} /> element={<Settings />} /> </Routes>حالا که تا اینجا سوالارو خوندی .. :)رفیق تا به اینجای کار بخش اول سوالات مصاحبه react رو باهمدیگه مطالعه کردیم اما سرفصل های زیر هنوز موندن :بخش دوم سوالات مصاحبه ری اکتبخش سوم سوالات مصاحبه ری اکتبخش چهارم سوالات مصاحبه ری اکتبرای خودنن مابقی بخش ها روی لینک سوالات مصاحبه ری اکت کلیک کنید تا در فِرانت اِندی مطالعه کنید. دمت گرم که تا اینجا مطالعه کردی و مطمئنم که اگه بقیه سوالات رو هم مطالعه کنی، با یک تسلط خیلی خیلی خوب به مباحث ری اکت، موقعیت شغلی دلخواهتو میگیری :) فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 20:09:51 +0330 https://virgool.io/@frontendi/%D9%BE%D9%88%D8%B1%D8%AA%D8%A7%D9%84-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-%D9%85%D8%AB%D8%A7%D9%84-%D9%88-%D8%AA%DB%8C%DA%A9%D9%87-%DA%A9%D8%AF-%D8%A7%D8%B2-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-portals-%D8%AF%D8%B1-%D8%B1%DB%8C%DA%A9%D8%AA-cxy35hjcs9be درواقع Portals در ری اکت یکی ویژگی خیلی جالب و کاربردی هست که به ما اجازه میده کامپوننت خودمون رو خارج از سلسله بندی کامپوننت پدر در DOM رندر کنیم. اگه این جمله براتون گنگ بود یا متوجه کاربرد پورتال در ری اکت نشدید، تو این مقاله با ما همراه باشید که میخوایم حسابی Portals در ری اکت رو به همراه تیکه کد و مثال عملی بررسی کنیم 🙂مفهوم Portals در ری اکت چیست ؟درواقع Portals در ری اکت یک روش کاربردی برای render کردن کامپوننت، خارج از سلسه مراتب کامپوننت والد در DOM هست. یعنی ما کامپوننت خودمون رو بدون توجه به سلسه مراتبش داخل DOM قرار میدیم .حالا شاید سوال برامون پیش بیاد که اصلا سلسله مراتب یعنی چی ؟قبل از هرچیز لازمه اشاره کنم که برای درک پورتال در ری اکت، باید درمورد دام مجازی در ری اکت مطالعه کرده باشیم و بدونیم DOM چیه .. ( اگه درمورد دام مجازی اطلاعاتی ندارید، روی لینک آبی رنگ بالا کلیک کنید و مطالعه کنید )موضوع این هست که کامپوننت های ما طبق یک سلسله مراتب مشخص داخل DOM مرورگر قرار میگیرن. سلسله مراتب یعنی هر کامپوننت یک پدر، پدربزرگ، فرزند و .. داره. طبیعی هست که خصوصیات پدر، به فرزند منتقل میشه.گاهی اوغات ما نمیخوایم خصوصیات پدر به فرزند منتقل بشه.این یعنی ما لازم داریم کامپوننت خودمون رو خارج از سلسله مراتب اون کامپوننت داخل DOM قرار بدیم. در چنین مواقعی باید از Portals در ری اکت استفاده کنیم.کاربرد Portals در ری اکت کجاست ؟ما اشاره کردیم که در React کامپوننت های فرزند، خصوصیات و ویژگی های کامپوننت پدرشون رو به ارث میبرن. مثلا اگه کامپوننت پدر 400px طول داشته باشه، کامپوننت فرزند نمیتونه بیشتر از 400px باشه.حالا اگه ما لازم داشته باشیم که کامپوننت فرزند رو بصورت 800px نمایش بدیم باید چیکار کنیم ؟راه حل استفاده از پورتال در React هست چون بدون در نظر گرفتن سلسه مراتبِ اون کامپوننت، کامپوننت رو داخل DOM رندر میکنه.اینجوری کامپوننت ما دیگه خصوصیات کامپوننت پدرش رو به ارث نمیبره.این مثال معمولا برای Modal ( مودال )، منو های پاپ آپ، نوتیفیکیشن ها و .. کاربرد داره چون ما میخوایم این موارد استایل های پدر خودشون رو به ارث نبرن.چطور میشه Portals در ریکت ساخت ؟نحوه ساخت Portals در React بصورت زیر هست :ReactDOM.createPortal(child, container)تابع createPortal، ساخت پورتال رو برای ما انجام میده. این تابع 2 آرگومان ورودی از ما میگیره:آرگومان اول همون کامپوننت ماست که میخوایم خارج از سلسه مراتب render بشه ( مثل مودال )آرگومان دوم یک اِلِمان هست که میخوایم کامپوننت ما داخل این اِلِمان رندر بشه ( ما باید این اِلِمان رو بسازیم، در ادامه میبینیم که چطور این اِلِمان رو میسازیم )استفاده از Portals در ری اکت !بیاید یه مثال عملی در مورد پورتال در ریکت رو باهمدیگه بررسی کنیم ..تو مثال زیر من یک مودال ساده ساختم :export const Modal = (props) => { let { children, close, ...rest } = props; if (!children) { children = <p>This is a example modal</p>; } return ( <div id=&quotmodal-dialog&quot {...rest}> <div className=&quotflex flex-col justify-center items-center&quot> {children} <button ={close}> Close this modal </button> </div> </div> );};کامپوننت من چندین Props میگیره که کمک میکنن بتونیم کامپوننت خودمون رو کنترل کنیم مثل تابع close برای بستن مودال و children.و فایل css کامپوننت بالارو بصورت زیر ایجاد میکنیم :* { font-size: 62.5%; font-family: &quotRoboto" margin: 0; padding: 0;}#App { overflow: hidden; height: 20vh; background-color: #ccc;}#App > h1 { font-size: 2rem;}div#modal-dialog { background-color: rgba(0, 0, 0, 0.8); position: fixed; z-index: 999; height: 100vh; width: 100vw; top: 0; left: 0; display: flex; align-items: center; justify-content: center;}div#modal-dialog > div { background-color: #f5f5f5; padding: 2rem; border-radius: 1.2rem;}p { margin: 1.4rem 0; font-size: 1.5rem;}button { padding: 1rem; border-radius: 1rem; border: none; background-color: #9b59b6; color: #fff; cursor: pointer; transition: all 0.3s ease-in-out;}button:hover { background-color: #8e44ad;}.flex { display: flex;}.flex-col { flex-direction: column;}.flex-row { flex-direction: row;}.justify-center { justify-content: center;}.items-center { align-items: center;}تا به اینجای کار فقط یک مودال ساده درست کردیم.ما میدونیم که تو ری اکت، اپیکیشن ما داخل یک div با آیدی root رندر میشه. حالا من به فایل index.html میرم و یک div جدید با آیدی modals درست میکنم. این دو div باید رابطه خواهر برادری داشته باشن، دقیقا مثل زیر :<!DOCTYPE html><html lang=&quoten&quot> <head> <meta charset=&quotutf-8&quot /> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1, shrink-to-fit=no&quot /> <meta name=&quottheme-color&quot content=&quot#000000&quot /> <link rel=&quotmanifest&quot href=&quot%PUBLIC_URL%/manifest.json&quot /> <link rel=&quotshortcut icon&quot href=&quot%PUBLIC_URL%/favicon.ico&quot /> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id=&quotroot&quot></div> <div id=&quotmodals&quot></div> <script data-no-optimize=&quot1&quot>!function(t,e){&quotobject&quot==typeof exports&&&quotundefined&quot!=typeof module?module.exports=e():&quotfunction&quot==typeof define&&define.amd?define(e):(t=&quotundefined&quot!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){&quotuse strict"function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a=&quotLazyLoad::Initialized&quot,i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent(&quotCustomEvent&quot)).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?&quot &quot:&quot&quot)+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp(&quot(^|\\s+)&quot+e+&quot(\\s+|$)&quot),&quot &quot).replace(/^\s+/,&quot&quot).replace(/\s+$/,&quot&quot)}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)&quotSOURCE&quot===e.tagName&&n.push(e);return n}function m(t,e){(t=t)&&&quotPICTURE&quot===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a=&quotVIDEO&quot===t.tagName?&quotloadeddata&quot:&quotload"C(t,a,e),C(t,&quoterror&quot,n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement(&quotIMG&quot),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url(&quot'.concat(r,'&quot)'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute(&quotloading&quot,&quotlazy&quot),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||&quotIMG&quot===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,&quotentered&quot),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&&quotloading&quotin HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+&quotpx&quot}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener(&quotonline&quot,function(){Y(n,a)}),this.update(e)}var Z=&quotundefined&quot!=typeof window,tt=Z&&!(&quotonscroll&quotin window)||&quotundefined&quot!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&&quotIntersectionObserver&quotin window,nt=Z&&&quotclassList&quotin document.createElement(&quotp&quot),at=Z&&1<window.devicePixelRatio,it={elements_selector:&quot.lazy&quot,container:tt||Z?document:null,threshold:300,thresholds:null,data_src:&quotsrc&quot,data_srcset:&quotsrcset&quot,data_sizes:&quotsizes&quot,data_bg:&quotbg&quot,data_bg_hidpi:&quotbg-hidpi&quot,data_bg_multi:&quotbg-multi&quot,data_bg_multi_hidpi:&quotbg-multi-hidpi&quot,data_poster:&quotposter&quot,class_applied:&quotapplied&quot,class_loading:&quotlitespeed-loading&quot,class_loaded:&quotlitespeed-loaded&quot,class_error:&quoterror&quot,class_entered:&quotentered&quot,class_exited:&quotexited&quot,unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot=&quotsrc&quot,rt=&quotsrcset&quot,ct=&quotsizes&quot,lt=&quotposter&quot,st=&quotllOriginalAttrs&quot,ut=&quotloading&quot,dt=&quotloaded&quot,ft=&quotapplied&quot,_t=&quoterror&quot,vt=&quotnative&quot,gt=&quotdata-&quot,bt=&quotll-status&quot,pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=[&quotIMG&quot,&quotIFRAME&quot,&quotVIDEO&quot],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=[&quotIMG&quot,&quotIFRAME&quot,&quotVIDEO&quot];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){&quotuse strict"function a(){t.body.classList.add(&quotlitespeed_lazyloaded&quot)}function n(){console.log(&quot[LiteSpeed] Start Lazy Load Images&quot),d=new LazyLoad({elements_selector:&quot[data-lazyloaded]&quot,callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener(&quotload&quot,n,!1):e.attachEvent(&quotonload&quot,n)}(window,document);</body></html>اگه کد بالا هم ریختس، بخاطر ویرگوله. لطفا همین مقاله رو در فِرانت اِندی مطالعه کنید تا بهم ریخته نباشه.اگه به خط 19 دقت کنیم، میبینیم که یک div جدید با آیدی modals داریم که خارج از div اپیکیشن با آیدی root هست!یعنی هرچیزی که داخل div دوم قرار بگیره، خارج از سلسه مراتب div اول هست و خصوصیات اون رو به ارث نمیبره!حالا بریم فایل App.js رو بسازیم :import { useState } from &quotreact"import ReactDOM from &quotreact-dom"import { Modal } from &quot./Components/Modal"import &quot./styles.css"const domElement = document.getElementById(&quotmodals&quot);export default function App() { const [stateModal, setStateModal] = useState(false); const openModal = () => setStateModal(true); const closeModal = () => setStateModal(false); return ( <div id=&quotApp&quot className=&quotflex flex-col justify-center items-center&quot> <h1>Portals Example</h1> <div className=&quotflex flex-col items-center justify-center&quot> <p>This is a div with a defined height and overflow hidden</p> <button ={openModal}> Open modal </button> </div> {stateModal && ReactDOM.createPortal( <Modal close={closeModal}> <p>Modal from App.js</p> </Modal>, domElement )} </div> );}تو خط 3 ما Modal خودمون رو فراخوانی کردیم و در خط 6 تونستیم به div خودمون که آیدی portals داشت، دسترسی پیدا کنیم. ( همون اِلِمانی که میخوایم Portals رو داخلش قرار بدیم )همچنین در خط 9 یک state برای مشخص کردن باز یا بسته بودن modal درست کردیم.اما مهمترین بخش تیکه کد بالا، در خط 22 وجود داره. ما یک شرط گذاشتیم ( شرط باز بودن مودال بر اساس State ) و گفتیم زمانیکه این state مقدار True داشت یک portal جدید بساز.ساختن portal جدید به کمک ReactDOM انجام میشه. تابع createPortal از ما 2 آرگومان میگیره :آرگومان اول همون چیزی هست که میخوایم داخل پورتال render کنیم و نمایش بدیم.آرگومان دوم اِلِمان Portal ما هست، اگه به خط 6 دقت کنیم میبینیم که این اِلِمان رو تعریف کردیم.در حقیقت، کل ماجرای Portals در React تو تیکه کد زیر نهفته شده :{stateModal && ReactDOM.createPortal( <Modal close={closeModal}> <p>Modal from App.js</p> </Mode>, domElement)}ما طبق یک شرط، یک Portals در ری اکت ساختیم و نمایش دادیم.ساخت پورتال در React به همین سادگی امکانپذیره 🙂نتیجه تیکه کد های بالا این هست که کامپوننت Modal ما خارج از سلسله مراتب کل اپیکیشن ما ( بیرون div با آیدی root ) رندر میشه.کاربرد اصلی پورتال در ری اکت چیست ؟لطفا برای مطالعه ادامه مقاله روی لینک زیر کلیک کنید :آموزش Portals در ری اکت فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 15:23:45 +0330 https://virgool.io/@frontendi/%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2-%D9%87%D9%88%DB%8C%D8%AA-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%87%D8%B1%DA%86%DB%8C%D8%B2%DB%8C-%DA%A9%D9%87-%D8%A7%D8%B2-authentication-%D8%AF%D8%B1-react-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-z60dxfygnoxs احراز هویت در ری اکت یکی از مهمترین مفاهیمی هست که هر توسعه دهنده React باید بهش مسلط باشه و به بهترین شکل ممکن اون رو پیاده سازی کنه. تو این مقاله میخوایم مفهوم Authorization و Authentication در ری اکت رو بررسی کنیم.ما باید از کاربران خودمون نام کاربری و پسورد بگیریم و اگه اطلاعاتشون درست بود، به صفحاتی مثل داشبورد منتقلشون کنیم.همچنین باید از ورود کاربران احراز نشده به برخی صفحات جلوگیری کنیم. ( یعنی گارد در ری اکت )تو این مقاله میخوایم بهترین و حرفه ای ترین روش احراز هویت در React رو باهمدیگه بررسی کنیم و یاد بگیریم 🙂شروع احراز هویت در ریکت با ایجاد پروژهبرای اینکه بتونیم مبحث Authentication در React رو یادبگیریم، لازمه یک پروژه ری اکتی ایجاد کنیم تا این مبحث رو بصورت عملی باهمدیگه بررسی کنیم. با دستور زیر میتونیم یک پروژه ری اکتی ایجاد کنیم :npm create vite@latest your-project-name -- --template reactو سپس به کمک دستور زیر میتونیم پروژه خودمون رو اجرا کنیم :npm run devساخت کامپوننت Login ( جهت ورود کاربران )ما میخوایم یک کامپوننت به اسم Login درست کنیم که پروسه ورود کاربران رو انجام میده. این کامپوننت شامل دو Input ( یک فیلد ایمیل و یک فیلد پسورد ) میشه.زمانیکه کاربر email و password خودش رو وارد میکنه، اطلاعات وارد شده داخل State تعریف شده در خط 5 ذخیره میشه.سپس زمانیکه کاربر روی دکمه “ورود” کلیک میکنه، تابع handleSubmitEvent اجرا میشه.import { Button, Input } from &quotantd"import { useState } from &quotreact"const Login = () => { const [input, setInput] = useState({ username: &quot&quot, password: &quot&quot, }); const handleSubmitEvent = (e) => { e.preventDefault(); if (input.username !== &quot&quot && input.password !== &quot&quot) { //dispatch action from hooks } alert(&quotplease provide a valid input&quot); }; const handleInput = (e) => { const { name, value } = e.target; setInput((prev) => ({ ...prev, [name]: value, })); }; return ( <form ={handleSubmitEvent} style={{direction:'rtl',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}> <div className=&quotform_control&quot> <label htmlFor=&quotuser-email&quot>ایمیل:</label> <Input style={{width:'200px'}} type=&quotemail&quot id=&quotuser-email&quot name=&quotemail&quot placeholder=&quotFrontEndi.com@gmail.com&quot aria-describedby=&quotuser-email&quot aria-invalid=&quotfalse&quot ={handleInput} /> </div> <div className=&quotform_control&quot> <label htmlFor=&quotpassword&quot>پسورد:</label> <Input style={{width:'200px'}} type=&quotpassword&quot id=&quotpassword&quot name=&quotpassword&quot aria-describedby=&quotuser-password&quot aria-invalid=&quotfalse&quot ={handleInput} /> </div> <Button className=&quotbtn-submit&quot>ورود</Button> </form> );};export default Login;تو کامپوننت بالا من از کتابخانه Antd استفاده کردم اما شما میتونید ازش استفاده نکنید ضمنا اگه علاقه داشتید میتونید از آموزش کتابخانه Ant Design برای یادگیری این کتابخونه مفید و قدرتمند استفاده کنید. خروجی کامپوننت بالا بصورت زیر هست :ساخت AuthContext و AuthProvider برای احراز هویت در React !ما از Context API برای این استفاده میکنیم که به یکسری State گلوبال که تو کل اپیکیشن بهشون نیاز داریم، دسترسی داشته باشیم. در حقیقت ما نیاز داریم که اطلاعات کاربر احراز شده رو در یک State گلوبال ذخیره کنیم و از کل اپیکیشن بهش دسترسی داشته باشیم.اگه با خود Context آشنا نیستید، حتما پیشنهاد میکنم مقاله useContext در ری اکت رو مطالعه کنید.ما میخوایم اطلاعات کاربر احراز شده ( Login شده ) رو ذخیره کنیم و در کامپوننت ها و صفحات مختلف بهش دسترسی داشته باشیم. حالا شاید بپرسیم چرا دسترسی داشته باشیم؟مثلا تو کامپوننت هدر میخوایم نام و میزان موجودی کیف پول کاربر رو نشون بدیم یا تو برخی صفحات چک کنیم که کاربر وارد شده کی هست و اگه وارد نشده بود، کاربر رو logout کنیم.برای اینکار من یک فایل به اسم AuthProvider.js میسازم و داخلش یک Context به اسم AuthContext درست میکنم :import { useContext, createContext } from &quotreact"const AuthContext = createContext();const AuthProvider = ({ children }) => { return <AuthContext.Provider>{children}</AuthContext.Provider>;};export default AuthProvider;export const useAuth = () => { return useContext(AuthContext);};تو خط 2 تیکه کد بالا من یک Context ساختم. تو خط 10 نیز یک Custom Hook ساختم که بتونم از این Context خیلی راحت تر استفاده کنم و پروسه احراز هویت کاربر برای ما آسون تر مدیریت بشه.تو خط 4 تیکه کد بالا ما AuthProvider رو ساختیم تا کل اپیکیشن خودمون رو داخل این HOC بندازیم. اینجوری تمام صفحات و کامپوننت های ما از این Logic استفاده میکنن ( منظورم Logic احراز هویت هست )البته تیکه کد بالا کامل نیست و در ادامه کاملترش میکنم.حالا باید AuthProvider خودمون که ساختیم رو دور کل اپیکیشن خودمون بندازیم، یعنی وارد فایل App.js یا main.js خودمون بشیم و بصورت زیر عمل کنیم :import AuthProvider from "./hooks/AuthProvider";function App() { return ( <div className="App"> <AuthProvider>{/* App content */}</AuthProvider> </div> );}export default App;حالا Logic ما ( احراز هویت در ری اکت ) تو کل اپیکیشن ری اکتی ما قابل استفادس!اما ما هیچ تابعی برای مدیریت پروسه Login و Logout ( ورود و خروج کاربر ) نداریم!تکمیل پروسه Authentication در ری اکتبرای تکمیل پروسه احراز هویت در ری اکت لازمه که 2 تابع برای ورود و خروج کاربر ایجاد کنیم. برای اینکار وارد فایل AuthProvider میشیم و این 2 تابع رو ایجاد میکنیم :import { useContext, createContext, useState } from &quotreact"import { useNavigate } from &quotreact-router-dom"const AuthContext = createContext();const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [token, setToken] = useState(localStorage.getItem(&quotsite&quot) || &quot&quot); const navigate = useNavigate(); const loginAction = async (data) => { try { const response = await fetch(&quotyour-api-endpoint/auth/login&quot, { method: &quotPOST&quot, headers: { &quotContent-Type&quot: &quotapplication/json&quot, }, body: JSON.stringify(data), }); const res = await response.json(); if (res.data) { setUser(res.data.user); setToken(res.token); localStorage.setItem(&quotsite&quot, res.token); navigate(&quot/dashboard&quot); return; } throw new Error(res.message); } catch (err) { console.error(err); } }; const logOut = () => { setUser(null); setToken(&quot&quot); localStorage.removeItem(&quotsite&quot); navigate(&quot/login&quot); }; return ( <AuthContext.Provider value={{ token, user, loginAction, logOut }}> {children} </AuthContext.Provider> );};export default AuthProvider;export const useAuth = () => { return useContext(AuthContext);};تو خط 10 ما تابع loginAction رو ساختیم و میخوایم این تابع رو در صفحه Login زمانیکه کاربر نام کاربری و پسورد خودش رو وارد کرد صدا بزنیم. این تابع یک data به عنوان آرگومان ورودی میگیره.این data همون نام کاربری و پسوردی هست که کاربر در صفحه ورود وارد میکنه.تو خط 12 ما API خودمون که مرتبط با Login هست رو صدا میزنیم ( POST ) و نام کاربری و پسورد وارد شده توسط کاربر رو به API میفرستیم. سرور این اطلاعات رو بررسی میکنه ببینه درست هستن یا خیر.اگر اطلاعات وارد شده توسط کاربر صحیح بود، در Response برای ما یک token و اطلاعات کاربر احراز شده رو میفرسته.ما این اطلاعات رو در خط 21 و 22 داخل State خودمون ذخیره میکنیم. همچنین در خط 23 این اطلاعات رو داخل localstorage ذخیره میکنیم تا با رفرش شدن صفحه پاک نشن.تو خط 24 هم کاربر احراز هویت شده رو به آدرس dashboard/ ریدایرکت میکنیم.همچنین تو خط 33 تابع logOut رو ساختیم که پروسه خروج کاربر رو مدیریت میکنه. این تابع اطلاعات کاربر داخل State و localstorage رو پاک میکنه و کاربر رو به صفحه login/ ریدایرکت میکنه.و این عالیه 🙂الان دیگه هرموقع نیاز داشتیم میتونیم از تابع loginAction برای ورود کاربر و از تابع logOut برای خروج کاربر تو اپیکیشن خودمون استفاده کنیم، اما این تمام ماجرای احراز هویت در React نیست!محافظت از آدرس ها با Authorization در ری اکت!ما تو پروژه ری اکتی خودمون Route های خیلی زیادی داریم که باید ازشون محافظت کنیم ( Protecting Routes )منظورم از محافظت این هست به کاربرانی که احراز هویت نشدن، اجازه نمایش اون صفحات رو ندیم!در حقیقت ما باید یک Guard ( گارد ) بسازیم. برای اینکار من یک کامپوننت به اسم PrivateRoute میسازم.لطفا برای مطالعه ادامه آموزش Authentication در react روی لینک زیر کلیک کنید :آموزش Authentication در react فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 15:17:43 +0330 https://virgool.io/@frontendi/%DA%AF%D8%B1%D8%A7%D9%81-%DA%A9%DB%8C%D9%88-%D8%A7%D9%84-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B7%D9%88%D8%B1-%D8%A7%D8%B2-graphql-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-dfg7oi9hmfrf گراف کیو ال یک زبان پرس و جو یا همون Query Language برای API ها محسوب میشه. مزیت GraphQL این هست که ما به عنوان Front-End Developer میتونیم مشخص کنیم که دقیقا به چه اطلاعاتی از یک API نیاز داریم! همین موضوع باعث میشه که اطلاعات غیرضروری بین سرور و کلاینت رد و بدل نشه 🙂البته این کل مزیت GraphQL نیست!اگه Front-End Developer هستی ولی هنوز نمیدونی GraphQL چیست و چه کاربردی در ری اکت و فرانت اند داره، تو این مقاله با فِرانت اِندی همراه باش 🙂گراف کیو ال چیست ؟ GraphQL چیست ؟گراف کیو ال یک Query Language ( زبان پرس و جو ) برای API در فرانت اند به حساب میاد که به ما اجازه میده مشخص کنیم که دقیقا به چه اطلاعاتی از هر API نیاز داریم، با انجام اینکار اطلاعات اضافه و بلااستفاده برای ما ارسال نخواهد شد.در حقیقت GraphQL میتونه عملیات دریافت داده ( fetching data ) و دستکاری اون اطلاعات رو برای ما انجام بده و مدیریت کنه.گراف کیو ال به صورتی طراحی شده که API ها خیلی خیلی سریعتر و انعطاف پذیرتر باشن.این یعنی ما به عنوان یک Developer تجربه و حس خیلی بهتری درنتیجه کار با GraphQL در فرانت اند خواهیم داشت.یکی از نکات مثبت GraphQL متن باز بودن ( open source بودنش ) هست.گراف کیو ال در ری اکت درواقع GraphQL در ری اکت قابلیت استفاده داره و اتفاقا کمک میکنه اپیکیشن ری اکتی ما کارایی و انعطاف پذیری خیلی خیلی بیشتری از خودش نشون بده.اما باید در جریان این موضوع باشیم که از GraphQL با هر زبان، کتابخانه یا فریمورکی میتونیم استفاده کنیم.کتابخانه Apollo Client چیست ؟کتابخانه Apollo Client یک کتابخانه مدیریت وضعیت ( State Management ) هست که برای اپیکیشن های جاوااسکریپتی که از GraphQL استفاده میکنن، کاربرد داره. تو این مقاله ما از Apollo Client + GraphQL استفاده خواهیم کرد 🙂حالا شاید بپرسیم مزایای Apollo Client چیه ؟یک Data Fetcher قدرتمند هست :آپولو کلاینت قابلیت دریافت اطلاعات از سرور رو داره. در حقیقت این کار رو خیلی ساده و بهینه برای ما انجام میدهقابلیت کش ( cash ) اطلاعات دریافتی رو داره :آپولو کلاینت قابلیت کش و ذخیره سازی اطلاعات دریافت شده از سرور رو داره.این یعنی بصورت خودکار اطلاعات دریافت شده رو ذخیره میکنه تا در دفعات بعد، از همون اطلاعات کش شده استفاده کنه.یک State Management به حساب میاد و قابلیت مدیریت داده های لوکال رو داره :خود Apollo Client یک Local State Management داره و درصورت نیاز میتونیم از این ویژگی کلیدیش هم استفاده کنیم.قابلیت شخصی سازی خیلی زیادی داره :ما میتونیم بر اساس نیاز پروژه خودمون، Apollo Client رو شخصی سازی کنیم تا انتظار بهترین عملکرد ممکن رو ازش داشته باشیم.مثل شخصی سازی نحوه درخواست به سرور، شخصی سازی سیستم کش، شخصی سازی ارور ها و ..ابزار های دیباگ داره :اگه از Apollo Client استفاده کنیم، میتونیم از ابزار های Debugging اون مثل Apollo Studio استفاده کنیم که ویژگی هایی مثل بررسی عملکرد کش، مانیتور وضعیت شبکه و .. رو اختیار ما میزاره.جامعه آماری خوب و فعالی داره:آپولو کلاینت یک جامعه آماری خوب و قوی داره که باعث شده برای این ابزار آموزش ها، مستندات، پرسش و پاسخ ها و افزودنی های خیلی زیادی وجود داشته باشه.استفاده از GraphQL در ری اکتبرای اینکه بتونیم از GraphQL در ری اکت استفاده کنیم، باید یک پروژه ری اکتی بسازیم و 2 پکیج زیر که مربوط به خود GraphQL در ری اکت هستن رو نصب کنیم :graphql@appolo/clientنصب این 2 پکیج رو با دستور زیر میتونیم انجام بدیم :npm install @apollo/client graphqlحالا باید یک سرور GraphQL داشته باشیم که بتونه با کلاینت ارتباط برقرار کنه و API های مارو مدیریت کنه. اگه Back-End Developer این سرور رو در اختیار شما گذاشت که هیچ. در غیر اینصورت میتونیم به کمک ابزار هایی مثل Apollo Server یا Express GraphQL یک سرور GraphQL بسازیم.سپس باید یک فایل با نام ApolloProvider.js بسازیم تا بتونیم Appolo Client خودمون رو کانفیگ کنیم.تو تیکه کد زیر، من این فایل رو ساختم :import React from 'react';import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';const client = new ApolloClient({ uri: 'http://our-graphql-api-endpoint', // اینجا باید آدرس اِند پوینت خودمون رو بنویسیم cache: new InMemoryCache(),});const ApolloAppProvider = ({ children }) => { return <ApolloProvider client={client}>{children}</ApolloProvider>;};export default ApolloAppProvider;حالا که فایل ApolloProvider.js رو ساختیم، باید وارد فایل App.js بشیم و ApolloProvider رو به عنوان Wrapper کل اپیکیشن خودمون در نظر بگیریم :import React from 'react';import ApolloAppProvider from './ApolloProvider';const App = () => { return ( <ApolloAppProvider> {/* هرچی کامپوننت، روتینگ یا .. داریم */} </ApolloAppProvider> );};export default App;و تمام 🙂حالا میتونیم از قابلیت ها و ویژگی های GraphQL در ری اکت استفاده کنیم.مثلا تو مثال زیر، من از سرور خودم Data دریافت کردم:import React from 'react';import { gql, useQuery } from '@apollo/client';const GET_USERS = gql` query GetUsers { users { id name email } }`;const UserList = () => { const { loading, error, data } = useQuery(GET_USERS); if (loading) return <p>Loading...</p>; if (error) return <p>Error :(</p>; return ( <ul> {data.users.map((user) => ( <li key={user.id}> {user.name} - {user.email} </li> ))} </ul> );};export default UserList;مثال بالا خیلی ساده، چگونگی دریافت اطلاعات از سرور به کمک GraphQL رو به ما آموزش میده.تو مثال بالا تونستیم از GraphQL در ریکت استفاده کنیم. ( به کمک Apollo Client )حالا لازمه که چند نکته مهم در مورد GraphQL در فرانت اند رو باهمدیگه بررسی کنیم و یاد بگیریم ..مزایای GaphQL لطفا برای مطالعه ادامه این مقاله روی لینک زیر کلیک کنید :آموزش GraphQL در ری اکت فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 15:09:13 +0330 https://virgool.io/@frontendi/%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-zustand-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%DB%8C%DA%A9-state-management-%D9%82%D8%AF%D8%B1%D8%AA%D9%85%D9%86%D8%AF-%D9%88-%D8%B3%D8%A7%D8%AF%D9%87-kqe9bcsd5t9c کتابخانه Zustand یک State Management قدرتمند ولی ساده و باحاله که یادگیریش خیلی خیلی آسونه! بر خلاف State Management هایی مثل ریداکس که خیلی پیچیده هستن و یادگیری سختی دارن، کتابخانه Zustand تو کمتر از چند دقیقه کانفیگ میشه و خیلی خیلی سادس 🙂پس اگه شما هم مثل من با Redux حال نمیکنید و دمبال یک State Management قدرتمند ولی ساده و دوست داشتنی میگردید، کتابخانه Zustand همون چیزیه که دمبالش میگردیم 🙂بیاید بریم ببینیم کتابخانه Zustand در ری اکت چیست و به چه دردی میخوره …کتابخانه Zustand چیست ؟کتابخانه Zustand یک State Management سبک، قدرتمند و ساده برای مدیریت State در کامپوننت های ری اکتی هست.کار کردن با کتابخانه Zustand در ری اکت خیلی خیلی آسونه و همین باعث شده که با ریداکس و امثال اون خداحافظی کنیم و بریم سراغ Zustand در ریکت 🙂کتابخانه Zustand یه عالمه هوک کاربردی در اختیار ما گذاشته که باعث شده خیلی بهینه تر و ساده تر بتونیم State های اپیکیشن خودمون رو مدیریت کنیم.صادقانه بخوام بگم، کتابخانه Zustand ارزش یادگیری داره، اما بیاید یه چندتا آمار باحال درمورد این کتابخانه باهمدیگه بببنیم :2.5 میلیون بار در هفته دانلود میشه و این آمار به سرعت درحال رشده !مجموعا 118 میلیون بار دانلود شده !بشدت سبکه ( حجم کل باندل این کتابخانه فقط 1.2 کیلوبایت هست ! )40 هزار ستاره تو گیتهاب دریافت کرده !بریم یکم کد بزنیم و ببینیم چطور میشه از کتابخانه Zustand در ری اکت برای مدیریت State استفاده کرد ..آموزش کتابخانه Zustand در ری اکتما میخوایم یک اپیکیشن ری اکتی بسازیم و کتابخانه Zustand رو در اون نصب کنیم، سپس مباحث اولیه Zustand رو باهمدیگه یاد بگیریم و تمرین کنیم.برای اینکار من یک اپیکیشن ری اکتی به کمک دستور زیر میسازم :npx create-react-app my-appاگه با create-react-app حال نمیکنید، پیشنهاد میکنم نصب ری اکت با Vite رو امتحان کنید چون ابزار Vite بشدت سریعه !حالا که ری اکت رو نصب کردیم، باید کتابخانه Zustand رو نصب کنیم ( یا با npm این کار رو میکنیم یا با yarn ) :npm install zustandخب عالیه 🙂ما تونستیم کتابخانه Zustand در ری اکت رو نصب کنیم، حالا برای بررسی قابلیت ها و ویژگی های کتابخانه Zustand در React من یک Counter ( شمارنده ) میسازم. این Counter شامل 2 دکمه + و – برای کم و زیاد کردن عدد ذخیره شده هست.میخوام خروجی اینطوری باشه :برای اینکه کامپوننت بالارو بسازم، از کد زیر استفاده میکنم :export const Counter = () => { return ( <div> <button>+</button> {123} <button>-</button> </div> )}حالا برای اینکه کامپوننت خودمون رو بتونیم ببینیم، باید تو کامپوننت App فراخوانیش کنیم :function App() { return ( <div className=&quotApp&quot> <header className=&quotApp-header&quot> <Counter /> </header> </div> );}ساخت Store در کتابخانه Zustand برای ذخیره کردن State ها !اگه با Redux آشنا باشیم، میدونیم که تو State Management ها یک مفهومی داریم به اسم Store که محل ذخیره کردن State های ماست!در حقیقت Store مثل یک انبار هست که داده های مارو ذخیره میکنه.برای اینکه تو کتابخانه Zustand یک Store بسازیم باید یک فایل با نام دلخواه ( مثلا Store.js ) ایجاد کنیم و از تیکه کد زیر برای ساخت Store استفاده کنیم :import {create} from &quotzustand"export const useCounterStore = create(() => ( {number: 123}))تو تیکه کد بالا من تابع create رو از کتابخانه Zustand فراخوانی کردم که عملیات ساخت Store رو برای من انجام میده.اسم Store خودم رو useCounterStore گذاشتم و هرچیزی که داخل این Store میخوام ذخیره کنم رو مشخص کردم ( در خط 4 )من یک number با مقدار پیشفرض 123 داخلش قرار دادم.حالا چطور میتونیم از این Store استفاده کنیم و مقدار ذخیره شده داخلش رو به کاربر نمایش بدیم ؟تو تیکه کد زیر من Store خودم رو فراخوانی کردم و خیلی ساده number رو به کاربر نمایش دادم :import {useCounterStore} from &quot./store"export const Counter = () => { const counterNumber = useCounterStore(state => state.number) return ( <div> <button>+</button> {counterNumber} <button>-</button> </div> )}کد بالا انقدر واضحه که اصلا نیازی به توضیح نداره 🙂 کتابخانه Zustand واقعا ساده و دوست داشتنیه 🙂تو خط 1 من Store خودم رو فراخوانی کردم. در خط 4 مقدار number رو از داخل Store بیرون کشیدم و داخل یک متغیر با نام counterNumber ریختم.در نهایت این متغیر رو در خط 8 به کاربر نمایش دادم.تا به اینجای کار تونستیم یک Store بسازیم و یک State ( که عدد بود ) داخلش ذخیره کنیم و به کاربر نمایش بدیم.اما ما نیاز داریم این State رو تغییر بدیم و مقدارش رو کم و زیاد کنیم ( زمانیکه روی دکمه + و – کلیک میکنیم )افزایش شمارنده با کلیک روی دکمه +تو ادامه مقاله میخوایم برای اپیکیشن خودمون دکمه + ( شمارنده ) و - ( کاهنده ) بسازیم و روش ساخت Async Action رو در کتابخانه Zustand یاد بگیریم . همچنین یادمیگیریم چطور میشه State های مرتبط باهمدیگه رو در فایلهای جدا از هم قرار بدیم. درنهایت به بررسی مزایا و معایب Zustand در ری اکت میپردازیم :) پس لطفا روی لینک زیر کلیک کنید تا ادامه مقاله رو بصورت رایگان و کامل در فِرانت اِندی بخونیم :کتابخانه Zustand در React فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 14:37:24 +0330 https://virgool.io/@frontendi/%D9%88%D8%A8-%D9%BE%DA%A9-webpack-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-webpack-%D8%AF%D8%B1-react-%DA%86%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AF%D8%A7%D8%B1%D9%87-o2rjscobkc57 وب پک ( webpack ) در ری اکت یک ماژول باندلر به حساب میاد که وظیفه مدیریت و باندل کردن ( یا همون پک کردن ) Dependencies های پروژه ری اکتی مارو به عهده داره. میشه اینجوری گفت که webpack در ری اکت میاد تمام فایلهای پروژه مثل فایلهای js ،css،  تصاویر و .. رو به یک فایل واحد تبدیل میکنه ( پک میکنه ).با انجام اینکار مرورگر خیلی راحت تر میتونه با دانلود 1 فایل به تمام فایلهای مورد نیاز اپیکیشن ما دسترسی داشته باشه.البته تو این 2 پاراگراف خیلی خلاصه webpack رو معرفی کردیم ..اگه میخواین کاربرد وب پک در ری اکت رو بدونین، تو این مقاله با فِرانت اِندی همراه باشین 🙂وب پک ( webpack ) چیست ؟وب پک یک ماژول باندلر ( module bundler ) برای اپیکیشن های پیشرفته جاوااسکریپتی به حساب میاد که تمام فایلهای پروژه رو به یک فایل واحد ( bundle.js ) تبدیل میکنه.اگه بخوایم بگیم در پشت صحنه وب پک در ری اکت چه اتفاقی میوفته، میشه گفت که webpack در ری اکت یک نقشه از وابستگی ماژول ها ( پکیج ها ) برای خودش درست میکنه.علاوه بر این، وب پک در ری اکت به ما اجازه میده از loader ها و پلاگین های مختلف برای موارد مختلف مثل minification، linting یا hot module استفاده کنیم.  معمولا تو پروژه هایی که با ری اکت توسعه میدیم، از webpack در فاز development استفاده میکنیم.در نهایت هم برای اینکه از پروژه خودمون Build بگیریم و به فاز production بریم، میتونیم از وب پک در ریکت کمک بگیریم. ( برای Build گرفتن )برای شروع استفاده از webpack در ری اکت میتونیم یک مسیر ( path ) به webpack بدیم. این مسیر معمولا entry point پروژه ما هست مثل فایل index.js یا main.js  …پس از انجام اینکار، وب پک شروع به جستجو و بررسی پروژه ما میکنه.اینکه میگیم جستجو میکنه یعنی میاد تمام مواردی که بهش مروبط هست رو آنالیز میکنه ( مواردی مثل فایلهای require، import ، css ها ، URL ها، تصاویر، فونت ها و .. )در حقیقت میاد و وابستگی های پروژه مارو پیدا میکنه تا بتونه فایل bundle.js رو بسازه.حالا شاید سوال برامون پیش بیاد که webpack در ریکت چیکار میکنه؟وب پک چیکار میکنه ؟اگه بخوایم خلاصه بگیم که webpack در ری اکت دقیقا چیکار میکنه میتونیم به موارد زیر اشاره کنیم :منابع پروژه مارو باندل ( پک ) میکنه.به کمک Babel اجازه میده که از جدیدترین ویژگی های جاوااسکریپت استفاده کنیم ( حتی در مرورگر های قدیمی )یک web server در زمان توسعه اپیکیشن و پروژه در اختیار ما میزارهکد های بلااستفاده پروژه رو حذف میکنهخب دیگه مباحث مقدماتی کافیه، بریم سراغ اصل مطلب 🙂وب پک در ری اکت شامل چه مواردی میشه ؟چند مفهوم مهم درمورد وب پک در ری اکت وجود داره که باید درکشون کنیم.این موارد عبارتند از :مفهوم Loaders در وب پکمفهوم Dev Server در وب پکمفهوم Plugins در وب پکمفهوم Entry در وب پکمفهوم Output در وب پکاصلا نگران نباشید چون قراره هرکدوم از این مفاهیم رو باهمدیگه بررسی کنیم و یاد بگیریم 🙂مفهوم Entry در وب پک چیست ؟درحقیقت Entry یک آدرس ( end point ) هست که وب پک در ریکت از طریق این آدرس graph وابستگی های پروژه رو مشخص میکنه.این آدرس ( end point ) به webpack یک نقطه شروع میده تا وب پک در react بتونه کار خودش رو شروع کنه.برای تعریف Entry کافیه به فایل webpack.config.js بریم و بصورت زیر end point اپیکیشن خودمون رو به وب پک بدیم :module.exports ={   entry: &quot./src/index.js&quot}حالا که entry رو مشخص کردیم، میتونیم بریم سراغ output در وب پک!Output در وب پک چیست ؟زمانیکه webpack در ری اکت کار خودش رو انجام میده و تمام فایلهای اپیکیشن مارو پک میکنه ( باندل میکنه )، فایل نهایی bundle.js رو باید یک جایی ذخیره کنه. این آدرس رو از طریق output میتونیم به وب پک اعلام کنیم.علاوه بر آدرس خروجی وب پک، ما میتونیم یکسری تنظیمات اضافه درمورد خروجی webpack تنظیم کنیم:module.exports = {    entry: &quot./src/index.js&quot    output: {        path: &quotIdist/assets&quot,        filename: &quotbundle.js&quot,        publicPath: &quotassets&quot    }}مفهوم Loaders در وب پک چیست ؟Loaders یکی از ویژگی های اصلی webpack در ری اکت هست و به ما اجازه میده assets های خودمون ( تصاویر، CSS ها و ..) رو به ماژول تبدیل کنیم.اگه بخوایم ساده تر بهش اشاره کنیم، Loaders ها از ما یک ورودی میگیرن و روی ورودی یکسری پردازش انجام میدن ( مثل linting ) و در نهایت اون ورودی رو به ماژول تبدیل میکنن.ما میدونیم که وب پک باید مدیریت تمام فایلهای assets مثل فایلهای جاوااسکریپت، css، تصاویر و .. رو انجام بده.این نکته رو هم در نظر داشته باشیم که وب پک در ری اکت، با اینکه فقط جاوااسکریپت رو درک میکنه اما تمام دارایی های پروژه مارو به عنوان یک ماژول در نظر میگیره. یعنی هر تصویر، هر CSS و .. یک ماژول هستن.برای تنظیم Loaders در وب پک باید به فایل webpack.config.js مراجعه کنیم:( بعدا بیشتر راجب Loaders صحبت میکنیم )module.exports = {    module: {        loaders: [{            test: /\.(js|jsx)$/,            exclude: /(node_modules)/,            loader: 'babel-loader',            query: {                presets: ('es2015', •react, 'stage-Ol']            }        }, ]    }}مفهوم Dev Server در وب پک چیست ؟webpack-dev-server یک ابزار قدرتمند هست که توسط خود وب پک ارائه میشه و به ما اجازه میده خیلی ساده تر بتونیم اپیکیشن خودمون رو توسعه بدیم.ابزار Dev Server به عنوان یک سرور محلی هم شناخته میشه و قابلیت ریلود زنده ( live reload ) اپیکیشن رو به ما ارائه میده. یعنی اگه ما تغییری در کد خودمون اعمال کنیم، وب پک بصورت خودکار این تغییر رو شناسایی میکنه، کد رو کامپایل میکنه و صفحه رو reload میکنه.برای تنظیم webpack Dev Server کافیه به فایل کانفیگ وب پک در ری اکت بریم و بصورت زیر عمل کنیم :module.exports = {    devServer: {        inline: true,        contentBase: './dist',        port: 8080    },};تو ادامه مقاله میخوایم راجب چی صحبت کنیم ؟تو ادامه مقاله میخوایم درمورد Plugins ، روش کار کردن وب پک، آموزش نصب webpack ، مفهوم لودر، باندل و پلاگین های معروف وب پک مثل HtmlWebpackPlugin صحبت کنیم :)لطفا برای مطالعه ادامه این مقاله بصورت کامل و رایگان روی لینک زیر کلیک کنید :وب پک در react فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 14:29:25 +0330 https://virgool.io/@frontendi/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%AF%D8%B1-5-%D8%AF%D9%82%DB%8C%D9%82%D9%87-%D8%A8%D9%87-%D8%B3%D8%A7%D8%AF%D9%87-%D8%AA%D8%B1%DB%8C%D9%86-%D8%B1%D9%88%D8%B4-%D9%85%D9%85%DA%A9%D9%86-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%A8%D8%AA%D8%AF%DB%8C-%D9%87%D8%A7-kfljhzyp2uzl اگه تازه با ری اکت آشنا شدید و نمیدونید چطور میشه تو 5 دقیقه نصب ری اکت رو به کمک ابزار Vite انجام داد، تو این مقاله با فِرانت اِندی همراه باشید 🙂نصب ری اکت در 5 دقیقه !تو این مقاله میخوایم آموزش نصب ری اکت به کمک ابزار Vite رو در چند دقیقه باهمدیگه یاد بگیریم. همچنین تو این آموزش از فریمورک Tailwind CSS برای استایل دهی استفاده میکنیم.برای اینکه بتونیم ری اکت رو نصب کنیم، باید با موارد زیر آشنا باشیم ( اگه با هرکدوم آشنا نیستید، روی عنوانش کلیک کنید تا به مقاله مربوطه ریدایرکت بشید )خب دیگه بریم سراغ آموزش نصب ری اکت 🙂نصب ری اکت ( مرحله اول )تو مرحله اول آموزش نصب ری اکت، باید به پوشه ای که میخوایم ری اکت رو داخلش نصب کنیم بریم و دستور نصب ری اکت رو اجرا کنیم. من از VSCode استفاده میکنم و بعد از رفتن به مسیر دلخواهم، دستور زیر رو داخل ترمینال وارد میکنم :npm create vite@latest your-project-name -- --template reactدستور نصب ری اکت تو دستور بالا، به جای your-project-name میتونیم اسم پروژه خودمون رو وارد کنیم ( مثلا digikala یا هر اسم دیگه )تو تصویر زیر میشه دید که من داخل VSCode به مسیر دلخواهم رفتم ( پوشه FrontEndi ) و دستور نصب React رو داخل ترمینال اجرا کردم.اگه داخل ترمینال از شما سوال شد که آیا از نصب پکیج Vite اطمینان دارید؟ دکمه y کیبورد رو فشار بدید تا این پکیج برای ما نصب بشه.بعد چند ثانیه ری اکت + ابزار Vite با موفقیت برای ما نصب میشه ( مطابق تصویر زیر ) :اگه دقت کنید میبینیم که پوشه your-project-name برای ما ساخته شده اما ما واردش نشدیم! در حقیقت برای اینکه بتونیم داخل Vscode با این پروژه کار کنیم، باید وارد پوشه پروژه ساخته شده بشیم.برای اینکه وارد این پوشه بشیم باید دستور زیر رو داخل ترمینال وارد کنیم تا به مسیر پوشه جدید بریم :cd your-project-nameعالیه 🙂 تا به اینجای کار ما نصب ری اکت رو انجام دادیم.نصب React ( مرحله دوم )تو این مرحله ما فریمورک Tailwind CSS رو برای استایل دهی پروژمون نصب میکنیم. اگه به Tailwind CSS احتیاجی نداریم، میتونیم از این مرحله عبور کنیم و سراغ مرحله ششم بریم.رفقا لطفا برای مشاهده مرحله 2 تا 6 روی لینک زیر کلیک کنید و مابقی مقاله رو در فِرانت اِندی مطالعه کنید :آموزش نصب ری اکت فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sun, 03 Mar 2024 14:22:58 +0330 https://virgool.io/@frontendi/%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-vite-%DA%86%DB%8C%D8%B3%D8%AA-%D9%87%D8%B1%DA%86%DB%8C%D8%B2%DB%8C-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%B1%D9%85%D9%88%D8%B1%D8%AF-vite-%D8%AF%D8%B1-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-xn04cwm56qga ابزار Vite چیست ؟ابزار Vite در فِرانت اِند به ما در جهت ساخت اپیکیشن های تحت وب ( وبسایت ها ) کمک میکنه و مزیتش این هست که این کار رو خیلی ساده و بدون دردسر های همیشگی برای ما انجام میده.اگه Front-End Developer باشید، حتما به تازگی اسم Vite به گوشتون خورده، تو این مقاله میخوایم 0 تا 100 ابزار Vite در فرانت اند رو بررسی کنیم و ببینیم چه مزایا و معایبی داره ..با فِرانت اِندی همراه باشید تا به این سوال پاسخ بدیم که Vite چیست .. 🙂قضیه چیه ؟!تو چند سال اخیر، سر و کله ابزار های قدرتمند و جالبی تو حوزه فِرانت اِند برای بهبود تجربه کاربری توسعه دهنده ها ( developers ) پیدا شده.این ابزار ها کمک میکنن کار ما آسون تر و سریعتر انجام بشه ..یکی از این ابزار ها ، ابزار Vite هست 🙂حالا بریم ببینیم Vite چیست و چه تفاوتی با رقبای خودش داره ..ابزار vite در فرانت اند چیست ؟ابزار Vite چیست ؟ابزار Vite در فرانت اند یکی از ابزار های فرانت اند هست که به توسعه دهنده های فِرانت اِند کمک میکنه کارهای خودشون رو راحت تر و سریعتر انجام بدن.ابزار Vite ( ویت ) رو به عنوان یک Build Tool ( ابزار ساخت ) میتونیم به حساب بیاریم.سازنده ابزار Vite ، آقای Even هست که فریمورک Vue.js رو هم ساخته. ( پس میشه به این ابزار نوظهور اعتماد کرد )از ابزار Vite در فرانت اند میتونیم برای توسعه اپیکیشن هایی که با جاوااسکریپت یا تایپ اسکریپت ساخته میشن، استفاده کرد.بریم ببینیم ویژگی های اصلی ابزار Vite چیه ..کامپایل سریع با ابزار Viteابزار Vite به دلیل استفاده از API های مدرن و جدید مرورگر و خود ES ( اکما )، در سریعترین زمان ممکن کد مارو کامپایل میکنه و این فوق العادس!این ویژگی کمک میکنه زمان لازم برای Build ( ساخت ) اپیکیشن به شدت کاهش پیدا کنه.خود Vite یک سرور داخلی قدرتمند داره که اجازه میده تغییراتی که ما ( به عنوان یک developer ) لحاظ میکنیم خیلی سریع و بصورت real-time و بدون رفرش شدن صفحه مشاهده کنیم.بارگذاری تنبل ماژول ها ( Modules Lazy Loading )ابزار Vite در فِرانت اِند ، بصورت پیشفرض قابلیت بارگذاری تنبل ماژول هارو پیاده سازی میکنه.این فوق العادس ! 🙂یعنی هر ماژول، فقط زمانیکه بهش احتیاج داریم بارگذاری میشه. این موضوع کمک میکنه حجم Boundle های ساخته شده کم بشه و در نهایت اپیکیشن ما عملکرد خیلی بهتری از خودش نشون بده.ویژگی بارگذاری تنبل در ابزار Vite کمک میکنه که اپیکیشن ما خیلی سریعتر لود بشه و کاربر سریعتر صفحه رو ببینه.تقسیم کد و حذف کد های بلا استفاده در ابزار Viteیکی از بهترین تکنیک های بهینه سازی اپیکیشن های تحت وب، تکنیک تقسیم کد ( Code Splitting ) هست. این تکنیک با کاهش اندازه کد به بهبود Performance اپیکیشن ما کمک میکنه.موضوع بعدی بحث Tree-shaking به معنی حذف کد های بلا استفاده هست. درواقع ابزار Vite تشخیص میده که چه کد هایی بلااستفاده هستن و ما نیازی بهشون نداریم. سپس با حذف این کد ها، به کاهش حجم کد و بهینگی اپیکیشن ما کمک میکنه.درواقع ابزار Vite میخواد مطمئن بشه که کاربر های ما فقط کدهای مورد نیاز همون صفحه رو دانلود میکنن و کد های اضافه ای دانلود نمیکنن!سرور داخلی ابزار Viteابزار Vite یک سرور داخلی داره که این سرور داخلی برای بارگذاری مجدد سریع ( fast reloading ) و hot module replacement بهینه شده.سرور داخلی Vite توسعه و تست اپیکیشن رو خیلی ساده و آسون میکنه و به Developer اجازه میده تغییرات اعمال شده خودش رو بصورت آنی ( real-time ) و بدون رفرش شدن صفحه ببینه.مزایای vite چیستمزایای Vite چیست ؟با به اینجای کار درمورد ویژگی های اصلی و کلیدی ابزار Vite در فرانت اند صحبت کردیم.اما مهمترین مزیت Vite نسبت به رقبای خودش چیست ؟+ بهبود تجربه توسعه دهندگان فرانت اندابزار Vite با رویکرد ها و ویژگی های قدرتمندی که ارائه کرده، به Front-End Developer ها تجربه توسعه خیلی بهتری میده.خیلی خلاصه بخوایم بگیم، ابزار Vite خیلی از مسائل رو خودش حل کرده و یکسری ویژگی جذاب ارائه کرده که باعث شده توسعه فِرانت برای ما خیلی ساده تر، سریعتر و لذت بخش تر باشه!+ زمان Build خیلی کمتر !یکی از مهمترین مزیت های ابزار Vite ، زمان Build خیلی کم نسبت به رقبای خودش هست. یعنی ساخت ( Build ) اپیکیشن ما در مدت زمان خیلی کمتری انجام میشه.این یعنی ما زمان کمتری منتظر Build اپیکیشن خواهیم موند.+ پشتیبانی از استاندارد های وب مدرنهمونطور که ابتدای همین مقاله هم اشاره کردیم، ابزار Vite از جدیدترین API های مرورگر و ES ( اکما اسکریپت ) استفاده میکنه و این برای توسعه دهنده هایی که به دمبال استفاده از بروزترین استاندارد های وب هستن، عالیه!معایب vite چیستلطفا برای مطالعه ادامه این مقاله روی لینک زیر کلیک کنید :ابزار vite چیست ؟ فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sat, 27 Jan 2024 17:16:37 +0330 https://virgool.io/@frontendi/12-%D9%85%D9%81%D9%87%D9%88%D9%85-%D9%85%D9%87%D9%85-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA%DB%8C-%DA%A9%D9%87-%D9%82%D8%A8%D9%84-%D8%B4%D8%B1%D9%88%D8%B9-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85!-oorqfg1snszn همه ما میدونیم که ری اکت یک کتابخانه جاوااسکریپتی هست، یعنی پایه و اساس React همون مباحث Javascript هستن. اگه قصد شروع یادگیری ری اکت رو داشته باشیم، خیلی خیلی ضروریه که این 12 مفهوم مهم جاوااسکریپت رو بدونیم تا امکان شروع یادگیری ری اکت رو داشته باشیم!پس اگه قصد شروع یادگیری ریکت رو داریم باید این 12 مفهوم مهم جاوااسکریپتی که تو این مقاله مطرح میشه رو حتما حتما مطالعه کنیم تا بعدا دچار مشکل و سردگمی نشیم!قضیه چیه ؟اگه قصد شروع یادگیری کتابخانه ری اکت رو داریم، بشدت ضروریه که یکسری مفاهیم ضروری و مهم رو درمورد کتابخانه ری اکت بدونیم. چون اصولا ری اکت یک کتابخانه جاوااسکریپتی هست و قراره از همون مفاهیم جاوااسکریپتی، در React استفاده کنیم.بریم ببینیم این مفاهیم ضروری جاوااسکریپتی چی هستن 🙂مفهوم 1 – متغیر هامتغیر ها به ما کمک میکنن که اطلاعات و داده های خودمون رو داخلشون ذخیره کنیم و هر زمان نیاز داشتیم، ازشون استفاده کنیم.ما تو ری اکت، از همین متغیر ها برای ذخیره کردن اطلاعات و سپس خواندن همین اطلاعات استفاده کنیم.بطور کل 3 نوع متغیر تو جاوا اسکریپت و ری اکت داریم :متغیر از نوع Var :اگه متغیر ما از نوع var باشه، میتونیم هر زمان که نیاز داشتیم مقدارش رو عوض کنیم ( بدون محدودیت در تغییر مقدار متغیر )حتی میتونیم متغیر هایی که از نوع var هستن رو دوباره بسازیم ( redeclared ). بطور مثال اگه یکبار var x = 1 رو تعریف کردیم، میتونیم دوباره var x = 2 رو در جای دیگری بنویسیم.متغیر از نوع let :متغیر هایی که از نوع let هستن نمیتونن 2 یا چند بار تعریف بشن ( not redeclared ) ، اما میتونیم بصورت نامحدود مقدار داخلشون رو عوض کنیم و تغییر بدیم.متغیر از نوع const :متغیر هایی که از نوع const هستن، نه امکان تغییر مقدار دارن و نه امکان تعریف مجدد ( نه میشه redeclared کرد، نه مقدارشون رو update کرد )حالا که هر 3 نوع متغیر جاوااسکریپت رو یادگرفتیم، اجازه بدید هر 3 نوع متغیر رو در عمل ببینیم :// Var متغیر از نوعvar age = 25;console.log(age);// اینجا متغیر خودمون رو مجدد تعریف کردیم// این نوع متغیر قابلیت تعریف مجدد دارهvar age = 30;console.log(age);// خروجی لاگ های بالا :// 25// 30// let متغیر از نوعlet name = &quotما داریم اینجا زحمت میکشیم&quotconsole.log(name);// میتونیم این نوع متغیر رو مقداردهی مجدد کنیمname = &quotFrontEndi.com&quotconsole.log(name);// خروجی لاگ های بالا :// FrontEndi.com// const متغیر از نوعconst name = 'اردک تک تک';console.log(name);name = 'بوقلمون سفید';// تو خط بالا ارور میگیریم چون این نوع متغیر امکان مقداردهی مجدد ندارهتو ری اکت، قراره دقیقا از همین متغیر ها استفاده کنیم. قوانین و باید ها و نباید های این نوع متغیر ها در جاوااسکریپت و ری اکت کاملا یکسانه! پس ضروریه که با این 3 نوع متغیر آشنا باشیم.مفهوم 2 – توابعیه قانونی تو برنامه نویسی وجود داره به اسم DRY که مخفف عبارت Do Not Repeat Yourself هست ( به این معنی که نباید کد تکراری بنویسیم ).ما به عنوان یک React Developer باید مهارت و تسلط کافی در ساخت توابع در ری اکت داشته باشیم. توابع در ری اکت، همون توابع جاوااسکریپتی هستن.بطور مثال برای اینکه بتونیم از هوک ها استفاده کنیم، باید قوانین توابع جاوااسکریپتی رو بدونیم، چون هوک ها فقط در Functional Component ها قابل پیاده سازی هستن.همچنین ما میتونیم بخش ها و تیکه کد های پرتکرار پروژه خودمون رو به تابع تبدیل کنیم و هر زمان که نیاز بود، صرفا صداشون بزنیم ( فراخوانیشون کنیم )همچنین استفاده از Function ها باعث افزایش خوانایی کد میشن و کمک میکنن کد ما استانداردتر باشه.بطور کلی 2 نوع تابع میتونیم بسایم:Function سادهArrow Functionبریم ببینیم هر 2 مدل تابع رو چطور میشه ساخت :// ساخت تابع سادهfunction multiply(a,b){ return (a*b); // این تابع 2 عدد به عنوان ورودی میگیره و ضربشون رو برمیگردونه}console.log(multiply(3,5)); // خروجی عدد پانزده میشه// Arrow Function ساختlet addition = (a,b)=>{ return (a+b); // این تابع هم 2 عدد به عنوان ورودی میگیره و جمعشون رو برمیگردونه}console.log(addition(3,5)); // خروجی عدد هشت هست مفهوم 3 – آبجکت هادرک و تسلط کامل به Object ها در جاوااسکریپت خیلی خیلی ضروریه چون ماهیت خیلی از موارد در ری اکت Object هست! بطور مثال خود کامپوننت ها یک نوع Object هستن.پس برای درک و تسلط کامل به کامپوننت های ری اکتی، باید عمیقا Object هارو درک کرده باشیم.همچنین برای کار کردن با متود ها، باید بدونیم چطور با آبجکت ها کار کنیم.تو مثال زیر ما یک Object داریم، اما بنظر شما چطور میشه به یکی از اعضای این آبجکت دسترسی داشت ؟تو تیکه کد زیر من یکبار خود Object رو لاگ گرفتم و سپس یکی از اعضای این Object رو :let user = { name: &quotاکبر&quot, family: &quotاکبری&quot, site: &quotفِرانت اِندی&quot}console.log(user)// output : {name:'اکبر',family:'اکبری',site:'فِرانت اِندی'}console.log(user.site)// output : فِرانت اِندیمفهوم 4 – Destructuringمبحث Destructuring هم یکی از مفاهیم مهم جاوااسکریپت هست که تو ری اکت هم کاربرد داره. به کمک این قابلیت ما میتونیم دیتاهای مورد نیاز خودمون رو از یک Object یا Array استخراج کنیم. حتی میتونیم اسمشون رو هم عوض کنیم.تو تیکه کد زیر تکنیک Array Destructuring رو شرح دادیم :const vehicles = ['Swift', 'Blackhawk', 'Fortuner'];const [car, truck, suv] = vehicles;console.log(&quotCar is&quot, car);console.log(&quotTruck is&quot, truck);خروجی :// Car is Swift// Truck is Blackhawkبه خط 1 دقت کنید.. اگه بخوایم به یکی از اعضای این آرایه دسترسی داشته باشیم باید به شماره ایندکس صداشون بزنیم. مثل vehicles[2] که این خیلی جالب نیست و خوانایی کد رو کم میکنه!اما تو خط 5 و 6 به کمک تکنیک Array Destructuring تونستیم با اسم صداشون بزنیم. این تکنیک توی خط 3 پیاده سازی شده.برای Object ها هم میتونیم همین کارو بکنیم:let user ={ fullName: &quotAhmad AhmadNejad&quot, country: &quotIran&quot, site: &quotFrontEndi.com&quot,}let {fullName: name, country: loc}=user;console.log(&quotName is &quot + name + &quot which is located in &quot+loc);تو تیکه کد زیر ما از تکنیک Object Destructuring استفاده کردیم. این تکنیک تو ری اکت و مخصوصا Props های ری اکت خیلی خیلی کاربردیه.ما میتونیم از بین Props های دریافتی، فقط همون اطلاعاتی که نیاز داریم رو Destructure کنیم.مفهوم 5 – متود های آرایهما نیاز داریم که خیلی از اطلاعات خودمون رو داخل آرایه ها ذخیره کنیم. جاوااسکریپت یکسری متود کاربردی برای کار با آرایه ها در اختیار ما گذاشته که کمک میکنن بتونیم به بهترین شکل ممکن از اطلاعات موجود در آرایه ها استفاده کنیم.خیلی ضروریه که با این متود های کار با آرایه آشنا باشیم.متود map :این متود یک آرایه جدید میسازه که در نتیجه اجرای یک تابع روی تک تک اِلِمان های یک آرایه دیگس.شکل استفاده ( سینتکس ) این متود بصورت زیر هست :array.map(function(currentValue, index, arr), thisValue)تو تیکه کد زیر، از متود map استفاده کردیم:const array = [1, 2, 3, 4];function func(num) { return num + 1;}// تو تیکه کد زیر یک آرایه جدید میسازیم که هر اِلِمان این آرایه یک عدد افزایش مقدار داشتنconst newArr = array.map(func);console.log(&quotOld array is: &quot, array); // Old array is: [ 1, 2, 3, 4 ]console.log(&quotNew array is: &quot, newArr); // New array is: [ 2, 3, 4, 5 ]تو خط 1 ، یک آرایه درست کردیم.تو خط 4 یک تابع داریم که یک عدد به عنوان ورودی میگیره، و مقدارش رو + 1 میکنه. ( یکی زیاد میکنه )تو خط 9 روی آرایه خودمون متود map رو اجرا کردیم و تابع func رو بهش دادیم ( این تابع روی تک تک اِلِمان های آرایه اجرا میشه و در نتیجه مقدار هر اِلِمان یکی زیاد میشه )نتیجه متود map، یک آرایه جدید هست که داخل newArr ریخته شده.تو خط 11 و 12 هر 2 آرایه قدیمی و جدید رو لاگ گرفتیم.متود filter :این متود روی آرایه ها اعمال میشه و بر اساس شرطی که ما لحاظ کردیم، اِلِمان های دلخواه رو بر میگردونه. ( فیلتر میکنه )روش استفاده ( سینتکس ) این متود بصورت زیر هست :array.filter(function(currentValue, index, arr), thisValue)تو تیکه کد زیر ما از متود filter استفاده کردیم :const salaries = [10500, 33000, 1600, 4000];function checkSalary(salary) { return salary >= 10000;}const resultArray = salaries.filter(checkSalary);console.log(&quotقیمت های بزرگتر از 10000 عبارتند از :&quot, resultArray);تو خط 1 یک آرایه داریم که چند قیمت داخلشون ذخیره کردیم.میخوایم قیمت های بزرگتر از 10000 رو فیلتر کنیم.تو خط 7 از متود filter برای این کار استفاده کردیم ( خود متود filter از ما یک تابع میگیره که این تابع در خط 3 تعریف شده )خروجی تیکه کد بالا، یک آرایه هست که شامل 10500 و 33000 هست. ( عدد های بالاتر از 10000 حذف/فیلتر شدن )متود reduce :این متود یک تابع رو روی تک تک آیتم های آرایه اعمال میکنه و یک خروجی برمیگردونه.شکل کلی استفاده از متود reduce بصورت زیر هست :array.reduce( function(total, currentValue, currentIndex, arr), initialValue )تو تیکه کد زیر از این متود استفاده کردیم :let arr = [10, 20, 30, 40, 50, 60];function sumofArray(sum, num) { return sum + num;}function myGeeks(item) { console.log(arr.reduce(sumofArray));}myGeeks()// output : 210تو تیکه کد بالا از متود reduce برای جمع زدن مقادیر کل آرایه استفاده کردیم.مفهوم 6 – Rest and Spread Operatorدو نوع اپراتور ( operator ) داریم با نامهای rest و spread که هر دوی آنها با سه نقطه ( … ) تعریف میشن اما اصولا کاربرد های متفاوتی دارن.از Spread Operator بصورت زیر استفاده میکنیم:const aboutWork = [&quothelp&quot, &quotstudents&quot];const aboutUs = [&quotFrontEndi.com&quot, ...aboutWork, &quotgrow.&quot];console.log(aboutUs);// output : [ 'FrontEndi.com', 'help', 'students', 'grow.' ]از Rest Operator هم بصورت زیر استفاده میکنیم :function rest(...theArgs) { // it combines all the input in an arrayconsole.log(theArgs.length);}rest(); // 0rest(5); // 1rest(5, 6, 7); // 3// output : 0 1مفهوم 7 – توابع بازگشتی ( Callback Functions )جاوااسکریپت برای مدیریت کارها و عملیات های ناهمزمان ( async ) توابع بازگشتی رو در اختیار ما گذاشته.توابع بازگشتی خودشون رو صدا میزنن و همیشه باید یک شرط برای توقف تابع داشته باشن، واگرنه بصورت نامحدود اجرا میشن.تو تیکه کد زیر ما یک Callback Functions ساختیم :// ساخت یک تابع بازگشتیfunction callbackFunction() {console.log(&quotمن یک تابع بازگشتی هستم&quot);}setTimeout(callbackFunction, 5000);console.log(&quotسلام&quot);// output :// سلام// من یک تابع بازگشتی هستممفهوم 8 : پرامیس ( Promises )به این دلیل که توابع بازگشتی مشکل IOC دارن، ما از Promises برای مدیریت کارهای Async ( ناهمزمان ) استفاده میکنیم.تو تیکه کد زیر ما از مفهوم Promises استفاده کردیم :let myPromise = new Promise(function(myResolve, myReject) {// یک پرامیس جدید ساختیم تو خط بالاlet x = &quotFrontEndi"if (x == &quotFrontEndi&quot) { myResolve(&quotYes it is FrontEndi&quot);} else { //if gives any error myReject(&quotError&quot);}});myPromise.then(function(value) {console.log(&quotهمه چی بدون مشکل داره کار میکنه&quot);},function(error) {console.log(&quotمتاسفانه ارور داریم&quot);;});// output : Your Code is working fineمفهوم 9 – کلوژر ( Closure )کلوژر یکی از جدیدترین و جالب ترین ویژگی های جاوااسکریپت هست و چیزی نیست جز یک تابع خیلی ساده و معمولی که داخل یک تابع دیگه تعریف و return میشه.درحقیقت زمانیکه یک تابع مقدار یک متغیر تعریف شده خارج از اسکوپ خودش رو میخونه یا ویرایش میکنه، کلوژر هست.بطور مثال تو تیکه کد زیر یک Closure داریم :function outer () {return function inner () { // something}}درواقع کلوژر یک تابع درونی هست که بعد از اتمام اجرای تابع والد به محدوده یا همون اسکوپ تابع والد دسترسی داره. البته ناگفته نماند که برای درک مفهوم کلوژر، باید مفهوم اسکوپ در جاوااسکریپت رو درک کرده باشیم.مفهوم 10 – Async/Awaitتو جاوااسکریپت انجام برخی کارها نیاز به گذشت زمان داره مثل درخواست های شبکه، دریافت فایل و ..این عملیات ها ناهمزمان ( Async ) هستن. تو جاوااسکریپت به کمک Async/Await میتونیم این عملیات رو مدیریت کنیم.بعد از معرفی مفهوم Callback و Promises که راجبشون صحبت کردیم، مفهوم Async/Await معرفی شدن که کمک میکنن کد ما خواناتر و ساده تر باشه.کلمه کلیدی Async زمانی استفاده میشه که میخوایم تابع ناهمزمان ( Async ) خودمون رو مشخص کنیم.داخل این تابع Async باید از کلمه کلیدی await استفاده کنیم ( زمانیکه منتظر موندیم و اون اتفاقی که منتظرش بودیم افتاده )تو تیکه کد زیر از مفهوم Async/Await استفاده کردیم :async function getData() {let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve({ name: &quotFrontEndi&quot}); }, 200);});let Data = await promise;console.log(Data);}getData();// output : FrontEndiمفهوم 11 – شی گرایی در جاوااسکریپتشی گرایی میتونه به 2 روش توی جاوااسکریپت پیاده سازی بشه ( بصورت Class یا Functional )OOP های کلاسی :جاوااسکریپت شی گرایی در class رو در ES6 معرفی کرد ( سال 2015 )برای استفاده از شی گرایی در Class ها باید از کلمه کلیدی class استفاده کنیم :class Rectangle {constructor(width, height) { this.width = width; this.height = height;}area() { return this.width * this.height;}perimeter() { return 2 * (this.width + this.height);}}const rect = new Rectangle(5, 10);console.log(rect.area()); // Output: 50console.log(rect.perimeter()); // Output: 30تو تیکه کد بالا کلاس Rectangle دارای یکسری ویژگی هست ( width و height ) و چندین متود ( area و perimeter ).ما باید از کلمه کلیدی new برای ساختن یک نمونه ( instance ) استفاده کنیم تا بتونیم به متود هاش دسترسی داشته باشیم.شی گرایی در توابع :قبل معرفی شی گرایی در کلاس ها، ما فقط میتونستیم از شی گرایی در توابع بهره ببریم . شی گرایی در توابع به این شکل امکانپذیره :function Rectangle(width, height) {this.width = width;this.height = height;}Rectangle.prototype.area = function() {return this.width * this.height;}Rectangle.prototype.perimeter = function() {return 2 * (this.width + this.height);}const rect = new Rectangle(5, 10);console.log(rect.area()); // Output: 50console.log(rect.perimeter()); // Output: 30تو تیکه کد بالا Constructure ما Rectangle Function هست و متود ها به کمک Prototype بهش متصل میشن. برای ساخت یک نمونه جدید از کلمه کلیدی new باید استفاده کنیم و سپس از متود ها استفاده کنیم.مفهوم 12 – ماژول ( Modules )زمانیکه ما برای اپیکیشن های تحت وب داریم کدنویسی میکنیم، خیلی ضروری و مهمه که اطمینان حاصل کنیم کد ما قابل نگهداری و بهینه هست!ماژول ها تیکه کد های مارو به بخش های جداگونه تبدیل میکنن.علاوه بر این، تیکه کد های ما قابلیت استفاده مجدد دارن ( reusable هستن ) تو ری اکت خیلی زیاد به این مبحث نیاز پیدا میکنیم.ما باید یاد بگیریم ماژول های خودمون رو فراخوانی ( import ) کنیم و خروجی ( export ) بگیریم.تو تیکه کد زیر ما یک ماژول ساختیم و در خط آخر export کردیمش :let variable=&quotمن یک متغیرم"class GfG{ constructor(name){ this.gfg= &quotسلام &quot +name;}}export {variable, GfG};حالا اگه به یک ماژول مفید نیاز داشتیم، میتونیم به کمک کلمه کلیدی import ، اون ماژول رو فراخوانی کنیم :import * as syntax from 'syntax.js'جمع بندیری اکت یک کتابخانه جاوااسکریپتی باحال و دوست داشتنی برای ساخت صفحات تحت وب زیبا و بهینه هست.اگه قصد شروع یادگیری ری اکت رو داریم، بشدت ضروریه که یکسری مفاهیم مهم و ضروری درمورد جاوااسکریپت رو بدونیم ( این نکته رو تو مسیر یادگیری ری اکت مطرح کردیم )یکی از این پیش نیاز ها، آشنایی با مفاهیم اصلی و مهم جاوااسکریپت هست، تو این مقاله 12 مورد از مهمترین موارد این مفاهیم رو باهم بررسی کردیم 🙂فراموش نکنیم که برای اینکه بتونیم طبق یک مسیر اصولی و صحیح ری اکت رو یاد بگیریم، نیاز به یک مسیر و نقشه راه درست و اصولی داریم ( در غیر اینصورت به دلیل طی کردن مسیر اشتباه دچار مشکل میشیم )تو صفحه مسیر یادگیری React ، بهترین و اصولی ترین مسیر یادگیری رو منتشر کردیم. ( اگه قصد شروع یادگیری ریکت رو دارید پیشنهاد میکنم مطالعه کنید ) فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sat, 27 Jan 2024 17:09:35 +0330 https://virgool.io/@frontendi/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D8%A8%D8%A7-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-react-bootstrap-tj63etbfroov کتابخانه React Bootstrap یکی از محبوب ترین و بهترین فریمورک های ری اکتی جهت پیاده سازی صفحات و طرح های UI اپیکیشن هست .. در واقع کتابخانه react-bootstrap حاصل ترکیب Bootstrap و React هست و به ما اجازه میده از بوت استرپ در ری اکت استفاده کنیم.در حقیقت تو کتابخانه react-bootstrap تمامی اجزا تبدیل به یک کامپوننت ری اکتی شدن و وابستگی های غیرضروری مثل جی کوئری ازشون حذف شده!این موضوع کمک میکنه بتونیم خیلی راحت تر و با خیال آسوده از Bootstrap در ری اکت استفاده کنیم.در جریان باشید که کتابخانه react-bootstrap از هسته اصلی بوت استرپ تشکیل شده و به ما اجازه میده از همون ساختار، استایل ها، اِلِمان ها و ویژگی ها استفاده کنیم 🙂ما حتی میتونیم بدون کتابخانه react-bootstrap از بوت استرپ استفاده کنیم اما استفاده از React-Boostrap این مزیت رو داره که اجازه میده کنترل خیلی بیشتری روی کامپوننت های بوت استرپی داشته باشیم!از طرفی ما به هیچ عنوان نباید از بوت استرپ خام در پروژه های ری اکتی استفاده کنیم ( دلیلش رو تو این مقاله بررسی میکنیم )داستان بوت استرپ چیه ؟بوت استرپ یک فریمورک CSS هست که از ترکیب Javascript و CSS ساخته شده. بوت استرپ به ما اجازه میده که صفحات ریسپانسیو و زیبا بسازیم.ما میتونیم بدون فریمورک های CSS هم اپیکیشن تحت وب خودمون رو بسازیم اما حقیقتا فریمورک های CSS زندگی رو خیلی راحت تر میکنن 🙂یکی از بهترین و معتبر ترین فریمورک های CSS ، فریمورک Bootstrap هست. تو ری اکت نیازی نیست بصورت مستقیم از بوت استرپ استفاده کنیم، ما میتونیم کتابخانه react-bootstrap رو نصب کنیم و خیلی راحت تر و لذت بخش تر از Bootstrap در React بهره ببریم 🙂حالا شاید بپرسیم مزایای کتابخانه react bootstrap چیه ؟مزایای کتابخانه react-bootstrap چیست ؟از مهمترین مزیت های این کتابخانه میشه به موارد زیر اشاره کرد :جامعه آماری قوی و منابع آموزشی خیلی خیلی زیاد !مجموعه گسترده و بزرگ از انواع کامپوننت ها ، اِلِمان ها و قالب های از پیش ساخته شده.قابلیت سفارشی سازی بین مرورگر های مختلف.مقایسه Bootstrap و کتابخانه React-Bootstrap !ما به 2 شکل میتونیم از بوت استرپ در ری اکت استفاده کنیم:استفاده مستقیم از خود بوت استرپ در ریکت ( پیشنهاد نمیشه ! )استفاده از کتابخانه react-bootstrapاگه قصد استفاده از بوت استرپ در React رو داریم، بهترین کار استفاده از کتابخانه react-bootstrap هست. حالا شاید بپرسیم چرا ؟دلیل این موضوع بر میگرده به سازوکار خود ری اکت !ری اکت اکیدا توصیه کرده که از دستکاری و تغییر DOM خودداری کنیم و به جاش دام مجازی رو تغییر بدیم ( اگه با دام مجازی آشنا نیستید، پیشنهاد میکنم مقاله دام مجازی ری اکت رو مطالعه کنید )تو ری اکت نباید از بوت استرپ خام استفاده کنیم! درواقع زمانیکه از بوت استرپ خام استفاده میکنیم، چون متکی به جی کوئری هست، خیلی دام رو دستکاری میکنه و این خلاف استاندارد های ری اکت هست .. راه حل کتابخانه react-bootstrap هست..علاوه بر اینکه کتابخانه react-bootstrap دیگه دام مجازی رو دستکاری نمیکنه، سینتکس و کد تمیز تری در اختیار ما میزاره.قبول ندارید ؟بیاید کامپوننت Card رو تو بوت استرپ خام و کتابخانه react-bootstrap مقایسه کنیم ..لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :آموزش بوت استرپ در React فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sat, 27 Jan 2024 16:57:27 +0330 https://virgool.io/@frontendi/%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-react-beautiful-dnd-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-drag-drop-%D8%AF%D8%B1-react-eeo0n62ci1it کتابخانه react-beautiful-dnd به ما اجازه میده تو اپیکیشن ری اکتی خودمون حالت Drag & Drop اِلِمان هارو پیاده سازی کنیم. یعنی اِلِمان های دلخواه خودمون رو با موس بگیریم و در جایی دیگه رها کنیم! قطعا اگه بخوایم بدون کتابخانه های خارجی اینکار رو انجام بدیم باید روزها زمان صرف این پیاده سازی این ویژگی کنیم اما به کمک کتابخانه react-beautiful-dnd میتونیم تو چند دقیقه این ویژگی جذاب رو به اپیکیشن خودمون اضافه کنیم ..پس اگه قصد پیاده سازی حالت Drag & Drop در ری اکت رو دارید، با فِرانت اِندی همراه باشید …کتابخانه react-beautiful-dnd چیست ؟کتابخانه react-beautiful-dnd یکی از بهترین کتابخانه ها جهت پیاده سازی حالت Drag & Drop در ری اکت هست که هم جامعه آماری خیلی خوبی داره و هم استفاده ازش آسونه!درواقع کتابخانه های خیلی زیادی در ری اکت در زمینه پیاده سازی Drag & Drop یا همون DND به ما کمک میکنن اما هیچکدوم به خوبی کتابخانه react-beautiful-dnd نیستن!حالت Drag & Drop در ری اکت !خیلی وقتا نیاز داریم که کاربر یک یا چند اِلِمان رو Drag کنه و در جاهایی که مشخص شده Drop کنه! اگه بخوایم چنین ویژگی رو بدون کتابخانه های خارجی پیاده سازی کنیم قطعا کلی زمان باید صرف کنیم اما کتابخانه react-beautiful-dnd کمک میکنه تو چند دقیقه این کار رو انجام بدیم 🙂آموزش کتابخانه React-Beautiful-Dnd در ری اکتبرای مطالعه ادامه آموزش + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :کتابخانه React-Beautiful-Dnd فرانت اندی | FrontEndi فرانت اندی | FrontEndi Tue, 26 Dec 2023 17:38:56 +0330 https://virgool.io/@frontendi/%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-react-icons-%DA%86%DB%8C%D8%B3%D8%AA-45-%D9%87%D8%B2%D8%A7%D8%B1-%D8%B9%D8%AF%D8%AF-%D8%A2%DB%8C%DA%A9%D9%86-%D8%AF%D8%B1-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-yrxe570ataho کتابخانه React Icons به ما اجازه میده تا بصورت رایگان به بیش از 45 هزار آیکن دسترسی داشته باشیم و بتونیم توی پروژه های ری اکتی خودمون ازشون استفاده کنیم.پس اگه React Developer هستید و میخواید توی پروژتون از آیکن استفاده کنید، این مقاله رو مطالعه کنید تا ببینیم مزایا و معایب کتابخانه react-icons چیه 🙂داستان چیه ؟یکی از بهترین راه های بهبود تجربه کاربری ( UX ) استفاده و نمایش آیکن ها در وبسایت هست. چراکه دیدن آیکن ها در صفحات وب، حس خوبی به کاربر منتقل میکنه.جدای از این موضوع، برای نمایش برخی موارد ما نیاز به آیکن ها داریم و نمیتونیم از متن استفاده کنیم، مثل آیکن سبد خرید ( خیلی جالب نیست که سبد خرید رو با متن نمایش بدیم، بهتره از آیکن سبد خرید استفاده کنیم )زمانیکه ما از ریکت استفاده میکنیم، کتابخانه ها و انتخاب های خیلی زیادی برای نمایش آیکن در ریکت داریم! اما از بین این همه کتابخانه، کدوم رو انتخاب کنیم؟از طرفی شاید ما به چند آیکن در چند کتابخانه مختلف نیاز داشته باشیم، راه حل چیه که بتونیم بدون نصب چند کتابخانه، به اون آیکنها دسترسی داشته باشیم ؟راه حل کتابخانه react-icons هست که از محوبیت و جامعه آماری خیلی خوبی برخورداره و کاملا رایگانه!کتابخانه React Icons چیست ؟کتابخانه React Icons از هزاران آیکن زیبا و حرفه ای تشکیل شده که به ما اجازه میده در پروژه React خودمون آیکن دلخواه خودمون رو نمایش بدیم.مزیت کتابخانه react-icons این هست که صرفا حجم آیکن فراخوانی شده رو به پروژه اضافه میکنه ( نه حجم کل آیکن های فراخوانی شده و نشده )همین موضوع باعث میشه که پروژه ما بهینه باشه و حجم نهایی وبسایت سنگین نشه!کتابخانه react-icons از چه آیکن هایی تشکیل شده ؟! کتابخانه react-icons خودش از هزاران آیکن تشکیل شده که این آیکن ها از تمامی کتابخانه های آیکن دریافت شدن ( مثل ant design ، بوت استرپ ، فلت ایکن ، هیرو آیکن ، متریال و .. )کتابخانه React Icons از چه آیکن هایی تشکیل شده ؟ما گفتیم که این کتابخانه از هزاران آیکن تشکیل شده. اما این آیکن ها از کجا اومدن ؟آیکن های کتابخانه react icons از چندین کتابخانه گرفته شدن. در واقع نیازی نیست که ما تک تک این کتابخانه هارو نصب کنیم تا بتونیم به آیکن های اونها دسترسی داشته باشیم.صرفا با نصب کتابخانه react-icons در ری اکت میتونیم به آیکن های تمامی این کتابخانه ها دسترسی داشته باشیم.آموزش کتابخانه React Icons در ری اکتبرای مشاهده ادامه آموزش + تیکه کد ها و مثالهای بیشتر لطفا روی لینک زیر کلیک کنید :کتابخانه React Icons فرانت اندی | FrontEndi فرانت اندی | FrontEndi Tue, 26 Dec 2023 17:36:01 +0330 https://virgool.io/@frontendi/%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-ant-design-%DA%86%DB%8C%D8%B3%D8%AA-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87-antd-%DA%86%DB%8C%D9%87-aafwsmn0dmzr کتابخانه Ant Design در ری اکت یکی از بهترین و مشهورترین کتابخانه هایی هست که به ما در زمینه پیاده سازی UI وبسایت های ری اکتی کمک میکنه. ما میدونیم که کتابخانه های خیلی زیادی در این زمینه به ما کمک میکنن، اما بدون شک کتابخانه Antd در ری اکت یکی از بهترین های اونهاست!میپرسید چرا ؟با فِرانت اِندی همراه باشید تا ببینیم فرق کتابخانه Ant Design با رقبای خودش چیه که باعث شده اخیرا انقدر محبوب بشه 🙂کتابخانه Ant Design در ری اکت چیست ؟کتابخانه Ant Design در ری اکت دومین کتابخانه مشهور و پر استفاده ری اکتی جهت پیاده سازی UI هست. در حقیقت Ant Design یک دیزاین سیستم متن باز ( open source ) هست که بیش از 75 کامپوننت آماده و طرح از پیش ساخته شده در اختیار ما میزاره.همچنین کمپانی های مشهور خیلی زیادی از جمله علی بابا در سطح جهانی از کتابخانه Ant Design در ریکت استفاده میکنن.درصورتیکه از کتابخانه Ant Design در React استفاده کنیم، میتونیم به کامپوننت های مختلفی از جمله فرم، جدول، منو ، دکمه و .. دسترسی داشته باشیم. البته این کل مزیت Ant Design نیست!نصب کتابخانه Ant Design در ریکتبرای مشاهده ادامه آموزش + تیکه کد ها و مثالهای کاربردی لطفا روی لینک زیر کلیک کنید :کتابخانه Ant Design در ری اکت فرانت اندی | FrontEndi فرانت اندی | FrontEndi Tue, 26 Dec 2023 17:33:10 +0330 https://virgool.io/codenevis/%D9%85%D8%B3%DB%8C%D8%B1-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-react-%D8%AF%D8%B1-%D8%B3%D8%A7%D9%84-1402-%D9%86%D9%82%D8%B4%D9%87-%D8%B1%D8%A7%D9%87-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-begzur1icvkb اگه میخواید تو سال 1402 شروع به یادگیری کتابخانه React کنید، جای درستی اومدید 🙂 یادگیری ریکت بدون مسیر یادگیری ری اکت تقریبا غیر ممکنه! مثل این هست که بدون نقشه گنج دمبال گنج باشیم! نقشه راه یادگیری ری اکت به ما کمک میکنه از طریق یک مسیر درست شروع به یادگیری React کنیم.پس اگه در سال 1402 قصد شروع یادگیری React دارید و دمبال یک نقشه راه یادگیری React هستید، با فِرانت اِندی همراه باشید:)نقشه راه یادگیری ری اکت ( آپدیت 1402 )دقت کنید که مسیر یادگیری React در هر سال آپدیت میشه ( به دلیل منسوخ شدن برخی کتابخانه ها و ظهور برخی کتابخانه ها و تکنولوژی های جدید)! پس پیشنهاد میکنم از منابع قدیمی به عنوان نقشه راه یادگیری React استفاده نکنید! تو این مقاله بروزترین مسیر یادگیری ری اکت مرتبط با سال 1402 رو در اختیارتون قرار دادیم که توسط منبع مرجع ( Roadmap.sh ) منتشر شده.ری اکت یک کتابخانه جاوااسکریپتی هست که به ما در زمینه Front-End و طراحی صفحات گرافیکی UI کمک میکنه.ری اکت تو سالهای اخیر رشد خیلی خیلی چشمگیری داشته و با سبقت از سایر کتابخانه ها و فریمورک های جاوااسکریپتی تونسته بین Developer ها حسابی محبوب بشه!درسته که فریمورک ها و کتابخانه های دیگه ای مثل Angular و Vue.js هم وجود دارن اما صادقانه React یه چیز دیگس:)یادگیری React خیلی آسونه و کار کردن باهاش خیلی لذت بخشه! همچنین کلی مزیت جذاب مثل JSX ، دام مجازی ، هوک و جامعه آماری بزرگ داره که باعث شده اکثر Developer های تازه کار سراغ React برن.زمانی که دمبال یک مسیر یادگیری ری اکت میریم، به انبوهی از مقالات، ویدئو ها و درکل یه عالمه نقشه راه یادگیری ری اکت میرسیم! اما کدومشون بهترن؟وبسایت Roadmap برای هر کتابخانه، فریمورک یا زبان برنامه نویسی یک مسیر یادگیری مشخص کرده که هر مسیر یادگیری نتیجه تحقیق و تجربه صدها متخصص علوم مرتبط با همون رشته از سراسر جهان هست!بطور مثال این وبسایت یک React Roadmap منتشر کرده که بیشتر از 259000 ستاره تو گیت هاب دریافت کرده و به جرئت میشه گفت بهترین مسیر یادگیری ریکت هست چون این Roadmap، نتیجه تحقیق و تجربه متخصصین حوزه مهندسی نرم افزار هست.پس اگه دمبال یک مسیر یادگیری React هستید و نیاز به یک منبع قابل اعتماد دارید، پیشنهاد میکنم این مقاله رو مطالعه کنید چون بر اساس نقشه راه یادگیری React که وبسایت roadmap.sh منتشر کرده هست.خب اجازه بدید اول تصویر مسیر یادگیری ری اکت رو باهم ببینیم و سپس بصورت متنی هرکدوم از این تکنولوژی ها و کتابخانه هارو بصورت جامع و تخصصی بررسی میکنیمتصویر بالا، مسیر یادگیری React هست که نتیجه تحقیق و تجربه صدها متخصص حوزه مهندسی نرم افزار هست و قطعااااا قابل اعتماده!( البته تصویر بالا توسط فِرانت اِندی به زبون فارسی ترجمه شده اما محتوا هیچ تغییری نکرده )حالا اجازه بدید هرکدوم از موارد تصویر بالارو بصورت متنی بررسی کنیم …نقشه راه یادگیری ری اکت 20 مرحله داره و ما مرحله به مرحله بررسیشون میکنیم :)1 – یادگیری موارد پایهاصلا مهم نیست که قصد شروع یادگیری ری اکت رو داریم یا Angular یا Vue.js یا هرکتابخانه و فریمورک تحت وب دیگه!زمانیکه قصد توسعه اپیکیشن های تحت وب رو داریم، باید 3 رکن اصلی وب یعنی HTML , CSS  و JavaScript رو یاد بگیریم!درسته:) این 3 رکن اصلی اصلا قابل چشم پوشی نیستن چون اپیکیشن های تحت وب بر اساس این 3 تکنولوژی توسعه داده میشن.1.1 – یادگیری HTMLمیشه گفت که HTML یک زبان نشانه گذاری وب هست. خود کلمه HTML مخفف عبارت Hyper Text Markup Language هست.درواقع html به ما اجازه میده که ساختار اصلی صفحات تحت وب خودمون رو مشخص کنیم.بطور مثال اگه قصد ایجاد یک دکمه در صفحه داریم باید از تگ <button> استفاده کنیم، زمانیکه مرورگر به این تگ برخورد میکنه، متوجه میشه که باید تو این بخش از صفحه یک دکمه نمایش بده.به همین دلیل به HTML زبان نشانه گذاری میگیم ( چون ما برای مرورگر یکسری تگ مشخص میکنیم تا بهش بگیم کجای صفحه چی باید نمایش بدی )پس اولین مورد از مسیر یادگیری ری اکت، یادگیری HTML هست.1.2 – یادگیری CSSمیشه گفت که CSS مشخص میکنه که اِلِمان های تولید شده با HTML چطوری نمایش داده بشن. ما به کمک CSS میتونیم چیدمان و شکل نمایش اِلِمان های صفحات وب رو کنترل کنیم.مواردی مثل رنگ یا ابعاد و سایز اِلِمان !خود کلمه CSS مخفف عبارت Cascading Style Sheets هست.هرچی مهارت ما در CSS بیشتر باشه، صفحات زیباتری میتونیم بسازیم. جدای از اون زمانیکه به CSS مسلط باشیم میتونیم صفحات خودمون رو Responsive کنیم ( یعنی سایت ما در صفحات موبایل ، تلوزیون و .. قابل نمایش باشن )در کل CSS توی صفحات وب از اهمیت خیلی خیلی بالایی برخورداره و پیشنهاد میکنم براش زمان صرف کنید و خوب بهش تسلط پیدا کنید.پس مرحله دوم از نقشه راه یادگیری ری اکت، CSS هست.1.3 – یادگیری JavaScriptجاوااسکریپت یکی از محبوب ترین زبان های برنامه نویسی همه فن حریفه که میتونیم ازش برای اپیکیشن های تحت وب، اپیکیشن های موبایل، هوش مصنوعی، اپیکیشن های ویندوز و .. استفاده کنیم.اگه یادتون باشه ابتدای همین مقاله گفتیم که ری اکت یک کتابخانه جاوا اسکریپتی هست!پس خیلی خیلی مهمه که قبل از یادگیری React ، تسلط خوبی نسبت به زبان برنامه نویسی جاوا اسکریپت پیدا کنیم. چون چارچوب اصلی ری اکت، بر اساس زبان برنامه نویسی جاوا اسکریپت پیاده سازی شده.جاوااسکریپت مختصرا بصورت JS هم شناخته میشه.پس مرحله 1.3 از مسیر یادگیری React ، یادگیری زبان برنامه نویسی JavaScript هست.2 – مهارت های عمومی توسعه اپیکیشن های تحت وبچند مهارت عمومی وجود داره که تمامی توسعه دهنده های Front-End یا حتی Back-End باید یاد بگیرنش! حتی برای کسایی که میخوان فول استک باشن هم یادگیری چنین مهارت هایی ضروریه!2.1 – یادگیری Git ( گیت )شاید سالها پیش میشد بدون یادگیری و استفاده از Git پروژه های خودمونو جلو ببریم اما تو سالهای اخیر یادگیری و استفاده از Git خیلی ضروری شده!میشه گفت که Git یک سیستم کنترل ورژن پروژه هست که به ما اجازه میده کد های پروژه خودمون رو نگهداری کنیم و درصورت لزوم بین ورژن های مختلف پروژه جابجا بشیم.همچنین میتونیم پروژه خودمون رو بین اعضای مختلف تیم به اشتراک بزاریم.گیت رو هم میشه به عنوان یکی از موارد مسیر یادگیری ریکت دونست! چون امروزه تو هر تیم برنامه نویسی از Git استفاده میشه و برای اینکه بتونیم با اعضای تیم یک پروژه رو جلو ببریم، ضروریه که با گیت آشنا باشیم!2.2 – آشنایی با پروتکل های HTTPبرای اینکه بتونیم یک React Developer باشیم و با دنیای وب کار کنیم، باید با پروتکل های HTTP,HTTPS آشنا باشیم.حداقل کاری که میتونیم بکنیم این هست که یک آشنایی با نحوه کار متود های HTTP مثل موارد زیر داشته باشیم:GETPOSTPUTPATCHDELETEOPTIONSو..این پروتکل ها به ما امکان ارتباط با Back-End رو میدن، بطور مثال پروتکل GET به ما امکان دریافت اطلاعات از Back-End و پروتکل POST امکان ارسال اطلاعات به Back-End رو میده.از اونجاییکه تو اکثر اپیکیشن های تحت وب و سایتها باید با Back-End خودمون ارتباط برقرار کنیم، یادگیری این پروتکل ها ضروریه و بخشی از مسیر یادگیری React هست.2.3 – یادگیری لینوکس و ترمینالیادگیری لینوکس و ترمینال برای فرانت اند دولوپر ها ضروری نیست اما اگه قصد دارید یک Senior React Developer ( توسعه دهنده ری اکت حرفه ای ) باشید، پیشنهاد میکنم حداقل با لینوکس و ترمینال آشنا بشید.آشنا شدن با مواردی مثل bash , zsh , csh و .. )2.4 – یادگیری الگوریتم و ساختمان دادهیکی از مهمترین مهارت های عمومی برنامه نویسی که هر برنامه نویس باید بهش مسلط باشه، مهارت الگوریتم و ساختمان داده هست.اصلا مهم نیست که میخوایم یک React Developer باشیم یا Back-End Developer یا هرچیز دیگه .. به هرحال ما برنامه نویسیم و باید به مهارت های عمومی برنامه نویسی تسلط داشته باشیم.ما به عنوان یک برنامه نویس وب باید به الگوریتم و ساختمان داده تسلط پیدا کنیم. به همین دلیل میتونیم بگیم الگوریتم و ساختمان داده جزئی از مسیر یادگیری ری اکت هست.کتابها و دوره های آموزشی خیلی زیادی برای یادگیری الگوریتم و ساختمان داده وجود داره و درصورتیکه دانشجوی رشته نرم افزار باشید، در کلاس های دانشگاه با این 2 موضوع آشنا خواهید شد.2.5 – یادگیری دیزاین پترن ( Design Patterns )فرق یک React Developer معمولی با یک React Developer حرفه ای و باتجربه تو همین چیزاست!اگه میخواید یک قدم از بقیه جلوتر باشید، پیشنهاد میکنم با دیزاین پترن ها آشنا بشید.یادگیری Design Pattern ضروری نیست اما آشنایی با Design Pattern های معروف ری اکت به ما کمک میکنه تا پروژه های خودمون رو به بهترین شکل ممکن پیاده سازی کنیم.3 – یادگیری ری اکت !خب بلاخره رسیدیم به خود ری اکت🙂خود کتابخانه ری اکت از بخش ها و قسمت های مختلفی تشکیل میشه، زمانیکه قصد شروع یادگیری ری اکت رو داریم باید بدونیم چه بخش هایی رو با چه اولویتی باید یاد بگیریم.یکی از بهترین منابع یادگیری ری اکت، سایت اصلی React.dev هست. اما خوندن document برای بچه هایی که تازه کار هستن ممکنه سخت باشه.ما تو وبسایت فِرانت اِندی راجب تک تک هوک ها ، ویژگی ها و کتابخانه های جانبی ری اکت صحبت کردیم، با مراجعه به وبلاگ فِرانت اِندی میتونید به آموزش های ویدئویی و متنی بیشماری بصورت رایگان دسترسی داشته باشید 🙂اصلی ترین بخش نقشه راه یادگیری ری اکت، یادگیری خود کتابخانه React هست.4 – یادگیری ابزار های ساخت ( Build Tools )اگه بخوایم یک توسعه دهنده حرفه ای ری اکت باشیم، باید با ابزار های ساخت آشنا باشیم. آشنایی و یادگیری Build Tools به ما کمک میکنه تا مهارت های برنامه نویسی خودمون رو تا حد قابل توجهی بهبود بدیم.به عنوان یک توسعه دهنده ری اکت پیشنهاد میشه با ابزار های زیر آشنا بشیم :npmyarnparclgulpwebpackrolluppnpmtask runnersnpm scriptsاز بین ابزار های بالا، یادگیری همشون ضروری نیست ( طبق نقشه راه یادگیری React آشنایی کافیه )اما سعی کنید با ابزار های npm و Webpack ضروریه.5 – استایل دهی ( Styling )یکی از اصلی ترین و مهم ترین توانایی هایی که هر React Developer و Front-End Developer باید بهش تسلط خوبی داشته باشه، مهارت استایل دهی ( Styleing ) هست.تو دنیای وب، استایل دهی به وسیله CSS انجام میشه.کتابخانه های خیلی زیادی هستن که در زمینه Styling به ما کمک میکنن. فریمورک های CSS زیادی وجود دارن مثل کتابخانه Antd یا کتابخانه Material UI در ری اکت !این کتابخانه ها عموما یه عالمه کامپوننت آماده و از پیش ساخته شده در اختیار ما میزارن که باعث میشه سرعت توسعه اپیکیشن ما تا حد خیلی زیادی افزایش پیدا کنه.طبق مسیر یادگیری ریکت و به عنوان یک React Developer باید حداقل به یک فریمورک CSS تسلط داشته باشیم تا درصورت نیاز ازشون استفاده کنیم.رفقا مسیر یادگیری ری اکت شامل 20 مرحله میشه و ما تو این مقاله 5 مرحله از اون رو بررسی کردیم. لطفا برای مطالعه مابقی مراحل مسیر یادگیری ری اکت روی لینک زیر کلیک کنید :مسیر یادگیری ری اکت فرانت اندی | FrontEndi فرانت اندی | FrontEndi Sat, 09 Dec 2023 08:19:41 +0330 https://virgool.io/@frontendi/%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-%D9%88%D8%A7%D9%82%D8%B9%D8%A7-%D8%A2%D8%B4%D8%BA%D8%A7%D9%84%D9%87-%D9%85%D8%B9%D8%A7%DB%8C%D8%A8-%D8%B1%DB%8C-%D8%A7%DA%A9%D8%AA-react-%DA%A9%D8%AF%D8%A7%D9%85%D9%86%D8%AF-iusotkk0hdoz معایب Reactمعایب ری اکت چی هستن ؟! ری اکت یک کتابخانه جاوااسکریپتی قدرتمند و بشدت محبوبه! تو این مقاله میخوایم به معایب React بپردازیم و ببینیم بزرگترین مشکلات و معایب ریکت چی هستن🙂اگه به عنوان یک ری اکت دولوپر با معایب کتابخانه ری اکت آشنا باشیم و بدونیم چجوری باید باهاشون دست و پنجه نرم کنیم، کمتر دچار مشکلات رایج React میشیم ...پس اگه توسعه دهنده ری اکت هستید یا قصد شروع یادگیری ری اکت رو دارید، با فِرانت اِندی همراه باشید …معایب ری اکت کدامند ؟مثل هر کتابخانه یا فریمورک، React هم ایرادات و مشکلاتی داره !بریم ببینیم معایب React چی هستن و در نهایت به این پرسش پاسخ بدیم که با وجود معایب ریکت ، این کتابخانه ارزش یادگیری داره ؟!1- سرعت بالای توسعه ری اکتیکی از بزرگترین معایب ری اکت، سرعت بسیار بالای توسعه ی اون هست. صادقانه بخوایم بگیم، تغییر و تحولات کتابخانه React بشدت زیاده و همیشه درحال تغییر بوده!تو چند سال اخیر که خودم تو پروژه های مختلف از ری اکت استفاده کردم، تغییرات اساسی این کتابخانه رو به چشم دیدم ( از منسوخ شدن کلاس کامپوننت ها گرفته تا جایگزین شدن برخی هوک های قدیمی با هوک های جدیدتر )کتابخونه ریکت همیشه درحال تغییره و به عنوان یک React Developer باید همیشه تغییرات جدید این کتابخانه رو بررسی کنیم و خودمون رو بروز نگه داریم.ری اکت امروز، با ری اکت 2 سال پیش خیلی فرق کرده! پس اگه یک پروژه با React توسعه بدیم، باید همیشه و مدام بر اساس تغییرات جدید کتابخانه ری اکت، بروزرسانیش کنیم.سرعت تغییرات ری اکت خیلی بالاست و این میتونه یکی از معایب کتابخانه ری اکت باشه!این مورد تو سایر فریمورک ها یا کتابخانه های جاوااسکریپتی مثل Angular خیلی کمتره.اگه قصد پیاده سازی یک وب اپیکیشن با React داریم، حتما باید یک تیم نگهداری برای اون پروژه داشته باشیم تا پروژه ری اکتی خودمون رو بر اساس تغییرات جدید ری اکت، بروزرسانی کنیم.2. انعطاف پذیری خیلی بالامیدونم یکم عجیبه 🙂 چون انعطاف پذیری تو هر کتابخانه، فریمورک یا زبان برنامه نویسی به عنوان یک برتری و نقطه قوت درنظر گرفته میشه.اما React انعطاف پذیری بیش از حدی داره و این میتونه یک مورد از معایب ری اکت باشه.هر کتابخانه یا فریمورک یکسری ساختار از پیش تعریف شده برای کد زدن، استایل دهی و .. داره که توسعه دهنده ها و برنامه نویس های اون باید اون ساختار رو رعایت کنن.این ساختاری که راجبش صحبت میکنیم خیلی خیلی مهمه. شاید بپرسیم چرا؟فرض کنیم یک پروژه ری اکتی رو به ما میدن که با ری اکت توسعه داده شده، ری اکت انعطاف پذیری خیلی خیلی بالایی داره. پس توسعه دهنده های این پروژه ممکنه از هر پترن، ساختار یا روشی برای کد زدن، استایل دهی و .. استفاده کرده باشن!این یعنی ممکنه پیش بینی و درک این پروژه سخت باشه، چون توسعه دهنده های این پروژه به روش های مختلف میتونستن این پروژه رو توسعه بدن. ( اگر انعطاف پذیری ری اکت کمتر بود چنین مشکلی پیش نمیومد )اگه یک تیم React Developer رو با یک تیم جدید عوض کنیم، با پوست و خون این مشکل رو حس میکنیم 🙂البته صادقانه بخوام بگم این مورد ( انعطاف پذیری خیلی بالای ری اکت ) همیشه بحث برانگیز بوده.توسعه دهنده هایی که با فریمورک هایی مثل Angular کار کردن همیشه یک گارد نسبت به React دارن، دلیلش اینه که React مثل انگولار ساختار و چارچوب خیلی مشخصی نداره.3. ری اکت همه امکانات مورد نیاز مارو نداره!درسته که کتابخانه ریاکت یک کتابخانه غنی با ویژگی ها و امکانات فوق العاده و عالی برای پیاده سازی اپیکیشن های تحت وب بزرگ ( در حد دیجیکالا و دیوار ) هست، اما ما React Developer ها همیشه از کامل نبودن امکانات این کتابخانه شاکی بودیم :/برخلاف سایر فریمورک های جاوااسکریپتی که خودشون تمام امکانات و ویژگی های مورد نیاز مارو تامین میکنن، ری اکت این نیاز های مارو به کتابخانه های خارجی سپرده تا از اونها استفاده کنیم.اگه با معماری MVC آشنا باشیم، میدونیم که React فقط بخش View یک اپیکیشن رو کنترل میکنه. برای بخش های Model و Controller ما به کتابخانه های خارجی نیاز داریم.این یعنی اگه از ریکت استفاده میکنیم، همیشه محتاج کتابخانه های خارج از خود ری اکت هستیم ( بر خلاف فریمورک های جاوا اسکریپتی که خودشون همه چی رو دارن و کل MVC رو پوشش میدن )4. داکیومنت ضعیف ری اکتاز اونجاییکه ری اکت همیشه در حال تغییر و بروزرسانی های اساسی و ساختاریه، تیم ری اکت نتونسته داکیومنت ری اکت رو بر اساس آخرین تغییرات ری اکت بروزرسانی و نگهدارری کنه!خیلی از هوک ها منسوخ شدن اما همچنان تو داکیومنت اصلی ری اکت یا داکیومنت های سایت های دیگر موجودن! از طرفی برخی هوک های جدید مثل هوک useTransition تو کمتر داکیومنت و آموزشی هستن.شاید برای کسایی که چند سال تجربه کار با ری اکت دارن، این مورد خیلی مشکل ساز نباشه چون از تغییرات ری اکت اطلاع دارن اما برای کسی که تازه قصد یادگیری ری اکت رو داره و میخواد شروع به مطالعه داکیومنت ری اکت کنه قطعا گیج کنندس!لطفا برای مطالعه ادامه این مقاله + تیکه کدها و مثالهای بیشتر روی لینک زیر کلیک کنید : معایب ری اکت چیست ؟ فرانت اندی | FrontEndi فرانت اندی | FrontEndi Wed, 06 Dec 2023 19:24:56 +0330