တုံ့ပြန် ကျူတိုရီရယ်

React Home React Intro React စတင်လိုက်ပါ။ ES6 ကို တုံ့ပြန်ပါ။ Render HTML ကို တုံ့ပြန်ပါ။ JSX ကို တုံ့ပြန်ပါ။ အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။ React Class React Props အဖြစ်အပျက်များကို တုံ့ပြန်ပါ။ အခြေအနေများကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှုစာရင်းများ တုံ့ပြန်မှုပုံစံများ Router ကို တုံ့ပြန်ပါ။ တုံ့ပြန်မှတ်စု CSS Styling ကို တုံ့ပြန်ပါ။ Sass Styling ကို တုံ့ပြန်ပါ။

React Hooks

Hook ဆိုတာဘာလဲ။ ပြည်နယ်ကိုအသုံးပြုပါ။ အသုံးပြုမှုအကျိုးသက်ရောက်မှု အသုံးအနှုန်း အသုံးပြုရန် Ref Reducer ကိုအသုံးပြုပါ။ ဖုန်းခေါ်ဆိုမှုကို အသုံးပြုပါ။ Memo ကိုအသုံးပြုပါ။ စိတ်ကြိုက်ချိတ်

တုံ့ပြန်လေ့ကျင့်မှုများ

တုံ့ပြန်မေးခွန်း တုံ့ပြန်လေ့ကျင့်မှုများ တုံ့ပြန်လက်မှတ်

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" ဟုခေါ်ရန် မလိုအပ်သော်လည်း ၎င်းသည် စံကွန်ဗင်းရှင်းဖြစ်သည်။


w3schools CERTIFIED . 2022

လက်မှတ်ရယူပါ။

React modules များကိုဖြည့်ပါ၊ လေ့ကျင့်ခန်းများလုပ်ပါ၊ စာမေးပွဲကိုဖြေဆိုပြီး w3schools မှအသိအမှတ်ပြုခံရပါ။

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