هل يحتاج متعلم ريأكت ناتيف فرونت اند ان يدرس redux و react Dom ام لا يلزمه هذا ؟؟

الفرق باستخدام DOM بين React و React Native:

لكل من React و React Native طرقهما الخاصة في تصميم المكونات (component) والواجهات (Views).

نظرًا لأن React يعرض عناصر HTML إلى DOM افتراضي ، يتم إجراء التصميم غالبًا باستخدام نفس معيار الويب: CSS.
يتطابق ناتج React مع مخرجات صفحة ويب HTML التقليدية ، مما يسمح لك باستخدام الأساليب القياسية للتصميم عندما يتعلق الأمر بإضافة تنسيقات خارجية (تنسيق الموقع بالستخدام CSS).
مع React Native ، لا تتمتع بنفس الحرية. نظرًا لأن React Native تُخرج تطبيقًا أصليًا (Native app)، فلا يوجد DOM مع عناصر HTML يمكن تصميمها باستخدام الطرق المعتادة مثل CSS.
يتم التعامل مع الأنماط في React Native بدلاً من ذلك باستخدام كائنات Javascript التي تعدل خصائص المكونات الأصلية الأساسية. لا يستخدم CSS ، على الرغم من أن العديد من الخصائص تشبهها.

مثال لتنسيق مكون:

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

export default class App extends Component {
  render () {
    return (
      <View style={styles.appContainer}>
        <Text style={styles.appText}>Hello world</Text>
      <View />
    )
}

const styles = {
  appContainer: {
    flex: 1
  },
  appText: {
    fontSize: 18,
    color: 'white',
    textAlign: 'center'
  }
}

مصدر

سأوضح لك الفروقات بين كل منهم :

1. React Native عباره عن أطار عمل ( Framework ) تم تطويرها من قبل شركة الفيس بوك. توفر الـ React Native الامكانيات الكاملة لبناء التطبيقات المتكامله التي تشبه التطبيقات التي يتم برمجتها بأستخدام لغات البرمجة المخصصة مثل Java او Swift. بالاضافة الى ذلك, فأن وحدات البناء الاساسية لواجهة المستخدم ( UI ) المستخدمة بواسطة iOS و Andriod يتم أستخدامها ايضاً بواسطة الـ React Native.
2. React.js ليس إطار عمل بالمعنى الصحيح، بل مجرد مكتبة جافاسكربت طورتها شركة فيسبوك لبناء واجهات المستخدم User Interfaces، أي أن React لا يهتم بكل ما له علاقة بالخادم وقواعد البيانات، فهو لا يأتي مع أي واجهات للإتصال بالخوادم عن طريق الأجاكس كما هو الحال مثلا في إطار عمل أنغيولار،هذا الكلام يعني أنك مطالب بالإستعانة بحلول طرف ثالث مثل جيكويري أو axios للقيام بعمليات أجاكس Ajax على سبيل المثال،يعتمد React.js على نظام Virtual DOM حيث يتم تحويل DOM لكائن جافاسكربت اعتيادي ومعه يتعامل React.js مباشرة، جميع التغييرات التي تتم على مستوى واجهة المستخدم يتم تنفيذها على مستوى Virtual DOM وبعد ذلك يقوم React.js بمقارنة Virtual DOM مع DOM الحقيقي لدمج التغييرات التي حصلت فقط وليس تحديث DOM بكامله كما تفعل jQuery و Angular مثلا.
3. Redux هو مكتبة جافاسكريبت لإدارة State، جميع البيانات المتحكمة في حالة التطبيق ستكون مخزنة في مكان واحد اسمه Store وبذلك يسهل الوصول إليها من أي مكان في تطبيقنا وتبادلها بين المكونات، وهو الأمر الذي لا يكون بنفس البساطة والسلاسة عندما نقوم بذلك يدويا باستخدام الواجهة البرمجية API ل React.js فقط.

الأمر لا يحتاج منا إلا الإختيار المناسب لما نود القيام به، هنا يتضح لنا أنه بإستخدامنا و تعلمنا لـReact Native نكون بذلك لسنا بحاجة لتعلم React.js، و بالنسبة لـ Redux ما هي إلا مكتبة لها وظائف معينة تسهل عمل بعض العمليات و بناؤها بدلا من القيام بها يدويا بـ React.js

ليس عليك تعلمهم جميعًا، و إنما ما تراه مناسب لما تود برمجته فعليك التركيز به و تعلمه جيدًا بعيدًا عن التشتت و الحيرة.

بالتوفيق.

بتاريخ 2 ساعات قال Ahmed Sawy:

هل يحتاج متعلم ريأكت ناتيف فرونت اند ان يدرس redux و react Dom  ام لا يلزمه هذا ؟؟ 

مرحبا @Ahmed Sawy

نعم، بالطبع تحتاج إلى أن تبدأ بتعلم React.js قبل أن تتعلم React Native حيث أن ال principles المبادئ و الأساسيات التي ستحتاجها عند التطوير باستخدام react native كلها مبنية على React.js و معتمدة عليها.

 إليك هذه المقولة من facebook و هي الشركة التي قامت ببناء المكتبات React و React Native.

:From Facebook

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React

يتضح من ذلك أن تطوير تطبيقات react Native يعتمد بصورة أساسية على javaScript  و  React.

فقبل أن تبدأ بتعلم ال APIs الخاصة بتطبيقات الهواتف يجب أن تكون على علم ب React. بالطبع لا يجب عليك أن تتعمق كثيرا في تعلم React كل ما عليك تعلمه هو الأساسيات و ما أقصده بهذه الأساسيات هو المفاهيم الأساسية الموضحة في الصور التالية 

ال 12 مفهوم المذكورين في الصور السابقة يجب أن تعرفهم عن ظهر قلب حتى تتمكن من العمل ب react native بدون أي مشاكل أو عقبات يمكنك تعلمهم من التوثيق الرسمي الخاص ب react أو من خلال أي سلسلة تعليمية تفضل. يمكنك أن تقرأ عن هذه الأساسيات من التوثيق الرسمي الخاص ب react باللغة العربية من هنا.

 ** أريد أن أنوه على شيء و هو أنه حتى تتعلم react أو react native يجب أن تعرف ES6 قبلهم. لأنهما لا يستخدمان vanilla javaScript بل es6.

أما Redux فهي عبارة عن حاوية لحالات التطبيق يمكن التنبأ بها أو بالنواتج التي نحصل عليها منها 

predictable state container. و هي تساعدنا في بناء تطبيقات يمكنها أن تعمل في بيئات مختلفة و تتصرف بشكل ثابت دائما "لا نحصل على نتائج غير متوقعة".هذا يعني أن تدفق البيانات يتم التحكم به من خلال component واحد فقط "و هذا واحد من أهم المبادئ التي جعلت من  react مكتبة في غاية القوة و الكفاءة"

و بالطبع يجب عليك تعلم أحد مكتبات إدارة الحالات مثل redux فهي مهمة للغاية.

و لكن أنصحك أن تتعلم react-context-api قبل أن تتعلم أحد هذه المكتبات. حيث أن react-context-api تقوم بنفس وظيفة redux و لكنها أسهل في التعلم  ستساعدك على تعلم و فهم أساسيات redux بشكل أفضل. و لكن  react-context-api لا يمكن استخدامها في اامشاريع الكبيرة فهي تصلح للتطبيقات البسيطة الصغيرة فقط.

بالتوفيق.

Redux:

تُستخدم Redux لإدارة الحالة العامة للتطبيق  (global state management) حيث يتم الحفاظ على الحالة على مستوى المكون في React عن طريق State خاصة بها ، يمكنك تمرير المعالجات ذات المتغيرات (handlers with variables) إلى المكونات الفرعية من الآباء وبالعكس والتي تصبح فوضوية ويصعب إدارتها عندما ينمو تطبيقك ويصبح معقدًا. يأتي Redux ليحل المشكلة.في بعض الأحيان في التطبيقات الصغيرة ، من الأفضل عدم استخدام redux. لذا استخدمها بعد أن ننعلم أساسيات React.

مقالة كتبها مؤلف Redux

بشكل عام يمكنك استخدام كل من الحالة المحلية state و redux store في المكون الخاص بك(component).
في رأيي ، يجب عليك استخدام الحالة المحلية (state) لتطبيقات البسيطة. استخدم Redux لتطبيقات الأعمال ، التي تتطلب توسيع الميزات بحلول الوقت
إذا كان المكون (component) شديد التعقيد ، فيجب عليك تقسيمه إلى مكون صغير لإعادة استخدامه والتحكم في كيفية عمله.

كقاعدة عامة بسيطة ،  استخدام متجر Redux للبيانات ذات الصلة بمكونات مختلفة غير مرتبطة ,و state في المكون للبيانات التي ليس لها معنى خارج المكون والوالد أو الأطفال.

Redux هو في الأساس مخزن بيانات في الذاكرة ، ويضيف الكثير من التعليمات البرمجية المعيارية إلى تطبيقك إذا لم تكن في حاجة إليها حقًا.