#tutorial
#react
#reactjs


55 lessons from 5 years in React.

@fullStackDevs


https://bit.ly/2O2qtfv

#HOC
#DesignPattern
#ReactJs

❇️ HOC (Higher Order Component) Design Pattern in React JS

🔹 این پست درباره یکی از روش های رعایت DRY با استفاده از الگوی HOC در ری اکت جی اس میباشد.

🔸 الگوی HOC تکنیکی است که از آن برای استفاده مجدد از منطق یک کامپوننت استفاده میشود.
درواقع HOC یک فانکشن است که به عنوان پارامتر یک کامپوننت دریافت میکند و خروجی آن یک کامپوننت جدید است.

🔹شرایطی را در نظر بگیرید که برای ساخت یک کامپوننت باید منطقی را پیاده سازی کنید اما قبلا یک کامپوننت دیگر با همین منطق پیاده سازی کرده اید و دو کامپوننت فقط در UI با یکدیگر متفاوت اند، در چنین شرایطی می توانید با استفاده از HOC منطق اصلی کامپوننت پیشین خود را دوباره استفاده کنید و به جای دوباره پیاده سازی کردن آن، از آن در کامپوننت جدید خود استفاده کنید. کامپوننت جدید می تواند UI ای کاملا متفاوت از کامپوننت اصلی داشته باشد، در حالی که منطق مشابهی دارد.


▫️برای دانستن اینکه HOC چیست و چگونه میتوان از آن استفاده کرد به مثال زیر توجه نمایید :
🔻در مثال زیر یک کامپوننت clickable ساده ساخته ایم که یک Button را رندر میکند و به عنوان props یک text و یک onClick ایونت دریافت میکند.

 
import React from "react";

export function Clickable(props) {
  return <Button onClick={props.onClick}>
    {props.text}
  </Button>
} 

🔻حال با استفاده از HOC می خواهیم کامپوننتی بسازیم که منطقی یکسان دارد و به آن ویژگی های جدید اضافه کنیم همچنین لازم است کامپوننت خود را Toggleable کنیم. و از این به بعد هر زمان که به HOC فانکشن خود یک Clickable کامپوننت به عنوان پارامتر دهیم یک کامپوننت جدید با عملکری Toggleable ریترن میکند.
```
import React from "react";

makeToggleable(Clickable) {

return class extends React.Component {

constructor() {
super();
this.toggle = this.toggle.bind(this);
this.state = {
show: false
};
}

toggle() {
this.setState(prevState => ({ show: !prevState.show }));
}

render() {
return (
<div>
<Clickable {...this.props} onClick={this.toggle} />
{this.state.show && this.props.children}
</div>
)
}
}
} ```


@fullStackDevs

#vuejs
#ReactJs

🔰در این پست می خوایم یه کار خطرناک کنیم و react و vue رو یه مقایسه ای با هم کنیم و reactDeveloper ها و vuejsDeveloper ها رو کلا بندازیم به جون هم😎.

❇️ سال میلادی جدید نزدیکه و تو این پست برای دولوپرهایی که برای سال جدید برنامه ریختن که بلاخره چه فریم وورک یا لایبری UI ای رو یاد بگیرین، میخایم یه مقایسه بین react و vue بزاریم با این عنوان که :
🔹React vs Vue.Which one is the best ini 2021?

🔸هر دوی ری اکت و ویو از لایبری های پرقدرت در زمینه frontEnd هستن که طرفدار های زیادی هم در بین دولوپر ها دارن اما ری اکت طرفدار های بیشتری داره چون عمر ری اکت چند سالی بیشتر از vue هست.

🔹تفاوت React و vue در چیه؟
به این سوال از چند وجه میشه پاسخ داد که در ادامه اونها رو لیست میکنیم.
▫️Background :
▪️ری اکت با هدف رفع نیاز های فیسبوک ساخته شده و تا به امروز غولهای فناوری باعث حفظش شدن. حمایت غولهای فناوری باعث ثبات و اطمینان از آینده ری اکت میشه.

▪️ویو توسط یک دولوپر (Evan You) ساخته شده و هدفش بهبود پرفورمنس js tools ها بوده. اقای Evan هر چی رویکرد خوب داخل انگولار و امبر و ری اکت بوده اورده داخل vue و یه سری ویژگی های خاص مخصوص vue هم بهش اضافه کرده. همه اینکار ها باعث شده که توسعه اپلیکیشن با ویو خیلی راحت و سریعتر بشه.

▫️Performance
▪️وقتی که حرف از مقایسه بین ری اکت و ویو میشه مقایسه کردن از لحاظ پرفورمنس معیار قابل توجه ای نیست از لحاظ پرفورمنس ویو از ری اکت به مقدار ناچیزی بهتره و علاوه بر فیچر های خیلی خوبی که داره حجمش هم کمتره . اما اختلاف شون اونقدر های فاحش نیست که بشه در نظر گرفتش، مخصوصا که هر دو لایبری از روش مشابه ای برای ارتباط با DOM استفاده میکنند.
▫️Community Support for React and Vue
برای هر ابزاری کامیونیتیش حیاتی ترین مسئله هست چون کامیونیتی غنی باعث میشه بقیه افراد به سمتش سوق پیدا کنن .

▪️از اونجایی که ری اکت توسط فیسبوک maintain میشه و دائما در حال اپدیت هست، یه قابلیت اطمینانی رو برای دولوپر هاش به ارمغان میاره.

▪️ویو که توسط کارمند سابق گوگل ساخته شده، فاقد پشتیبانی شدن توسط یه برند خاصه و این مسئله ویو رو انتخاب قابل اعتمادی برای شرکت های فناوری دیگه نمیکنه . علی رغم این باز هم ویو طرفدار های خیلی زیاده داره و این دلیل، مهر تایید محکمیه بر قدرت و راحتی vue.

▫️منحنی یادگیری React و Vue به چه شکله ؟

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

▪️توسعه اپلیکیشن با ری اکت وابسته
به third-party هاست. و این گاهی اوقات باعث میشه تا دولوپر ها مجبور باشن ابتدا اطلاعات زیادی بدست بیارن تا فقط بتونن کارهاشونو پیش ببرن.
اما documentation ری اکت خیلی خوب و غنیه و هزاران مقاله و وبلاگ هم میتونین سرتاسر اینترنت پیدا کنین. تا اونچکه که تو ذهنتون دارین رو به کمک ری اکت پیاده سازی کنین.

▪️یادگرفتن ویو خیلی راحته و خیلی سریع بهش عادت میکنین چون همانطور که قبلا تر گفته شد این لایبری هر چی فیچر خوب تو سایر لایبری ها بوده رو اورده تو خودش.همچنین vue داکیومنت خوبی هم داره و بخش FAQ اون سعی داره تا به تمامی سوالات پاسخ بده و سوالها رو بدون پاسخ نذاره. (با این قسمت هنوز کار داریم در ادامه)
از میان ری اکت و ویو بین دولوپر ها ویو developer-friendly تر هست.
▫️Popularity
▪️ری اکت چون توسط فیسبوک پشتیبنی میشه در میان لایبری های جاوااسکریپتی محبوبیت بالایی داره و نقش leader رو بازی میکنه.

امار دانلودهای ویو هم نسبت به عمر کمترش نسبت به ری اکت فوق العاست.

▫️Documentation
▪️از لحاظ دایکیومنت، داکیومنت ری اکت به مرور در حال بهبوده و تیم ری اکت دائما در تلاش اند تا داکیومنت ری اکت رو بهتر و بهتر کنند در مقایسه با ویو، داکیومنت ویو خیلی structure شده هست.
با تمام حرف های گفته شده بیان به سوال اولمون پاسخ بدیم که :
🔸What is the best choice for 2021?
▪️از نظر توسعه، ری اکت گزینه بهتری برای یادگیری در سال پیش روست و بعد اون ویو در جایگاه دوم قرار داره.

🔹آیا ویو بلاخره موفق میشه تا از پس ری اکت عبور کنه؟
▪️تا اونجایی که میشه پیش بینی کرد بدون شک ویو یکی از رقبایی برای ری اکت خواهد بود که حرفهایی زیادی برای گفتن داره و برای رسیدن vue به پلتفرمی که الان ری اکت هست و کسب این جایگاه زمان زیادی لازمه .
در ادامه گوگل ترند react و vue رو میذاریم .

🔹چرا ری اکت از ویو بهتره ؟
جواب متخصص ها به این سوال این گونه بوده :
▪️ری اکت، مسائل و مشکلات رو به صورت fundamental حل میکنه . البته چرایی وجود این چنین مشکلات اهمیت داره اما از نظر عملکرد و بهینه سازی و سهولت در توسعه، ری اکت در مراتب بالاتری قرار داره.

ادامه در پست بعدی
@fullStackDevs

#Vuejs
#ReactJs
ادامه پست قبلی

🔹Which one Is better for beginners?

▪️تمرکز ویو بروی beginner ها بوده و حتی برای کسایی که میخان ری اکت رو یاد بگیرن توصیه میشه اول ویو رو یاد بگیرن چون بعدا راحتر اکو سیستم ری اکت رو درک میکنند. در ابتدا، نقطه ورود توسعه با ویو راحتره و نیازمند داشتن اطلاعات کمتریه .
▪️ری اکت برای توسعه اپلیکیشن های پیچیده و بزرگ مثل e-commerce ایده آل تره اگر چه ویو هم برای ساختن اپلیکیشن های سبکتر مناسبه.
البته این هنر دولوپره بسته به دانشش چطور از ابزارها استفاده کنه.

❇️ خب این پست رو همین جا تموم می کنیم. اگر نظر داشتین یا فک میکنین که جایی اجحاف شده تو کامنت ها ذکر کنین.

❌ انتشار این پست بدون ذکر منبع کار غیر اخلاقی ایه🙏.
@fullStackDevs

#Reactjs
#React17

#قسمت1

🔹بعد از انتشار نسخه 16 ری اکت و با اضافه شدن قابلیت Hooks بسیاری از توسعه دهنده های این کتابخانه به فکر بروزرسانی کدهایی که نوشته بودند، افتادند اگر چه که با کد های قدیمی هم اپلیکیشن هاشون کار میکرد ولی قابلیت Hooks و شخصی سازی و پرفورمنس فانکشنال کامپوننت ها (Functional Component ها ) اون ها رو برای بروزرسانی کد هاشون وسوسه میکرد .

🔸در یکی از صفحات داکیومنت ری اکت به مشکلاتی که کلاس کامپوننت ها (Class Component) داشتند اشاره شده که پیشنهاد میکنم از این لینک حتما مطالعه کنید .

📎 https://reactjs.org/docs/hooks-intro.html

🔹خیلی از مواردی که اون زمان برای توسعه دهنده های ری اکت اتفاق افتاده بود مثل گمراه شدن در استفاده از (this) یا لفظی که خود توسعه دهندگان ری اکت بهش اشاره کردند

(Classes confuse both people and machines)❕

🔸که کلاس کامپوننت ها هم توسعه دهنده ها و هم ماشین ها رو دچار گمراهی کرده بودند این ذهنیت رو در توسعه دهنده های ری اکت جا انداخت که اون ها علاوه بر اینکه میتونن نقش خیلی جدی تو فیچر های آینده ری اکت یا حل مشکلاتش داشته باشند ، میتونند همه تقصیر ها رو هم گردن ری اکت بندازن!

🔹حدودا 5 ماه از نسخه بروز شده ری اکت یعنی ری اکت 17 میگذره ، ری اکت همونجوری که در داکیومنت رسمی خودش گفته بود هیچ ویژگی جدیدی به ری اکت اضافه نکرده و بعد از دو و نیم سال آب پاکی ریخته رو دست توسعه دهندگانش!
البته کمی خواست در نسخه 17 ری اکت اونارو راضی نگه داره به طور مثال دیگ با قابلیت جدید JSX Transform نیاز نبود شما ابتدای هر خط ری اکت رو ایمپورت کنی و یا دیگ نیاز نبود مثل تغییر از ری اکت 15 به 16 کل کامپوننت هاتو فانکشنال کنی میتونستی دو نسخه از ری اکت همزمان روی یه اپلیکیشن داشته باشی و یکیش رو به حالت Lazy Load در اپلیکیشنت داشته باشی ! اما خود توسعه دهنده های ری اکت هم متوجه این موضوع شدند که بعد دو و نیم سال با توجه به اون انتشار طوفانی نسخه 16 ، طرفداران ری اکت نیاز به حداقل یه فیچر جذاب دارند و اونارو نمیشه با این فیچر هایی که ری اکت 17 داره راضی نگه داشت !

🔹بنظر شخصی من ری اکت در رقابت با فریم ورک هاش (در عین دوستی خیلی نزدیکی که با هم دارند ) داشت خیلی عقب میوفتاد ! قابلیتی مشابه JSX Transform خیلی وقت بود در Nextjs وجود داشت ! خیلیا ری اکت رو در نسخه 17 محکوم به کپی برداری از فریم ورکش کردند و بیشتر از اینکه دنبال فیچر جدید باشه سعی کرده بود فیچر های فریم ورک هاش رو اضافه کنه به خودش ! ولی خب اینا همه تنها دلیل کوچ توسعه دهنده های ری اکت به سمت نکست نبود ! اونا دغدغه های مهم تری داشتند که تو ری اکت نتونستند راحت بهش برسند ! خیلی از توسعه دهنده های ری اکت به دلیل اینکه تازه کار بودند اطلاعات خوبی از وب پک نداشتند یا کد های بهینه ای نمیزدند ، با Code Spiliting آشنا نبودند و فکر میکردند که سئو سایت های ری اکت یک امتیاز منفی براشون در رقابت با رقیبانشون بشمار میره ، البته این موارد همه ی دلایلی که اونارو مجبور به کوچ به نکست کرد نیست اما شاید میتونم بگم اگر یه قابلیت (SSR) به ری اکت اضافه میشد خیلی از این تبدیل های پر هزینه انجام نمیشد ! خیلی تونستن این کار رو با اضافه کردن Express js و به شکل دستی انجام بدن و خیلی اپلیکیشن های جالب و جذابی شد ولی متاسفانه بسیاری از ساید افکت هایی که ایجاد میشد و دانش متوسط تیم های توسعه شاید باعث میشد عطای این کار رو به لقاش ببخشند !

🔹 بالاخره بعد این مقدمه طولانی میرسیم سر اصل مطلب و اون هدیه کریسمسی تیم توسعه ری اکت به توسعه دهندگانشه ! و اون هم چیزی نیست جز Server Components ❕❕

ادامه در قسمت بعد...
@fullStackDevs

#Reactjs
#React17

قسمت اول
#قسمت2

🔹بالخره بعد این مقدمه طولانی میرسیم سر اصل مطلب و اون هدیه کریسمسی تیم توسعه ری اکت به توسعه دهندگانشه ! و اون هم چیزی نیست جز Server Components !!

تیم توسعه ری اکت بعد از انتشار نسخه 17 و انتقاداتی که بهش وارد شد ، برگ آخرش رو برای روز های پایانی سال 2020 رو کرد !
و حالا این قابلیت چیه و به چه کاری میاد ⁉️

🔸اول از همه این مورد رو بدونید که این قابلیت در حال توسعه و تحقیق هست و هنوز به طور رسمی انتشار ندادنش و فعلا تنها چیزی که ازش داریم یه ویدیو و یه مخزن کد (ریپازیتوری) هست که پیشنهاد میکنم حتما ازش کلون بگیرید و با شکل و شمایل اتفاقاتی که داخلش میوفته آشنا بشید .

https://github.com/reactjs/server-components-demo

https://youtu.be/TQQPAU21ZUw

🔹این قابلیت به طور خلاصه RSC یا React Server Components نام داره ، در ویدیو معرفی که داخل سایت داکیومنت ری اکت هم هست ، یک کامپوننت به طور دمو ساخته شده و موارد و اتفاقات این ویژگی رو در اون بررسی میکنه ، پیشنهاد میکنم حتما اون ویدیو رو از دست ندین !

❇️ به طور خلاصه مواردی که این قابلیت قراره به ری اکت اضافه کنه این موارده :

🔹اجرای RSC فقط بروی سرور بدون بانل سایز ! (باندل سایز 0 ، دقیقا مشکلی که خیلیا با ری اکت داشتند باندل سایز های حجیم بود که باعث کند شدن اون کامپوننت و در نهایت کند شدن اپلیکیشنشون میشد )
🔹شما با RSC میتوانید مستقیما به دیتا های سمت سرور دسترسی داشته باشید به این شکل که شما میتونین مستقیما روی دیتابیس کوئوری بزنید یا با میکروسرویس ها یا فایل سیستم های روی سرورتون دسترسی داشته باشید ( فقط میتونم بگم فوق العادست ! )
🔹با RSC شما میتونین تعیین کنین که کدوم کامپوننت سمت کاربر رندر بشند و کاربر فقط اون مقدار از کدی که میخواد و مورد نیازشه رو فقط مشاهده کنه ( دقیقا مشابه قابلیت های Code Spiliting و Lazy loading که ری اکت در داکیومنتش بررسی کرده بود اما این بار سمت سرور (مثل نکست ) که خیلیا ازش استفاده میکردند )
🔹استیت های شما با ریلود یا ری رندر شدن کامپوننت های سمت سرور یا RSC تون از بین نمیرن و تخریب نمیشن !
🔹کسایی که از React Lazy استفاده میکردند همزمان با اون از قابلیت به نام Suspense استفاده میکردند به این نحو که در هر حال تا زمانی که اون کامپوننت لود بشه یا حتی اگر لود نشه و خطا بخوره اون Suspense کال میشه و شما میتونین اونرو برای خودتون شخصی سازی کنین یا مثلا میتونستین لودینگ برای کامپوننتون بزارین ! و حالا این قابلیت در RSC ها هم وجود داره و اون ها به شکل واحد های استریم مانند به UI شما تزریق میشن این قابلیت میتونه به توسعه دهنده های ری اکت کمک کنه اونا تیکه تیکه به یوزر دیتا رو نشون بدن تا پرفورمنس اپلیکیشن بالاتر بره ! همه این ها با قابلیتی هم اسم و مشابه Suspense انجام میگیره !
🔹توسعه دهنده های ری اکت میتونن کد هاشونو بین سمت سرور و سمت کاربر منتشر کنند به این نحو که شمه میتونین یه کامپوننت که برای نشون دادن یه متن ثابت یا استاتیک استفاده میشه رو سمت سرور بسازید بعد اون رو سمت کاربر داینامیک کنین اینجوری دیگ تنها زمانی که این وسط تلف میشه داینامیک شدن کامپوننته نه ساختنش ! و این میتونه کولاک کنه !

▪️Zero-Bundle-Size Components

🔸اتفاقی که تا اینجا و تا همین زمانی که من برای شما مینویسم تو حوزه توسعه اپ های ری اکتی میوفتاد این بود که ما از یه سری پکیج ها استفاده میکردیم به طور مثال از Jalali Moment یا Moment برای تبدیل تاریخ هامون استفاده میکردیم یا از sanitize-html برای تمیز شدن کد های html از ckeditor یا ما بقی ادیتور ها استفاده میکردیم یا حتی خیلی از پکیج هایی که کار رو برامون راحت میکردند ولی خب همونجوری که میدونین همه این پکیج ها یک فضایی رو اشغال میکنن و زمانی که با gzip اون ها رو کامپکت میکردیم و webPack هم اون ها رو باندل میکرد به یک فضای اشغال شده ای میرسیدیم که بهش باندل سایز میگفتیم ! خب فرض کنین یه کامپوننت دارین که از هیچ کدوم از این پکیج ها استفاده نکرده بود ولی خب چون این پکیج نصب شده بود و ایمپورت شده بود باندل سایز داشت ! به طور مثال

import Momentfrom 'moment';   // 35.9K (11.2K gzipped) 

import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)

 function Calender({text}) { 
// some code for date converting and use sanitizeHtml 
// for cleaning Html From Ckeditor markups !
  }

@fullStackDevs

#ادامه - پست قبل
🔹 حالا میخواین بدونید بعد این قابلیت چه اتفاقی میوفته ؟ این شکلی میشه !

import Momentfrom 'moment';   // Zero bundle size  

import sanitizeHtml from 'sanitize-html'; //  Zero bundle size 

function Calender({text}) { 
 // some code for date converting and use sanitizeHtml
 // for cleaning Html From Ckeditor markups !  
 }

❇️ بله دقیقا چیزی که انتظار داشتیم ! پکیج های ما دیگ سمت سرور باندل سایزی رو به اپلیکیشن ما تحمیل نمیکنند و این فیچر به نظر میتونه یکی از انقلابی ترین قابلیت های ری اکت بین تمامی نسخه هایی باشه که تا الان ریلیز کرده !!!

البته فعلن باتوجه به اعلام تیم ری اکت منتظر بعد کریسمس باید باشیم و ببینیم که این فیچر که فعلن در حالت توسعه و تحقیق تیم ری اکت هست کی قراره ریلیز بشه!

💎ممنون از وقتی که قرار دادین و این مقاله رو مطالعه کردین اگر این مقاله رو دوست داشتین حتما برای دوستانتون بفرستین تا بتونن از اتفاقاتی که در حوزه ری اکت قراره بیوفته مطلع بشن !✌🏻

@fullStackDevs

#frontend #roadmap

That’s the way to start learning
#ReactJS in 2022 🤯🚀


@fullStackDevs