آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

۱۰ نکته مهم در برنامه نویسی React

10 نکته مهم در برنامه نویسی React

۱۰ نکته مهم در برنامه نویسی React

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

۱- ساختار دایرکتوری‌ها رو بهینه کنید

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

۲- کامپوننت‌ها رو جمع و جور بنویسید

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

۳- کامپوننت‌ها رو درست نامگذاری کنید.

این نکته فقط شامل برنامه نویسی React نمیشه و در همه زبان‌های برنامه نویسی باید به خوبی رعایت بشه. برای وقتی قراره یه تابع برای ورود کاربر به سایت تعریف کنیم، باید اسم مرتبط و درست انتخاب کنیم (مثلا LoginUser) . این روش باعث میشه که هر برنامه‌نویس دیگه‌ای که کد مارو ببینه قشنگ متوجه میشه که ما چیکار کردیم. در مورد کامپوننت‌ها هم همینطور هست. نام گذاری کامپوننت‌هاتون رو جوری انجام بدین که مرتبط با کارشون باشه. توی نام‌گذاری، رعایت حروف کوچیک و بزرگ رو یادتون نره.

۴- DRY

DRY مخفف عبارت Don`t Repeat Yourself به معنی خودت رو تکرار نکن، هستش. DRY به یک قانون در بین برنامه‌نویسا تبدیل شده. رعایت این قانون نشون می‌ده که شما توی برنامه‌نویسی حرفه‌ای هستین. طبق این قانون شما نباید کدهاتون رو تکرار کنید. چرا که با نوشتن کدهای تکراری چندتا مشکل براتون پیش میاد. اول این که هرکس کد شما رو بخونه متوجه میشه که شما یه برنامه‌نویس آماتور هستید و کدهاتون خیلی ناشیانه نوشته شده. دوم این که وقتی شما کدهاتون رو خیلی تکرار کرده باشین، برای ایجاد یه تغییر باید به تمام جاهایی که اون کد رو نوشتید، برگردید و اون یه تغییر رو چندین بار تکرار کنین که وقت تلف کردنه. همچنین اگه یه تغییر رو فراموش کرده باشین که اعمال کنین، توی کد مشکل پیش میاد. تکرار کردن زیاد کد وقتی مشکل ساز میشه که قرار پروژه بزرگ بشه و توسعه پیدا کنه. پس بهتره همیشه وقتی کد تکراری داشتید و می‌خواستید چندین بار از همون کد استفاده کنین، اونو جداگانه بنویسید. توی ری ‌اکت ما کامپوننت‌های common رو داریم که چندین بار از اون‌ها در جاهای مختلف پروژه استفاده میشه. پس اگر خواستید قانون DRY رو توی برنامه نویسی React استفاده کنید می‌تونید از مفهوم HOC که به معنی کامپوننت مرتبه بالاتر هست استفاده کنید.

۵- استفاده بهینه از state در برنامه نویسی React

به عنوان برنامه نویس ری‌ اکت، باید بتونید تشخیص بدین که state سراسری رو باید برای پروژه استفاده کنید یا این که از component state استفاده کنید؟ شما نباید state ها رو به عنوان props به کامپوننت‌ها پاس بدین، بدون این که اصلا نیازی به این کار بوده باشه. باید از state ها به صورت بهینه استفاده کنید. برای این که بتونید بهترین تصمیم رو بگیرید باید به پروژه خودتون نگا کنید و اونو بررسی کنید. همچنین بررسی کنید که هرکجا لازم بود از context هم استفاده کنید.

۶- کدهای CSS رو در فایل js بنویسید.

کدهای CSS بخش جدانشدنی پروژه‌های ری‌ اکت هست و همیشه از اون‌ها برای استایل دهی استفاده می‌کنیم. وقتی که یک پروژه رو شروع می‌کنیم، معمولا کدهای css رو توی فایلی با پسوند .css یا .scss ذخیره می‌کنیم. ولی وقتی که پروژه بزرگ بشه، این روش خیلی ممکن نیست. برای این کار شما می‌تونید از کتابخونه‌های مفید برای نوشتن css در js استفاده کنید. کتابخونه‌هایی مثل Styled Components، Emotion Js و Glamorous.

۷- منطق رندرینگ و state رو از هم جدا کنید.

منطق یا لاجیک مربوط به دیتا لودینگ یا بارگذاری داده‌ها رو از لاجیک مربوط به رندر کردن جدا کنید. این کار باعث میشه که برای لود کردن دیتا، کامپوننت‌های stateful رو داشته باشید و همچنین برای نشان دادن دیتا کامپوننت‌های statless رو داشته باشید. وقتی میگیم stateful منظور این هست که این نوع کامپوننت، state رو درون خودش (حافظه) نگه‌داری می‌کنه. ولی وقتی میگیم statless منظور کامپوننتی هست که به حافظه کاربر بازدید کننده از سایت وابسته است و داده‌ای رو داخل دیتابیس ذخیره نمی‌کنه. وقتی این روش رو در کدها استفاده می‌کنید ، پیچیدگی کامپوننت‌ها کم میشه. برای مثال فرض کنید که اپلیکیشن شما قرار هست یک سری داده رو از دیتابیس خارج کنه. ما می‌تونیم این داده رو با کامپوننت اصلی کنترل کنیم و رندرینگ یا تفسیر داده رو به زیر کامپوننت یا sub-component بسپاریم. برای این که کافی هست که دیتا رو به عنوان props به کامپوننت پاس بدیم. این روش کد نوشتن باعث ایجاد نظم و ترتیب در کدها میشه.

۸- از Proptypes یا TypeScript برای بررسی type استفاده کنید.

PropTypes نوعی از type checking است که در ری اکت استفاده میشه. بدون استفاده از type checking ها ممکن هست که شما به اشتباه یک نوع داده اشتباهی رو به کامپوننتی پاس بدین و در نهایت رفتار اپلیکیشن شما غیرعادی بشه و نتیجه موردنظر رو نگیرید. پس با استفاده از PropeTypes یا TypeScript می تونید از مشکلاتی احتمالی جلوگیری کنید.

۹- از ابزار linting استفاده کنید.

ESLint یکی از ابزارهای محبوب در بین برنامه‌نویسای ری اکت هستش که شما هم می‌تونید توی اپلیکیشن‌های ری اکتی خودتون ازش استفاده کنید. این ابزار باعث ایجاد الگویی برای کدهای سازگار میشه که در نهایت خطای سینتکسی یا نحوی رو کاهش میده. همچنین شما می‌تونید با استفاده از قلاب‌های گیت یا Git Hooks این امکان را ایجاد کنید که کدهاتون فقط در صورتی commit بشن که ارور نداشته باشن. این کار میتونه فایده زیادی داشته باشه. خصوصا وقتی که دارید به صورت تیمی روی یک پروژه طولانی با چندنفر دیگه کار می‌کنید.

۱۰- کدهاتون رو تست کنید.

تست کردن کدها یکی از بخش مهمی هست که متاسفانه خیلی از برنامه‌نویسا رعایت نمی‌کنن. وقتی که بر‌می‌گردید و کدهاتون رو تست می‌کنید، اگر اشکالی وجود داشته باشه، قبل از اینکه بقیه بخوان به شما بگن، خودتون رفعش کردید. بعد از اتمام پروژه، آخرین کاری که باید انجام بدین تست کردن پروژه اتون هستش. اگر از روش‌ها و نکته‌هایی که توی این مطلب گفتم استفاده کنید، تست کردن کدهاتون اصلا کار سختی نیست. برای تست کردن کدهاتون انواع تست‌ها رو میتونید استفاده کنید. Unit Testing، Component Testing و End to End Testing جزو محبوب‌ترین‌ها هستن.

جمع بندی

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

امتیاز 4.7142857142857 از 7 رای

20

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

دیدگاه کاربران
  • آواتار
    abolffff1383 2 خرداد 1400 / 10:45 ب.ظ

    عالی بود ممنون

  • laleh.safarian 3 خرداد 1400 / 0:37 ق.ظ

    با سلام
    من تا الان ۳ ساعت و نه دقیقه از آموزش React ری اکت مقدماتی شما دیدم و قدم به قدم با شما کد ها نوشتم و مشکلی نداشتم ولی الان دو روز که طبق کدهای شما زمانی که میخوام با فایل db.json ارتباط برقرار کنم و اطلاعات رو بخونم ،مشکل دارم 🤦‍♀️تقریبا تا الان هشت بار کدها رو پاک کردم و دوباره نوشتم و برای آخرین بار از روی کدهای شما کپی گرفتم 😭 ولی مدام خطای
    Failed to load resource ::ERR_CONNECTION_REFUSE
    میده برای
    پورت ۸۰۰۰ و task :1
    و همینطور خطای fetch برای زمانیکه با استفاده setTask میخواییم اطلاعات گرفته شده از سرور رو دوباره جاگذاری کنیم
    Uncaght( in promise) typerror:Failed to fetch
    ممنون میشم کمکم کنید

    • یاشار حبیبی 3 خرداد 1400 / 7:39 ب.ظ

      سلام، مرسی از حضورتون، جواب شمارو توی تیکت ها دادم، ممنون

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان