توی لینک زیر یه قالب داشبورد حرفه ای طراحی شده که برای ایده گرفتن طراحی داشبورد میتونه بهتون کمک کنه و همچنین نسخه rtl هم داره

لینک:
http://skote.vuejs-light.themesbrand.com/

Community: @ReactSource

اینم یه سایت که کلی لودر و پری لودر داره که میتونین توی سایتتون ازشون استفاده کنید😃

لینک سایت:
https://www.sliderrevolution.com/resources/css-loaders/


Community: @ReactSource

22 ابراز که نیازمند توسعه دهندگان React هستند، که شاید از خیلیاشون توی پروژه هاتون ازشون استفاده کرده باشید اما با بقیشون هم آشنا بشید بد نیست 😊

لینک سایت:
https://blog.faradars.org/important-tools-for-react-developers/


Community: @ReactNative

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

لینک مقاله:
https://virgool.io/@faridshariati989/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%D9%85%D8%A7%D9%85-%D9%87%D9%88%DA%A9-%D9%87%D8%A7%DB%8C-react-js-o065rkwm4qju


Community: @ReactSource

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

لینک مقاله:
https://blog.faradars.org/start-using-react-query/

لینک داکیومنت:
https://react-query.tanstack.com/


Community: @ReactSource

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

لینک مقاله:
https://medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21


Community: @ReactSource

در مقاله زیر اکثر سوالات استخدامی توسعه دهندگان ری اکت جمع آوری شده با یادگیری و فهم آنها میتونین موفق تر از مصاحبه هاتون رد بشید 😊

لینک مقاله:
https://react.sayjeyhi.com/


Community: @ReactSource

توی مقاله زیر 6 اپلیکیشن موبایل که با ری اکت نیتیو نوشته شده اند به صورت اپن سورس در دسترس عام قرار گرفتند که واسه کسانی که تازه شروع کردن میتونه یه نمونه کد باشه😊

لینک مقاله:
https://reactapp.ir/6-react-native-open-source-projects-to-learn-from/

توجه: برای دسترسی به سورس روی تایتل هر پروژه کلیک کنید.


Community: @ReactSource

توی سایت زیر 8 نمونه پروژه واسه کسانی که تازه وارد راه ری اکت شدند جمع آوری شده که میتونن ایده بگیرند و پروژه های خودشون رو طبق این ایده ها و نمونه کد ها افزایش یا پیاده کنند😊

لینک سایت:
http://lifetechlab.ir/blog-post/8-%D8%A7%DB%8C%D8%AF%D9%87-%D9%BE%D8%B1%D9%88%DA%98%D9%87-react-js-%D8%A8%D8%B1%D8%A7%DB%8C-%DA%A9%D9%85%DA%A9-%D8%A8%D9%87-%D8%B4%D9%85%D8%A7-%D8%AF%D8%B1-%D8%B4%D8%B1%D9%88%D8%B9-%DB%8C%D8%A7%D8%AF/


Community: @ReactSource

در مقاله زیر آموزش ریداکس و نحوه کار ریداکس جمع آوری شده واسه کسانی که مشکل دارن توی ریداکس و میدلویر های ریداکس


لینک مقاله:
https://virgool.io/@mmdsharifi/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%DB%8C%D8%AF%D8%A7%DA%A9%D8%B3-redux-%D8%A8%D9%87-%D8%B2%D8%A8%D9%88%D9%86-%D8%A2%D8%AF%D9%85%DB%8C-%D8%B2%D8%A7%D8%AF-zr5v5xgoredh



Community: @ReactSource

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

لینک سایت:
https://www.npmjs.com/package/redux-persist



Community: @ReactSource

سئو چیست؟ (بهینه سازی سایت)

سئو برگرفته از عبارت Search Engine Optimization است که کلمات معادلی چون SEO یا بهینه سازی موتور جستجو دارد که همگی آنها به یک معنی می باشند و می توان آن را بصورت زیر تعریف نمود:

سئو (بهينه‌سازي موتور جستجو) به معناي فريب و يا دستکاري موتور‌هاي جستجو با روش‌هاي غير اخلاقي نيست. آن‌ها براي کمک کردن به بهبود رويت و ارتباط وب سايت‌ها در نتايج جستجوي طبيعي با هدف رسيدن به رتبه‌بندي بالا، ايجاد شده‌اند.

سئو را مي‌توان مجموعه‌اي از روش‌ها براي تغيير استراتژيک وب سايت‌ها دانست. اين فرآيند به بيان مهمترين عوامل مرتبط صفحه و افزايش اهميت آن در صفحه نتايج جستجو، مي‌پردازد.

سئو فرآيند ساده‌اي نيست که به راحتي پياده‌سازي شود زيرا نيازمند دانش زياد، علم پيش زمينه‌اي و صبر است. موتور‌هاي جستجو با تغيير مداوم الگوريتم‌هاي رتبه‌بندي خود غير قابل پيش‌بيني هستند؛ بنابراين وظيفه مهندسين سئو بروز نگه داشتن اطلاعات خود در اين زمينه است.

سئو سایت یا بهینه سازی سایت یکی از فعالیت هایی است که توسط سئوکار انجام می شود.

الگوريتم رتبه‌بندي گوگل داراي بيش از 200 معيار جهت رتبه‌بندي يک سايت است. از اين رو مهندسين سئو مي‌بايست مهم‌ترين اين معيار‌ها را جهت پياده‌سازي موفق سئو بدانند.

اهداف سئو را می توان بصورت زیر خلاصه نمود:

❇️ در بازدید وب سایت تاثیر بسزایی دارد.
باعث ایجاد برند می شود.
❇️ باعث افزایش ترافیک سایت خواهد شد.
❇️ باعث شده وب سایت در صفحه نتایج موتور جستجو از رتبه بهتری برخوردار شد.
❇️ باعث افزایش فروش محصولات خواهد شد.
بهترین ابزار برای تبلیغات است.


Community: @ReactSource

اصطلاح ریسپانسیو چیست ؟ (واکنش گرا)

طراحی ریسپانسیو (Responsive Design) یا واکنشگرا مربوط به تغییر ظاهر صفحات سایت متناسب با سایز مرورگر کاربران است. یعنی ظاهر وب‌سایت در تمام دستگاه‌هایی که کاربر با آن از سایت دیدن می‌کند (مثل موبایل، تبلت، لپتاپ و..)، مناسب باشد.

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


Community: @ReactSource

یه معماری پیاده سازی کردم واسه پروژه های ری اکت که با استفاده از این معماری خیلی کارتون راحت تره و فایل استرکچر خوبی داره که روی گیت هاب اپلوده میتونین کلون کنین و استفاده کنین 😊

لینک سایت:

https://github.com/mohammadsalehkarimi/cra-advance-structure


Community: @ReactSource

یه دونه هم کاستوم هوک نوشتم واسه راحتی صفحه بندی اطلاعات بدون دردسر و خیلی راحت که با نمونه برداری از این کاستوم هوک میتونین به تمامی مقادیرش دسترسی داشته باشین و اطلاعاتتون رو به سادگی صفحه بندی کنید

لینک سایت:
https://github.com/mohammadsalehkarimi/CustomHook-usePagination



Community: @ReactSource

البته نا گفته نماند هر کسی دوس داشت میتونه یه برنچ بسازه و بهینه ترش کنه یا UI رو عوض کنه هرکسی تمایل داشت pv اطلاع بده

در این مطلب ما قصد داریم 10 مورد از بهترین پکیج های NPM را به شما معرفی کنیم که اگر شما هم به تازگی یادگیری React را آغاز کرده اید یا این که در این زمینه با تجربه هستید کار کردن با آنها می تواند برای شما مفید و کاربردی باشد. پس اگر شما هم در این زمینه فعالیت دارید به شما پیشنهاد می کنیم حتما ادامه این مطلب را درباره پکیج های NPM با دقت مطالعه کنید.

لینک سایت:
https://barnamenevisan.org/Articles/Article9013.html


Community: @ReactSource

خیلی از دوستان راجب استفاده کردن مپ توی پروژه ها میپرسن و دچار مشکل شدن بابت تحریم های گوگل مپ و استفاده از مپ های خارجی دیگه، پکیجی که میخام معرفی کنم مپ باکس هستش که شاید اسمش رو شنیده باشین این پکیج بسیار تا بسیار کامله و حتی مپ اسنپ هم مپ باکس هستش حالا سوال اینجاست مپ باکس که خارجیه چجوری میتونیم apiKey دریافت کنیم و اصلا میشه پرداخت کرد یا نه؟ در جواب باید بگم که نیازی به خرید مپ باکس نیست یکی از سایت های ایرانی اومده که نسخه فارسی مپ باکس رو ساخته و شما میتونین با خرید از سایت ایرانی apiKey مپ باکس رو دریافت کنین یعنی مپ رو با پکیج ایرانی میارین بالا اما تمامی داکیومنت مپ از داکیومنت پیروی میکنه و شما میتونین خیلی راحت از مپ باکس استفاده کنین 👌🏻😄

لینک سایت مپ باکس:
https://www.mapbox.com/

لینک سایت سیدار ( مپ فارسی مپ باکس ):
https://www.cedarmaps.com/

پکیج استفاده از سیدار داخل ری اکت:
https://www.npmjs.com/package/@cedarstudios/react-cedarmaps

پکیج استفاده از سیدار داخل ری اکت نیتیو:
https://www.npmjs.com/package/@cedarstudios/react-native-cedarmaps


Community: @ReactSource

styled-components

یک کتابخونه دوست داشتنی برای استایل دادن به المان ها در ری اکت!

کتابخانه styled components کامپوننت هایی از المنت های html که دارای استایل هستند را به ما تحویل میده که چندین مزیت داره:

1- مدیریت ساده تر
در بعضی مواقع خوندن و مدیریت کد رو ساده تر میکنه. شخصا دوست دارم زمانی که با یک کامپوننت کار دارم همه چیز های مربوط بهش رو یکجا ببینم و بین فایل های مختلف جابجا نشم.

2- کد های شرطی راحت تر
به مراتب پیش میاد که مقادیر شرطی در کامپوننت خود نیاز پیدا میکنیم مثل حالت فعال و عادی توی یه دکمه رو میخواید پیاده سازی کنید که نیازمند چندین شرط بر روی باتن خود می شویم ولی با این کتابخونه می توانیم به راحتی با دادن props به راحتی کلی استیل را به صورت شرطی رندر کنیم و پیاده سازی تم ها را در پروژه خود به راحتی پیاده سازی کنیم.

3- تست راحت تر
به خاطر اینکه styled-component ها در واقع توابع ساده ای هستند، بنابراین نوشتن تست هم براشون خیلی کار ساده تری هست. البته من خودم از این قابلیت تابحال استفاده نکردم ولی ارزش داره که بهش اشاره بشه.

نمونه :
expect(box).toHaveStyleRule('background-color', '#f77d01');

4- استایل های ایزوله
به نظرم یکی از مهم ترین خصوصیات این کتابخونه همین مورد هست،ین کدی هست که شما نوشتید:
const MyButton = styled.button
position: absolute;
left: 0px;
bottom: 35px;
border: none;
border-radius: 10px;
padding: 3px;
color: #fff;
background-color: #71560770;
z-index: 100;
display: block;
;

و در نهایت چیزی که در مرورگر به‌ وجود میاد اینه:
<button
id="my_button"
aria-label="please fill the button box"
name="button"
class="sc-gkaary hebyfa""
>...</button>

همینطور که میبینید اسم کلاس ها عجیب و غریب شده! مطمینا اگر شما دارید یک widget میسازید که قرار هست روی یک host اجرا بشه این فیچر به کارتون میاد چون از این طریق تا حدودی مشکل style conflict رو حل میکنه.

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

و درنهایت ساختار یک کامپوننت با styled components با مقادیر شرطی:
const MyDiv = styled.div
background-color: #ffffff;
margin: 2% 0;
border-top-left-radius: 1.25rem;
height: 93%;
transition: all 0.3s linear;
transform: ${(props) => (props.open ? "translateX(0)" : "translateX(50%)")};
width: ${(props) => (props.open ? "24vw" : "12vw")};
}
;

نصب این کتابخونه:
npm i styled-components

سایت مرجع و داکیومنتشن:
https://styled-components.com/


Community: @ReactSource