Much Easier Approach to React

easy-react.md

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 တစ်ခုတည်ဆောက်မယ်ဆိုရင် အခုလို တည်ဆောက်နိုင်ပါတယ်။

<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

<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

<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

<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

<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

<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

<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 ကိုပါ ပေါင်းသုံးလိုက်တာပါ။ တစ်လျှောက်လုံး အဆင်ပြေပြီး ဒီနေရာရောက်မှ မျက်စိလည်သွားပါသလား? မလည်ပါနဲ့ အစအဆုံး နောက်တစ်ခေါက်လောက် ပြန်ကြည့်လိုက်ပါ။ သဘောသဘာဝကို သေချာနားလည်သွားပါလိမ့်မယ်။

ကျေးဇူးတင်ပါတယ် ဆရာ

ကျေးဇူးပါဆရာ

ကျေးဇူးပါဆရာ