freeCodeCamp/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5f	أنتاج عناصر HTML في DOM	6	301406	render-html-elements-to-the-dom

--description--

حتى الآن، تعلمت أن JSX أداة مناسبة لكتابة HTML مقروءة داخل JavaScript. مع React، يمكننا تقديم JSX قاصدًا إلى HTML DOM باستخدام React الذي يقدم API المعروف باسم ReactDOM.

ReactDOM يوفر طريقة بسيطة لتقديم عناصر React إلى DOM التي تبدو مثل: ReactDOM.render(componentToRender, targetNode), حيث الحَجَّة الأولى هي عنصر React أو المكون الذي تريد أن تنتجه، والحجة الثانية هي node DOM التي تريد تقديم المكون إليها.

كما تتوقع، ReactDOM.render() يجب أن يستدعى بعد إعلانات عناصر JSX، تماما مثل كيفية الإعلان عن المتغيرات قبل استخدامها.

--instructions--

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

--hints--

يجب أن يُنتج JSX عنصر div.

assert(JSX.type === 'div');

يجب أن يحتوي div على علامة h1 كالعنصر الأول.

assert(JSX.props.children[0].type === 'h1');

يجب أن يحتوي div على p كالعنصر الثاني.

assert(JSX.props.children[1].type === 'p');

يجب أن ينتج عنصر JSX المقدم إلى DOM node مع معرف challenge-node.

assert(
  document.getElementById('challenge-node').childNodes[0].innerHTML ===
    '<h1>Hello World</h1><p>Lets render this to the DOM</p>'
);

--seed--

--seed-contents--

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

--solutions--

const JSX = (
<div>
  <h1>Hello World</h1>
  <p>Lets render this to the DOM</p>
</div>
);
// Add your code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));