Skip to content

Instantly share code, notes, and snippets.

@NayHtwe24

NayHtwe24/How To Learn React Copy

Created January 1, 2019 14:09
Show Gist options
  • Save NayHtwe24/eaa6cea0180c7f8ce03848030a0fb2f7 to your computer and use it in GitHub Desktop.
Save NayHtwe24/eaa6cea0180c7f8ce03848030a0fb2f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
How To Learn React Copy
# Much Easier Approach to React
စိတ္ဝင္စားတဲ့သူမ်ားေနလို႔ ေလ့လာၾကည့္ေပမယ့္ "React က ခက္လိုက္တာ" လို႔မ်ားေတြးေနသလား? တစ္ကယ္ေတာ့ React က မခက္ပါဘူး။ ေရးနည္း ေတြးနည္းေတြက မူလ႐ိုး႐ိုး ေရးနည္းေတြးနည္း စနစ္ေတြကေန လုံးဝေျပာင္းသြားလို႔ "ေျပာင္းရခက္ေနတာ" ပါ။ Official Documentation နဲ႔ အင္တာနက္က Tutorial ေတြေလ့လာၾကည့္လိုက္ရင္လည္း -- ES6 ေတြ၊ Arrow Function ေတြ၊ Class ေတြ၊ JSX ေတြနဲ႔ ဟိုကေနဒီေရာက္၊ ဟိုကေနဒီေရာက္ ျဖစ္ေနၿပီး -- သူတို႔ရွင္းျပမွ ပိုရႈပ္သြားတယ္ ဆိုသလို ျဖစ္ေနတာကို ေတြ႕ရပါတယ္။
ဒီပို႔စ္မွာ React ကို ခ်ည္းကပ္ပုံတစ္မ်ိဳးနဲ႔ ေျပာင္းလဲေဖာ္္ျပေပးသြားမွာပါ။ ကြၽန္ေတာ္ပို႔ခ်ေနတဲ့ Rockstar Developer Course က သင္တန္းသူ သင္တန္းသားေတြကို ဒီနည္းနဲ႔ သင္မယ္လို႔ ရည္႐ြယ္ထားေပမယ့္ လက္တမ္း ခ်သင္ၾကည့္တဲ့အခါ သိပ္အဆင္မေျပလို႔ အခုလိုစာအျဖစ္ ေရးသားလိုက္တာပါ။ JavaScript အေျခခံရွိသူ မည္သူမဆို နားလည္ၿပီး စိတ္ဝင္စားလိမ့္မယ္လို႔ ထင္ပါတယ္။
## Plain JavaScript
ဘာ Library, ဘာ Framework မွ မပါတဲ့ ႐ိုး႐ိုး JavaScript နဲ႔ HTML Element တစ္ခုတည္ေဆာက္မယ္ဆိုရင္ အခုလို တည္ေဆာက္ႏိုင္ပါတယ္။
```HTML
<div id="app"></div>
<script>
var element = "<p title='Some Title'>Hello in JavaScript</p>";
document.getElementById("app").innerHTML = element;
</script>
```
႐ိုး႐ိုး String တစ္ခုအေနနဲ႔ပဲ `<p>` Element တစ္ခုကို တည္ေဆာက္ၿပီး `#app` ထဲမွာ ထည့္သြင္းေဖာ္ျပေစလိုက္တာပါ။ ဆႏၵရွိရင္ ဒီအတိုင္း ကူးစမ္းၾကည့္လို႔ရပါတယ္။ လိုခ်င္တဲ့ ရလဒ္ကို ရတာပါပဲ။ ဒီနည္းမွာ ရွိေနတဲ့ အားနည္းခ်က္ ျပႆနာေတြကို အေသးစိတ္ ထည့္မရွင္းျပႏိုင္ပါဘူး။ အလားတူရလဒ္ရဖို႔ jQuery မွာ ဘယ္လိုလုပ္ရလဲ ဆက္ေဖာ္ျပခ်င္ပါတယ္။
## jQuery
```HTML
<div id="app"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var element = $("<p>")
.html("Hello in jQuery")
.attr("title", "Some Title");
$("#app").append(element);
</script>
```
ဒါကေတာ့ `<p>` Element တစ္ခုကို jQuery နဲ႔တည္ေဆာက္လိုက္ျခင္း ျဖစ္ပါတယ္။ `title` Attribute နဲ႔ `Hello in jQuery` ဆိုတဲ့ Content တို႔ပါဝင္ပါတယ္။ စာဖတ္သူဟာ ဒီအဆင့္ထိ မူလကတည္းက သိရွိၿပီးျဖစ္တယ္လို႔ ယူဆပါတယ္။ ဆက္လက္ၿပီး အလားတူရလဒ္ရရွိဖို႔ React ကို အသုံးျပဳ တည္ေဆာက္မယ္ဆိုရင္ အခုလို တည္ေဆာက္ႏိုင္ပါတယ္။
## Plain React
```HTML
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
const element = React.createElement(
"p",
{title: "Some Title"},
"Hello from React"
);
ReactDOM.render(element, document.getElementById("app"));
</script>
```
ကိုယ္သိရွိၿပီးျဖစ္တဲ့ jQuery ကုဒ္နဲ႔ ႏႈိင္းယွဥ္ေလ့လာၾကည့္ပါ။ သေဘာသဘာဝ သိပ္မကြာတာကို ေတြ႕ရႏိုင္ပါတယ္။ `React.createElement()` ကို အသုံးျပဳၿပီး `<p>` Element တစ္ခု တည္ေဆာက္ျခင္း ျဖစ္ပါတယ္။ ပထမ Argument က တည္ေဆာက္လိုတဲ့ Element ျဖစ္ၿပီး ဒုတိယ Argument က Attribute စာရင္း ျဖစ္ပါတယ္။ React မွာေတာ့ Property (props) လို႔ ေခၚပါတယ္။ တတိယ Argument ကေတာ့ တည္ေဆာက္မယ့္ Element ရဲ႕ Content ျဖစ္ပါတယ္။
လိုခ်င္တဲ့ Element ကို `#app` ထဲမွာ ေဖာ္ျပဖို႔အတြက္ `ReactDOM.render()` ကို သုံးထားပါတယ္။ ဒီအတိုင္း ကူးယူစမ္းသပ္ၾကည့္လို႔ ရပါတယ္။ ဘာ Setup မွ မလိုပါဘူး။ NPM လည္းမလိုဘူး၊ Yarn လည္းမလိုဘူး၊ Babel တို႔ Webpack တို႔လည္း မလိုဘူး။ ႐ိုး႐ိုး HTML Document တစ္ခုထဲမွာ ဒီအတိုင္းပဲ တိုက္႐ိုက္ ေရးသား အသုံးျပဳႏိုင္ျခင္း ျဖစ္ပါတယ္။ မူလ jQuery တို႔ ဘာတို႔နဲ႔ ေရးနည္းမကြာလို႔ ဒီအဆင့္ထိ နားလည္ရခက္စရာ မရွိဘူးလို႔ ထင္ပါတယ္။
ဒါေပမယ့္ `React.createElement()` ကိုသုံးၿပီး ဖန္တီးထားတဲ့ Element ဟာ ဖတ္ရခက္ပါတယ္။ ဖတ္ရခက္ေတာ့ ျပင္ရခက္ပါတယ္။ ဒါကို လြယ္ေအာင္ဆိုၿပီး JSX ဆိုတဲ့ နည္းပညာကို တည္ထြင္အသုံးျပဳၾကပါတယ္။ JSX ဆိုတာ အဆန္းႀကီးေတာ့ မဟုတ္ပါဘူး။ JavaScript Code ထဲမွာ HTML Element ေတြကို တိုက္႐ိုက္ ထည့္သြင္း ေရးသားျခင္းပဲ ျဖစ္ပါတယ္။
႐ိုး႐ိုး JavaScript ကေတာ့ ဒီလို HTML ေတြကို JavaScript ကုဒ္ထဲ ေရာေရးတာကို ဘယ္နားလည္မလဲ။ ဒါေၾကာင့္ Babel လို နားလည္ေအာင္လုပ္ေပးတဲ့ နည္းပညာတစ္ခုကို ၾကားခံသုံးရပါတယ္။ နမူနာေဖာ္ျပေပးပါမယ္။
## React with JSX
```HTML
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/babel">
var element = <p title="Some Title">Hello from React/JSX</p>
ReactDOM.render(element, document.getElementById("app"))
</script>
```
ကုဒ္ကေတာ့ ေစာေစာကကုဒ္ပါပဲ။ ကြာသြားတာက `React.createElement()` ကိုမသုံးေတာ့ပဲ လိုခ်င္တဲ့ `<p>` Element ကို JavaScript ကုဒ္ထဲ တိုက္႐ိုက္ထည့္ေရးလိုက္တာပါ။ ဒီလိုေရးသားႏိုင္ဖို႔ Babel ကို `<script src>` နဲ႔ ခ်ိတ္ေပးထားသလို ကုဒ္ေရးမယ့္ `<script>` Element မွာလည္း `type="text/babel"` လို႔ သတ္မွတ္ေပးထားပါတယ္။ ဒီကုဒ္ကိုလည္း တိုက္႐ိုက္ကူးယူ စမ္းသပ္ၾကည့္လို႔ ရပါတယ္။ ဒီအဆင့္မွာလည္း ဘာ Setup မွာ လုပ္စရာ မလိုပါဘူး။ စမ္းၾကည့္ျဖစ္ေစခ်င္လို႔ တမင္မလိုေအာင္ နမူနာေပးထားတာပါ။ စမ္းၾကည့္လိုက္ပါ။
ဒီကုဒ္ကိုပဲ ေရးနည္း နဲနဲထပ္ျပင္ၾကည့္ပါဦးမယ္။
## Functional Component
```HTML
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/babel">
function Element(props) {
return (
<p title={props.title}>
Hello from React Function Component
</p>
)
}
ReactDOM.render(
<Element title="Prop Title" />,
document.getElementById("app")
);
</script>
```
ဒီတစ္ခါေတာ့ `Element` ဆိုတဲ့ Function တစ္ခုေၾကျငာၿပီး လိုခ်င္တဲ့ Element ကို Return ျပန္ေပးထားတာပါ။ အခုလို Element တစ္ခုျပန္ေပးတဲ့ Function ဟာ React Element ျဖစ္သြားပါတယ္။ အေခၚအေဝၚအမွန္ကေတာ့ React Component လို႔ ေခၚရမွာပါ။ ထူးျခားခ်က္အေနနဲ႔ `props` ကို Parameter အျဖစ္ လက္ခံထားတာကို ေတြ႕ရမွာ ျဖစ္ပါတယ္။ ဒီ Element ကို `ReactDOM.render()` မွာ ျပန္ေခၚသုံးပုံကို သတိျပဳၾကည့္ပါ။ တစ္ျခား Function ေတြလို မဟုတ္ပဲ JSX ေရးထုံးအတိုင္း `<Element />` လို႔ ေခၚသုံးထားတာကို ေတြ႕ရပါလိမ့္မယ္။ ႐ိုး႐ိုး Function မဟုတ္ေတာ့ပဲ React Component ျဖစ္သြားၿပီ မို႔လို႔ပါ။ ဒီလိုေခၚယူစဥ္မွာ `title` Attribute ကို ထည့္ေပးထားလို႔ အဲ့ဒီ Attribute / Property ကို `Element` Function က `{props.title}` ဆိုၿပီး ျပန္သုံးထားတာကို ေတြ႕ရႏိုင္ပါတယ္။
ဒီနည္းနဲ႔ React Component ေတြကို အသုံးျပဳတဲ့အခါ Property ေတြကို လက္ဆင့္ကမ္းေပးပို႔ႏိုင္ျခင္းပဲ ျဖစ္ပါတယ္။ ကူးယူစမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။
ဒီကုဒ္ကိုပဲ ေနာက္ေရးနည္း တစ္နည္းနဲ႔ ထပ္မံေဖာ္ျပပါဦးမယ္။ ဟုတ္ပါတယ္၊ ေရးနည္းေတြ မ်ားလြန္းလွပါတယ္။ ဒီလိုမ်ားလြန္းလိုပဲ ေလ့လာသူေတြ မ်က္စိလည္ကုန္ၾကတာပါ။ ဒီေနရာမွာ အတူတူပဲဆိုတာကို သိေစခ်င္လို႔ တစ္ခုနဲ႔တစ္ခု တမင္ႏႈိင္းယွဥ္ ေဖာ္ျပေနတာပါ။
## Class Component
```HTML
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/babel">
class Element extends React.Component {
render() {
return (
<p title={this.props.title}>
Hello from React Class Component
</p>
)
}
}
ReactDOM.render(
<Element title="Prop Title" />,
document.getElementById("app")
)
</script>
```
ဒီတစ္ခါေတာ့ `class` ေရးထုံးကို သုံးထားပါတယ္။ `React.Component` ကို Extend လုပ္ေပးရၿပီး `render()` Method မျဖစ္မေနပါဝင္ရပါတယ္။ နမူနာမွာ `render()` က `<p>` Element တစ္ခုကို Return ျပန္ေပးျခင္းျဖစ္ပါတယ္။ အထက္က Function နမူနာမွာလိုပဲ `ReactDOM.render()` က `<Element />` ကို ေခၚယူစဥ္မွာ `title` Property ကို ထည့္ေပးထားပါတယ္။ အဲ့ဒီလို ထည့္ေပးလာတဲ့ Property ကို Class အတြင္းမွာ `this.props` ကေနတစ္ဆင့္ ျပန္လည္ အသုံးခ်ထားပါတယ္။
တိုက္႐ိုက္ကူးယူ စမ္းသပ္ၾကည့္ႏိုင္ပါတယ္။
အေပၚကအဆင့္ေတြကို မၾကည့္ပဲ ဒီေနာက္ဆုံးအဆင့္ကို တိုက္႐ိုက္ တန္းၾကည့္ရင္ မ်က္စိလည္ခ်င္စရာႀကီးပါ။ ဒါေပမယ့္ ဒီေနရာမွာ စာဖတ္သူက အဆင့္လိုက္ ေလ့လာၾကည့္လာတဲ့အတြက္ ပိုၿပီးနားလည္လြယ္သြားၿပီလို႔ ထင္ပါတယ္။ ဒီစာတစ္ပုဒ္နဲ႔ေတာ့ ဘယ္စုံပါ့မလဲ။ ဆက္ၾကည့္စရာေတြ အမ်ားႀကီးရွိေသးတာေပါ့။ ဒါေပမယ့္ ဒီစာက စဥ္းစားပုံစဥ္းစားနည္းတစ္ခု ခ်ေပးလိုက္လို႔ ဆက္ေလ့လာတဲ့ေနရာမွာ အေထာက္အကူ ျဖစ္ေစမွာပါ။
ေနာက္ဆုံးတစ္ခုအေနနဲ႔ အေပၚကနည္းအားလုံးကို ေပါင္းသုံးျပပါမယ္။ အသုံးဝင္တဲ့နည္း မဟုတ္သလို၊ ေရးသင့္တဲ့ နည္းလည္း မဟုတ္ပါဘူး။ ေရးနည္းေတြကြာေပမယ့္ တစ္ကယ္ေတာ့ အတူတူပဲဆိုတာကို သ႐ုပ္ျပခ်င္လို႔ အခုလို ေပါင္းသုံးျပတာပါ။ ေလ့လာၾကည့္ပါ။
## Combining All
```HTML
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script type="text/babel">
var First = <li>First Component</li>
function Second(props) {
return (<li>Second Component</li>)
}
class Third extends React.Component {
render() {
return (
<ul>
{First}
<Second />
</ul>
)
}
}
ReactDOM.render(<Third />, document.getElementById("app"))
</script>
```
႐ိုး႐ိုး Variable Component ေရာ Function Component ေရာ Class Component ကိုပါ ေပါင္းသုံးလိုက္တာပါ။ တစ္ေလွ်ာက္လုံး အဆင္ေျပၿပီး ဒီေနရာေရာက္မွ မ်က္စိလည္သြားပါသလား? မလည္ပါနဲ႔ အစအဆုံး ေနာက္တစ္ေခါက္ေလာက္ ျပန္ၾကည့္လိုက္ပါ။ သေဘာသဘာဝကို ေသခ်ာနားလည္သြားပါလိမ့္မယ္။
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment