رد فعل تقديم HTML
يتمثل هدف React من نواحٍ عديدة في عرض HTML في صفحة ويب.
تقوم React بتصنيع HTML إلى صفحة الويب باستخدام وظيفة تسمى
ReactDOM.render().
وظيفة التقديم
تأخذ الوظيفة ReactDOM.render()وسيطتين ، رمز HTML وعنصر HTML.
الغرض من الوظيفة هو عرض كود HTML المحدد داخل عنصر HTML المحدد.
ولكن تقديم أين؟
يوجد مجلد آخر في الدليل الجذر لمشروع React الخاص بك ، يسمى "عام". في هذا المجلد ، يوجد index.htmlملف.
ستلاحظ وجود واحد <div>
في متن هذا الملف. هذا هو المكان الذي سيتم فيه تقديم تطبيق React الخاص بنا.
مثال
عرض فقرة داخل عنصر بمعرف "الجذر":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));يتم عرض النتيجة في <div id="root">العنصر:
<body>
<div id="root"></div>
</body>
لاحظ أن معرف العنصر لا يجب أن يسمى "جذر" ، ولكن هذا هو الاصطلاح القياسي.
الحصول على شهادة!
95 دولارًا ENROLL
كود HTML
يستخدم كود HTML في هذا البرنامج التعليمي JSX الذي يسمح لك بكتابة علامات HTML داخل كود JavaScript:
لا تقلق إذا كانت الصيغة غير مألوفة ، فسوف تتعلم المزيد عن JSX في الفصل التالي.
مثال
أنشئ متغيرًا يحتوي على كود HTML واعرضه في عقدة "الجذر":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
عقدة الجذر
العقدة الجذرية هي عنصر HTML حيث تريد عرض النتيجة.
إنها مثل حاوية للمحتوى الذي تديره React.
ليس من الضروري أن يكون <div>عنصرًا ولا يجب أن يحتوي على id='root':
مثال
يمكن تسمية عقدة الجذر بأي شيء تريده:
<body>
<header id="sandy"></header>
</body>
اعرض النتيجة في <header id="sandy">العنصر:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));