A quick cheatsheet of useful snippet for Flutter
A widget is the basic type of controller in Flutter Material.
There are two type of basic Widget we can extend our classes: StatefulWidget or StatelessWidget.
StatefulWidget are all the widget that interally have a dynamic value that can change during usage. It can receive an input value in the constructor or reference to functions. You need to create two classes like:
| # The Most Minimal React-Redux | |
| Redux ဟာ ေလ့လာသူတိုင္းကို ေခါင္းမူးေစတဲ့ နည္းပညာတစ္ခုပါ။ ဒီေလာက္ႀကီး ခက္လွလို႔မဟုတ္ပါဘူး။ သူသုံးထားတဲ့ နည္းစနစ္ေတြေၾကာင့္ လူေတြကို မ်က္စိလည္ေစတာပါ။ ဒီေတာ့ ရသလိုလို မရသလိုလိုေတြျဖစ္ၿပီး စိတ္ညစ္ကုန္ၾကေရာ။ ဒီေနရာမွာ အေျခခံအက်ဆုံးနဲ႔ အရွင္းဆုံး Redux ကုဒ္နမူနာကို ေဖာ္ျပေပးပါမယ္။ ရႈပ္ေထြးတဲ့ နည္းပညာေတြ ပါဝင္မွာ မဟုတ္ေပမယ့္ ကုဒ္ရဲ႕ဖြဲ႕စည္းပုံ ဆန္းျပားလို႔ Programming အျမင္ အေတာ္ေလးရွိဖို႔ လိုအပ္ႏိုင္ပါတယ္။ ဒီထက္ရွင္းေအာင္ေတာ့ ေရးျပလို႔ ရႏိုင္ေတာ့မွာ မဟုတ္ပါဘူး။ | |
| လက္ေတြ႕ စမ္းသပ္ၾကည့္ႏိုင္ဖို႔အတြက္ ပထမဦးဆုံး Project ဖိုဒါတစ္ခုေဆာက္ၿပီး အထဲမွာ Redux ကို Install လုပ္လိုက္ပါ။ | |
| ``` | |
| npm install redux --save | |
| ``` |
| # The Most Minimal React Build System | |
| ၿပီးခဲ့တဲ့ ပို႔စ္မွာ React ကို ခ်ဥ္းကပ္ပုံအသစ္နဲ႔ ေဖာ္ျပခဲ့ပါတယ္။ ဘာ Build System မွ မပါပဲ HTML Document တစ္ခုအတြင္းမွာ တိုက္႐ိုက္ေရးသားခဲ့ျခင္းျဖစ္ပါတယ္။ ဒီတစ္ခါေတာ့ အ႐ိုးဆုံးနဲ႔ အရွင္းဆုံး Build System တစ္ခုကို တည္ေဆာက္ ၾကည့္ၾကမွာျဖစ္ပါတယ္။ ဒီအေၾကာင္းအရာဟာ ကြၽန္ေတာ္ပို႔ခ်ေနတဲ့ Rockstar Developer Course မွာ ထည့္သြင္းသင္ၾကားမယ့္ အေၾကာင္းအရာ တစ္ခုပါ။ ႀကိဳစမ္းမထားပဲ လက္တမ္းသင္ရင္ အမွားပါၿပီး အခ်ိန္ၾကာမွာစိုးလို႔ အခုလို ႀကိဳစမ္းၿပီး စာအျဖစ္ ႀကိဳေရးထားလိုက္တာပါ။ ဒီ Course မွာ တက္ေရာက္ သင္ယူေနသူ ဟုတ္ဟုတ္ မဟုတ္ဟုတ္ JavaScript နည္းပညာေတြကို စိတ္ဝင္စားသူဆိုရင္ ဒီပို႔စ္က အသုံးဝင္ပါလိမ့္မယ္။ | |
| စာနည္းနည္း ရွည္ပါမယ္။ အခ်ိန္ေပးႏိုင္မွ တစ္ခါတည္းဖတ္ၿပီး တစ္ခါတည္းလိုက္လုပ္ၾကည့္ပါ။ အခ်ိန္မေပးႏိုင္ေသးရင္ Bookmark လုပ္ၿပီး သိမ္းထားၿပီး အခ်ိန္ရမွ ျပန္ဖတ္ပါ။ တစ္ဝက္တစ္ပ်က္ပဲ ဖက္ရင္ေတာ့ အလကားျဖစ္သြားမွာပါပဲ။ လိုက္မလုပ္ရင္လည္း အလကားပါပဲ။ သိသလိုလို မသိသလိုလို ျဖစ္သြားမယ္။ လိုက္လုပ္ၾကည့္မွ တစ္ခါတည္း သေဘာေပါက္မွာပါ။ | |
| ## Babel in Browser | |
| လက္ရွိ ႐ိုး႐ိုး HTML ထဲမွာ ေရးထားတဲ့ နမူနာကို ေနာက္တစ္ခါ ျပန္ |
| # 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 တစ္ခုတည္ေဆာက္မယ္ဆိုရင္ အခုလို တည္ေဆာက္ႏိုင္ပါတယ္။ |
| # ES6 - Modern JavaScript | |
| ေျခာက္ႀကိမ္ေျမာက္ တည္းျဖတ္မႈျဖစ္သည့္အတြက္ ES6 ဟု အတိုေကာက္ေခၚ၍ 2015 ခုႏွစ္တြင္ ဖန္တီးခဲ့သည့္ အတြက္ ECMAScript2015 ဟု ရံဖန္ရံခါ ေခၚသည့္ နည္းပညာသည္ လက္ရွိ JavaScript (ES5) ကို အဆင့္ျမႇင့္တင္ထားသည့္ နည္းပညာျဖစ္သည္။ ES6 တြင္ ပါဝင္လာသည့္ လုပ္ေဆာင္ခ်က္မ်ားမွ အခ်ိဳ႕ကို ေ႐ြးထုတ္ ေဖာ္ျပလိုက္ပါသည္။ | |
| ## Block-scope Variable | |
| မူလ JavaScript တြင္ `var` Keyword ကို အသုံးျပဳ၍ Variable မ်ား ေၾကျငာႏိုင္သည္။ ထို Variable မ်ားသည္ Function-scope သေဘာသဘာဝ ရွိၾကသည္။ ES6 တြင္ `let` Keyword ကို အသုံးျပဳ၍ Block-scope Variable မ်ား ေၾကျငာအသုံးျပဳႏိုင္သည္။ | |
| ```JavaScript | |
| let i = 10 |
| ## | |
| # You should look at the following URL's in order to grasp a solid understanding | |
| # of Nginx configuration files in order to fully unleash the power of Nginx. | |
| # http://wiki.nginx.org/Pitfalls | |
| # http://wiki.nginx.org/QuickStart | |
| # http://wiki.nginx.org/Configuration | |
| # | |
| # Generally, you will want to move this file somewhere, and start with a clean | |
| # file but keep this around for reference. Or just disable in sites-enabled. | |
| # |