۳۰
تیر

جلسه ۰۳ : رندر HTML در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه به آموزش نحوه رندر HTML در React JS خواهیم پرداخت.

رندر HTML در React JS

React JS با استفاده از متد ()ReactDOM.render کد های HTML را برای صفحات وب رندر (پرداخت یا پردازش) می‌کند.

تابع render

تابع ()ReactDOM.render دو پارامتر می‌گیرد: کد های html و یک المان (element) html.

هدف این تابع نمایش یک قطعه کد HTML در یک المان HTML خاص است.

مثال :

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

1	ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

المان root:

مثال :

<body>

  <div id="root"></div>

</body>

<body>

</body>

در مثال زیر کد های html را درون یک متغیر قرار داده و این کد ها را در المانی با آی دی root نمایش می‌دهیم:

مثال :

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'));

const myelement = (

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

);

ReactDOM.render(myelement, document.getElementById('root'));

گره Root

گره root یک المان html است که نتایج را در ان نمایش می‌دهید.

مانند یک نگهدارنده محتوا است.

لزوما یک المان div نیست و همچنین لزوما root نام ندارد. (id=root)

جلسه نحوه رندر html در react js نیز به پایان رسید.

در جلسه بعد به آموزش JSX خواهیم پرداخت.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 1

slhk
بهمن ۴, ۱۳۹۹
در تگ script اضافه کنید type=”text/babel”>
پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۳ : رندر HTML در React JS

رندر HTML در React JS

تابع render

گره Root

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ