3.7 KiB
3.7 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false | إنشاء عنصر بسيط JSX |
Description
{ 'this is treated as JavaScript code' }
. ضع ذلك في الاعتبار ، نظرًا لأنه يُستخدم في العديد من التحديات المستقبلية. ومع ذلك ، نظرًا لأن JSX ليس جافا سكريبت صالحًا ، يجب ترجمة شفرة JSX إلى جافا سكريبت. أداة النقل المشذر Babel هي أداة شائعة لهذه العملية. من أجل راحتك ، تمت إضافة بالفعل خلف الكواليس لهذه التحديات. إذا حدث لك أن تكتب JSX غير صحيح من الناحية التركيبية ، فسترى أول اختبار في هذه التحديات يفشل. تجدر الإشارة إلى أنه تحت غطاء محرك السيارة التحديات تدعوا ReactDOM.render(JSX, document.getElementById('root'))
. هذه الدعوة الدالة هي ما يضع JSX الخاص بك في تمثيل React خفيف الوزن الخاص بـ DOM. ثم تستخدم React لقطات من DOM الخاصة بها لتحسين تحديث أجزاء معينة فقط من DOM الفعلي. Instructions
div
إلى JSX
المستمر. استبدل div
بعنصر h1
وأضف النص Hello JSX!
داخله. Tests
tests:
- text: يجب أن يقوم <code>JSX</code> المستمر بإرجاع عنصر <code>h1</code> .
testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
- text: يجب أن تتضمن علامة <code>h1</code> النص <code>Hello JSX!</code>
testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'
Challenge Seed
const JSX = <div></div>;
After Test
console.info('after the test');
Solution
// solution required