تعلم React Native

كيف أصبح مطور React Native لكي أستطيع تطوير تطبيقات الموبايل بلغة البرمجة جافاسكريبت ؟

هذا السؤال وصلني مرات عديدة من متابعي وقراء المدونة، ولعل جميع من طرحوا علي هذا السؤال قرؤوا مقالنا الذي عرفنا فيه بهذه التقنية الجديدة والتي باتت لاعبا مهما في ميدان صناعة تطبيقات الهواتف الذكية.

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

1. تعلم جافاسكريبت

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

ربما سمعت في السنتين الأخيرتين عن ES 2015 أو ES6، المصطلحين مترادفين ويقصد بهما النسخة الكبيرة والجديدة لجافاسكريبت. هذا الإصدار حمل معه تحسينات بالجملة ل JavaScript كي يصبح الأخير لغة أكثر حداثة وعصرية.

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

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

دورات مقترحة لتعلم جافاسكريبت على يوتيوب :

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

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

ولا أنسى دائما أن أشدد على ضرورة الممارسة والتطبيق لكل ما تعلمناه حتى تترسخ المعارف التي اكتسبناها في عقولنا.

2. تعلم React.js

الآن وبعد أن اغترفت من معين الجافاسكريبت وأصبحت على دراية جيدة بمفاهيمه الأساسية، يمكنك المرور إلى التحدي الجديد: تعلم React.

React.js هو مكتبة جافاسكريبت قامت شركة فيسبوك ببنائها بغرض تسهيل مهمة تطوير واجهات المستخدم UI في تطبيقات الويب. نالت هذه المكتبة شعبية جارفة في السنوات الأخيرة وأصبح يستخدمها عدد كبير جدا من مطوري واجهات الويب الأمامية حول العالم.

إطار العمل React Native يعتمد على React.js بشكل مباشر، وطريقة كتابة الأكواد في مشاريعه تشبه بشكل شبه كامل طريقة كتابتها في مشاريع React.js، وبالتالي فتعلم الأخير سيسهل بشكل مثالي دخولك لعالم برمجة تطبيقات الموبايل بواسطة React Native.

يمكن اعتبار الموقع الرسمي لمكتبة React.js مكانا جيدا لتعلم أساسياتها وفكرتها العامة، ثم تبحث بعد ذلك عن دورات على اليوتيوب أو يوديمي وأمثاله (إذا كنت مستعدا لاستثمار قليل من المال) للتعمق أكثر والإنتقال لمستويات أعلى من الفهم والإستيعاب.

بحثت على اليوتيوب ولم أجد سوى دورة عربية واحدة لقناة بغداد الجديدة، يمكنك البدء بها حالما تنتهي من الإطلاع على التوثيق من الموقع الوسمي.

3. تعلم React Native

بما أنت أصبحت قادرا على التعامل بارتياح مع React.js فأنت بالضرورة تستطيع فعل ذلك مع React Native، فهما يتشاركان نفس الفلسفة و لا يوجد أي اختلاف يذكر بينهما سوى في بعض التفاصيل الصغيرة. مثلا في React لا يمكنك استخدام الوسوم p ،div وغيرها، وتستخدم عوضا عنها مكونات (Components) جديدة وأصلية مثل Text ،View إلخ…

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

4. تعلم Redux

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

ما هو Redux ؟

Redux هو مكتبة جافاسكريبت لإدارة State. جميع البيانات المتحكمة في حالة التطبيق ستكون مخزنة في مكان واحد اسمه Store وبذلك يسهل الوصول إليها من أي مكان في تطبيقنا وتبادلها بين المكونات، وهو الأمر الذي لا يكون بنفس البساطة والسلاسة عندما نقوم بذلك يدويا باستخدام الواجهة البرمجية API ل React.js فقط.

Redux مشروع قائم بذاته ولا علاقه له ب React.js ويمكن استخدامه في أي مكان بشكل مستقل.

دورة بناء تطبيق لتحويل العملات، الذي أشرنا إليها أعلاه، تم فيها الإستعانة ب Redux وبالتالي يمكن الإستفادة منها كذلك في تعلم كيفية دمجه واستخدامه مع في مشروع RN. ولكن ينصح قبل ذلك قراءة التوثيق الرسمي وفهم آلية العمل والفلسفة التي يعتمد عليها (Actions, Reducers, Store).

هذا وأشجع بقوة على قراءة هذا المقال الذي يشرح الموضوع بشكل رائع وفي متناول المبتدئين :

النهاية

أتمنى أن تكون الصورة أكثر وضوحا الآن عزيزي القارئ.

الخطوات على بساطتها يجب أن تعطى حقها الكامل من الوقت والتركيز، ولا غنى لك طبعا عن محرك البحث Google عندما تقع في بعض المشاكل أو عندما لا تعرف كيفية التصرف.

سأكون كذلك مسرورا بالإجابة على أسئلتك حول React Native في التعليقات أو عن طريق صفحة اتصل بنا.

 

26 تعليقات

  1. السلام عليكم ورحمة الله
    تحياتي لك أخي عيسى بوكرن
    لقد أُعجبت كثيرا بشروحاتك وطريقتك في إيصال المعلومة ، شكرا لك .

    • وعليكم السلام ورحمة الله،
      أشكرك عزيزي أحمد على هذا الكلام الجميل.
      القادم أفضل بحول الله.

  2. السلام عليكم ورحمة الله جزاك الله خيرا أخي عيسى وفعلا استفدت من مقالك ولك الاجر والثواب ومع إني مبتدأ في هذا المجال وبعد بحثي فيه فاتوقع نجاحة وشهرته أكثر
    لأني الذي فهمته فهو يعتبر bridg platform يعني ليس cross platform ولا هو native كامل وهذا يعتر نقطة لصالحه علي ما أظن
    فهل هذا صحيح

    • كلامك صحيح أخي هشام،
      React Native ليس Hybrid مثل إطارات عمل كوردوفات (Ionic أو Framework7) وليست كذلك Native 100% مثل مشاريع أندرويد ستوديو أو XCode.
      يعني حل وسط بين الإثنين 🙂

  3. السلام عليكم اولا جزاك الله كل خير علي هذه المعلومات الرائعه ثانيا كنت عايز بس اسالك سؤال هل بعد ما اخلص الجافاسكريبت اذاكرالnode.js and Es6قبل reactjsوالاهما مش مطلوبين للوصول للreact native

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

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

  5. حابه أتعلم برمجة التطبيقات للنظامين أندرويد و أبل للعمل بنفس التطبيق , هل أحتاج كولتن و سويفت ولا أقدر أكتفي بالجافا مع react native ?? و ما الفرق بين الطريقتين ؟ هل التطبيقات المنشورة على النظامين تستخدم كل لغة على حدى ؟

    • React Native نستطيع بواسطته إنشاء تطبيقات أندرويد و iOS فقط بالإعتماد على جافاسكريبت وبدون الحاجة لجافا أو كوتلن أو سويفت.

  6. السلام عليكم اخى الفاضل
    اشكرك كثيرا على هذا المقال الرائع
    واردت ان اسالك ” لدى موقع واريد تحويله الى تطبيق اندرويد وايفون ”
    فهل هناك طريقه اخرى لتحويل الموقع الى تطبيق ام يجب استخدام react native
    ,كم ساحتاج من الوقت لتنفيذ ذلك علما بان لدى خبره متوسطه فى تصميم تطبيقات الاندرويد ولغه الجافا
    ارجو ان تفيدني
    شكرا جزيلا

    • وعليكم السلام ورحمة الله،
      سؤالك يعتمد على نوعية الموقع ودرجة تعقيده.

  7. شكرا جدا لاهتمامك وردك
    هو الموقع بسيط موقع اخبارى
    ممكن ابعتلك اللينك على ايميل حضرتك مثلا لانى مش هينفع ابعته على العام
    عموما هو موقع بسيط بيعرض الاخبار الخاصه بالرياضه

  8. السلام عليكم أخي الكريم،
    أنا مبتدئ في البرمجة، أعرف فقط لغة html وقليل من php، وأريد تعلم برمجة التطبيقات باستخدام react native
    هل إذا اتبعت الخطوات الثلاثة المذكورة المذكورة في الموضوع يمكنني انشاء التطبيقات لاندرويد و ios؟
    وكم أقصر مدة يمكنني فيها تعلم الثلاث خطوات المذكورة في الموضوع؟
    أو هل تنصحني بتعلم لغات أخرى قبل البدء في برمجة التطبيقات؟
    علماً أنني سريع التعلم والحمدلله، شكرا لك وأقدر مساعدتك وتوجيهك

    • بما أنك مبتدئ وتريد تعلم بناء تطبيقات الهواتف الذكية العابرة للمنصات (Cross Platform) فأنصحك بإطار العمل فلاتر الذي يعتمد على لغة البرمجة دارت.
      لو كنت تتمتع بمستوى معين في جافاسكريبت ولديك خبرة جيدة في React.js لنصحتك ب React Native.

      على العموم كلا الخيارين جيدين، وأرى بأن فلاتر مناسب لك.

      إذا اقتنعت بنصيحتي فابحث في يوتيوب عن رؤوف رحيش، هذا الأخير قام بإعداد سلسلة دروس ممتازة بالعربية عن Flutter ولغة Dart.

      • التطبيق الذي أريد انشاءه أريده أن يكون قابل للتطور والتوسع ..
        هو تطبيق حجز رحلات عطلات مع الطيران والفنادق..
        ولذلك أريد استعمال شيء قابل للتطور ويتحمل الخصائص الجديدة والتعقيد والتطوير..

        ولهذا أردت تعلم react native

        كم المدة التي احتاجها لتعلم جافاسكريبت و react.js؟
        وهل يلزم خبرة كبيرة في html و css لكي أتعلم جافاسكريبت؟

        أشكرك جدا على نصائحك وتوجيهك

        • فلاتر إطار عمل من شركة غوغل وقد لاقى نجاحا كبيرا جدا في المدة الأخيرة واشتهر بين المطورين. لا تظن بأنه أقل شأنا من React Native.

          نصحتك به لأن الوقت اللازم لتعلمه والبدء في العمل به أقل بكثير من تعلم RN، كما أن هناك أمورا أخرى يتفوق بها Flutter مثل تحديث التطبيق، حيث أن كل إصدار جديد يكون متوافقا مع الإصدار القديم ولا يتعارض معه. بينما في RN يعانون من هذا المشكل، حيث أنك من الممكن أن تستخدم حزمة (Package) معينة مع الإصدار الحالي ل React Native وفي الإصدار القادم تجد أنها غير متوافقة وبالتالي تضطر للبحث عن بديل أو إصلاح المشكل بنفسك وهذا صعب وغير عملي.
          أما فيما يخص تعلم JavaScript و React فالأمر يعتمد على جديتك وانضباطك، يمكنك تعلمهما في وقت قياسي إذا قمت بمتابعة دورة شاملة في هذا الموضوع وقمت بتطبيق ما تعلمته في بعض الأمثلة العملية.
          تحتاج كذلك لتعلم بعض CSS (بالخصوص خاصية Flexbox) لكي لا تجد صعوبة في تنسيق مكونات React Native.

          أما HTML فليس مطلوبا تعلمه في هذه الحالة.

          • أشكرك جداً أخي
            لم أكن أعلم أن flutter جيد لهذه الدرجة … كنت أظن أنه أقدم من RN، وخصائصه أقل..
            سأستخدم flutter بإذن الله…

  9. هل رياكت ناتيف وفلاتر وغيرها …
    هل يمكنني انشاء نظام تسجيل دخول في التطبيق بواسطتها؟
    يعني مثلا في ال php هناك يمكنني انشاء قاعدة بيانات المستخدمين بواسطة mysql تتخزن فيها الداتا ..

    كيف يتم الأمر في رياكت ناتيف وغيرها من اطارات العمل؟
    هل يوجد نظام مختلف لقاعدة البيانات؟

    شكرا

    • Flutter و React Native مختصون فقط في بناء الواجهات الأمامية (الرسومية) للتطبيق، الإتصال بقواعد البيانات يتم عبر واجهة برمجية (API) يتم بناؤها باستخدام لغة برمجية لناحية الخادم مثل Python ،Node.js ،PHP إلخ…

      بعد الإنتهاء من إنجاز الواجهة البرمجية يقوم فلاتر أو رياكت ناتيف بالإتصال بها واتخاذها كوسيط بينهما وبين الخادم، تماما كما يحدث في تطبيقات الويب أحادية الصفحة (Single Page Application).

      هناك منصات وخدمات مدفوعة تقدم قواعد بيانات وخوادم إضافة لواجهات برمجية جاهزة للتعامل معها، أشهرها منصة Firebase من غوغل. مثل هذه المنصات تغنيك عن بذل المجهود في إعداد البنية التحتية للتطبيق ولكنها كما قلت مدفوعة (تقدم خطط مجانية للتجربة).

ترك الرد

Please enter your comment!
Please enter your name here