Components and Props တို့ရဲ့ အခြေခံသဘောတရားများ

What is component in react?

Component တွေဆိုတာက basically ပြောရမယ်ဆိုရင်တော့ JavaScript ရဲ့ pure functions တွေဖြစ်ပြီးတော့ inputs (function ရဲ့ parameter အနေနဲ့) တွေလက်ခံပြီး ကျွန်တော်တို့ အခု UI မှာ မြင်နေကြရတဲ့ React Elements တိုကို return အနေနဲ့ပြန်ပေးပါတယ်။

Component Naming

React components တွေကို နာမည်ပေးတဲ့နေရာမှာ အထူးသတိ့ပြု့ရမည့်အချက်တစ်ချက်ရှိပါတယ်။ အဲဒါကတော့ Component name တွေဟာ အမြဲတမ်း capital letter ဖြစ်ရပါမယ်။

⚠️ Always start component names with a capital letter.

ဘာဖြစ်လို့လဲဆိုတော့ React က lower case components တွေကို DOM tags တွေအဖြစ်ယူဆပြီး၊ upper case components တွေကို သာ Custom components တွေအဖြစ်သက်မှတ်ပေးလို့ပါ။
အသေးစိတ်ဖတ်ချင်ရင်တော့ ဒီလင့် မှာသွားဖတ်လို့ရပါတယ်။

Basic understanding of component

React ဟာဆိုရင် component တွေကိုပေါင်းစပ်ပီး application, websites စတာတွေကို ဖန်တီးယူလို့ရတဲ့နည်းပညာဖြစ်ပါတယ်။ ဘာဖြစ်လို့ component တွေခွဲနေရတာလဲ? ဒီတိုင်းလဲရေးရင်ရတာပဲလေ ဆိုပြီးမေးကြပါလိမ့်မယ်။ သူ့မှာ ခိုင်လုံတဲ့အကြောင်းပြချက်တွေရှိပါတယ်။

1. Reusable Pieces
2. Isolation
3. Split UI into independent

ဒါတွေကိုနားလည်ဖို့ ဥပမာတစ်ခုနဲ့ ရှင်းပြမှ ရပါလိမ့်မယ်။

import React, { Component } from 'react';
export default class App extends Component {
  render() {
    return (
      <div className="app">
        <div className="student__list">
          <div className="student__item">
            <h1>Name: Student A</h1>
            <p>Score: 100</p>
          </div>
          <div className="student__item">
            <h1>Name: Student B</h1>
            <p>Score: 90</p>
          </div>
        </div>
      </div>
    )
  }
}

အထက်ပါ ဥပမာဟာဆိုရင် component ကို မသုံးပဲ အကုန်လုံးကို တစ်နေရာထဲမှာ စုရေးထားတဲ့ပုံစံဖြစ်ပါတယ်။ ဒီနေရာမှာ တစ်ခုသတိ့ထားမိ့ကြမှာပါ။

အနီပြထားတဲ အပိုင်းနေရာတွေဟာ code တွေမလိုအပ်ပဲနဲ့ ထပ်နေတယ်ဆိုတာကိုပါ။ အခုပြထားတဲ ဥပမာဟာ data နည်းနေလို့မသိ့သာပေမဲ့ Student အယောက်တစ်ရာလောက်ရှိတဲ့အချိန်မှာ မလိုအပ်ပဲ code တွေရှုပ်ထွေးနေပါလိမ့်မယ်။ အဲတော့ ပြန်ပြီးအသုံးပြု့လို့ရမယ် အပိုင်းတွေကို component အနေနဲ့ ခွဲထုတ်ဖို့လိုပါတယ်။

Student Component

class Student extends Component {
  render() {
    return (
      <div className="student__item">
          <h1>Name: {this.props.name}</h1>
          <p>Score: {this.props.score}</p>
      </div>
    )
  }
}

StudentList Component

class StudentList extends Component {
  render() {
    const studentList = this.props.students
    .map(({ name, score }) =>
      <Student name={name} score={score}/>
    )
    return (
      <div className="student__list">
        {studentList}
      </div>
    )
  }
}

App.js

import React, { Component } from 'react';
export default class App extends Component {
  render() {
    const students = [
      { name: 'Student A', score: 100 },
      { name: 'Student B', score: 90 }
    ]
    return (
      <div className="app">
        <StudentList students={students}/>
      </div>
    )
  }
}

အခုလိုမျိုး ခွဲထုတ်လိုက်တဲ့အတွက်

1. ရေးထားတဲ့ code ကို နောက်လူဖတ်ရတာပိုလွယ်သွားတယ် (Readability)
2. Code Base က သူနေရာနဲ့သူရှိနေတော့ (Maintainability)
3. One Component => One Responsibility ဖြစ်တဲ့အတွက် (Solid Principle ထဲက တစ်ခုကိုလိုက်နာပြီးသားလည်းဖြစ်ပါတယ်)
4. Unit Testing လုပ်ဖို့အတွက်လဲပိုပြီး အဆင်ပြေစေပါတယ်။

Two types of React Components

React components တွေကို basically အရ အောက်ပါနှစ်မျိုးနဲ့ ခွဲခြားနိုင်ပါတယ်။

1. Function Component
2. Class Component

Function Component

ပထမရေးထုံး

function Student(props) {
  return (
     <div className="student__item">
       <h1>Name: {props.name}</h1>
       <p>Score: {props.score}</p>
     </div>
  );
}

ဒုတိယရေးထုံး

const Student = (props) => {
  return (
    <div className="student__item">
      <h1>Name: {props.name}</h1>
      <p>Score: {props.score}</p>
    </div>
  );
}

Function component တွေက တော့ရိုးရှင်းပါတယ်။ Pure Javascript function တွေဖြစ်ကြပြီး၊ သူ့မှာ single porps object တစ်ခုပါပါတယ်။ ကိုယ် UI မှာမြင်ချင်တဲ့ element တွေကို return အနေနဲ့ ပြန်ပေးရမှာပဲဖြစ်ပါတယ်။
ဒီနေရာမှာ props ဟာဆိုရင် { name: 'Student A', score: 100 } ဆိုတဲ့ javascript object တစ်ခုဖြစ်တဲ့အတွက် student's name ကိုလိုချင်ရင် props.name လို့သုံးပြီးတော့၊ student's score ကိုလိုချင်တဲ့အခါ props.score လို့သုံးသွားတာဖြစ်ပါတယ်။

Class Component

Class component တွေကတော့ ES6 class တွေကို အသုံးပြု့ပြီးရေးသားတာပဲဖြစ်ပါတယ်။
ရေးထုံးကတော့

class Student extends React.Component {
  render() {
    return (
      <div className="student__item">
          <h1>Name: {this.props.name}</h1>
          <p>Score: {this.props.score}</p>
      </div>
    )
  }
}

ES6 class တွေသုံးပြီး react component တွေကို ဖန်တီးတဲ့နေရာမှာ props ဟာဆိုရင်တော့ class ရဲ့ properties အနေနဲ့ရှိနေတာဖြစ်တဲ့အတွက် this.props.name, this.props.score ဆိုပီးသုံးသွားတာဖြစ်ပါတယ်။

References

React component ကို basically နားလည်းချင်ရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။
ES6 class features တွေကိုနားလည်းချင်ရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။
React component ရဲ့ life circle methods တွေဖတ်ချင်တယ်ဆိုရင်တော့ ဒီမှာ သွားဖတ်လို့ရပါတယ်။

အားလုံးကိုကျေးဇူးတင်ပါတယ်။
ဆက်လက်ကြိုးစားပါအုံးမည်။