بیاین بهتر React Native بنویسیم (2) - مسیر دهی کوتاه تر برای فراخوانی (همون Import خودمون)

یکی از اصول های اصلی برنامه نویسی درست (تر) و ساختار خود React بالا اوردن بزرگترین ویو (View) ها با کوچکترین اجزا هست، همون قضیه ای که باعث میشه ما تا کوچترین جزء (حتی Text) رو Component بندی کنیم، طبیعیه که هرچی این مسیر رو بیشتر بریم و پوشه بندی و کامپوننت ها و ابزار ها و متغیر ها و ........ فایلهاشون زیاد میشن و قضیه آدرس دهی هم سخت تر میشه، فکر کنین یه همچین ساختار پوشه بندی داریم:

- Project Root
- - - src
- - - - - -  components
- - - - - - - - -  UserCard.js
- - - - - - - - -  PaymentStatus.js
- - - - - -   screens
- - - - - - - - -   Home.js
- - - - - -  vars
- - - - - - - -  Theme
- - - - - - - - - - -  Colors.js ( redColor, greenColor, purpleColor )

این یه پروژه بندی تستی و با تعداد پایین فایل هست، حالا فرض کنیم میخوایم در کامپوننت Home متغیر رنگ قرمز مخصوص این اپلیکیشن رو از Colors.js فراخونی کنیم، پس:

import { redColor } from './../vars/Theme/Colors.js

این کد کاملا درسته و کار میکنه، ولی قضیه اینه اگر یموقع نظرمون عوض شد و خواستیم فایل Colors رو جابجا کنیم (به هر دلیلی) باید توی همه صفحات، کامپوننت ها و ... که این رنگ (ها) Import شدن آدرس دهی رو بروز کنیم و با دردسر عظیمی مواجه میشیم، اصلا اگر این قضیه بگیم غیر ممکنه (یا بیخیالش بشیم ) ما فقط همین کد رو نداریم که، هر فایل ما کلی فایل دیگه رو ایمپورت میکنه و این ایمپورت ها کد هارو زشت تر و ناخوانا تر (بنظر من) میکنه، پس بهتره بیایم و سعی کنیم آدرس دهی هامون رو تا جای ممکن کوتاه کنیم.

یه راه که شاید الان به ذهنتون بیاد اینه که یک هوک (HOC) به اسم withColors بنویسیم و رنگ هارو پاس بدیم به کامپوننت هامون، این روش هم هست ولی باز هم از تعداد Import های ما انچنان کم نمیکنه، پس بهتره یه کار جامع تر انجام بدیم.

اگر با نظر من موافقین پس بیاین شروع کنیم:

npm install --save-dev babel-plugin-module-resolver

بعد از نصب ما لازمه یسری تنظیمات babel انجام بدیم، اگر از نسخه های جدید ری اکت نیتیو استفاده کنین فایل babel.config.js و اگر از نسخه 0.57 به پایین استفاده میکنین فایل .babelrc.js رو ایجاد کنین (اگر نیستش) و این کد رو قرار بدید

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "screens": "./screens",
        "components": "./components"
      }
    }]
  ]
}

اون بخش root پوشه مادر قرارگیری فایلهامون رو مشخص میکنه، اگر ساختار رو یادتون باشه پروژه ما فایلهاش تو پوشه Src بودن، و alias ها هم پوشه های زیر مجموعه هستن، حالا ما میتونیم برای ایمپورت کردن کامپوننت UserCard هرکجا که خواستیم این دستور رو بنویسیم:

import UserCard from 'components/UserCard'

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

اصل آموزش تا بالاس و از اینجا به بعد برای بچه هایی هست مثل من که از ادیتور Vscode استفاده میکنن، حتما متوجه میشین که بعد از کارای بالا ما دیگه نمیتونم از Go to definition (همون ctrl+left click) استفاده کنیم، و همینطور از نعمت hint و autocompletion هم محروم میشیم، چون پیشفرض vscode نمیاد و فایل babel مارو بخونه و متوجه این قضایا بشه، پس باید این مشکلات رو حل کنیم که از برنامه نویسی بیشتر از قبل لذت ببریم

برای شروع باید فایلی به اسم jsconfig.js در روت اصلی پروژه تون ایجاد کنین با این محتوا

{
 "compilerOptions": {
 "baseUrl": "./",
 "paths": {
  "components/*": [
   "src/components/*"
   ],
   "vars/*":[
      "src/vars/*"
     ],
  },
  "exclude": [
      "node_modules"
      ]
  }
}

این go to definition رو برای دو دستور components و vars فعال میکنه، اینطور وقتی روی ایمپورتمون کلیک کنیم مارو هدایت میکنه به فایل مرجع :)

و برای فعال کردن autocompletion که آدرس دهی هامون هم راحت تر بشه افزونه زیر رو نصب کنید https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

بعد از نصب باید در مسیر .vscode فایلی رو ایجاد کنیم به اسم settings.json که محتویاتش اینا باشه:

{
    "path-intellisense.showHiddenFiles": true,
    "path-intellisense.autoSlashAfterDirectory": false,
    "path-intellisense.absolutePathToWorkspace": true,
    "path-intellisense.mappings": {
    "components": "${workspaceRoot}/src/components",
    "vars": "${workspaceRoot}/src/vars",
    }
}

به این صورت دو کد components و vars برای vscode به عنوان آدرس پوشه میشن و هروقت برای import اونها رو بنویسین مارو کمک میکنه که ادامه آدرس رو بنویسیم، اون 3 خط اول هم کاملا واضحه چه تنظیماتی هست نیاز به توضیح ندارن

خوب این قسمت از آموزش هم تموم شد، قسمت قبلی حدود 9 ماه پیش نوشته شد، سعی میکنم ازین به بعد بیشتر بنویسم تجربه هام با شما به اشتراک بزارم (البته من کوچیک شمام)

اگر دوست داشتین میتونین منو در اینستاگرام و تلگرام پیدا کنین تا با همدیگه کانکت بشیم، خوشحال میشم :)