كيف تتعلم React.js في 5 دقائق؟
كيف تتعلم React.js في 5 دقائق؟
في هذه المقالة ، سوف نقدم مكتبة JavaScript الشهيرة React.js. سيوفر لك هذا البرنامج التعليمي فهمًا أساسيًا لـ React.js من خلال إنشاء تطبيق بسيط. في هذا البرنامج التعليمي ، حاولنا أن نقدم لك نظرة عامة على إطار العمل هذا. لذلك دعونا نبدأ في أقرب وقت ممكن.
الإعداد (setup)
زمانی که با React.js شروع به کار می کنید باید از سادهترین راهاندازیکن استفاده کنید: استفاده کنید HTML دليل که ازید کتابهی React
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"> </script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> /* ADD REACT CODE HERE */ </script> </body> </html> |
لقد أضفنا أيضًا Babel إلى الصفحة لأن React يستخدم شيئًا يسمى JSX لكتابة markup. نحتاج إلى تحويل JSX هذا إلى كود JavaScript بسيط حتى يتمكن المتصفح من فهمه.
هناك شيئان آخران أريدك أن تنتبه إليهما:
- بطاقة شعار & lt ; div & gt ; جنبا إلى جنب مع الخاصية Id التي لها القيمة root # تم تعيينه. هذه هي نقطة الدخول إلى برنامجنا. هذا هو بالضبط المكان الذي يلعب فيه تطبيقنا.
- بطاقة شعار & lt; script type = “text / babel” & gt; يتم استخدامه في جسم البرنامج. هذا هو المكان الذي سنكتب فيه الرموز React.js.
عناصر
كل شيء في React.js هو مكون ، وعادة ما يتم تمثيل هذه الفئات في JavaScript. يمكنك إزالة مكون من الفئة باستخدام extend React-Component خلق. لنقم بإنشاء مكون بسيط يسمى Hello:
| 1 2 3 4 5 | <br>class Hello extends React.Component { render() { return <h1>Hello world!</h1>; } } |
يجب عليك بعد ذلك تحديد طرق لهذا المكون. في المثال لدينا طريقة واحدة فقط تسمى render (). داخل طريقة العرض () ، يمكنك وضع الوصف الذي تريد عرضه على الشاشة. في المثال أعلاه ، نريد علامة h1 بالنص Hello world! تظهر على الصفحة.
| 1 2 3 4 | ReactDOM.render( <Hello />, document.getElementById("root") ); |
لذلك <div id="root"></div>نقوم هنا بتوصيل مكون Hello بنقطة دخول تطبيقنا ، أي. تظهر نتيجة هذا العمل في الشكل أدناه:
إدارة البيانات
يوجد نوعان من البيانات في React: props و state. تتطلب معرفة الفرق بين الاثنين تفسيراً وقد يكون من الصعب قليلاً فهمه في البداية. لذلك لا تقلق إذا كانت هذه المناقشة مربكة بعض الشيء. عندما بدأت العمل معهم ، أصبح من السهل علي فهمهم.
لكن الاختلاف الرئيسي هو أن state خاص ولا يمكن تغييره إلا داخل المكون نفسه. Props هي external والعامة ولا تتحكم فيها المكونات وحدها وتكون أعلى في التسلسل الهرمي من المكونات. يمكن للمكون تعديل state الداخلي الخاص به مباشرةً ولكن لا يمكنه تعديل prop المقابل مباشرةً.
أولاً ، دعنا نلقي نظرة فاحصة على props.
الدعائم
المكوِّن Hello المكتوب في الأمثلة السابقة ثابت جدًا ولا يُظهر رسالة إلا في الإخراج. جزء كبير من React هو قابليتها لإعادة الاستخدام ، مما يعني القدرة على كتابة مكونات يمكن استخدامها بعدة طرق مختلفة. على سبيل المثال ، اعرض رسائل مختلفة.
لتحقيق هذا النوع من إعادة الاستخدام ، يجب إرسال الخاصيّات إلى المكوّن:
| 1 2 3 4 | ReactDOM.render( <Hello message="my friend" />, document.getElementById("root") ); |
اسم الخاصية المستخدم في المثال أعلاه هو message ، والتي لها قيمة “صديقي”. يمكننا الوصول إلى هذه الخاصية في المكون Hello بالرجوع إليها this.props.messageعلى النحو التالي:
| 1 2 3 4 5 | class Hello extends React.Component { render() { return <h1>Hello {this.props.message}!</h1>; } } |
ونتيجة لذلك ، فإن ما يتم عرضه في الإخراج هو كما يلي:
سبب استخدامنا للتعبير {this.props.message}مع {} هو إخبار JSX أننا نريد إضافة تعبير JavaScript يسمى escaping . الآن لدينا مكون قابل لإعادة الاستخدام يمكنه عرض أي رسالة نريدها على الشاشة. ومع ذلك ، إذا أردنا أن يتمكن المكون من تغيير بياناته ، فماذا يمكننا أن نفعل؟ هنا يمكننا استخدام الدول.
State
هناك طريقة أخرى لتخزين البيانات في إطار عمل React وهي استخدام مكونات state. على عكس props ، الذي لا يمكن تعديله مباشرة بواسطة المكونات ، يمكن تعديل states ببساطة. لذلك إذا كنت تريد تغيير البيانات في تطبيقك – على سبيل المثال بناءً على تفاعلات المستخدم – فأنت بحاجة إلى تخزين البيانات داخل state.
تهيئة state
لتعيين state ببساطة this.state داخل طريقة constructor () للفئة. في مثالنا ، state هو كائن له مفتاح يسمى message:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return <h1>Hello {this.state.message}!</h1>; } } |
يجب استدعاء الأسلوب ()super في المُنشئ قبل تهيئة state ، ويتم ذلك لأن الكلمة this لم يتم استخدامها قبل ()super.
تحرير state
لتعديل state ، يمكنك ببساطة استدعاء ()this.setState وتمريرstate الجديد كوسيطة. لقد قمنا بهذا داخل الطريقة التي تسمى updateMessage :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return <h1>Hello {this.state.message}!</h1>; } } |
لكي تعمل هذه الميزة بشكل صحيح ، قمنا بربط الكلمة الرئيسية this بالطريقة updateMessage . خلاف ذلك ، لا يمكننا الوصول إلىthis بهذه الطريقة.
الخطوة التالية هي إنشاء زر يجب النقر فوقه ، وفي هذه الحالة نسمي طريقة()updateMessage لذلك دعونا نضيف زرًا إلى وظيفة ()render:
| 1 2 3 4 5 6 7 8 | render() { return ( <div> <h1>Hello {this.state.message}!</h1> <button onClick={this.updateMessage}>Click me!</button> </div> ) } |
لقد قمنا هنا بإرفاق event listener بأحد الأزرار بحيث يتم استدعاء طريقة updateMessage عند حدوث حدث النقر. فيما يلي نظرة عامة على المكون الذي كتبناه معًا:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( <div> <h1>Hello {this.state.message}!</h1> <button onClick={this.updateMessage}>Click me!</button> </div> ) } } |
تستدعي الطريقة ()updateMessage التعبير ()this.setState ، الذي يغير القيمة إلى this.state.message. عند الضغط على الزر يكون ما يظهر كالتالي:
تهانينا ، لقد نفذت تطبيقًا بسيطًا للغاية يحتوي على أهم مفاهيم React. هذا الإطار قوي للغاية وينمو بسرعة.
أخيرا نتمنى أن يكون درس كيف تتعلم React.js في 5 دقائق؟ قد أفادكم
يسعدنا إثراء الموضوع من خلال تعليقاتكم و استفساراتكم المفيدة
مع تحيات موقع hdegy