الفرق بين المراجعتين لصفحة: «React/getting started»

من موسوعة حسوب
تحديث المحتوى
تحديث الصفحة، والعنوان، والتصنيفات
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:تجربة React}}</noinclude>
<noinclude>{{DISPLAYTITLE:البدء مع React}}</noinclude>
''تلقي هذه الصفحة نظرة شاملة على توثيق React والمصادر المرتبطة به.''
''تلقي هذه الصفحة نظرة شاملة على توثيق React والمصادر المرتبطة به.''


تعدُّ React مكتبةٌ من مكتبات JavaScript مخصصة لبناء واجهات المستخدم. انتقل إلى [[React|الصفحة الرئيسية لتوثيق React]]، أو إلى [[React/tutorial|الدليل التطبيقي]] لمعرفة المزيد عنها.
تعدُّ React مكتبةٌ من مكتبات [[JavaScript]] مخصَّصة لبناء واجهات المستخدم. انتقل إلى [[React|الصفحة الرئيسية لتوثيق React]]، أو إلى [[React/tutorial|الدليل التطبيقي]] لمعرفة المزيد عنها.


== جرب React ==
== جرب React ==
صُمِّمت <nowiki/>[[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على <nowiki/>[[React]]<nowiki/>الشيء البسيط أو بقدر ما تحتاج إليه. سواءً أردت تجريب React بشكل مبسَّط، أو إضافة بعض التفاعل إلى صفحة HTML بسيطة، أو البدء بإنشاء تطبيق React معقد، فستساعد الروابط في هذا القسم بتحقيق ذلك.
صُمِّمت <nowiki/>[[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على <nowiki/>[[React]]<nowiki/>الشيء البسيط أو بقدر ما تحتاج إليه. سواءً أردت تجريب [[React]] بشكل مبسَّط، أو إضافة بعض التفاعل إلى صفحة [[HTML]] بسيطة، أو البدء بإنشاء تطبيق [[React]] معقَّد، فستساعد الروابط في هذا القسم بالوصول إلى ذلك.


=== التجربة على الإنترنت ===
=== التجربة على الإنترنت ===
إن كنت مهتمًا بتجربة React والتعامل معها، فبإمكانك استخدام بيئة جاهزة لتجربة الشيفرة على الإنترنت. جرّب مثال "أهلًا بالعالم" (Hello World) على موقع [https://reactjs.org/redirect-to-codepen/hello-world CodePen] أو موقع [https://codesandbox.io/s/new CodeSandbox].
إن كنت مهتمًا بتجربة [[React]] والتعامل معها، يمكنك استخدام بيئة جاهزة لتجربة الشيفرة على الإنترنت. جرّب مثال "أهلًا بالعالم" (Hello World) على موقع [https://reactjs.org/redirect-to-codepen/hello-world CodePen] أو موقع [https://codesandbox.io/s/new CodeSandbox].


إن كنت تُفضِّل استخدام مُحرِّر النصوص الخاص بك، فبإمكانك تحميل [https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html ملف HTML هذا] وتعديله ومن ثمّ فتحه عن طريق نظام الملفّات المحلّي عبر المتصفّح لديك. يُؤدِّي هذا إلى بطء في تحويل الشّيفرة أثناء زمن التنفيذ لذلك لا تستخدم هذه الطريقة أثناء إنتاجك لمشاريع حقيقيّة.
إن كنت تُفضِّل استخدام مُحرِّر النصوص الخاص بك، يمكنك تحميل [https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html ملف HTML هذا] وتعديله ومن ثمّ فتحه عن طريق نظام الملفّات المحلّي في متصفّحك. يُؤدِّي هذا إلى بطء في تحويل الشّيفرة أثناء زمن التنفيذ لذلك لا تستخدم هذه الطريقة أثناء إنتاجك لمشاريع حقيقيّة.


=== إضافة React إلى موقع ويب ===
=== إضافة React إلى موقع ويب ===
سطر 16: سطر 16:


=== إنشاء تطبيق React جديد ===
=== إنشاء تطبيق React جديد ===
عند بدء مشروع React، قد لا يزال خيار استعمال صفحة HTML بسيطة الوسوم <script> أفضل خيار، إذ يأخذ دقيقةً واحدةً لإعدادها.
عند بدء مشروع [[React]]، قد لا يزال خيار استعمال صفحة [[HTML]] بسيطة الوسوم <code>[[HTML/script|<script>]]</code> خيارًا مفضَّلًا، إذ يأخذ دقيقةً واحدةً لإعداده.


في الوقت الذي يكبر فيه برنامجك، قد ترغب بإعداد وضبط والكثير من الأمور المتكاملة. هنالك [[React/create a new react app|سلاسل أدوات JavaScript]] عديدة نوصي باستعمالها في حالة التطبيقات الكبيرة. يمكن أن تعمل كل أداة من تلك الأدوات مع ضبط بسيطة أو حتى دون أي ضبط وتمكِّنك من الاستفادة من جميع ميزات بيئة عمل React الواسعة.
في الوقت الذي يكبر فيه برنامجك، قد ترغب بإعداد وضبط والكثير من الأمور المتكاملة. هنالك [[React/create a new react app|سلاسل أدوات JavaScript]] عديدة نوصي باستعمالها في حالة التطبيقات الكبيرة. يمكن أن تعمل كل أداة من تلك الأدوات مع ضبط بسيطة أو حتى دون أي ضبط وتمكِّنك من الاستفادة من جميع ميزات بيئة عمل [[React]] الواسعة.


== تعلم React ==
== تعلم React ==
الأشخاص الذين يأتون إلى React ذوي خلفيات شتَّى وأساليب تعلُّم مختلفة. سواءً أكنت تفضل الأسلوب النظري، أم الأسلوب العملي، نأمل أن تجد في هذا القسم العون على رحلتك في تعلم React.
الأشخاص الذين يأتون إلى [[React]] هم ذوي خلفيات شتَّى وأساليب تعلُّم مختلفة. سواءً أكنت تفضل الأسلوب النظري، أم الأسلوب العملي، نأمل أن تجد في هذا القسم العون على رحلتك في تعلم [[React]].
* إن كنت تفضل أن تتعلم عبر التجريب، فابدأ [[React/tutorial|بهذا الدليل التطبيقي]].
* إن كنت تفضل أن تتعلم عبر التجريب، فابدأ [[React/tutorial|بهذا الدليل التطبيقي]].
* أمَّا إن كنت تفضل التعلم المفاهيم النظرية أولًا، فابدأ رحلتك من [[React/hello world|بداية دليل المفاهيم الأساسية]].
* أمَّا إن كنت تفضل التعلم المفاهيم النظرية أولًا، فابدأ رحلتك من [[React/hello world|بداية دليل المفاهيم الأساسية]].
مثل أي تقنية غير مألوفة لك، تملك React مسارًا تعليميًّا مخصصًّا بها. بقليل من الممارسة والصبر، ستتقن React وتحصل على ما تريده بالتأكيد.
مثل أي تقنية غير مألوفة لك، تملك [[React]] مسارًا تعليميًّا مخصصًّا بها. بقليل من الممارسة والصبر، ستتقن [[React]] وتحصل على ما تريده بالتأكيد.


=== الأمثلة الأولى ===
=== الأمثلة الأولى ===
تحوي الصفحة الرئيسية لتوثيق React بضعة أمثلة بسيطة عن React. حتى إن تعرف أي شيء عن React بعد، جرب تشغيل الأمثلة ثم تعديلها مع ملاحظة التغيير الذي سيحصل للمخرجات.
تحوي الصفحة الرئيسية لتوثيق [[React]] بضعة أمثلة بسيطة عن [[React]]. حتى إن تعرف أي شيء عن [[React]] بعد، جرب تشغيل الأمثلة ثم تعديلها مع ملاحظة التغيير الذي سيحصل للمخرجات.


=== React للمبتدئين ===
=== React للمبتدئين ===
إن كنت تشعر أن توثيق React يتدرج بوتيرة أسرع مما تخيلتها أو تفضلها، ألقِ نظرة على [https://www.taniarascia.com/getting-started-with-react/ هذه المقالة عن React لصاحبها Tania Rascia]. إنَّها تعرِّف أكثر المفاهيم أهميةً في React بالتفصيل وبطريقة سهلة ومبسَّطة تناسب المبتدئين. متى ما انتهيت منها، عد إلى [[React|التوثيق]] وأعطه فرصة جديدة.
إن كنت تشعر أن توثيق [[React]] يتدرج بالصعوبة بوتيرة أسرع مما تخيلتها، ألقِ نظرة على [https://www.taniarascia.com/getting-started-with-react/ هذه المقالة عن React لصاحبها Tania Rascia]. إنَّها تعرِّف أكثر المفاهيم أهميةً في [[React]] بالتفصيل وبطريقة سهلة ومبسَّطة تناسب المبتدئين. متى ما انتهيت منها، عد إلى [[React|التوثيق]] وأعطه فرصة جديدة.


=== React للمصممين ===
=== React للمصممين ===
إن كنت قادمًا إلى React من بيئة تصميمة أخرى، [http://reactfordesigners.com/ هذا المرجع] هو أفضل مكان يمكنك البدء منه.
إن كنت قادمًا إلى [[React]] من بيئة تصميمة أخرى، [http://reactfordesigners.com/ هذا المرجع] هو أفضل مكان يمكنك البدء منه.


=== مصادر JavaScript ===
=== مصادر حول JavaScript ===
يفترض توثيق React أنك تملك خبرة برمجية مسبقة بلغة JavaScript. لا يُطلَب منك أن تكون خبيرًا محنَّكًا ولكن من الصعب تعلم React و JavaScript في الوقت نفسه.
يفترض توثيق [[React]] أنَّك تملك خبرة برمجية مسبقة بلغة [[JavaScript]]. لا يُطلَب منك أن تكون خبيرًا محنَّكًا ولكن من الصعب تعلم [[React]] و [[JavaScript]] في الوقت نفسه.


ننصح بالاطلاع على [[JavaScript|توثيق JavaScript]] والإلمام بمعظمه للتحقق من وصولك للمستوى المطلوب. نعلم أنه قد يأخذ منك بعض الوقت، ولكن ذلك سيعزز تعلمك لـ React.
ننصح بالاطلاع على [[JavaScript|توثيق JavaScript]] والإلمام بمعظمه للتحقق من وصولك للمستوى المطلوب. نعلم أنَّه قد يأخذ منك بعض الوقت، ولكن ذلك سيعزز تعلمك لـ [[React]].


'''نصيحة''': كلما شعرت بحيرة حول أي شيء مكتوب بلغة [[JavaScript]]، ننصحك بالرجوع إلى [[JavaScript|التوثيق]] في الموسوعة أو إلى [https://academy.hsoub.com/programming/javascript/ المقالات المتعلقة بلغة JavaScript] في أكاديمية حسوب. أضف إلى ذلك إلى أنَّ [https://io.hsoub.com/javascript مجتمع حسوب IO] مستعدُّ دائمًا للمساعدتك.
'''نصيحة''': كلما شعرت بحيرة حول أي شيء مكتوب بلغة [[JavaScript]]، ننصحك بالرجوع إلى [[JavaScript|التوثيق]] في الموسوعة أو إلى [https://academy.hsoub.com/programming/javascript/ المقالات المتعلقة بلغة JavaScript] في أكاديمية حسوب. أضف إلى ذلك إلى أنَّ [https://io.hsoub.com/javascript مجتمع حسوب IO] مستعدُّ دائمًا للمساعدتك.


=== التعلم عبر التطبيق العملي ===
=== التعلم عبر التطبيق العملي ===
إن كنت تفضل أن تتعلم بالممارسة، ابدأ بالدليل التطبيقي أولًا. ستتعلم في هذا الدليل كيفيّة بناء لعبة إكس-أو (اسمها بالإنجليزيّة tic-tac-toe) باستخدام React. ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطيها فرصة. إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق React، وسيعطيك إتقانها فهمًا أعمق لمكتبة React.
إن كنت تفضل أن تتعلم بالممارسة، ابدأ [[React/tutorial|بالدليل التطبيقي]] أولًا. ستتعلم في [[React/tutorial|هذا الدليل]] كيفيّة بناء لعبة إكس-أو (اسمها بالإنجليزيّة tic-tac-toe) باستخدام [[React]]. ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطه فرصة. إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق [[React]]، وسيعطيك إتقانها فهمًا أعمق لمكتبة [[React]].


=== تعلم المفاهيم خطوة بخطوة ===
=== تعلم المفاهيم خطوة بخطوة ===
سطر 49: سطر 49:


=== أسلوب التفكير في React ===
=== أسلوب التفكير في React ===
أغلب مستخدمي React يقدِّرون قراءة [[React/thinking in react|أسلوب التفكير في React]] بالشيء الثمين، إذ يشعرون في تلك اللحظة أن React قد أصبحت كشربة ماءٍ بالنسبة لهم. تعد تلك الصفحة أقدم مدخل إلى React ولا تزال إلى الآن على صلة وثيقة بأحدث إصدار من React.
أغلب مستخدمي [[React]] يقدِّرون قراءة [[React/thinking in react|أسلوب التفكير في React]] بالشيء الثمين، إذ يشعرون في تلك اللحظة أنَّ [[React]] قد أصبحت كشربة ماءٍ بالنسبة لهم. تعدُّ تلك الصفحة أقدم مدخل إلى [[React]] ولا تزال إلى الآن على صلةٍ وثيقةٍ بأحدث إصدار من [[React]].


=== دورات تعليمية يوصى بها ===
=== دورات تعليمية يوصى بها ===
قد يجد البعض أحيانًا أن الكتب والفيديوهات الموفَّرَة من طرف ثالث أكثر نفعًا وفائدةً لهم من التوثيق الرسمي. إليك [https://reactjs.org/community/courses.html قائمة] ببعض المراجع الأجنبية التي يوصى بها لتعلم React. وفرنا أيضًا [https://academy.hsoub.com/learn/javascript-application-development/ دورة كاملة حول JavaScript و React] تأخذك من الصفر وحتى الاحتراف وبلغة عربية من أكاديمية حسوب.
قد يجد البعض أحيانًا أنَّ الكتب والفيديوهات الموفَّرَة من طرف ثالث أكثر نفعًا وفائدةً لهم من التوثيق الرسمي. إليك [https://reactjs.org/community/courses.html قائمة] ببعض المراجع الأجنبية التي يوصى بها لتعلم [[React]]. وفرنا أيضًا [https://academy.hsoub.com/learn/javascript-application-development/ دورة كاملة حول JavaScript و React] تأخذك من الصفر وحتى الاحتراف وبلغة عربية من أكاديمية حسوب.


=== مفاهيم متقدمة ===
=== مفاهيم متقدمة ===
متى ما شعرت أن المفاهيم الأساسية أصبحت سهلةً لك وبدأت بممارسة React وشعرت أنَّ نفسك تطلب المزيد، فأنت حينئذٍ بحاجة إلى الانتقال إلى مستوى متقدم. هذا القسم سيقدم لك ميزات متقدمة في React وقوية ولكن أقل استخدامًا مثل [[React/refs and the dom|السياق]] و<nowiki/>[[React/context|المراجع]].
متى ما شعرت أنَّ المفاهيم الأساسية أصبحت سهلةً لك وبدأت بممارسة [[React]] وشعرت أنَّ نفسك تطلب المزيد، فأنت حينئذٍ بحاجة إلى الانتقال إلى مستوى متقدم. هذا القسم سيقدم لك ميزات متقدمة في [[React]] وقوية ولكن أقل استخدامًا مثل [[React/refs and the dom|السياق]] و<nowiki/>[[React/context|المراجع]].


=== مرجع إلى الواجهة البرمجية ===
=== مرجع إلى الواجهة البرمجية ===
هذا القسم مفيد إن أردت تعلم المزيد من التفاصيل حول وواجهة برمجية محددة في React. على سبيل المثال، مرجع الواجهة البرمجية حول React.component يمكن أن يزودك بتفاصيل أوسع حول كيفية عمل ()setState وما هي أفضل توابع دورة الحياة المختلفة لاستعمالها معه.
هذا القسم مفيد إن أردت تعلم المزيد من التفاصيل حول [[React#.D9.85.D8.B1.D8.AC.D8.B9 .D8.A5.D9.84.D9.89 .D9.88.D8.A7.D8.AC.D9.87.D8.A9 .D8.A8.D8.B1.D9.85.D8.AC.D8.A9 .D8.A7.D9.84.D8.AA.D8.B7.D8.A8.D9.8A.D9.82 .28API.29 .D9.81.D9.8A React|واجهة برمجية]] محددة في [[React]]. على سبيل المثال، [[React/react component|مرجع الواجهة البرمجية حول React.component]] يمكن أن يزودك بتفاصيل أوسع حول كيفية عمل <code>()setState</code> وما هي أفضل توابع دورة الحياة المختلفة لاستعمالها معه.


=== المصطلحات والأسئلة الشائعة ===
=== المصطلحات والأسئلة الشائعة ===
يحوي قسم [[React/glossary|المصطلحات]] شرحًا مفصّلًا لأهم المصطلحات التي ستراها في توثيق React. هنالك أيضًا [[React#.D8.A7.D9.84.D8.A3.D8.B3.D8.A6.D9.84.D8.A9 .D8.A7.D9.84.D8.B4.D8.A7.D8.A6.D8.B9.D8.A9 .D9.81.D9.8A React|قسمٌ مخصص يجاوب عن الأسئلة الشائعة]] حول مواضيع محدَّدة في React مثل [[React/faq ajax|استخدام AJAX مع React]]، و<nowiki/>[[React/faq state|حالة المكونات]]، و<nowiki/>[[React/faq structure|بنية ملفات المشروع]].
يحوي قسم [[React/glossary|المصطلحات]] شرحًا مفصّلًا لأهم المصطلحات التي ستراها في توثيق [[React]]. هنالك أيضًا [[React#.D8.A7.D9.84.D8.A3.D8.B3.D8.A6.D9.84.D8.A9 .D8.A7.D9.84.D8.B4.D8.A7.D8.A6.D8.B9.D8.A9 .D9.81.D9.8A React|قسمٌ مخصص يجاوب عن الأسئلة الشائعة]] حول مواضيع محدَّدة في [[React]] مثل [[React/faq ajax|استخدام AJAX مع React]]، و<nowiki/>[[React/faq state|حالة المكونات]]، و<nowiki/>[[React/faq structure|بنية ملفات المشروع]].
 
== ابق على اطلاع ==
[https://reactjs.org/blog/ مدونة React] هي المصدر الرسمي لنشر التحديثات من فريق [[React]]. سينشر أي شيء مهم بما في ذلك الملاحظات حول الإصدارات أو ملاحظات الإهمال في تلك المدونة أولًا.
 
يمكن أيضًا متابعتنا على [https://twitter.com/reactjs حساب تويتر ‎@reactjs] ولكن لن يفوتك أي شيء إن تابعت المدونة فقط.
 
لا يمكن الاكتفاء بمنشورات المدونة لمعرفة كل تفاصيل الإصدار الجديد من [[React]]؛ يمكنك العثور على معلومات مفصلة عن سجل التغييرات لكل إصدار في [https://github.com/facebook/react/blob/master/CHANGELOG.md الملف CHANGELOG.md في مستودع React] وفي [https://github.com/facebook/react صفحة الإصدارات] أيضًا.
 
== توثيق الإصدار ==
يعكس هذا التوثيق أحدث إصدار مستقر من [[React]]. منذ الإصدار 16، يمكنك العثور على توثيق الإصدارات الأقدم في [https://reactjs.org/versions صفحة منفصلة]. انتبه إلى أنَّ ذلك التوثيق للإصدارات القديمة قد بقي على حاله منذ تاريخ نشر الإصدار ولن يجري تحديثه.
 
== أتفقد شيئًا آخر؟ ==
إن كنت تبحث عن شيء آخر ولم تجده في التوثيق، أو إن وجدت بعض أجزاء هذا التوثيق مربكة، نرجو منك أن تخبرنا عن ذلك عبر فتح مشكلة (issue) في [https://github.com/reactjs/reactjs.org/issues/new مستودع التوثيق على GitHub] مع ذكر اقتراحاتك للتطوير. يمكنك أيضًا أن نتشر تغريدة بذلك على الحساب [https://twitter.com/reactjs ‎@reactjs]. يسعدنا حقًا أن نسمع اقتراحتك!


== انظر أيضًا ==
== انظر أيضًا ==
* [[React/add react to a new app|إضافة React إلى تطبيق جديد]]
* [[React/add react to a website|إضافة React إلى موقع ويب]]
* [[React/add react to an existing app|إضافة React إلى تطبيق موجود]]
* [[React/create a new react app|إنشاء تطبيق React جديد]]
* [[React/cdn links|روابط شبكة توزيع المحتوى CDN]]
* [[React/cdn links|روابط شبكة توزيع المحتوى CDN]]


== مصادر ==
== مصادر ==
* [https://reactjs.org/docs/try-react.html صفحة تجربة React في توثيق React الرسمي].
* [https://reactjs.org/docs/getting-started.html صفحة البدء مع React في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React]]
[[تصنيف:React Installation]]

مراجعة 06:34، 23 فبراير 2019

تلقي هذه الصفحة نظرة شاملة على توثيق React والمصادر المرتبطة به.

تعدُّ React مكتبةٌ من مكتبات JavaScript مخصَّصة لبناء واجهات المستخدم. انتقل إلى الصفحة الرئيسية لتوثيق React، أو إلى الدليل التطبيقي لمعرفة المزيد عنها.

جرب React

صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على Reactالشيء البسيط أو بقدر ما تحتاج إليه. سواءً أردت تجريب React بشكل مبسَّط، أو إضافة بعض التفاعل إلى صفحة HTML بسيطة، أو البدء بإنشاء تطبيق React معقَّد، فستساعد الروابط في هذا القسم بالوصول إلى ذلك.

التجربة على الإنترنت

إن كنت مهتمًا بتجربة React والتعامل معها، يمكنك استخدام بيئة جاهزة لتجربة الشيفرة على الإنترنت. جرّب مثال "أهلًا بالعالم" (Hello World) على موقع CodePen أو موقع CodeSandbox.

إن كنت تُفضِّل استخدام مُحرِّر النصوص الخاص بك، يمكنك تحميل ملف HTML هذا وتعديله ومن ثمّ فتحه عن طريق نظام الملفّات المحلّي في متصفّحك. يُؤدِّي هذا إلى بطء في تحويل الشّيفرة أثناء زمن التنفيذ لذلك لا تستخدم هذه الطريقة أثناء إنتاجك لمشاريع حقيقيّة.

إضافة React إلى موقع ويب

يمكنك إضافة React إلى صفحة HTMl بدقيقة واحدة. يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).

إنشاء تطبيق React جديد

عند بدء مشروع React، قد لا يزال خيار استعمال صفحة HTML بسيطة الوسوم <script> خيارًا مفضَّلًا، إذ يأخذ دقيقةً واحدةً لإعداده.

في الوقت الذي يكبر فيه برنامجك، قد ترغب بإعداد وضبط والكثير من الأمور المتكاملة. هنالك سلاسل أدوات JavaScript عديدة نوصي باستعمالها في حالة التطبيقات الكبيرة. يمكن أن تعمل كل أداة من تلك الأدوات مع ضبط بسيطة أو حتى دون أي ضبط وتمكِّنك من الاستفادة من جميع ميزات بيئة عمل React الواسعة.

تعلم React

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

مثل أي تقنية غير مألوفة لك، تملك React مسارًا تعليميًّا مخصصًّا بها. بقليل من الممارسة والصبر، ستتقن React وتحصل على ما تريده بالتأكيد.

الأمثلة الأولى

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

React للمبتدئين

إن كنت تشعر أن توثيق React يتدرج بالصعوبة بوتيرة أسرع مما تخيلتها، ألقِ نظرة على هذه المقالة عن React لصاحبها Tania Rascia. إنَّها تعرِّف أكثر المفاهيم أهميةً في React بالتفصيل وبطريقة سهلة ومبسَّطة تناسب المبتدئين. متى ما انتهيت منها، عد إلى التوثيق وأعطه فرصة جديدة.

React للمصممين

إن كنت قادمًا إلى React من بيئة تصميمة أخرى، هذا المرجع هو أفضل مكان يمكنك البدء منه.

مصادر حول JavaScript

يفترض توثيق React أنَّك تملك خبرة برمجية مسبقة بلغة JavaScript. لا يُطلَب منك أن تكون خبيرًا محنَّكًا ولكن من الصعب تعلم React و JavaScript في الوقت نفسه.

ننصح بالاطلاع على توثيق JavaScript والإلمام بمعظمه للتحقق من وصولك للمستوى المطلوب. نعلم أنَّه قد يأخذ منك بعض الوقت، ولكن ذلك سيعزز تعلمك لـ React.

نصيحة: كلما شعرت بحيرة حول أي شيء مكتوب بلغة JavaScript، ننصحك بالرجوع إلى التوثيق في الموسوعة أو إلى المقالات المتعلقة بلغة JavaScript في أكاديمية حسوب. أضف إلى ذلك إلى أنَّ مجتمع حسوب IO مستعدُّ دائمًا للمساعدتك.

التعلم عبر التطبيق العملي

إن كنت تفضل أن تتعلم بالممارسة، ابدأ بالدليل التطبيقي أولًا. ستتعلم في هذا الدليل كيفيّة بناء لعبة إكس-أو (اسمها بالإنجليزيّة tic-tac-toe) باستخدام React. ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطه فرصة. إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق React، وسيعطيك إتقانها فهمًا أعمق لمكتبة React.

تعلم المفاهيم خطوة بخطوة

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

أسلوب التفكير في React

أغلب مستخدمي React يقدِّرون قراءة أسلوب التفكير في React بالشيء الثمين، إذ يشعرون في تلك اللحظة أنَّ React قد أصبحت كشربة ماءٍ بالنسبة لهم. تعدُّ تلك الصفحة أقدم مدخل إلى React ولا تزال إلى الآن على صلةٍ وثيقةٍ بأحدث إصدار من React.

دورات تعليمية يوصى بها

قد يجد البعض أحيانًا أنَّ الكتب والفيديوهات الموفَّرَة من طرف ثالث أكثر نفعًا وفائدةً لهم من التوثيق الرسمي. إليك قائمة ببعض المراجع الأجنبية التي يوصى بها لتعلم React. وفرنا أيضًا دورة كاملة حول JavaScript و React تأخذك من الصفر وحتى الاحتراف وبلغة عربية من أكاديمية حسوب.

مفاهيم متقدمة

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

مرجع إلى الواجهة البرمجية

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

المصطلحات والأسئلة الشائعة

يحوي قسم المصطلحات شرحًا مفصّلًا لأهم المصطلحات التي ستراها في توثيق React. هنالك أيضًا قسمٌ مخصص يجاوب عن الأسئلة الشائعة حول مواضيع محدَّدة في React مثل استخدام AJAX مع React، وحالة المكونات، وبنية ملفات المشروع.

ابق على اطلاع

مدونة React هي المصدر الرسمي لنشر التحديثات من فريق React. سينشر أي شيء مهم بما في ذلك الملاحظات حول الإصدارات أو ملاحظات الإهمال في تلك المدونة أولًا.

يمكن أيضًا متابعتنا على حساب تويتر ‎@reactjs ولكن لن يفوتك أي شيء إن تابعت المدونة فقط.

لا يمكن الاكتفاء بمنشورات المدونة لمعرفة كل تفاصيل الإصدار الجديد من React؛ يمكنك العثور على معلومات مفصلة عن سجل التغييرات لكل إصدار في الملف CHANGELOG.md في مستودع React وفي صفحة الإصدارات أيضًا.

توثيق الإصدار

يعكس هذا التوثيق أحدث إصدار مستقر من React. منذ الإصدار 16، يمكنك العثور على توثيق الإصدارات الأقدم في صفحة منفصلة. انتبه إلى أنَّ ذلك التوثيق للإصدارات القديمة قد بقي على حاله منذ تاريخ نشر الإصدار ولن يجري تحديثه.

أتفقد شيئًا آخر؟

إن كنت تبحث عن شيء آخر ولم تجده في التوثيق، أو إن وجدت بعض أجزاء هذا التوثيق مربكة، نرجو منك أن تخبرنا عن ذلك عبر فتح مشكلة (issue) في مستودع التوثيق على GitHub مع ذكر اقتراحاتك للتطوير. يمكنك أيضًا أن نتشر تغريدة بذلك على الحساب ‎@reactjs. يسعدنا حقًا أن نسمع اقتراحتك!

انظر أيضًا

مصادر