javascript - ماهو - ما هو الفرق بين React Native و React؟




react ترجمة (18)

  1. React-Native هو إطار لتطوير تطبيقات Android و iOS التي تشترك بين 80٪ - 90٪ من كود Javascript.

بينما React.js هي مكتبة Javascript الأصل لتطوير تطبيقات الويب.

  1. أثناء استخدام علامات مثل <View> ، <Text> بشكل متكرر في React-Native ، يستخدم React.js علامات html على الويب مثل <div> <h1> <h2> ، والتي تعد مرادفات فقط في قاموس تطورات الويب / الجوّال.

  2. بالنسبة إلى React.js ، فأنت بحاجة إلى DOM لعرض المسار لعلامات html ، بينما يستخدم تطبيق Mobile: React-Native يستخدم AppRegistry لتسجيل تطبيقك.

آمل أن يكون هذا تفسيرًا سهلاً للاختلافات / أوجه التشابه السريعة في React.js و React-Native.

لقد بدأت في تعلم React بدافع الفضول وأردت معرفة الفرق بين React و React Native - رغم أنني لم أتمكن من العثور على إجابة مرضية باستخدام Google. يبدو React و React Native بنفس التنسيق. هل لديهم بناء جملة مختلف تماما؟


React Js هي مكتبة Javascript حيث يمكنك تطوير وتشغيل تطبيقات ويب أسرع باستخدام React.

يتيح لك React Native إنشاء تطبيقات محمولة باستخدام JavaScript فقط ، ويتم استخدامه لتطوير تطبيقات المحمول. مزيد من المعلومات هنا https://facebook.github.io/react-native/docs/getting-started.html


React Native مخصص للتطبيقات المحمولة بينما React مخصص للمواقع الإلكترونية (الواجهة الأمامية). كلاهما أطر عمل اخترعها فيسبوك. React Native عبارة عن إطار عمل لتطوير الأنظمة الأساسية مما يعني أنه يمكن للمرء كتابة نفس الكود تقريبًا لكل من IOS و Android وسيعمل بنجاح. أنا شخصيا أعرف الكثير عن React Native لذلك سأترك الأمر عند هذا الحد.


React عبارة عن مكتبة JavaScript مفعلة وفعالة ومرنة لبناء واجهات المستخدم. تخبر المكونات الخاصة بك React عما تريد تقديمه - ثم يقوم React بتحديث المكونات الصحيحة وعرضها فقط بكفاءة عندما تتغير بياناتك. هنا ، ShoppingList هي فئة مكون React ، أو نوع مكون React.

تطبيق React Native هو تطبيق جوال حقيقي. مع React Native ، لا تنشئ "تطبيق ويب للجوال" أو "تطبيق HTML5" أو "تطبيق مختلط". يمكنك إنشاء تطبيق جوال حقيقي لا يمكن تمييزه من تطبيق تم إنشاؤه باستخدام Objective-C أو Java. يستخدم React Native نفس عناصر البناء الأساسية UI كتطبيقات iOS و Android العادية.

medium.com/@alexmngn/…


ReactJS هو إطار أساسي ، يهدف إلى بناء عنصر معزول على أساس نمط رد الفعل ، يمكنك التفكير في الأمر باعتباره V من MVC ، على الرغم من أنني أود أن أذكر أن رد الفعل هذا يجلب شعورًا مختلفًا ، خاصةً إذا كنت معتادًا على المفهوم التفاعلي .

ReactNative هي طبقة أخرى تهدف إلى تكوين مكون محدد لمنصة Android و iOS الشائعة. لذا فإن الكود يبدو بشكل أساسي مثل ReactJS لأنه ReactJS ، لكنه يتم تحميله محليًا في الأنظمة الأساسية المحمولة. يمكنك أيضًا سد واجهة برمجة تطبيقات أكثر تعقيدًا ومنصة مع Java / Objective-C / Swift وفقًا لنظام التشغيل واستخدامه داخل React.


ReactJS هو إطار لبناء التسلسل الهرمي لمكونات واجهة المستخدم. كل عنصر لديه الدولة والدعائم. تتدفق البيانات من الأعلى إلى المكونات منخفضة المستوى عبر الدعائم. يتم تحديث الحالة في مكون المستوى الأعلى باستخدام معالجات الأحداث.

يستخدم React الأصلي إطار React لبناء مكونات لتطبيقات الأجهزة المحمولة. يوفر React native مجموعة أساسية من المكونات لكل من أنظمة iOS و Android. بعض المكونات في React Native هي Navigator و TabBar و Text و TextInput و View و ScrollView. تستخدم هذه المكونات مكونات iOS UIKit و Android UI الداخلية داخليًا. يتيح React native أيضًا NativeModules حيث يمكن استخدام الكود المكتوب في ObjectiveC لنظامي iOS و Java لنظام Android داخل JavaScript.


باختصار: React.js لتطوير الويب بينما React-Native لتطوير تطبيقات الأجهزة المحمولة


بعبارات بسيطة ، ReactJS هي مكتبة رئيسية تقوم بإرجاع شيء لعرضه وفقًا لبيئة المضيف (المتصفح ، الجوال ، الخادم ، سطح المكتب .. إلخ). بصرف النظر عن التقديم ، فإنه يوفر أيضًا طرقًا أخرى مثل خطافات دورة الحياة .. إلخ.

في المستعرض ، يستخدم مكتبة رد فعل أخرى لعرض عناصر DOM. في الأجهزة المحمولة ، يستخدم مكونات React-Native لتقديم مكونات واجهة المستخدم الأصلية (IOS و Android) الخاصة بالنظام الأساسي. وبالتالي،

رد فعل + react-dom = تطوير الويب

رد + رد فعل الأصلي = تطوير المحمول


تم تطوير React Native بشكل أساسي في JavaScript ، مما يعني أنه يمكن مشاركة معظم التعليمات البرمجية التي تحتاجها للبدء عبر الأنظمة الأساسية. سوف تتفاعل رد فعل الأصلية باستخدام المكونات الأصلية. يتم تطوير تطبيقات React Native باللغة المطلوبة بواسطة النظام الأساسي الذي تستهدفه ، Objective-C أو Swift لنظام التشغيل iOS و Java لنظام Android وما إلى ذلك. لا تتم مشاركة التعليمات البرمجية المكتوبة عبر الأنظمة الأساسية ويختلف سلوكها. لديهم إمكانية الوصول المباشر إلى جميع الميزات التي تقدمها منصة دون أي قيود.

React هي مكتبة JavaScript مفتوحة المصدر تم تطويرها بواسطة Facebook لبناء واجهات المستخدم. يستخدم لمعالجة طبقة العرض لتطبيقات الويب والجوال. تستخدم ReactJS لإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام. إنها حاليًا واحدة من مكتبات JavaScript الأكثر شيوعًا في هذا المجال ولها أساس قوي ومجتمع كبير خلفها. إذا كنت تتعلم ReactJS ، فأنت بحاجة إلى معرفة JavaScript و HTML5 و CSS.


ردًا على تعليق poshest أعلاه ، إليك إصدار React Native من رمز الساعة الذي تم نشره مسبقًا في React (آسف ، لم أتمكن من التعليق على القسم مباشرةً ، وإلا فقد أضفت الكود هناك):

رد عينة رمز الأصلي

 import { AppRegistry } from 'react-native'; import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; class Clock extends Component { constructor(props) { super(props); this.state = { date: new Date() }; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <View style={styles.container}> <Text style={styles.sectionTitle}>Hello, world!</Text> <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'white', flex: 1, justifyContent: 'center', }, sectionTitle: { fontSize: 24, fontWeight: '600', color: 'black', alignSelf: 'center', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', color: 'darkgrey', alignSelf: 'center', }, }); AppRegistry.registerComponent("clock", () => Clock); 

لاحظ أن التصميم هو خياري بالكامل ولا يسعى إلى إجراء نسخ متماثل مباشرة للعلامات <h1> و <h2> المستخدمة في رمز React.


فيما يلي الاختلافات التي أعرفها:

  1. لديهم علامات HTML مختلفة: React Native يستخدم لمعالجة النص بدلاً من React.
  2. يستخدم React Native مكونات Touchable بدلاً من عنصر زر عادي.
  3. يحتوي React Native على مكونات ScrollView و FlatList لعرض القوائم.
  4. يستخدم React Native AsyncStorage بينما يستخدم React التخزين المحلي.
  5. في أجهزة التوجيه React Native تعمل ككومة ، بينما في React ، نستخدم مكونات Route لتعيين التنقل.

لا تستطيع Google توضيح ذلك لك ، كما قلت ، لكن Google ستكون سعيدة جدًا إذا اخترعوا React.

هنا هو مشروع React .

في Facebook ، اخترعوا React حتى يتمكن JavaScript من معالجة موقع DOM بشكل أسرع باستخدام نموذج DOM الظاهري.

يعد التحديث الكامل لـ DOM أبطأ مقارنةً بنموذج React الظاهري dom ، والذي يقوم بتحديث أجزاء فقط من الصفحة (اقرأ: التحديث الجزئي).

كما قد تفهم من هذا video ، فإن Facebook لم يخترع React لأنهم أدركوا فورًا أن التحديث الجزئي سيكون أسرع من التحديث التقليدي. في الأصل ، احتاجوا إلى طريقة لتقليل وقت إعادة بناء تطبيق Facebook ولحسن الحظ ، أدى هذا إلى إعادة تنشيط DOM الجزئي.

React الأصلي هو مجرد نتيجة React. إنها منصة لإنشاء تطبيقات أصلية باستخدام JavaScript.

قبل React أصلي ، كنت بحاجة لمعرفة Java for Android أو Objective-C لـ iPhone و iPad لإنشاء تطبيقات أصلية.

مع React Native ، من الممكن محاكاة سلوك التطبيق الأصلي في JavaScript وفي النهاية ، ستحصل على شفرة خاصة بالنظام الأساسي كإخراج. يمكنك أيضًا خلط الكود الأصلي مع جافا سكريبت إذا كنت بحاجة إلى تحسين تطبيقك بشكل أكبر.

كما قال أوليفيا بيشوب في video ، يمكن مشاركة 85٪ من قاعدة الكود الأصلي React بين المنصات. ستكون هذه هي المكونات التي تستخدمها التطبيقات عادة والمنطق المشترك.

15 ٪ من الكود هو منصة محددة. جافا سكريبت الخاصة بالنظام الأساسي هي ما يعطي نكهة المنصة (ويحدث الفرق في التجربة).

الشئ الرائع هو أن هذا الكود الخاص بالمنصة - مكتوب بالفعل ، لذلك تحتاج فقط إلى استخدامه.


ReactJS هي مكتبة JavaScript تدعم كلاً من الويب الأمامي ويتم تشغيلها على خادم لبناء واجهات المستخدم وتطبيقات الويب.

React Native هو إطار عمل متنقل يجمع مكونات التطبيق الأصلية ، مما يتيح لك إنشاء تطبيقات متنقلة أصلية لأنظمة تشغيل مختلفة (iOS و Android و Windows Mobile) في JavaScript والتي تتيح لك استخدام ReactJS لبناء مكوناتك وتنفذ ReactJS ضمن غطاء محرك السيارة.

كلاهما مفتوح المصدر من Facebook.


REACT هي مكتبة Javascript لإنشاء تطبيق ويب واجهة كبيرة / صغيرة مثل Facebook.

REACT NATIVE هو إطار جافا سكريبت لتطوير تطبيقات الهاتف المحمول الأصلية على Android و IOS و Windows Phone.

كلاهما مفتوح المصدر من Facebook.


React Js - React JS هي مكتبة جافا سكريبت الأمامية إنها مكتبة كبيرة وليست إطارًا

  • يتبع النهج القائم على العنصر الذي يساعد في البناء
    قابلة لإعادة الاستخدام مكونات واجهة المستخدم
    • يتم استخدامه لتطوير شبكة معقدة واجهة المستخدم التفاعلية والمحمولة
    • على الرغم من أنها كانت مفتوحة المصدر فقط في عام 2015 ، إلا أنها تضم ​​واحدة من أكبر المجتمعات التي تدعمها.

ReactNative - React Native عبارة عن إطار تطبيق مفتوح المصدر.


ReactJS هي مكتبة جافا سكريبت التي تستخدم لبناء واجهات الويب. ستحتاج إلى حزمة مثل webpack ومحاولة تثبيت الوحدات التي ستحتاج إليها لبناء موقع الويب الخاص بك.

React Native هو إطار جافا سكريبت وهو يأتي مع كل ما تحتاجه لكتابة تطبيقات متعددة المنصات (مثل iOS أو Android). ستحتاج إلى تثبيت xcode و android studio لإنشاء تطبيقك ونشره.

على عكس ReactJS ، لا يستخدم React-Native HTML ولكن المكونات المماثلة التي يمكنك استخدامها عبر ios و android لإنشاء تطبيقك. تستخدم هذه المكونات مكونات أصلية حقيقية لإنشاء تطبيقات ios و android. نتيجة لهذا التطبيق ، تشعر تطبيقات React-Native بالواقع على عكس منصات تطوير Hybrid الأخرى. تزيد المكونات أيضًا من إمكانية إعادة استخدام الكود ، حيث لا تحتاج إلى إنشاء واجهة مستخدم واحدة مرة أخرى على ios و android.


الرد الأم

  • إنه إطار لإنشاء تطبيقات أصلية باستخدام JavaScript.

  • إنه يجمع مكونات التطبيق الأصلية ، مما يتيح لك إنشاء تطبيقات الجوال الأصلية.

  • لا حاجة لإصلاح التطبيق القديم. كل ما عليك القيام به هو إضافة مكونات React Native UI إلى رمز التطبيق الحالي ، دون الحاجة إلى إعادة كتابة.

الرد شبيبة

  • يدعم كل من الويب الأمامي ويتم تشغيله على خادم ، لبناء واجهات المستخدم وتطبيقات الويب.

  • كما يسمح لنا بإنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام.

  • يمكنك إعادة استخدام مكونات الكود في React JS ، مما يوفر لك الكثير من الوقت.


تتفاعل:

React عبارة عن مكتبة JavaScript مفعلة وفعالة ومرنة لبناء واجهات المستخدم.

الرد الأصلي:

يتيح لك React Native إنشاء تطبيقات الجوال باستخدام جافا سكريبت فقط. يستخدم نفس تصميم React ، مما يتيح لك تكوين واجهة مستخدم متنقلة غنية من المكونات التعريفية.
مع React Native ، لا تنشئ "تطبيق ويب للجوال" أو "تطبيق HTML5" أو "تطبيق مختلط". يمكنك إنشاء تطبيق جوال حقيقي لا يمكن تمييزه من تطبيق تم إنشاؤه باستخدام Objective-C أو Java. يستخدم React Native نفس عناصر البناء الأساسية UI كتطبيقات iOS و Android العادية. يمكنك فقط وضع هذه العناصر الأساسية معًا باستخدام JavaScript و React.
يتيح لك React Native إنشاء تطبيقك بشكل أسرع. بدلاً من إعادة الترجمة ، يمكنك إعادة تحميل التطبيق على الفور. مع إعادة التحميل الساخنة ، يمكنك حتى تشغيل رمز جديد مع الاحتفاظ بحالة التطبيق. جربه - إنها تجربة سحرية.
تتفاعل React Native بسلاسة مع المكونات المكتوبة في Objective-C أو Java أو Swift. من السهل الرجوع إلى الكود الأصلي إذا كنت بحاجة إلى تحسين بعض جوانب تطبيقك. من السهل أيضًا إنشاء جزء من تطبيقك في React Native ، وجزء من التطبيق الخاص بك باستخدام الكود الأصلي مباشرة - هكذا يعمل تطبيق Facebook.

React هي مكتبة واجهة المستخدم بشكل أساسي لعرض تطبيق الويب الخاص بك ، باستخدام javascript و JSX ، React native هي مكتبة إضافية في الجزء العلوي من React ، لصنع تطبيق أصلي لأجهزة iOS و Android .

نموذج رمز التفاعل :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


رد عينة الكود الأصلي :

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

لمزيد من المعلومات حول React ، قم بزيارة الموقع الرسمي عن طريق فريق facebook:

https://facebook.github.io/react

لمزيد من المعلومات حول React Native ، تفضل بزيارة موقع React الأصلي على الويب هنا:

https://facebook.github.io/react-native





javascript-framework