From 099b2bd3c22cbfb06fb0eba18b4f7f519e987b4a Mon Sep 17 00:00:00 2001 From: FrencoJobs Date: Tue, 22 Jan 2019 08:15:19 +0630 Subject: [PATCH] Add Burmese translation of why-do-we-write-super-props (#144) --- .../why-do-we-write-super-props/index.es.md | 2 +- .../why-do-we-write-super-props/index.fr.md | 2 +- .../why-do-we-write-super-props/index.hu.md | 2 +- .../why-do-we-write-super-props/index.it.md | 2 +- .../why-do-we-write-super-props/index.ja.md | 2 +- .../why-do-we-write-super-props/index.md | 2 +- .../why-do-we-write-super-props/index.my.md | 195 ++++++++++++++++++ .../index.pt-br.md | 2 +- .../why-do-we-write-super-props/index.th.md | 2 +- .../why-do-we-write-super-props/index.tr.md | 2 +- .../why-do-we-write-super-props/index.vi.md | 2 +- src/utils/i18n.js | 1 + 12 files changed, 206 insertions(+), 10 deletions(-) create mode 100644 src/pages/why-do-we-write-super-props/index.my.md diff --git a/src/pages/why-do-we-write-super-props/index.es.md b/src/pages/why-do-we-write-super-props/index.es.md index 5dd3d901b..34d980b21 100644 --- a/src/pages/why-do-we-write-super-props/index.es.md +++ b/src/pages/why-do-we-write-super-props/index.es.md @@ -1,7 +1,7 @@ --- title: ¿Por qué escribimos super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: Hay un giro inesperado al final. --- diff --git a/src/pages/why-do-we-write-super-props/index.fr.md b/src/pages/why-do-we-write-super-props/index.fr.md index fdddd3b7c..9425fa548 100644 --- a/src/pages/why-do-we-write-super-props/index.fr.md +++ b/src/pages/why-do-we-write-super-props/index.fr.md @@ -1,7 +1,7 @@ --- title: Pourquoi écrit-on super(props) ? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: Il y a une surprise à la fin. --- diff --git a/src/pages/why-do-we-write-super-props/index.hu.md b/src/pages/why-do-we-write-super-props/index.hu.md index 449b12e15..86754edfe 100644 --- a/src/pages/why-do-we-write-super-props/index.hu.md +++ b/src/pages/why-do-we-write-super-props/index.hu.md @@ -1,7 +1,7 @@ --- title: Miért írjuk mindig, hogy super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: A végén lesz egy csavar. --- diff --git a/src/pages/why-do-we-write-super-props/index.it.md b/src/pages/why-do-we-write-super-props/index.it.md index a2ec4edcc..132f56418 100644 --- a/src/pages/why-do-we-write-super-props/index.it.md +++ b/src/pages/why-do-we-write-super-props/index.it.md @@ -1,7 +1,7 @@ --- title: Perché scriviamo super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: C'è un twist alla fine. --- diff --git a/src/pages/why-do-we-write-super-props/index.ja.md b/src/pages/why-do-we-write-super-props/index.ja.md index be917ec79..b47f011e8 100644 --- a/src/pages/why-do-we-write-super-props/index.ja.md +++ b/src/pages/why-do-we-write-super-props/index.ja.md @@ -1,7 +1,7 @@ --- title: なぜsuper(props) を書くの? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: 最後にひとひねりあります。 --- diff --git a/src/pages/why-do-we-write-super-props/index.md b/src/pages/why-do-we-write-super-props/index.md index fc3712768..d7c25301f 100644 --- a/src/pages/why-do-we-write-super-props/index.md +++ b/src/pages/why-do-we-write-super-props/index.md @@ -1,7 +1,7 @@ --- title: Why Do We Write super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: There’s a twist at the end. --- diff --git a/src/pages/why-do-we-write-super-props/index.my.md b/src/pages/why-do-we-write-super-props/index.my.md new file mode 100644 index 000000000..b865d4f57 --- /dev/null +++ b/src/pages/why-do-we-write-super-props/index.my.md @@ -0,0 +1,195 @@ +--- +title: Super (Props) လို့ ဘာလို့ရေးသလဲ? +date: '2018-11-30' +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] +spoiler: အဆုံးမှာ လှည့်ကွက်ရှိသည်။ +--- + + +[Hooks](https://reactjs.org/docs/hooks-intro.html) တွေ နာမည်ကြီးနေတယ်ကြားတယ်။ ဖြစ်ချင်တော့ ဒီဘလော့ ကို *class* components တွေရဲ့ စိတ်ဝင်စားပုံကောင်းတဲ့ အချက်လေးတွေနဲ့ စချင်တယ်။ အဲ့လိုဆို ဘယ်လိုနေမလဲမသိ။ + +**React ကို အကျိူးရှိရှိ ကောင်းကောင်းမွန်မွန် သုံးနိုင်ဖို့ ဒီအချက်တွေက သိပ်ပြီးအရေးပါလှတယ်တော့ မဟုတ်ပါဘူး။ ဒါပေမယ့် အသေးစိတ်ကျကျ သိချင်သူ အတွက်တော့ စိတ်ဝင်စားဖို့ကောင်းပါလိမ့်မယ်။** + +ပထမတစ်ချက်က ဒီလိုပါ + +--- + +တစ်သက်လုံး `super (props)` တွေကို ဒီလိုရေးလာတာ တော်တော်တောင်များခဲ့ပြီ။ + +```jsx{3} +class Checkbox extends React.Component { + constructor(props) { + super(props); + this.state = { isOn: true }; + } + // ... +} +``` + + [Class fields proposal](https://github.com/tc39/proposal-class-fields) အရဆို တစ်ချို့အချက်တွေကိုချန်ပြီး ဒီလိုရေးလို့ရမယ်။ + +```jsx +class Checkbox extends React.Component { + state = { isOn: true }; + // ... +} +``` + +ဒီ syntax ပုံစံကို React 0.13 က plain classes တွေကို စတင် ထောက်ပံံံ့ လိုက်တဲ့ ၂၀၁၅ မှာ အစီအစဉ်ဆွဲခဲ့တယ်။ class fields တွေက ပိုပြီးအဆင်ပြေတဲ့ ရွေးချယ်စရာတစ်ခုဖြစ်မလာခင် အထိတော့ `constructor` ထဲမှာ `super(props)` လို့ခေါ်တာက ယာယီ အဆင်ပြေ စေ တဲ့ ဖြေရှင်းချက် ပါပဲ။ + +အပေါ်က ဥပမာကို ES2015 features တွေပဲသုံးပြီး ရေးကြည့်ရအောင်ပါ။ + +```jsx{3} +class Checkbox extends React.Component { + constructor(props) { + super(props); + this.state = { isOn: true }; + } + // ... +} +``` + +**`super` ကို ဘာကြောင့် ခေါ်တာပါလဲ။ မခေါ်ဘဲနေလို့ ရပါသလား။ မဖြစ်မနေခေါ်မှရမယ်ဆိုရင်တောင် props argument ကို မသုံးရင် ဘာဖြစ်မှာပါလဲ။ တခြား argument တွေ သုံးလို့ရသေးသလား။ ကြည့်ကြည့်ရအောင် ပါ။ ** + +--- + +JavaScript မှာ `super` က parent class ရဲ့ constructor ကို ညွန်းပါတယ်။ ( အထက်ပါ ဥပမာထဲမှာဆိုရင်တော့ `React.Component` ပေါ့။) + +အရေးကြီးတဲ့အချက်က parent constructor ကို မခေါ်ပြီးမချင်း `this` ကို constructor ထဲမှာသုံးလို့မရဘူး ဆိုတာပါပဲ။ JavaScript မှာ ဒီလိုလုပ်လို့မရပါဘူး။ + +```jsx +class Checkbox extends React.Component { + constructor(props) { + // 🔴 `this` ကိုသုံးလို့မရသေး + super(props); + // ✅ အဆင် ပြေသွားပြီ + this.state = { isOn: true }; + } + // ... +} +``` + +JavaScript မှာ အဲဒီလို `this` ကိုမထိခင် parent constructor ကို အရင်ခေါ်သုံးခိုင်းတဲ့ အကြောင်းပြချက်ကောင်းကောင်း ရှိပါတယ်။ Class အဆက် တစ်ခုကိုပဲ စဉ်းစားကြည့်ပါ + +```jsx +class Person { + constructor(name) { + this.name = name; + } +} + +class PolitePerson extends Person { + constructor(name) { + this.greetColleagues(); // 🔴 သုံးမရပါ၊ ဘာကြောင့်လည်း ဆက်ဖတ်ကြည့်ပါ + super(name); + } + greetColleagues() { + alert('Good morning folks!'); + } +} +``` + +ကဲ အရင်ဆုံး `super` ကို မခေါ်ရသေးခင် `this` ကိုသုံးလို့ရတယ်ဆိုပါစို့။ တစ်လကြာတော့ `greetColleagues` ဖန်ရှင်ကို ပြင်ချင်ပြီ။ Person name ကိုပါ alert ပြတဲ့ message ထဲ ထည့်မယ်ပေါ့။ + +```jsx + greetColleagues() { + alert('Good morning folks!'); + alert('My name is ' + this.name + ', nice to meet you!'); + } +``` + +ဒါပေမယ့် `this.greetColleagues()` ကိုခေါ်တဲ့အခါမှာ `super()` ကိုမခေါ်ရသေးတာကို မမေ့ပါနဲ့။ `super()`ကို မခေါ်ရသေးရင် `this.name` ကိုလည်း set up မလုပ်ရသေးပါဘူး။ `this.name` ဟာ သတ်မှတ်ပြီးသားကို မဖြစ်သေးပါဘူး၊ `undefined` ပဲရှိပါဦးမယ်။ တွေ့တဲ့အတိုင်းပါပဲ ၊ ဒီလို code မျိုး ဒီလို error မျိုးဆိုတာ စဉ်းစားရခက်တတ်ပါတယ်။ + +အဲ့လိုမထင်မှတ်တဲ့ အမှားတွေကို ရှောင်ရှားနိုင်ဖို့ **JavaScript က `this` ကိုအရင်သုံးမယ်ဆို `super` ကိုအရင်ခေါ်ပါလို့ သတ်မှတ်ထားတာ ဖြစ်ပါတယ်။** တစ်နည်းပြောရင် parent ကို စီစဉ်စရာရှိတာ အရင်စီစဉ်စေတာဖြစ်ပါတယ်။ ဒီအချက်ဟာ class တွေပဲဖြစ်တဲ့ React Class Component တွေအတွက်လည်း အတူတူပဲ ဖြစ်ပါတယ်။ + +```jsx + constructor(props) { + super(props); + // ✅ `this` ကိုသုံးဖို့ အဆင်ပြေသွားပြီ + this.state = { isOn: true }; + } +``` + +ဒီလိုဆို နောက်မေးခွန်းတစ်ခု ကျန်ပါဦးမယ်။ ဘာလို့ `props` ကိုမှ သုံးသလဲ? + +--- + +အဲ့လိုဆို `props` ကို `super` ထဲ မဖြစ်မနေ ဖြတ်ဖို့လိုတယ်၊ ဒါမှ `React.Component` constructor က `this.props` ကို initialize လုပ်လို့ရမယ်လို့ တွေးလို့ရပါတယ်။ + +```jsx +// React ထဲမှာ +class Component { + constructor(props) { + this.props = props; + // ... + } +} +``` + +တကယ်လည်း [အဲဒီအတိုင်း](https://github.com/facebook/react/blob/1d25aa5787d4e19704c049c3cfa985d3b5190e0d/packages/react/src/ReactBaseClasses.js#L22) ပဲ ဖြစ်ပါတယ်။ + + ဒါပေမယ့် `super()` ကို `props` argument မသုံးဘဲခေါ်ရင်လည်း render အပါအဝင် တခြား method တွေမှာ `this.props` ကို သုံးလို့ရဆဲပဲ ဖြစ်ပါတယ်။ ( မယုံရင် စမ်းကြည့်ပါ ) + +ဘယ်လိုဖြစ်တာလဲ ပေါ့။ ဖြစ်ပုံက **React က `props`ကို constructor run ပြီး instance တွေမှာပါ ထည့်ပေးနေတာကိုး။** + +```jsx + // React ထဲမှာ + const instance = new YourComponent(props); + instance.props = props; +``` + +`props` ကို `super()` ထဲဖြတ်ဖို့ မေ့ခဲ့တယ်ဆိုရင်တောင် React ကပြန်ပြင်ပေးနေတာ ဖြစ်ပါတယ် ။ အဲ့ဒီ အတွက်လည်း React မှာ အကြောင်းပြချက်ကောင်းကောင်း ရှိပါတယ်။ + +တကယ်တော့ React က class တွေ စကြေညာတော့ ES6 class တွေ အတွက်ပဲ ရည်ရွယ် ခဲ့တာမဟုတ်ပါဘူး။ ဖြစ်နိုင်သမျှ class ပုံစံအမျိုးမျိုး အတွက် အဆင်ပြေအောင် ရည်ရွယ်ထားခဲ့တာ ဖြစ်ပါတယ်။ ClojureScript, CoffeeScript, ES6, Fable, Scala.js, TypeScript တို့လို [အခြား languages](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) တွေမှာ ဘယ်လိုပုံစံ ရှိမယ်ဆိုတာ မသိခဲ့၊ မသေချာခဲ့ပါဘူး။ ES6 class တွေမှာ `super()` ကိုလိုပေမယ့် — တခြား language တွေမှာ လိုမလို မသိတဲ့အတွက် props ကို instance မှာ ထည့်ဖို့ ရည်ရွယ်ချက်ရှိရှိ စီမံထားခဲ့တာပါ။ + +ဒါဆို `super(props)`လို့ ရေးမယ့်အစား `super()` ပဲရေးလည်း ရမယ်ပေါ့။ + +**ရှင်းပြဖို့ နည်းနည်းခက် ပေမယ့် အဲ့လိုတော့မရပါဘူး။** React က constructor ကို run ပြီးတဲ့အချိန် `this.props` ကို ထည့်လိုက်မှာတော့ဟုတ်တယ်။ ဒါပေမယ့် constructor ထဲ (super call နဲ့ constructor အဆုံးကြားထဲ ) မှာတော့ `this.props` က undefined ဖြစ်နေဦးမှာပါပဲ။ + +```jsx{14} +// React ထဲမှာ +class Component { + constructor(props) { + this.props = props; + // ... + } +} + +// ကိုယ့် code ထဲမှာ +class Button extends React.Component { + constructor(props) { + super(); // 😬 props ကို မေ့ခဲ့သောအခါ + console.log(props); // ✅ {} + console.log(this.props); // 😬 undefined + } + // ... +} +``` + +အဲ့တော့ အပေါ်က ဥပမာ ထဲကလို constructor ထဲက ခေါ်သုံးတဲ့ method တွေဆို ပြဿနာ တက်မှာ အသေအချာပါပဲ။ debug လုပ်ဖို့လည်း တော်တော်ခက် မယ့် ကိစ္စ ဖြစ်ပါတယ်။ **အဲ့ဒါကြောင့် `super(props)` ကိုပဲ သုံးစေချင်ပါတယ်၊ အတင်းကြီး သုံးမှရမယ် ဆိုတာမျိုး မဟုတ်ပေမယ့်။** + +```jsx +class Button extends React.Component { + constructor(props) { + super(props); // ✅ props ပါတယ်ဟုတ် + console.log(props); // ✅ {} + console.log(this.props); // ✅ {} + } + // ... +} +``` + +ဒီမှာဆို `this.props` က constructor ထက်အရင်ရှိတာ သိသာပါတယ်။ + +----- + +Longtime React user တွေ စိတ်ဝင်စားလောက်တဲ့ နောက်ဆုံး တစ်ချက် ရှိပါသေးတယ်။ + +Context API ကို class တွေမှာသုံးတဲ့အခါ (နဂိုမူလ `contextTypes` ပဲဖြစ်ဖြစ်၊ React 16.6 မှာပါလာတဲ့ `contextType` ပဲဖြစ်ဖြစ်) `context` ကို constructor ရဲ့ ဒုတိယ argument အဖြစ်ထည့်ပေးရတာကို သိမှာပါ။ + +ဒါဆို ပိုပြီး ပြည့်စုံသွားအောင် `super(props, context)` လို့ဘာလို့ မရေးသလဲပေါ့။ ရပါတယ်၊ ရေးလို့က ။ ဒါပေမယ့်သူက အသုံးနည်း တော့ ပြဿနာ ဖြစ်နိုင်ခြေ နည်းလို့ ထည့်မပြောတာပါ။ + +**ဘာပဲဖြစ်ဖြစ် class fields proposal နဲ့ဆို ဘာမှဖြစ်စရာ အကြောင်းမရှိဘူးလေ။** constructor သတ်သတ်မှတ်မှတ် ထားဖို့မလိုပဲ arguments တွေအားလုံး အလိုလို နေရာတကျ ဖြစ်ပြီးသားပဲ။ `state = {}` မှာ လိုအပ်ရင် `this.props` တို့၊ `this.context` တို့ကိုတောင် ပြန်ညွန်း လို့ရသေးတယ်။ + +Hooks တွေနဲ့ဆို `super` ရော `this` ပါ မလိုတော့ဘူး။ +ဒါပေမယ့် အဲ့ဒါက နောက်မှပြောရမယ့် အကြောင်းတွေပါလေ။ \ No newline at end of file diff --git a/src/pages/why-do-we-write-super-props/index.pt-br.md b/src/pages/why-do-we-write-super-props/index.pt-br.md index 3e44241c9..9333dcebc 100644 --- a/src/pages/why-do-we-write-super-props/index.pt-br.md +++ b/src/pages/why-do-we-write-super-props/index.pt-br.md @@ -1,7 +1,7 @@ --- title: Por Que Nós Escrevemos super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: There’s a twist at the end. --- diff --git a/src/pages/why-do-we-write-super-props/index.th.md b/src/pages/why-do-we-write-super-props/index.th.md index 0e9b85330..b1f03d377 100644 --- a/src/pages/why-do-we-write-super-props/index.th.md +++ b/src/pages/why-do-we-write-super-props/index.th.md @@ -1,7 +1,7 @@ --- title: ทำไมเราถึงต้องเขียน super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: มีหักมุมตอนจบ --- diff --git a/src/pages/why-do-we-write-super-props/index.tr.md b/src/pages/why-do-we-write-super-props/index.tr.md index c5036ed3f..6d3bc567e 100644 --- a/src/pages/why-do-we-write-super-props/index.tr.md +++ b/src/pages/why-do-we-write-super-props/index.tr.md @@ -1,7 +1,7 @@ --- title: Neden super(props) yazıyoruz? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: Yazı sonunda sürpriz var. --- diff --git a/src/pages/why-do-we-write-super-props/index.vi.md b/src/pages/why-do-we-write-super-props/index.vi.md index ba123b87f..3b81c1514 100644 --- a/src/pages/why-do-we-write-super-props/index.vi.md +++ b/src/pages/why-do-we-write-super-props/index.vi.md @@ -1,7 +1,7 @@ --- title: Tại sao chúng ta phải viết super(props)? date: '2018-11-30' -langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th'] +langs: ['en', 'fr', 'tr', 'ja', 'hu', 'es', 'vi', 'pt-br', 'it', 'th', 'my'] spoiler: Có một twist ở cuối bài. --- diff --git a/src/utils/i18n.js b/src/utils/i18n.js index 30601a70b..7c50eb984 100644 --- a/src/utils/i18n.js +++ b/src/utils/i18n.js @@ -26,6 +26,7 @@ export const codeToLanguage = code => hu: 'Magyar', vi: 'Tiếng Việt', th: 'ไทย', + my: 'Burmese', }[code].replace(/ /g, ' ' /* nbsp */)); export const loadFontsForCode = code => {