#javanoscript #سوال_مصاحبهای
✅ بچه ها تو این ریپازیتوری 25 مورد از
رو جمع آوری کردم.
برید ببینید و استار بدید ⭐️
اگر هم سوالی بود که توی این ریپو ندیدید, خودتون بنویسید و ریکویست بدید منم بررسی کنم و اضافش کنم به ریپو 🤩
https://github.com/amirnobari/Employment-Questions
Channel | Group | YouTube
✅ بچه ها تو این ریپازیتوری 25 مورد از
سوالهای استخدامی مهم در مورد جاوااسکریپت
رو جمع آوری کردم.
برید ببینید و استار بدید ⭐️
اگر هم سوالی بود که توی این ریپو ندیدید, خودتون بنویسید و ریکویست بدید منم بررسی کنم و اضافش کنم به ریپو 🤩
https://github.com/amirnobari/Employment-Questions
Channel | Group | YouTube
GitHub
GitHub - amirnobari/Employment-Questions: This repository covers JavaScript recruitment questions in Persian language
This repository covers JavaScript recruitment questions in Persian language - amirnobari/Employment-Questions
🔥6👍3❤🔥2
امروز میخوایم در مورد هوک useRef باهم دیگه صحبت کنیم
این هوک در ریاکت برای ایجاد مرجع (Reference) به یه المان توی DOM یا یه متغیر دیگه استفاده میشه.
حالا چطوری ازش استفاده کنیم؟
موقع تعریف کردنش میتونیم بهش مقدار اولیه هم بدیم
خب بیاین یه مثال کاربردی هم بزنیم تا کامل برامون جا بیفته:
فرض کنید میخوایم ارتفاع صفحه کاربر رو برحسب پیکسل به دست بیاریم پس لازمه به المان روت خودمون توی DOM دسترسی داشته باشیم و برای اینکار باید از useRef استفاده کنیم تا یه ارجاع یا Reference به اون المان ایجاد کنیم با اینکار میتونیم ارتفاع اون المان رو ازش بیرون بکشیم.
Channel | Group | YouTube
این هوک در ریاکت برای ایجاد مرجع (Reference) به یه المان توی DOM یا یه متغیر دیگه استفاده میشه.
حالا چطوری ازش استفاده کنیم؟
موقع تعریف کردنش میتونیم بهش مقدار اولیه هم بدیم
const myRef = useRef("Megdar Avalie")خب بیاین یه مثال کاربردی هم بزنیم تا کامل برامون جا بیفته:
فرض کنید میخوایم ارتفاع صفحه کاربر رو برحسب پیکسل به دست بیاریم پس لازمه به المان روت خودمون توی DOM دسترسی داشته باشیم و برای اینکار باید از useRef استفاده کنیم تا یه ارجاع یا Reference به اون المان ایجاد کنیم با اینکار میتونیم ارتفاع اون المان رو ازش بیرون بکشیم.
import { useEffect, useRef } from "react"
export default function App() {
const myRootElement = useRef();
useEffect(() => {
console.log(
"Height of Root Element:", myRootElement.current.offsetHeight
);
}, []);
return (
<div ref={myRootElement}>
<h1> Deep Devs </h1>
<span>Join to Channel for more tutorial </span>
</div>
);
}Channel | Group | YouTube
👍5
#Tips_N_Tricks
#Npm
✅ بچه ها تو این ویدیو مشکل نصب نشدن پکیجها توی NPM بخاطر عدم وجود فولدر npm و ادد نبودن در قسمت متغییرهای محیطی ویندوز رو توضیح دادم و یاد دادم که چطور حلش کنید.
https://youtu.be/RbuLNJ5sNRM
Channel | Group | YouTube
#Npm
✅ بچه ها تو این ویدیو مشکل نصب نشدن پکیجها توی NPM بخاطر عدم وجود فولدر npm و ادد نبودن در قسمت متغییرهای محیطی ویندوز رو توضیح دادم و یاد دادم که چطور حلش کنید.
https://youtu.be/RbuLNJ5sNRM
Channel | Group | YouTube
👍4🔥3❤2
یعنی چقدر بدبخت شدیم و کارمون به کجا رسیده که یه پکیج میخوایم از npm نصب کنیم باید فیلترشکن بزنیم
خدایا، حکمتتو شکر
خدایا، حکمتتو شکر
💔35😡5👌2
#objects
#javanoscript
✅ متدهای کاربری برای آبجکتها
✅ بعضیهاش تو این پست توضیح داده شده
https://news.1rj.ru/str/DeepDevs/554
Channel | Group | YouTube
#javanoscript
✅ متدهای کاربری برای آبجکتها
✅ بعضیهاش تو این پست توضیح داده شده
https://news.1rj.ru/str/DeepDevs/554
Channel | Group | YouTube
👍8🔥2
♨️ وبپک (Webpack) چیست؟ چرا باید ازش استفاده کنیم؟
فرض کنید یه اسکریپتی به پروژه اضافه کردید و توش از کتابخونه جیکوئری استفاده شده ولی چون اسکریپتتون رو بالا تر از ایمپورت جیکوئری ایمپورت کردید خطا گرفتید و کد اجرا نشده یا مرورگر کد جاوااسکریپت رو کش کرده و تغییراتی که توی کد دادید اعمال نمیشه.
تا حالا شده از یه قابلیت پیشرفته جاوااسکریپت بخواین استفاده کنید ولی نگران این هستین که همه مرورگر ها ساپورتش نکنن؟
حالا هرچی پروژه بزرگتر باشه مدیریت کردن اینجور مسائل هم سختتر میشه
💠 کار وبپک باندل (بستهبندی) و مدیریت کردن فایل های استایل، عکس، اسکریپت و فونت هستش یکی از مهمترین مزیت هاش پشتیبانی از پلاگینهای مختلفه که کارهایی مثل مینیفای کردن یا تبدیل فایل های sass و less به css رو براتون انجام میده.
#reactjs #bundler #Tools
🌐 https://webpack.js.org
Channel | Group | YouTube
فرض کنید یه اسکریپتی به پروژه اضافه کردید و توش از کتابخونه جیکوئری استفاده شده ولی چون اسکریپتتون رو بالا تر از ایمپورت جیکوئری ایمپورت کردید خطا گرفتید و کد اجرا نشده یا مرورگر کد جاوااسکریپت رو کش کرده و تغییراتی که توی کد دادید اعمال نمیشه.
تا حالا شده از یه قابلیت پیشرفته جاوااسکریپت بخواین استفاده کنید ولی نگران این هستین که همه مرورگر ها ساپورتش نکنن؟
حالا هرچی پروژه بزرگتر باشه مدیریت کردن اینجور مسائل هم سختتر میشه
💠 کار وبپک باندل (بستهبندی) و مدیریت کردن فایل های استایل، عکس، اسکریپت و فونت هستش یکی از مهمترین مزیت هاش پشتیبانی از پلاگینهای مختلفه که کارهایی مثل مینیفای کردن یا تبدیل فایل های sass و less به css رو براتون انجام میده.
#reactjs #bundler #Tools
🌐 https://webpack.js.org
Channel | Group | YouTube
👍11🔥7
🔥8❤🔥1
#nodejs
آپدیت جدید nodejs یه سری قابلیتها اضافه شده ولی بارزترینش اینه که میتونید ماژولهای esm رو توی cjs هم استفاده کنید و لود کنید 💥
https://lnkd.in/g5iaRsKf
Channel | Group | YouTube
آپدیت جدید nodejs یه سری قابلیتها اضافه شده ولی بارزترینش اینه که میتونید ماژولهای esm رو توی cjs هم استفاده کنید و لود کنید 💥
https://lnkd.in/g5iaRsKf
Channel | Group | YouTube
👍11🔥2🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
#Fun
ببینید که داداشای هکرمون چطوری DDos میزنن و کارو بار ما رو با خاک یکسان میکنن😂😂
Channel | Group | YouTube
ببینید که داداشای هکرمون چطوری DDos میزنن و کارو بار ما رو با خاک یکسان میکنن😂😂
Channel | Group | YouTube
😁16🤣14👍3
Media is too big
VIEW IN TELEGRAM
آقا رسما وارد بخش سوم از دوبله دوره ریکت جوناس شدیم...
کمربندارو ببندید که قراره خیلی کار خفن و جذاب بشه 🔥🔥
حتما توصیه میکنم ویدیو رو ببینید که ببینید چه پروژه های جذابی رو توی این سکشن توسعه میده و نکته جالب توجه اینه که اگر توی بخش سوم اینارو توسعه داده توی بخش چهارم که بخش آخر دوره هست چه چیزایی توسعه داده...
خلاصه شما با دیدن دوره نه تنها ریکت رو یاد میگیرید چندین پروژه خفن هم به رزومتون اضافه میشه 👌🔥
ببینید و لذت ببرید واقعا...
Channel | Group | YouTube
کمربندارو ببندید که قراره خیلی کار خفن و جذاب بشه 🔥🔥
حتما توصیه میکنم ویدیو رو ببینید که ببینید چه پروژه های جذابی رو توی این سکشن توسعه میده و نکته جالب توجه اینه که اگر توی بخش سوم اینارو توسعه داده توی بخش چهارم که بخش آخر دوره هست چه چیزایی توسعه داده...
خلاصه شما با دیدن دوره نه تنها ریکت رو یاد میگیرید چندین پروژه خفن هم به رزومتون اضافه میشه 👌🔥
ببینید و لذت ببرید واقعا...
Channel | Group | YouTube
❤🔥18🔥3⚡2
♨️ ریاکت ورژن 19 به صورت بتا منتشر شد!
فعلا به صورت بتا منتشر شده تا بتونن فیدبک بگیرن و پکیج ها خودشون آپدیت کنند و ما هم وقتو از دست نمیدیم و یه نگاهی بهش میکنیم...
💠 کامپوننت سمت سرور
بالاخره بعد از مدت ها انتظار سرور کامپوننت ها به خود ریاکت اضافه شدن اگه با Nextjs کار کرده باشید با این ویژگی و مزایاش آشنایید.
💠 امکان استفاده از metadata
یکی از مشکلاتی که ریاکت نبود ابزاری مناسب برای metadata ها بوده ولی حالا توی ریاکت 19 به خاطر کامپوننت matadata اینکار ساده تر شده.
💠 لود بهینه asset ها
توی نسخه جدید asset های ما یعنی عکس و فونت و... در پشت صحنه بارگذاری میشن و اینطوری سرعت لود ما میره بالا
💠 رفع مشکل re-render های اضافه
در نسخه جدید دیگه لازم نیست از هوک هایی مثل useCallback یا useMemo استفاده کنیم و اینکارو به صورت اتوماتیک خود ریاکت انجام میده و مشکل re-render ها تا حدودی حل میشه.
کلی ویژگی و بهینه سازی های دیگه وجود داره که میتونید به مقاله اصلی یه سر بزنید و کامل تر در جریان جزئیات قرار بگیرید.
🌐 https://react.dev/blog/2024/04/25/react-19
#reactjs
Channel | Group | YouTube
فعلا به صورت بتا منتشر شده تا بتونن فیدبک بگیرن و پکیج ها خودشون آپدیت کنند و ما هم وقتو از دست نمیدیم و یه نگاهی بهش میکنیم...
💠 کامپوننت سمت سرور
بالاخره بعد از مدت ها انتظار سرور کامپوننت ها به خود ریاکت اضافه شدن اگه با Nextjs کار کرده باشید با این ویژگی و مزایاش آشنایید.
💠 امکان استفاده از metadata
یکی از مشکلاتی که ریاکت نبود ابزاری مناسب برای metadata ها بوده ولی حالا توی ریاکت 19 به خاطر کامپوننت matadata اینکار ساده تر شده.
💠 لود بهینه asset ها
توی نسخه جدید asset های ما یعنی عکس و فونت و... در پشت صحنه بارگذاری میشن و اینطوری سرعت لود ما میره بالا
💠 رفع مشکل re-render های اضافه
در نسخه جدید دیگه لازم نیست از هوک هایی مثل useCallback یا useMemo استفاده کنیم و اینکارو به صورت اتوماتیک خود ریاکت انجام میده و مشکل re-render ها تا حدودی حل میشه.
کلی ویژگی و بهینه سازی های دیگه وجود داره که میتونید به مقاله اصلی یه سر بزنید و کامل تر در جریان جزئیات قرار بگیرید.
🌐 https://react.dev/blog/2024/04/25/react-19
#reactjs
Channel | Group | YouTube
🔥25👍6
♨️ آیا کار کردن با webpack براتون سخته؟ راه حل مشکل شما Laravel-Mix اینجاست
ما توی پست قبلی فهمیدیم که Webpack چیه و به چه دردی میخوره ولی یکی از معایب وبپک کانفیگ نسبتا پیچیده و سختی کار با اون هست که شاید افراد مبتدی رو سردرگم و از خودش دور کنه.
برای کسایی که نمیخوان با کانفیگ پیچیده webpack برای پروژه بزرگ و کوچیکشون دست و پنجه نرم کنند Laravel-mix میتونه گزینه عالی باشه
این ابزار خودش از webpack استفاده میکنه ولی کانفیگ هاشو توی پس زمینه انجام داده و یه محیط و کانفیگ خیلی خیلی ساده و در عین حال کاربردی داره.
توصیه میکنم روی یکی از پروژه های آینده تون امتحانش کنید...👌
🌐 https://laravel-mix.com
#Tools
Channel | Group | YouTube
ما توی پست قبلی فهمیدیم که Webpack چیه و به چه دردی میخوره ولی یکی از معایب وبپک کانفیگ نسبتا پیچیده و سختی کار با اون هست که شاید افراد مبتدی رو سردرگم و از خودش دور کنه.
برای کسایی که نمیخوان با کانفیگ پیچیده webpack برای پروژه بزرگ و کوچیکشون دست و پنجه نرم کنند Laravel-mix میتونه گزینه عالی باشه
این ابزار خودش از webpack استفاده میکنه ولی کانفیگ هاشو توی پس زمینه انجام داده و یه محیط و کانفیگ خیلی خیلی ساده و در عین حال کاربردی داره.
توصیه میکنم روی یکی از پروژه های آینده تون امتحانش کنید...👌
🌐 https://laravel-mix.com
#Tools
Channel | Group | YouTube
👍5