دروغی به نام شباهت React و React Native

احتمالا به شما هم وقتی که خواستین برید سراغ توسعه دهندگی React یا React Native این رو گفتن که اگر اینو یاد بگیری اونم می‌تونی بزنی و مرزهای جهان برات گشوده میشه و تبدیل می‌شی به یه آدم خفن که هم آپ موبایل میتونه بزنه و هم وب سایت!یکسان نبودن React و React Nativeاو یک مبتدیست!آواز دهل از دور خوش است و گویا دوستان توسعه‌دهنده بخاطر توسعه استارت آپ‌‌های میوه و سبزیجات به میدون میوه و تره‌بار رفت و آمدن داشتن و کمال هم نشین درشون اثر کرده و با نشون دادن میوه‌های درشت و خوشگل سر اصرار دارن بگن تا تهش همینجوره!اگر کسی چنین حرفی بتون زد شک نکنید یا کلا هیچ کدوم رو یاد نداره و احتمالا به مقاله یکی از دوستان میوه‌ فروش استناد میکنه و یا هم توسعه دهنده یکی از دو هست و در دیگری در حد Hello World تجربه داره.اصل نقد من به همکارهای توسعه دهنده‌ هست. برای این که توی‌ کل‌کل‌برتری تکنولوژی‌ها کم نیارن و اثبات کنن React خیلی خفن هست فقط بخشی از حقیقت رو می‌گن و تبدیلش میکنن به یک دروغ که باعث انحراف دیگران مخصوصا کارفرما‌ها میشه!حالا بیا و به کارفرماهایی که عمدتا برنامه نویس نیستن اثبات کن که این همه‌ی حقیقت نیست! نه دیگه، تو راست نمیگی چون ارشد Front-End فلان شرکت معروف گفته میشه! حالا میری ریز میشی تو کار اون شخص می‌بینی توسعه دهنده React Native هست و اوج تلاشش برای توسعه React یک سایت چند صفحه‌ای ساده بوده! نخسته دلاور! چرا React و React Native متفاوت هستندری اکت جی اس برای وب ساخته شده و اجزا داخلیش از جنس ساختار‌‌های صفحات وب هست در حالی که ری‌اکت نیتیو چون قرار هست یک برنامه موبایل تولید کنه و دیگه وب و مرورگری در کار نیست از بسیاری از اون قابلیت‌ها محروم شده و دست به شبیه سازی زده و از طرفی دیگه هم با کدهای نیتیو درگیر هست.بسیاری از پکیج‌ها فقط قابلیت استفاده در یکی از این دو رو دارن. همون طور که گفتم React native از HTML برای رندر برنامه استفاده نمی‌کنه و شبیه سازی میکنه مثلا به جای تگ div شما می‌تونید از کامپوننت View استفاده کنید. پس اگر قطعه کد یا پکیجی رو که برای React و بهتر بگم وب آماده شده رو در ری‌اکت نیتیو import کنید به خطا می خورید.بدیهی هست که ری‌اکت نیتیو هر چقدر هم تلاش کنه تا ساختارهای وب رو شبیه سازی کنه‌ نمی‌تونه دقیقا مشابه به وب رفتار کنه، چرا که اگر دو پلتفرم یکسان بودن خب از یک ساختار هم استفاده می‌شد پس تفاوت‌های وجود داره. این تفاوت ها باعث تفاوت‌های حل نشدنی بخصوص در جزئیات شده. هر چند در کلیات مثلا نام المنت‌ها (div - View) تفاوت‌ها مشخص هست اما مشکل اصلی که باعث نوشتن این نقد هم شده جزئیاتی هست که خودشون رو در پروژه‌های متوسط و حرفه‌ای نشون میدن نه در hello world!مشکل فقط فنی نیست! از لحاظ روانشناسی سویچ به بین این دو محیط باعث کاهش تمرکز و ایجاد اضطراب در افراد میشه! تا دیروز داشتی می‌نوشی div و padding-left : 30px بعد میری اونجا می‌نویسی view و paddingLeft: 30 خب معلومه آب روغن قاطی میکنی و هر چند وقت صفحه خطا رو می‌بینی میگی وای یادم رفت px نذارم!تفاوت‌ها به همینجا ختم نمیشه، نحوه بلید ، اجرا و دیباگ، انیمیشن و حرکات، نویگیشن (Routing)‌، کدهای Native و ... هم باید به این لیست اضافه کرد. جمع بندیشباهت این دو مثل ماشین سواری و کامیون هست، جفتشون ۴ تا چرخ دارن، حرکت میکنن، شیشه جلو و برف پاک کن ،آینه بغل و خیلی چیزای شبیه به هم دارن ولی کاربردشون کاملا متفاوت هست. تعمیرکارهاشونم همین طور! شاید خیلی‌ها باشن که گواهی‌نامه هر دو رو داشته باشن و حتی در هر دو حرفه‌ای باشن، ولی سوال اینه آیا هم اینطور هستن؟ آیا برای همه ممکن هست و این اتفاق چقدر می‌تونه فراگیر باشه؟در واقع جلمه درست این هست: اگر شما React JS رو یاد داشته باشید و روزی تصمیم بگیرید که به توسعه دهندگی برنامه موبایل تغییر شغل بدید،شما نسبت به کسی که با ری‌اکت نیتیو آشنا نیست می تونید سریعتر به توانایی توسعه app موبایل دست پیدا کنید و یا به عبارتی دیگه، زمان یادگیری و توانایی توسعه برنامه موبایل برای شما با ری‌اکت نیتیو کمتر از نیتیو خواهد بود.خلاصه این که، این تصور که این دو کاملا شبیه به هم هستن، و به راحتی از روی پروژه وب سایت میتونی بری روی اپ و دوباره برگردی به وب‌سایت برای توسعه، بدون این که اذیت بشی و نیاز باشه چیز زیادی یاد بگیری اشتباه هست، تو فقط این پتانسیل رو داری که اگر روزی نیاز شد بتونی با سختی کمتری نسبت به ناآشناها به فیلد دیگه سویچ کنی.این مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/iran-react-community/%D8%AE%D8%AF%D8%A7%D8%AD%D8%A7%D9%81%D8%B8-%D8%AF%D8%B4%D9%88%D8%A7%D8%B1%DB%8C%D9%87%D8%A7%DB%8C-redux-zypz5yuqq0t1 https://virgool.io/iran-react-community/%D8%B4%D9%86%D8%A7%D8%AE%D8%AA-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-ssr-%D9%88-csr-%D8%AF%D8%B1-react-js-v2lsdju7aiuc