یادم رفت اینو بگم لازم نیست برید تو تک تک فایل‌های پروژه و دستور ایمپورت react رو پاک کنید
ابزاری هستش که به صورت اتوماتیک این کار رو انجام میده
کافیه ترمینال سیستم عامل رو باز کنید (رو ویندوز همون CMD) و با دستور cd مسیر ترمینال رو به پوشه پروژه تغییر بدید و دستور زیر رو اجرا کنید
بعد از چند لحظه تمامی ایمپورت ها به صورت اتوماتیک آپدیت میشن 😉
فرقی نمی‌کنه که از razzle یا next یا create-react-app استفاده کرده باشید این codemod با همه ابزارها سازگار هستش (صرفا میگرده دنبال فایل‌هایی با پسوند js و jsx و tsx و هرچی import مربوط به React هستش رو تغییر میده)
@react_ir
ابزاری هستش که به صورت اتوماتیک این کار رو انجام میده
کافیه ترمینال سیستم عامل رو باز کنید (رو ویندوز همون CMD) و با دستور cd مسیر ترمینال رو به پوشه پروژه تغییر بدید و دستور زیر رو اجرا کنید
npx react-codemod update-react-imports
بعد از چند لحظه تمامی ایمپورت ها به صورت اتوماتیک آپدیت میشن 😉
فرقی نمی‌کنه که از razzle یا next یا create-react-app استفاده کرده باشید این codemod با همه ابزارها سازگار هستش (صرفا میگرده دنبال فایل‌هایی با پسوند js و jsx و tsx و هرچی import مربوط به React هستش رو تغییر میده)
@react_ir
دوستان مراقب ایمپورت های که از پکیج های مختلف دارید باشید
تفاوت یک خط ایپمورت برای lodash میتونه ۲۲ کیلوبایت اونم gzip باشه (به زبان دیگه فاجعه)
اشتباه:
import { get } from "lodash"
درست:
import get from "lodash/get"
آیا تمامی کتابخونه ها به همین شکل هستن؟
خیر، ولی اگر همچین مشکلی باشه و درست tree shake نشه تو مستندات سایتش نوشته شده و با خوندن مستندات متوجه میشید (برای مثال material-ui)
(تست شده با وب پک ۴ و react scripts نسخه ۴)
@react_ir
تفاوت یک خط ایپمورت برای lodash میتونه ۲۲ کیلوبایت اونم gzip باشه (به زبان دیگه فاجعه)
اشتباه:
import { get } from "lodash"
درست:
import get from "lodash/get"
آیا تمامی کتابخونه ها به همین شکل هستن؟
خیر، ولی اگر همچین مشکلی باشه و درست tree shake نشه تو مستندات سایتش نوشته شده و با خوندن مستندات متوجه میشید (برای مثال material-ui)
(تست شده با وب پک ۴ و react scripts نسخه ۴)
@react_ir
Please open Telegram to view this post
VIEW IN TELEGRAM
سلام
ساعت ۱۰:۱۵ دقیقه کانال یوتیوب و چک کنید😉
(اگر قسمت اول آموزش فریمر موشن و ندیدید، تو همین چند دقیقه باقی مونده یه نگاهی بهش بندازید - خیلی خفنه🔥 )
▶️ youtube.com/@nima_arf
@react_ir
ساعت ۱۰:۱۵ دقیقه کانال یوتیوب و چک کنید
(اگر قسمت اول آموزش فریمر موشن و ندیدید، تو همین چند دقیقه باقی مونده یه نگاهی بهش بندازید - خیلی خفنه
@react_ir
Please open Telegram to view this post
VIEW IN TELEGRAM
ویدیو جدید به زودی ... 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
یلداتون مبارک 🍉
سابسکرایبرهایی که کانال یوتیوب و دنبال میکنید، برای ویدیو های بعدی کانال نظر سنجی داخل یوتیوب گذاشتم
دوست دارید تو ادامه فعالیت کانال اول کدوم سبک ویدیو رو ادامه بدم؟
1️⃣ Server Side Rendering (NextJS App Directory, Remix, ...)
2️⃣ Performance (Tree Shaking, ...)
3️⃣ Typescript (feat React)
4️⃣ React (Forms, PWA, State Management, UI Libs ...)
5️⃣ PWA (Notifications, Offline Apps, Web ShareAPI)
ممنون میشم یه چند دقیقه وقت بزارید و تو نظر سنجی شرکت کنید، برای شرکت کردن روی لینک زیر کلیک کنید و روی گزینه مورد نظرتون انتخاب کنید (اگر subscribe نکردید هم روی دکمه subscribe و زنگوله🔔 کنارش کلیک کنید)
https://www.youtube.com/channel/UCGEIqIvCbVW8kIUUK90G1Zg/community?pvf=CAI%253D
@react_ir
سابسکرایبرهایی که کانال یوتیوب و دنبال میکنید، برای ویدیو های بعدی کانال نظر سنجی داخل یوتیوب گذاشتم
دوست دارید تو ادامه فعالیت کانال اول کدوم سبک ویدیو رو ادامه بدم؟
1️⃣ Server Side Rendering (NextJS App Directory, Remix, ...)
2️⃣ Performance (Tree Shaking, ...)
3️⃣ Typescript (feat React)
4️⃣ React (Forms, PWA, State Management, UI Libs ...)
5️⃣ PWA (Notifications, Offline Apps, Web ShareAPI)
ممنون میشم یه چند دقیقه وقت بزارید و تو نظر سنجی شرکت کنید، برای شرکت کردن روی لینک زیر کلیک کنید و روی گزینه مورد نظرتون انتخاب کنید (اگر subscribe نکردید هم روی دکمه subscribe و زنگوله
https://www.youtube.com/channel/UCGEIqIvCbVW8kIUUK90G1Zg/community?pvf=CAI%253D
@react_ir
Please open Telegram to view this post
VIEW IN TELEGRAM