freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24bbe0dba28a8d3cbd4c5f	Render HTML Elements to the DOM	6	false		تقديم عناصر HTML إلى DOM

Description

حتى الآن ، تعلمت أن JSX هي أداة ملائمة لكتابة HTML قابل للقراءة في JavaScript. باستخدام React ، يمكننا تقديم JSX مباشرةً إلى HTML DOM باستخدام واجهة برمجة تطبيقات React التي تُعرف باسم ReactDOM. يقدم ReactDOM طريقة بسيطة لعرض عناصر ReactDOM.render(componentToRender, targetNode) DOM التي تبدو كما يلي: ReactDOM.render(componentToRender, targetNode) ، حيث تكون الوسيطة الأولى هي عنصر React أو المكون الذي تريد ReactDOM.render(componentToRender, targetNode) الثانية هي عقدة DOM التي تريد تقديم المكون إليها. كما هو متوقع ، يجب استدعاء ReactDOM.render() بعد تعريفات عناصر JSX ، تمامًا كما يجب أن تقوم بتعريف المتغيرات قبل استخدامها.

Instructions

يحتوي محرر التعليمة البرمجية على مكون JSX بسيط. استخدم الأسلوب ReactDOM.render() لتقديم هذا المكون إلى الصفحة. يمكنك تمرير عناصر JSX المحددة مباشرة كوسيطة أولى واستخدام document.getElementById() لتحديد عقدة DOM لتقديمها. يوجد div به id='challenge-node' متاح للاستخدام. تأكد من عدم تغيير ثابت JSX .

Tests

tests:
  - text: يجب على <code>JSX</code> المستمر إرجاع عنصر <code>div</code> .
    testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
  - text: يجب أن يحتوي <code>div</code> على علامة <code>h1</code> باعتبارها العنصر الأول.
    testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
  - text: يجب أن يحتوي <code>div</code> على علامة <code>p</code> كعنصر ثانٍ.
    testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
  - text: يجب أن يتم تقديم عنصر JSX المقدم إلى عقدة DOM مع عقدة <code>challenge-node</code> الهوية.
    testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "<h1>Hello World</h1><p>Lets render this to the DOM</p>", "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.");'

Challenge Seed

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// change code below this line

Solution

// solution required

3.3 KiB Raw Blame History