ReactXP یک کتابخانه جدید توسط مایکروسافت برای ایجاد برنامه های cross platform است که در iOS، Android، ویندوز و وب اجرا می شود.

بسم الله الرحمن الرحیم

آموزش برنامه نویسی ReactXP 

ReactXP چیست؟

ارتباط بین ReactXP و React Native

تفاوت ReactXP و React Native

تفاوت ReactXP و Xamarin

--------------------------------------------

برنامه های React با استفاده از تکنیک های برنامه نویسی وب نوشته می شوند. این مستندات فرض می کند که شما در حال حاضر با مفاهیم برنامه نویسی وب آشنا هستید، از جمله استفاده از جاوا اسکریپت، مرورگر DOM، هندل کردن رویداد مرورگر و ظاهر و طراحی CSS.

در حالی که ممکن است برنامه های ReactXP را در جاوااسکریپت بنویسید، توصیه می کنیم از TypeScript یا Flow استفاده کنید. این زبانها ایمنی، تشخیص خطا در زمان کامپایل و قابلیت IntelliSense را به جاوااسکریپت اضافه می کند. اگر شما در حال حاضر با جاوا اسکریپت آشنا هستید، یادگیری TypeScript آسان است.

• ReactXP یک کتابخانه جدید توسط مایکروسافت برای ایجاد برنامه های cross platform است که در iOS، Android، ویندوز و وب اجرا می شود.

ReactXP با استفاده از React و React Native ساخته شده است. تفاوت اصلی بین React Native این است که ReactXP تنها در iOS و Android کار نمی کند، بلکه در وب و WindowsOS نیز کاربر دارد.

با React and React Native، برنامه وب شما می تواند بیشتر خود را با برنامه های iOS و اندروید منطبق کند و به اشتراک بگذارد، اما لایه دید (view layer) جداگانه ای باید برای هر پلتفرم اجرا شود. ما این یک گام را پیش گرفته ایم و یک لایه نازک متقابل پلتفرمی که ReactXP آن را می نامیم، توسعه دادیم. اگر شما برنامه خود را به این انتزاع بنویسید، می توانید تعاریف نمایش، سبک ها و انیمیشن های خود را در چندین سیستم عامل هدف به اشتراک بگذارید.

نکات اصلی ReactXP

• توصیه می شود که برای ساخت از TypeScript یا Flow استفاده کنید
• قابلیت کامپایل شدن مستقیم در وب بدون هیچ واسطه ای
• اگر با React / React Native آشنایی داشته باشید خیلی راحت می توانید با ReactXP ارتباط برقرار و با آن کار کنید.
• API بسیار شبیه به React Native است. در زیر نمونه هایی از این کدها که در ReactXP دیده می شود نیز آمده است:

import RX = require('reactxp')
import {
  Styles,
  Component,
  Animated,
  Types,
  View,
  Link,
  Text,
} from 'reactxp'
const styles = {
  container: Styles.createViewStyle({
    flex: 1,
    justifyContent: 'center'
    backgroundColor: '#f5fcff'
  })
}
class App extends Component {
  private _animatedStyle: Types.AnimatedTextStyleRuleSet;
  componentDidMount() {
    // do some stuff with the _animatedStyle
  }
render() {
    return(
      
        
          Hello World
        
      
    )
  }  
}
export default App

اما سوالاتی که راجع به ReactXP ممکن است برای هر کس پیش بیاید.

1. چه پلتفرم هایی از ReactXP پشتیبانی می کنند؟

• iOS (React Native)
• Android (React Native)
• Web (React)
• Windows 10 – UWP (React Native) - in progress
• از دیگر پلتفرم ها می توان Windows 7 & 8, MacOS, and Linux را نام برد.

2. چه مرورگر هایی از ReactXP پشتیبانی می کنند؟

• Chrome (Windows and Mac)
• Internet Explorer (9 and newer)
• Edge
• Firefox

3. آیا می توانیم بدون TypeScript از ReactXP استفاده کنیم؟

• بله، شما می توانید کد برنامه خود را در جاوااسکریپت یا هر زبان دیگری که برای جاوا اسکریپت (TypeScript، Flow و غیره) کامپایل می کنید، بنویسید. ReactXP در TypeScript اجرا می شود و شامل تعاریف نوع TypeScript برای رابط ReactXP می باشد.

4. ارتباط بین ReactXP و React Native چیست؟

ReactXP مبتنی بر React Native است. اجزا و API های ReactXP از React Native الهام گرفته شده و در اکثر موارد همانند React Native هستند. ReactXP عموماً API ها، پروکسی ها، ویژگی های سبک و رابط های انیمیشن را که برای پیاده سازی React Native در iOS و اندروید (و همچنین اجرای اولیه در ویندوز) رایج است، در بر می گیرد. همچنین این API ها، پروکسی ها، ویژگی های سبک و رابط های انیمیشن در وب را نیز اجرا می کند.

ReactXP نه یک زیرمجموعه مناسب و نه یک Superset مناسب React Native است. این هر عنصر ارائه شده توسط React Native را نشان نمی دهد. به طور خاص، هیچ اجزایی را که مخصوص پلت فرم هستند (مانند PickerIOS یا MapView) قرار نمیدهند. همچنین برخی از اجزاء و API ها را که در React Native اجرا نمی شوند، مانند GestureView و UserPresence قرار می دهد.

برنامه هایی که از ReactXP استفاده می کنند می توانند مستقیماً به اجزای React Native و API ها دسترسی پیدا کنند. آنها همچنین می توانند به طور مستقیم به عناصر React DOM در وب دسترسی داشته باشند. اما این کد نیاز به زمان بندی زمان ساخت یا زمان اجرا دارد تا از این اجزا یا API ها در سیستم عامل هایی که در آنها اعمال نمی شود استفاده شود.

تمام اجزا و API های موجود در ReactXP برای تمام سیستم عامل های پشتیبانی شده اجرا می شوند. در بعضی موارد، فراخوانی API ها بدون عملیات هستند، اما آنها تضمین می شوند که اجرا شوند. به عنوان مثال، Input.backButtonEvent یک اپلیکیشن غیر فعال در iOS و وب است و API های StatusBar در وب هیچگونه عملیاتی ندارند.

5. تفاوت ReactXP و React Native در وب چیست؟

React Native for Web یک کتابخانه منبع باز است که توسط مهندسان توییتر طراحی شده است.

اهداف این دو مشابه است، اما رویکردها متفاوت است. ReactXP یک لایه است که در بالای React Native و React نشسته است، در حالی که React Native for Web یک اجرای موازی React Native است ( برای iOS و Android)

ReactXP به طور کلی تنها مواردی از پروکسی ها، ویژگی های سبک و API های موجود در تمام پلتفرم ها را نشان می دهد. اگر شما با ReactXP بنویسید، می توانید اطمینان زیادی داشته باشید که در تمام سیستم عامل های پشتیبانی شده، همان شیوه اجرا می شود. همانند React Native که برای وب / iOS / Android به دست می آید، اما شما باید مراقب باشید که اجزای سازنده، پروکسی ها و API های مورد استفاده دقیق تر باشد.

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

6. تفاوت ReactXP و Xamarin چیست؟

Xamarin یک cross-platform است که به توسعه دهندگان اجازه می دهد برنامه های iOS، Android و Windows Phone را با استفاده از یک پایگاه تک کد ایجاد کنند. برنامه های Xamarin در C#  و XAML نوشته میشوند و به توسعه دهندگان .NET اجازه می دهند تا مهارت و تجربه خود را ارتقا دهند. برنامه های Xamarin می توانند کارآمدتر از برنامه های React Native باشند که توسط عملکرد جاوا اسکریپت  می تواندد محدود شوند. Xamarin توسط مایکروسافت در اوایل سال 2016 به دست آمد و توسط یک تیم اختصاصی مهندسان پشتیبانی می شود. این ارائه دهنده یک راه حل جامع توسعه شامل ابزار برای برنامه نویسی، اشکالزدایی، تجزیه و تحلیل عملکرد، ساخت، تست خودکار و توزیع است.

ReactXP، بر خلاف Xamarin، راهی برای ایجاد برنامه های کاربردی تلفن همراه و برنامه های وب با استفاده از همان منبع فراهم می کند. ReactXP (مانند React and React Bative) اجازه می دهد توسعه دهندگان وب با تجربه از مهارت ها و دانش موجود خود استفاده کنند. ReactXP توسط تیم اسکایپ در مایکروسافت برای حمایت از نیازهای توسعه خود توسعه داده شد. ReactXP بر روی کار فیس بوک و رابط های منبع باز نیز کاربرد دارد.

ReactXP for web

• ReactXP فرض می کند که صفحه اصلی شما دارای یک کامپوننت عنصر DOM با نام app-container است. نمای ریشه برنامه در این ظرف ظاهر می شود. به طور معمول، این عنصر <div> خواهد بود که کل صفحه را پوشش می دهد.

ReactXP for Native

• فرض می شود که ماژول اصلی به نام "RXApp" نامیده می شود و باید توسط کد بومی آن ثبت شود. برای نحوه ثبت نام این ماژول در Android و iOS، به برنامه نمونه مراجعه کنید.

برای شروع کار با ReactXP اینجا کلیک کنید

آموزش برنامه نویسی | ReactXP چیست؟ (بخش دوم)

آموزش برنامه نویسی | ReactXP چیست؟ (بخش سوم)

"موفق باشید"

"مجموعه ABLY"