Displaying Data with Props

What

တစ်နေရာကနေ နောက်တစ်နေရာကို Data ပေးပို့ချင်တဲ့အခါ Props ကိုအသုံးပြုပါတယ်။ ဆိုလိုတာက A ဆိုတဲ့ Data ကို B သို့ပေးပို့ချင်တဲ့ သဘောပါ။ စမ်းကြည့်ရအောင်။

Why

App တစ်ခုတည်ဆောက်တဲ့အခါ Component (UI) တစ်ခုတည်းကိုပဲ့အခြေပြုပြီးတော့ Data တွေမျိုးစုံပြောင်းတာမျိုးတွေရှိပါတယ်။ မြင်သာအောင် Facebook App ရဲ့ Post တင်တဲ့နေရာကိုလေ့လာကြည့်ရအောင်။ Post မှာ ဘယ်သူက ဘယ်အချိန်က ဘယ်စာသား ဘယ်ပုံကို Upload လုပ်ခဲ့တာလဲဆိုတာကိုမြင်တွေ့ရမယ်။ ထို့အတူ Scroll ဆက်သွားရင်လည်း ဒီအတိုင်းပဲ့တွေ့မြင်ရတယ်။ Facebook ရဲ့ News Feed တစ်ခုလုံး UI က တစ်ခုပဲ့။ Upload ခဲ့သူ၊ အချိန်၊ Content, image တွေပဲ့ကွာသွားတာ။ App ကို သုံးတဲ့သူက billion နဲ့ရှိတယ်။ UI က ဒါပဲ့။ ဆိုတော့ ဒီလိုအခြေအနေတွေမှာအသုံးပြုပါတယ်။

How it is work?

သူ့ရဲ့အလုပ်လုပ်တဲ့ပုံစံက isolate အလုပ်လုပ်ပါတယ်။ Component တစ်ခုကိုအခြေခံပြီး မတူညီတဲ့ Content တွေကို Props ဖြင့် ပေးပို့လိုက်နိုင်ပါတယ်။

မည်သည့်နယ်ပယ်မှာမဆို ကျွန်တော့ရဲ့ အတွေ့အကြုံအရ သတိထားရမှာလေးတစ်ခု မျှဝေချင်ပါတယ်။ ကျွန်တော်က web development နယ်ပယ်ကဖြစ်တာကြောင့် သူနဲ့သက်ဆိုင်တာကိုပဲ့ မျှဝေပေးပါ့မယ်။ ကျွန်တော်တို့ Code တစ်ကြောင်း ရေးပြီးဆိုတာနဲ့ အတွေးထဲမှာ ဒီ Code သာ Result အနေနဲ့ထွက်ပေါ်လာတဲ့အခါ ဘယ်လိုမျိုး ပုံစံမျိုဖြင့် ရရှိလာမလဲ၊ အတွေးထဲမှာ အရင်ပုံဖော်ကြည့်ပါ။ ဒါပြီးတော့မှ Code ကိုချရေးပါ။ ဒီလိုဆို Code ကြောင့်ဖြစ်ပေါ်လာတဲ့ Error တွေကို တစ်ခါတည်းဖြေရှင်းပြီးသား ဖြစ်သွားမှာပါ။ ဥပမာ - h1 ဆိုတဲ့ element ဆိုပါတော့။ သူ့ကို Code ချမရေးခင် အတွေးထဲမှာ ပုံဖော်ကြည့်ပါ။ ဘယ်လိုမျိုး Result ကိုရလာမလဲပေါ့။ မြင်ပြီဆိုမှသာလျှင် ချရေးသင့်ပါတယ်။ ဒီလိုမြင်ဖို့အတွက်က ကိုယ်ရေးတဲ့ Code ထဲ နည်းလည်နေဖို့အရေးကြီးတယ်။ ထပ်ခါထပ်ခါ ရေးဖို့အရေးကြီးတယ်။ အကြိမ်ကြိမ်ရေးဖို့အရေးကြီးတယ်။ Practice, Practice, Practice လုပ်နေဖို့အရေးကြီးပါတယ်။

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

index.html

function Header(props) {
  return <h1>Develop. Preview. Ship.</h1>;
}

index.html

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

index.html

function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

index.html

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

index.html

function Header(props) {
  return <h1>{props.title}</h1>;
}

index.html

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

index.html

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

index.html

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

index.html

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

React Render HTML Typescript