3.4 KiB
3.4 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036163 | Create a React Component | 6 | false | إنشاء مكون React |
Description
class
ES6. في المثال التالي ، يقوم Kitten
بتوسيع React.Component
: class Kitten يمد React.Component {هذا ينشئ فئة ES6
منشئ (الدعائم) {
السوبر (الدعائم)؛
}
يجعل() {
إرجاع (
<h1> تحليل مرحبا </ H1>
)؛
}
}
Kitten
الذي يمتد فئة React.Component
. لذا ، أصبح بإمكان فئة Kitten
الآن الوصول إلى العديد من ميزات React المفيدة ، مثل الخطافات المحلية ودورة الحياة. لا تقلق إذا لم تكن على دراية بهذه الشروط حتى الآن ، سيتم تغطيتها بمزيد من التفصيل في تحديات لاحقة. لاحظ أيضًا أن فئة Kitten
بها constructor
مُعرَّف داخلها يستدعي super()
. ويستخدم super()
لاستدعاء منشئ الفئة الأصل ، في هذه الحالة React.Component
. المنشئ هو طريقة خاصة تستخدم أثناء تهيئة الكائنات التي يتم إنشاؤها باستخدام الكلمة الأساسية class
. ومن أفضل الممارسات لاستدعاء المكون constructor
مع super
، وتمرير props
على حد سواء. هذا يجعل من تهيئة المكون بشكل صحيح. في الوقت الحالي ، اعلم أنه من المعتاد تضمين هذا الرمز. قريبا سترى استخدامات أخرى للمنشئ وكذلك props
. Instructions
undefined
Tests
tests:
- text: يجب أن يعيد مكون React عنصر <code>div</code> .
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).type() === "div", "The React component should return a <code>div</code> element.");'
- text: يجب على <code>div</code> إرجاعه عرض رأس <code>h1</code> بداخله.
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), "The returned <code>div</code> should render an <code>h1</code> header within it.");'
- text: يجب أن يحتوي رأس <code>h1</code> على السلسلة <code>Hello React!</code> .
testString: 'assert(Enzyme.shallow(React.createElement(MyComponent)).html() === "<div><h1>Hello React!</h1></div>", "The <code>h1</code> header should contain the string <code>Hello React!</code>.");'
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// change code below this line
// change code above this line
}
};
After Test
console.info('after the test');
Solution
// solution required