چطور logic پروژمون رو بین React و React Native باید share کنیم؟

وقتی React Native کد میزنین انتظار دارین که بعد از تموم شدن پروژه بتونین به راحتی خروجی پلتفرم Android و IOS رو بگیرین.

پس حتما انتظار اینم دارین با کمترین زمان، نسخه وب پروژتون رو هم بنویسین و از همه مهم تر اینکه توسعه پروژه وب و موبایلتون در آینده به سادگی تغییر چند خط کد باشه

خب اول از همه باید بدونین چه بخش هایی رو میشه بین React و React Native پروژتون share کنین

• Config
• APIs
• Redux
• Custom Hooks
• Form Validations
• Helpers
• Themes
• Typescripts

بخش Config

در بخش config پروژتون base API URL، اسم پروژه و هر متغییر ثابتی که بین وب و موبایلتون مشترکه رو میتونین اینجا بنویسین

بخش API ها

در این بخش برای هر entity در پروژتون فایل مشخص به خودش رو بسازین و API هایی که از بچه های گل بک اند گرفتین رو اینجا تعریف کن، من در این بخش از کتابخونه Axios استفاده کردم، برای مثال یه فایل به نام auth.js ساختم و داخل اون API های لاگین و فراموشی کلمه عبور و ... رو تعریف کردم.

بخش Redux

ریداکس برای share کردن logic پروژتون بدون وابستگی به کامپوننت‌ها خیلی میتونه کمک کنه، میشه از روش های دیگه ای هم واسه handle کردن state هاتون استفاده کنین، ولی debug کردن state ها با ریداکس مثه آب خوردنه

بخش Custom Hooks

من این بخش رو خیلی دوست دارم، بعد از اینکه هوک متولد شد، پروژه های من به طرز عجیبی ساده و خوانا تر شدن (clean code رو میزاره توی جیبش لامصب)

هوک‌ها برای نوشتن logic یه کامپوننت میتونن خیلی بهتون کمک کنن، به راحتی میتونین state‌ها وlifecycle یه کامپوننت رو از توی دل اون بکشید بیرون و در یه فایل مجزا logic اش رو برنامه نویسی کنین. برای مثال میتونین برای بخش لاگین پروژتون یه هوک به اسم useLogin بنویسین و تمام فیلدهای فرم لاگینتون رو در قالب یه state‌ تعریف کنین، همچنین میتونین و فرم اتون رو همینجا بنویسین، که خود میتونه شامل validation فرم و فراخوانی API لاگینتون باشه.

بخش Validation های فرم

با توجه به اینکه API هاتون بین وب و موبایل share شده، پس تمام attribute های entity پروژتون بین React و React Native مشترکه و از طرفی تمام فیلدهاتون در فرم مشترک میشه، خب پس میتونین validation های فرم تون رو یه جا بنویسین و اونا رو share کنین (من از کتابخونه Yup برای نوشتن validation هام استفاده میکنم)

بخش Helper ها

در این بخش میتونین توابع کمکی پروژتون رو بنویسین، برای مثال توابعی که نیازه روی string یا array هاتون فیلتر خاصی اعمال کنین، یه helper خیلی مهم که من توی پروژم باهاش درگیر شدن، هلپری واسه storage بود، این هلپر رو نمیشه بیرون share نوشت واسه اینکه redux و hook هاتون بهش احتیاج دارن، پس با یه کلک مرغابی میتونین همه جا یک جور import هاتون رو بنویسین ولی در صورتی که چیزی که دارین import میکنین، webpack با توجه به پلتفرم مورد نظر فایل خودش رو داره فراخوانی میکنه

در بخشhelpers یه دایرکتوری به اسم storage بسازین و سه تا فایل زیر رو اونجا قرار بدین

Index.android.js

Index.ios.js

Index.js

درون دو فایل اول که React Native با توجه به پلتفرم اونا رو فراخوانی می‌کنه از کتابخانه @react-native-community/async-storage استفاده کنین و در فایل آخر که برای وب عه از localStorage استفاده کنین.

بخش Theme

اگر پروژتون شامل چندین theme مختلف عه میتونین پالت رنگ و فونت هاتون رو اینجا تعریف کنین

بخش Typescript

اگه از تایپ اسکریپت هم استفاده می‌کنین که type و interface هاتون رو اینجا تعریف و export کنین

حالا ممکنه واستون سوال بشه که این بخش هارو کجای پروژه وب و موبایلتون باید قرار بدین

این بخش رو مثل یه ریپو مجزا فرض کنین، برای مثال یه repository به اسم share در گیت لب و یا گیت هاب خودتون بسازین و در root پروژه وب و موبایلتون از اون clone بگیرین

چند تا نکته ریز:

- توی پروژه وب و موبایلتون در فایل gitignore دایرکتوری share که در root پروژتون هست رو ignore کنین، چون share خودش یه ریپو مستقله، و اگه تغییری روش دادین به صورت مستقل باید تغییراتش رو commit کنین

- نیازی به package.json واسه پروژه share نیست، چون این repository در root پروژه وب و موبایلتون قرار میگیره و از package.json اون‌ها استفاده میکنه

- پکیج هایی که در بخش‌های share استفاده کردین رو در فایل README لیست کنین تا برنامه‌نویس وب و موبایلتون پکیج های پروژه share رو روی پروژه خودش نصب کنه