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

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

React Hooks

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

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

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

စတင်ခြင်း တုံ့ပြန်ပါ။


ထုတ်လုပ်မှုတွင် React ကိုအသုံးပြုရန်၊ Node.js တွင်ပါရှိသော npm လိုအပ်သည်

React ဆိုတာ ဘာလဲ ဆိုတာကို ခြုံငုံကြည့်ဖို့၊ React ကုဒ်ကို HTML မှာ တိုက်ရိုက် ရေးနိုင်ပါတယ်။

သို့သော် ထုတ်လုပ်ရေးတွင် React ကိုအသုံးပြုရန်အတွက် npm နှင့် Node.js ကို ထည့်သွင်းထားရန် လိုအပ်ပါသည်။


HTML တွင် တိုက်ရိုက်တုံ့ပြန်ပါ။

React ကို စတင်လေ့လာရန် အမြန်ဆုံးနည်းလမ်းမှာ သင်၏ HTML ဖိုင်များတွင် React ကို တိုက်ရိုက်ရေးရန်ဖြစ်သည်။

W3Schools Spaces

HTML ဖိုင်များဖန်တီးခြင်းဖြင့် စတင်ရန် အလွယ်ကူဆုံးနည်းလမ်းမှာ W3Schools Spaces ဖြစ်သည်။

၎င်းသည် သင့်အလုပ်ကို ဖန်တီးရန်၊ တည်းဖြတ်ရန်နှင့် အခြားသူများနှင့် မျှဝေရန် အကောင်းဆုံးနေရာဖြစ်သည်။

❯ အခမဲ့ စတင်လိုက်ပါ။

Script သုံးခုပါဝင်ခြင်းဖြင့် စတင်ပါ၊ ပထမနှစ်ခုက ကျွန်ုပ်တို့၏ JavaScripts များတွင် React ကုဒ်ကိုရေးစေပြီး တတိယ၊ Babel သည် ကျွန်ုပ်တို့အား ဘရောက်ဆာအဟောင်းများတွင် JSX syntax နှင့် ES6 ရေးနိုင်စေပါသည်။

React JSX အခန်း တွင် JSX အကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။

ဥပမာ

သင်၏ HTML ဖိုင်တွင် CDN သုံးခု ထည့်သွင်းပါ-

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>

  </body>
</html>

ဤနည်းဖြင့် React ကို အသုံးပြုခြင်းသည် စမ်းသပ်ရန် ရည်ရွယ်ချက်အတွက် OK နိုင်သော်လည်း ထုတ်လုပ်မှုအတွက် သင်သည် React ပတ်ဝန်းကျင်ကို စနစ် ထည့်သွင်းရန် လိုအပ် မည်ဖြစ်သည်။


w3schools CERTIFIED . 2022

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

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

$95 စာရင်းသွင်းပါ။

React Environment တစ်ခု သတ်မှတ်ခြင်း။

အကယ်၍ သင့်တွင် npx နှင့် Node.js ကို ထည့်သွင်းထားပါက၊ အသုံးပြု၍ React အပလီကေးရှင်းကို ဖန်တီးနိုင်သည် create-react-app

အကယ်၍ သင်သည် ယခင်က create-react-appတစ်ကမ္ဘာလုံးတွင် ထည့်သွင်းပြီးပါက၊ npx ၏ နောက်ဆုံးထွက်ဗားရှင်းကို အမြဲအသုံးပြုကြောင်း သေချာစေရန် ပက်ကေ့ဂျ်ကို ဖယ်ရှားရန် အကြံပြုအပ်ပါသည် create-react-app

uninstall လုပ်ရန်၊ ဤ command ကို run ပါ npm uninstall -g create-react-app

React အမည်ရှိ အပလီကေးရှင်းတစ်ခု ဖန်တီးရန် ဤ command ကို run ပါ my-react-app

npx create-react-app my-react-app

React အက် create-react-appပလီကေးရှင်းကိုဖွင့်ရန် သင်လိုအပ်သမျှကို စနစ်ထည့်သွင်းမည်ဖြစ်သည်။


React Application ကို Run လိုက်ပါ။

ယခု သင်သည် သင်၏ ပထမဆုံး စစ်မှန်သော React အက်ပ်ကို အသုံးပြုရန် အဆင်သင့်ဖြစ်နေပါပြီ။

my-react-appလမ်းညွှန် သို့ရွှေ့ရန် ဤအမိန့်ကို လုပ်ဆောင်ပါ ။

cd my-react-app

React အပလီကေးရှင်းကို run ရန် ဤ command ကို run ပါ my-react-app

npm start

သင့်အသစ်ဖန်တီးထားသော React အက်ပ်နှင့်အတူ ဘရောက်ဆာဝင်းဒိုးအသစ်တစ်ခု ပေါ်လာပါမည်။ မဟုတ်ပါက သင့်ဘရောက်ဆာကိုဖွင့်ပြီး localhost:3000လိပ်စာဘားတွင် ရိုက်ထည့်ပါ။

ရလဒ်:



React Application ကို ပြင်ဆင်ပါ။

အရမ်းကောင်းပေမယ့် အကြောင်းအရာကို ဘယ်လိုပြောင်းရမလဲ။

လမ်းညွှန် ထဲမှာကြည့်လိုက်ပါ ၊ ဖိုင်တွဲ my-react-appတစ်ခုတွေ့လိမ့်မယ် srcဖိုဒါ အတွင်းတွင် srcဖိုင်တစ်ခုရှိသည် App.js၊ ၎င်းကိုဖွင့်ပါ၊ ၎င်းသည် ဤကဲ့သို့ဖြစ်လိမ့်မည်-

/myReactApp/src/App.js-

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

HTML အကြောင်းအရာကို ပြောင်းလဲပြီး ဖိုင်ကို သိမ်းဆည်းကြည့်ပါ။

ဖိုင်ကိုသိမ်းဆည်းပြီးနောက် အပြောင်းအလဲများကို ချက်ချင်းမြင်နိုင်သည်ကို သတိပြုပါ၊ ဘရောက်ဆာကို ပြန်လည်စတင်ရန် မလိုအပ်ပါ။

ဥပမာ

အတွင်းရှိ အကြောင်းအရာအားလုံးကို အစိတ်အပိုင်းတစ်ခု <div className="App">ဖြင့် အစားထိုးပါ။<h1>

Save ကိုနှိပ်လိုက်သောအခါတွင် browser မှပြောင်းလဲမှုများကိုကြည့်ပါ။

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

ကျွန်ုပ်တို့ မလိုအပ်သော တင်သွင်းမှုများ (logo.svg နှင့် App.css) ကို ဖယ်ရှားလိုက်ကြောင်း သတိပြုပါ။

ရလဒ်:


နောက်တစ်ခုကဘာလဲ?

ယခု သင့်ကွန်ပြူတာတွင် React Environment တစ်ခုရှိပြီး React အကြောင်း ပိုမိုလေ့လာရန် အဆင်သင့်ဖြစ်ပါပြီ။

ဤသင်ခန်းစာ၏ကျန်ရှိမှုတွင် React ၏အမျိုးမျိုးသောရှုထောင့်များနှင့်၎င်းတို့ကို browser တွင်ပြသပုံကိုရှင်းပြရန်ကျွန်ုပ်တို့၏ "Show React" tool ကိုအသုံးပြုပါမည်။

သင့်ကွန်ပြူတာတွင် အလားတူအဆင့်များကို လိုက်နာလိုပါက၊ srcဖိုင်တစ်ခုသာပါဝင်ရန် ဖိုင်တွဲကို ဖယ်ထုတ်ခြင်းဖြင့် စတင်ပါ index.jsindex.js အောက်ဖော်ပြပါ "Show React" tool ရှိ နမူနာနှင့်တူစေရန် ဖိုင် အတွင်းရှိ မလိုအပ်သော ကုဒ်လိုင်းများကို ဖယ်ရှားသင့်သည် -

ဥပမာ

ရလဒ်ကိုကြည့်ရှုရန် "Run Example" ခလုတ်ကိုနှိပ်ပါ။

index.js:

import React from 'react';
import ReactDOM from 'react-dom';

const myfirstelement = <h1>Hello React!</h1>

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


လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

React ဒြပ်စင်ကို DOM သို့ပြန်ဆိုရန် မှန်ကန်သော ReactDOM နည်းလမ်းကို ထည့်သွင်းပါ။

ReactDOM.(myElement, document.getElementById('root'));