تفاوت های اصلی بین ReactJS و React Native

React Native در سال 2015 توسط فیسبوک معرفی شد.توسعه دهندگان می توانند با استفاده از نوشتن کدهای جاوا اسکریپت برای دو پلتفرم Android و Ios با استفاده از این فریمورک اپلیکیشن native بسازند.تعدادی contributors نیز این فریمورک رو برای نوشتن اپلیکیشن های desktop برای Mac و Windows سفارشی سازی کردند که بسیار جالب است.

در نگاه اول شاید React Native بسیار شبیه به ReactJS به نظر برسد اما تفاوت هایی وجود داره که شما بای قبل از شروع به نوشتن اولین app اون ها رو بدونید.در این مقاله من قصد دارم تفاوت هایی که بین ReactJS و React Native به عنوان یک توسعه دهنده react با آن روبرو شده ام رو به اشتراک بگذارم.

توجه کنید که شما برای شروع کار با React Native باید با مفاهیم پایه و اساسی React آشنا باشید تا بتونید با این فریمورک کار کنید.اما اگر به عنوان یک react developer قصد دارید با کمک دانشی که دارید اپلیکیشن بسازید، باید تفاوت ها رو کامل درک کنید و به این خیال نباشید که این دو تا شبیه هم هست و کاری نداره اپلیکیشن نوشتن با React Native.

Setup and bundling

React Naive یک فریمورک است در حالی که React یک کتابخانه جاوا اسکریپت برای وب است.زمانی که شما یک پروژه جدید با React JS شروع می کنید، شما یک bundler مثل Webpack را انتخاب می کنید و سعی می کنید ماژول هایی که نیاز به bundling دارند را پیدا کنید. اما زمانی که شما یک پروژه جدید با React-Native شروع می کنید تقریبا همه چیز آماده است و با استفاده از چند دستور در terminal محیط توسعه شما آماده است.

نکته : با استفاده از دستور create-react-app برای ReactJS نیز همه چیزآماده است و شما نیاز ندارید تا Webpack رو خودتون پیکربندی کنید.برای درک تفاوت های نصب پیشنهاد میکنم مقاله نصب ReactJs رو بخونید.

برای اجرا کردن اپلیکیشن،شما نیاز به Xcode (برای IOS) دارید که برای این منظور باید حتما Mac داشته باشید و برای Andriod نیز می تونید خیلی راحت با استفاده از emulator یا دیوایس واقعی انجام بدید.کلیه مراحل اجرا و تست اپلیکیشن در Android و IOS در دوره آموزش مقدماتی react native آموزش داده شده است.

DOM and Styling

React Native از HTML برای برای render اپلیکیشن استفاده نمی کند، اما از کامپوننت های جایگزین که شبیه همین روش کار می کند، استفاده می کند.کامپوننت های React Native یک نگاشت از UI components دو سیستم عامل iOS و Android برای render کردن اپلیکیشن استفاده می کنند.

اکثر کامپوننت های ارائه شده را میتوان به چیزی شبیه HTML ترجمه کرد،برای مثال کامپوننت View شبیه تگ div و کامپوننت Text شبیه تگ p در HTML است.

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>Hello world!</Text>
      </View>
    );
  }
}

import React, { Component } from 'react';

import { View, Text } from 'react-native';

export default class App extends Component {

render() {

return (

<Text style={styles.intro}>Hello world!</Text>

</View>

);

}

به این دلیل که کدهایتان در یک صفحه HTML رندر نمی شود شما نمی توانید از هر کتابخانه ای برای ReactJS که هر نوع HTML , SVG یا Canvas را render می کند در React Native استفاده کنید.اگر چه ممکن است کتابخانه های مشابه و جایگزین برای React Native پیدا کنید.

برای استایل دهی به کامپوننت های React Native شما باید یک stylesheets در جاوا اسکریپت ایجاد کنید.آن بسیار شبیه به CSS است اما واقعا CSS نیست.این می تواند در ابتدا کاملا گیج کننده باشد و شما ممکن است به جایی برسید که تعجب کنید و درک نکنید که چجوری می تونید از استایل ها در کامپوننت های دیگر استفاده کنید یا مخلوط هایی مثل SASS ایجاد کنید.پس شما تا الان باید متوجه شده باشید که React Native برای element های وب ساخته نشده است و شما نمی توانید به یک روش به آنها استایل بدهید.خوشبختانه راه های جایگزین برای آن چیزی که نیاز دارید وجود دارد.

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	content: {
		backgroundColor: '#fff',
		padding: 30,
	},
	button: {
		alignSelf: 'center',
		marginTop: 20,
		width: 100,
	},
});

const styles = StyleSheet.create({

container: {

flex: 1,

content: {

backgroundColor: '#fff',

padding: 30,

button: {

alignSelf: 'center',

marginTop: 20,

width: 100,

});

من در مورد شما چیز زیادی نمی دانم ولی به احتمال زیاد با Flexbox سروکله زده اید یا در پروژه هایتان از آن استفاده کرده اید.من در پروژه هایم به صورت کامل از آن بخاطر سازگار نبودن با مرورگر های قدیمی استفاده نکرده ام.در React Naive راه بهتری برای ساختن اپلیکیشن های responsive با استفاده از Flexbox وجود ندارد.در ابتدا ممکن است که سخت و مشکل به نظر برسد اما پس از درک Flexbox خیلی راحت می توانید اپلیکیشن های responsive برای همه اسکرین ها بسازید بدون اینکه مشکل خاصی داشته باشند.

Animations and Gestures

با React Natibe از انیمیشن های CSS خداحافظی کنید.شما باید کاملا یک روش جدید با استفاده از جاوا اسکریپت برای پیاده سازی انیمیشن در کامپوننت ها یاد بگیرید.راه توصیه شده استفاده از Animated API برای پیاده سازی انیمیشن است که توسط React Native فراهم شده است.شما می توانید آن را با کتابخانه مشهور Velocity.js مقایسه کنید.این API به شما اجازه می دهد انواع انیمیشن ها بر اساس زمان،یا کلیک بر روی یک element و همچنین با type های مختلف Easing پیاده سازی کنید.در کل تقریبا شما می توانید تمامی انیمیشن هایی که در وب انجام دهید را پیاده سازی کنید.React Native همچنین LayoutAnimation را که خیلی جالب و ساده برای پیاده سازی transitions است را فراهم کرده است.

معرفی کتابخانه React native cafe bazaar rate intent

برای ارتباط برقرار کردن با حرکات کاربر،React Native چیزی شبیه رویدادهای لمسی web API با نام PanResponder فراهم کرده است.استفاده از آن می تواند در شما احساس غرور ایجاد کند اما در نهایت خواهید دید که چیز پیچیده ای نیست.PanResponder نیاز دارد که به یک View (یا Text یا Image) از کامپوننت هایتان applied شود تا touch handler بر روی این View فعال شود.از اینجا به بعد PanResponder یک سری توابع برای گرفتن رویدادهای مختلف لمسی مثل onPanResponderGrant (touchstart), onPanResponderMove (touchmove) or onPanResponderRelease (touchend) فراهم می کند.این توابع به شما امکان دسترسی native event و اطلاعات حرکت مثل لمس ها و مکان های آنها، فاصله بین لمس ها و سرعت لمس را می دهد.

به عقیده من ، سختی کار با PanResponder زمانی است که شما چندین کامپوننت دارید که درون یکدیگر قرار گرفته اند و باید تصمیم بگیرید که کدام یک باید لمس را کنترل کند.برای کار با انیمیشن ها میتونید دوره آموزش کار با انمیشن ها در react native رو مشاهده کنید.

Navigation

زمانی که من شروع کردم به ساختن اولین اپلیکیشن react native، برای جابجایی بین دو تا screen گیج شده بودم.اولین کاری که انجام دادم به دنبال یک جایگزین برای کتابخانه react-router (مشهور ترین کتابخانه برای جابجایی بین صفحات وب ) در react navigation بودم.چندین کتابخانه برای اینکار پیدا کردم اما هر کدام دارای محدودیت هایی بودن و بعضی ها هم کمی گیج کننده بودند یا در بین مقالاتی که می خواند به مشکلات performance کتابخانه ها اشاره کرده بودند.من دنبال کتابخانه ای بودم که بتوانم آن را به راحتی سفارشی سازی و استفاده کنم و اختیارات وسیعی در اختیارم قرار بدهد.در انتها به کتابخانه react navigation رسیدم.که تمام این ویژگی های مورد نیاز من را داشت به علاوه اینکه مشکلات performance را نداشت.برای کار با این کتابخانه می توانید دوره آموزش react navigation3 را ببینید. در توسعه اپلیکیشن های موبایل باید توجه زیادی به استفاده از screen ها برای جابجایی داشته باشید.برای مثال شما چندین tab دارید و هر یک از این tab ها شامل چندین screen است.بنابراین پیکربندی screen ها را باید طوری انجام دهید که به راحتی بتوانید بین آن ها جابجا شوید.

Platform specific code

طراحی اپلیکیشن برای چندین پلتفرم با کد یکسان میتواند دارای نقاط ضعف و قوتی باشد در حالی که نمی توان گفت 100 درصد کدها مشترک است و این می تواندمنجر به زشت شدن کدهایتان شود.من مطمئنم که شما درگیر مسائلی مشابه در وب برای اجرای بر روی مرورگرهای قدیمی بوده اید اما با چندین شرط در کدهای css و حتی جاوا اسکریپت این مشکل را حل کرده اید.

زمانی که شما اپلیکیشن native می سازید باید کاملا این نکته را رعایت کنید که اپلیکیشن در هر دو سیستم عامل IOS و Android حس native بودن را به کاربر بدهد و این یعنی تفاوت بین ui در هر پلتفرم.خوشبختانه React Native کامپوننت هایی برای هر پلتفرم به صورت جداگانه قرار داده است و ما می توانیم با استفاده از Platform module پلتفرمی که برنامه بر روی آن در حال اجرا است را شناسایی کنیم و از کامپوننت مربوط به آن استفاده کنیم.برای مثال React Native برای ios کامپوننت DatePickerIos و برای android کامپوننت DatePickerAndroid را در اختیارمان قرار داده است.همچنین ما می توانینم با استفاده از Platform module برای هر پلتفرم استایل هایی جداگانه بنویسیم.

Developer tools

زمانی که شما یک پروژه جدید native می سازید، چندین ابزار توسعه بدون نصب کردن هیچ پلاگین اضافی در اختیار شما قرار می گیرید که این فوق العاده است.Hot Reloading در اختیار شما است و با هر تغییر کوچکی شما میتوانید نتیجه را در اپلیکیشن بدون reload ببینید و این یعنی صرقه جویی در زمان.همچنین برای تغییرات بزرگتر که در منطق برنامه تاثیر می گذارد میتوانید از Live Reload استفاده کنید که برنامه شما را به طور کامل بارگذاری می کند.

یکی دیگر از زیبایی های کار با React Native این است که شما قادر هستید از بیشتر ابزارهایی که در ReactJS وجود دارد استفاده کنید.Chrome Dev Tools برای بررسی درخواست های شبکه کار میکند و شما میتوانید console logs را ببینید.شما همچنین میتوانید از Redux DevTools برای بازرسی و مشاهده state های store استفاده کنید.

Publishing

اگر شما اپلیکیشن برای Android و Ios توسعه می دهید باید با نحوه خروجی گرفتن برای App Store یا Google Play آشنا باشید.البته با توجه به تحریم هایی که از سمت Apple به ما اعمال شده، راه های جایگزین زیادی پیشنهاد شده که به عقیده من هیچ کدام راه حل مناسب و دائمی نخوهد بود.اما برای Android شما می توانید به راحتی خروجی apk برای انتشار در مارکت ها بگیرید.

پس از انتشار اپلیکیشن در مارکت ها شما می توانید بدون منتظر ماندن برای تایید آپدیت جدید توسط آن ها با استفاده از Code Push به صورت مستقیم برنامه خود را بروزرسانی کنید.Code Push برای برطرف کردن bug ها و یا بهتر کردن بعضی از قسمت ها مناسب است و برای اضافه کردن یک ویژگی جدید اصلا مناسب نیست.

من واقعا از React Native لذت می برم.شما می توانید از دانشتون در React برای مهاجرت به React Native استفاده کنید و این دانش میتونه مهاجرت شما را خیلی راحت کنه.البته ممکنه باعث ایجاد یک سری سردرگمی ها هم بشه. ولی نسبت به فردی که اصلا به React آشنایی نداره شما خیلی راحت تر میتونید React Native رو یاد بگیرید.این مقاله توسط Alexis Mangin نوشته شده و من اون رو با اندکی دخل و تصرف ترجمه کردم.اگر تجربه ای در زمینه مهاجرت به React Naive دارید یا تفاوت هایی در مورد React و React Native می دونید که در این مقاله بیان نشده، در کامنت ها به اشتراک بزاریدش.

مطالب زیر را حتما مطالعه کنید

3 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

سینا حمیدی گفت:

آگوست 7, 2021 در 9:32 ق.ظ

من تا حدودی تجربه کاربر با اندروید رو داشتم و پروژه هایی رو هم با زامارین نوشتم اما وقتی که با react native شروع به کار کردم، مطالعه کردم و پروژه واقعی نوشتم این فریمورک رو عالی میدونم.

پاسخ
- مهدی گفت:
  
  آگوست 7, 2021 در 9:58 ق.ظ
  
  فوق العاده است این فریمورک
  
  پاسخ
vahidalvandi گفت:

می 26, 2019 در 11:59 ب.ظ

واقعا استفاده کردم

پاسخ

Setup and bundling

DOM and Styling

Animations and Gestures

Navigation

Platform specific code

Developer tools

Publishing

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

ویژگی ها و قابلیت های جدید react 18

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

3 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ