Render HTML ကို တုံ့ပြန်ပါ။
React ၏ ရည်မှန်းချက်မှာ ဝဘ်စာမျက်နှာတစ်ခုတွင် HTML ကို ပုံဖေါ်ရန် နည်းလမ်းများစွာဖြင့် ဖြစ်သည်။
React သည် HTML ဟုခေါ်သော လုပ်ဆောင်ချက်ကို အသုံးပြု၍ ဝဘ်စာမျက်နှာသို့ ပြန်ဆိုသည်
ReactDOM.render()
။
Render Function ပါ။
လုပ်ဆောင်ချက်သည် အကြောင်းပြချက် ReactDOM.render()
နှစ်ခု၊ HTML ကုဒ်နှင့် HTML ဒြပ်စင်တစ်ခုကို ယူသည်။
လုပ်ဆောင်ချက်၏ရည်ရွယ်ချက်မှာ သတ်မှတ်ထားသော HTML ဒြပ်စင်အတွင်းရှိ သတ်မှတ်ထားသော HTML ကုဒ်ကို ပြသရန်ဖြစ်သည်။
ဒါပေမယ့် ဘယ်မှာ တင်ဆက်မလဲ။
သင်၏ React ပရောဂျက်၏ root directory တွင် "public" ဟု အမည်ပေးထားသော အခြားဖိုင်တွဲတစ်ခုရှိပါသည်။ ဤဖိုဒါတွင် ဖိုင်တစ်ခုရှိသည် index.html
။
<div>
ဤဖိုင်၏ကိုယ်ထည်တွင် တစ်ခုတည်းကို သင်သတိပြုမိပါလိမ့်မည် ။ ဤနေရာတွင် ကျွန်ုပ်တို့၏ React အက်ပ်ကို ပြန်ဆိုပါမည်။
ဥပမာ
"root" ၏ ID ဖြင့် ဒြပ်စင်တစ်ခုအတွင်း စာပိုဒ်တစ်ခုကို ပြပါ-
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));
ရလဒ်ကို <div id="root">
ဒြပ်စင်တွင် ပြသသည်-
<body>
<div id="root"></div>
</body>
ဒြပ်စင် ID ကို "root" ဟုခေါ်ရန် မလိုအပ်သော်လည်း ၎င်းသည် စံကွန်ဗင်းရှင်းဖြစ်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
HTML ကုဒ်
ဤသင်ခန်းစာရှိ HTML ကုဒ်သည် JSX ကိုအသုံးပြုပြီး JavaScript ကုဒ်အတွင်း HTML တက်ဂ်များကို ရေးသားနိုင်စေသည်-
syntax သည် မရင်းနှီးပါက စိတ်မပူပါနှင့်၊ JSX အကြောင်း နောက်ထပ်အခန်းတွင် သင်လေ့လာနိုင်ပါမည်။
ဥပမာ
HTML ကုဒ်ပါရှိသော ကိန်းရှင်တစ်ခုကို ဖန်တီးပြီး "root" node တွင် ပြသသည်-
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'));
Root Node ပါ။
root node သည် သင်ရလဒ်ကိုပြသလိုသည့် HTML အစိတ်အပိုင်းဖြစ်သည်။
၎င်းသည် React မှ စီမံခန့်ခွဲသည့် အကြောင်းအရာအတွက် ကွန်တိန်နာ တစ်ခုနှင့်တူသည်။
၎င်းသည် <div>
ဒြပ်စင်တစ်ခုဖြစ်ရန်မလိုအပ်ပါ၊ ၎င်းတွင်ပါ ၀ င်ရန်မလိုအပ်ပါ id='root'
။
ဥပမာ
root node ကို ကြိုက်သလို ခေါ်နိုင်သည်-
<body>
<header id="sandy"></header>
</body>
ရလဒ်ကို <header id="sandy">
ဒြပ်စင်တွင် ပြပါ-
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));