React ဆိုတာ ဘာလဲ ?
React သည် Facebook မှ ဖန်တီးထားသော JavaScript စာကြည့်တိုက်တစ်ခုဖြစ်သည်။
React သည် User Interface (UI) စာကြည့်တိုက် တစ်ခုဖြစ်သည်။
React သည် UI အစိတ်အပိုင်းများ ကို တည်ဆောက်ရန်အတွက် ကိရိယာတစ်ခုဖြစ်သည်။
Quickstart Tutorial ကို တုံ့ပြန်ပါ။
ဤသည်မှာ အမြန်စတင်သင်ခန်းစာတစ်ခုဖြစ်သည်။
သင်မစတင်မီ၊ သင်အခြေခံနားလည်ထားသင့်သည်-
သင်ခန်းစာအပြည့်အစုံအတွက်-
React Tutorial စတင်ပါ ❯HTML စာမျက်နှာတစ်ခုသို့ တုံ့ပြန်မှုထည့်ခြင်း။
ဤအမြန်စတင်သင်ခန်းစာသည် ဤကဲ့သို့သောစာမျက်နှာသို့ React ပေါင်းထည့်လိမ့်မည်-
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Babel ဆိုတာ ဘာလဲ။
Babel သည် JavaScript သို့ markup သို့မဟုတ် programming language များကိုဘာသာပြန်ပေးနိုင်သော JavaScript compiler တစ်ခုဖြစ်သည်။
Babel ဖြင့်၊ သင်သည် JavaScript ၏နောက်ဆုံးထွက်အင်္ဂါရပ်များ (ES6 - ECMAScript 2015) ကိုသုံးနိုင်သည်။
Babel သည် မတူညီသော ဘာသာပြန်များအတွက် ရနိုင်ပါသည်။ React သည် JSX သို့ JavaScript သို့ပြောင်းရန် Babel ကိုအသုံးပြုသည်။
Babel ကိုအသုံးပြုရန်အတွက် <script type="text/babel"> လိုအပ်ကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ။
JSX ဆိုတာဘာလဲ။
JSX သည် J ava S cript X ML ကို ကိုယ်စားပြုသည်။
JSX သည် JavaScript သို့ တိုးချဲ့မှုကဲ့သို့ XML/HTML တစ်ခုဖြစ်သည်။
ဥပမာ
const element = <h1>Hello World!</h1>
အထက်တွင်မြင်ရသည့်အတိုင်း JSX သည် JavaScript မဟုတ်သလို HTML မဟုတ်ပါ။
JSX သည် ES6 (ECMAScript 2015) ၏ စွမ်းအားအပြည့်ဖြင့် ပါ၀င်သည့် JavaScript အတွက် XML အစီအမံ တိုးချဲ့မှုတစ်ခုဖြစ်သည်။
HTML ကဲ့သို့ပင်၊ JSX တဂ်များတွင် တဂ်အမည်များ၊ အရည်အချင်းများနှင့် ကလေးများ ရှိနိုင်သည်။ ရည်ညွှန်းချက်တစ်ခုသည် curly braces များဖြင့် ထုပ်ပိုးထားလျှင် တန်ဖိုးသည် JavaScript ဖော်ပြချက်ဖြစ်သည်။
JSX သည် HTML စာသားကြိုးတစ်ဝိုက်တွင် ကိုးကားချက်များကို အသုံးမပြုကြောင်း သတိပြုပါ။
DOM Render ကို တုံ့ပြန်ပါ။
ReactDom.render() ကို (ပြသ) HTML အစိတ်အပိုင်းများကို တင်ဆက်ရန် အသုံးပြုသည်-
ဥပမာ
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX အသုံးအနှုန်းများ
၎င်းတို့ကို အကောက်ကောက် {} braces များဖြင့် ပတ်ထားခြင်းဖြင့် စကားရပ်များကို JSX တွင် အသုံးပြုနိုင်သည် ။
ဥပမာ
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
React Elements များ
React application များသည် များသောအားဖြင့် HTML ဒြပ်စင် တစ်ခုတည်းတွင် တည်ဆောက်ထားသည် ။
React developer များက ၎င်းကို root node (root element) ဟုခေါ်လေ့ရှိသည်-
<div id="root"></div>
တုံ့ပြန် သည့်အရာများသည် ဤကဲ့သို့ဖြစ်သည်-
const element = <h1>Hello React!</h1>
အစိတ်အပိုင်းများကို ReactDOM.render() နည်းလမ်းဖြင့် ပြန်ဆိုသည် (ပြသထားသည်)
ReactDOM.render(element, document.getElementById('root'));
ဓာတ်ပြုသောဒြပ်စင်များသည် မပြောင်းလဲနိုင်သော အရာများ ဖြစ်သည်။ ပြောင်းလဲလို့မရပါဘူး။
React ဒြပ်စင်ကို ပြောင်းလဲရန် တစ်ခုတည်းသောနည်းလမ်းမှာ ဒြပ်စင်အသစ်တစ်ခုကို အချိန်တိုင်း တင်ဆက်ရန်ဖြစ်သည်-
ဥပမာ
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
အစိတ်အပိုင်းများကို တုံ့ပြန်ပါ။
React အစိတ်အပိုင်းများသည် JavaScript လုပ်ဆောင်ချက်များဖြစ်သည်။
ဤဥပမာသည် "Welcome" ဟု အမည်ပေးထား သည့် React အစိတ်အပိုင်း ကို ဖန်တီးသည် -
ဥပမာ
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React သည် အစိတ်အပိုင်းများကို ဖန်တီးရန်အတွက် ES6 အတန်းများကိုလည်း အသုံးပြုနိုင်သည်။
ဤဥပမာသည် render method ဖြင့် Welcome ဟုခေါ်သော React အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးသည် -
ဥပမာ
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
React Component Properties
ဤဥပမာသည် ပိုင်ဆိုင်မှု အကြောင်းပြချက်များဖြင့် "Welcome" ဟု အမည်ပေးထားသော တုံ့ပြန်မှု အစိတ်အပိုင်း ကို ဖန်တီးသည်-
ဥပမာ
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React သည် အစိတ်အပိုင်းများကို ဖန်တီးရန်အတွက် ES6 အတန်းများကိုလည်း အသုံးပြုနိုင်သည်။
ဤဥပမာသည် ပိုင်ဆိုင်မှု အကြောင်းပြချက်များဖြင့် "Welcome" ဟု အမည်ပေးထားသော တုံ့ပြန်မှု အစိတ်အပိုင်းတစ်ခုကိုလည်း ဖန်တီးသည်-
ဥပမာ
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX Compiler
ဤစာမျက်နှာရှိ နမူနာများသည် JSX ကို ဘရောက်ဆာတွင် စုစည်းထားသည်။
ထုတ်လုပ်မှုကုဒ်အတွက်၊ စုစည်းမှုကို သီးခြားလုပ်ဆောင်သင့်သည်။
React Application ကိုဖန်တီးပါ။
Facebook သည် React အက်ပလီကေးရှင်းကိုတည်ဆောက်ရန် သင်လိုအပ်သမျှအရာအားလုံးနှင့်အတူ Create React Application ကိုဖန်တီးခဲ့သည်။
၎င်းသည် React၊ JSX၊ နှင့် ES6၊ အလိုအလျောက် CSS ဖိုင်များကို စုစည်းရန် Webpack ကိုအသုံးပြုသည့် aa ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာဖြစ်သည်။
Create React အက်ပ်သည် ကုဒ်ရှိအမှားများကို စမ်းသပ်ရန်နှင့် သတိပေးရန် ESLint ကို အသုံးပြုသည်။
Create React အက်ပ်ကို ဖန်တီးရန် သင့် terminal တွင် အောက်ပါကုဒ်ကို လုပ်ဆောင်ပါ။
ဥပမာ
npx create-react-app react-tutorial
သင့်တွင် Node.js 5.2 နှင့်အထက် ရှိသည်ကို သေချာပါစေ။ မဟုတ်ပါက npx ကို install လုပ်ရပါမည်
ဥပမာ
npm i npx
သင့်အပလီကေးရှင်းကိုနေလိုသည့်နေရာတွင် ဖိုင်တွဲတစ်ခုဖွင့်ပါ။
ဥပမာ
C:\Users\myUser>npx create-react-app react-tutorial
အောင်မြင်မှုရလဒ်-
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start