စတင်ခြင်း တုံ့ပြန်ပါ။
ထုတ်လုပ်မှုတွင် React ကိုအသုံးပြုရန်၊ Node.js တွင်ပါရှိသော npm လိုအပ်သည် ။
React ဆိုတာ ဘာလဲ ဆိုတာကို ခြုံငုံကြည့်ဖို့၊ React ကုဒ်ကို HTML မှာ တိုက်ရိုက် ရေးနိုင်ပါတယ်။
သို့သော် ထုတ်လုပ်ရေးတွင် React ကိုအသုံးပြုရန်အတွက် npm နှင့် Node.js ကို ထည့်သွင်းထားရန် လိုအပ်ပါသည်။
HTML တွင် တိုက်ရိုက်တုံ့ပြန်ပါ။
React ကို စတင်လေ့လာရန် အမြန်ဆုံးနည်းလမ်းမှာ သင်၏ HTML ဖိုင်များတွင် React ကို တိုက်ရိုက်ရေးရန်ဖြစ်သည်။
W3Schools Spaces
HTML ဖိုင်များဖန်တီးခြင်းဖြင့် စတင်ရန် အလွယ်ကူဆုံးနည်းလမ်းမှာ W3Schools Spaces ဖြစ်သည်။
၎င်းသည် သင့်အလုပ်ကို ဖန်တီးရန်၊ တည်းဖြတ်ရန်နှင့် အခြားသူများနှင့် မျှဝေရန် အကောင်းဆုံးနေရာဖြစ်သည်။
Script သုံးခုပါဝင်ခြင်းဖြင့် စတင်ပါ၊ ပထမနှစ်ခုက ကျွန်ုပ်တို့၏ JavaScripts များတွင် React ကုဒ်ကိုရေးစေပြီး တတိယ၊ Babel သည် ကျွန်ုပ်တို့အား ဘရောက်ဆာအဟောင်းများတွင် JSX syntax နှင့် ES6 ရေးနိုင်စေပါသည်။
React JSX အခန်း တွင် JSX အကြောင်း ပိုမိုလေ့လာနိုင်ပါမည် ။
ဥပမာ
သင်၏ HTML ဖိုင်တွင် CDN သုံးခု ထည့်သွင်းပါ-
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;
} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
ဤနည်းဖြင့် React ကို အသုံးပြုခြင်းသည် စမ်းသပ်ရန် ရည်ရွယ်ချက်အတွက် OK နိုင်သော်လည်း ထုတ်လုပ်မှုအတွက် သင်သည် React ပတ်ဝန်းကျင်ကို စနစ် ထည့်သွင်းရန် လိုအပ် မည်ဖြစ်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
React Environment တစ်ခု သတ်မှတ်ခြင်း။
အကယ်၍ သင့်တွင် npx နှင့် Node.js ကို ထည့်သွင်းထားပါက၊ အသုံးပြု၍ React အပလီကေးရှင်းကို ဖန်တီးနိုင်သည် create-react-app
။
အကယ်၍ သင်သည် ယခင်က create-react-app
တစ်ကမ္ဘာလုံးတွင် ထည့်သွင်းပြီးပါက၊ npx ၏ နောက်ဆုံးထွက်ဗားရှင်းကို အမြဲအသုံးပြုကြောင်း သေချာစေရန် ပက်ကေ့ဂျ်ကို ဖယ်ရှားရန် အကြံပြုအပ်ပါသည် create-react-app
။
uninstall လုပ်ရန်၊ ဤ command ကို run ပါ npm uninstall -g create-react-app
။
React အမည်ရှိ အပလီကေးရှင်းတစ်ခု ဖန်တီးရန် ဤ command ကို run ပါ
my-react-app
။
npx create-react-app my-react-app
React အက် create-react-app
ပလီကေးရှင်းကိုဖွင့်ရန် သင်လိုအပ်သမျှကို စနစ်ထည့်သွင်းမည်ဖြစ်သည်။
React Application ကို Run လိုက်ပါ။
ယခု သင်သည် သင်၏ ပထမဆုံး စစ်မှန်သော React အက်ပ်ကို အသုံးပြုရန် အဆင်သင့်ဖြစ်နေပါပြီ။
my-react-app
လမ်းညွှန် သို့ရွှေ့ရန် ဤအမိန့်ကို လုပ်ဆောင်ပါ ။
cd my-react-app
React အပလီကေးရှင်းကို run ရန် ဤ command ကို run ပါ
my-react-app
။
npm start
သင့်အသစ်ဖန်တီးထားသော React အက်ပ်နှင့်အတူ ဘရောက်ဆာဝင်းဒိုးအသစ်တစ်ခု ပေါ်လာပါမည်။ မဟုတ်ပါက သင့်ဘရောက်ဆာကိုဖွင့်ပြီး
localhost:3000
လိပ်စာဘားတွင် ရိုက်ထည့်ပါ။
ရလဒ်:
React Application ကို ပြင်ဆင်ပါ။
အရမ်းကောင်းပေမယ့် အကြောင်းအရာကို ဘယ်လိုပြောင်းရမလဲ။
လမ်းညွှန် ထဲမှာကြည့်လိုက်ပါ ၊ ဖိုင်တွဲ my-react-app
တစ်ခုတွေ့လိမ့်မယ်
src
။ ဖိုဒါ အတွင်းတွင်
src
ဖိုင်တစ်ခုရှိသည်
App.js
၊ ၎င်းကိုဖွင့်ပါ၊ ၎င်းသည် ဤကဲ့သို့ဖြစ်လိမ့်မည်-
/myReactApp/src/App.js-
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
HTML အကြောင်းအရာကို ပြောင်းလဲပြီး ဖိုင်ကို သိမ်းဆည်းကြည့်ပါ။
ဖိုင်ကိုသိမ်းဆည်းပြီးနောက် အပြောင်းအလဲများကို ချက်ချင်းမြင်နိုင်သည်ကို သတိပြုပါ၊ ဘရောက်ဆာကို ပြန်လည်စတင်ရန် မလိုအပ်ပါ။
ဥပမာ
အတွင်းရှိ အကြောင်းအရာအားလုံးကို အစိတ်အပိုင်းတစ်ခု <div className="App">
ဖြင့်
အစားထိုးပါ။<h1>
Save ကိုနှိပ်လိုက်သောအခါတွင် browser မှပြောင်းလဲမှုများကိုကြည့်ပါ။
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;
ကျွန်ုပ်တို့ မလိုအပ်သော တင်သွင်းမှုများ (logo.svg နှင့် App.css) ကို ဖယ်ရှားလိုက်ကြောင်း သတိပြုပါ။
ရလဒ်:
နောက်တစ်ခုကဘာလဲ?
ယခု သင့်ကွန်ပြူတာတွင် React Environment တစ်ခုရှိပြီး React အကြောင်း ပိုမိုလေ့လာရန် အဆင်သင့်ဖြစ်ပါပြီ။
ဤသင်ခန်းစာ၏ကျန်ရှိမှုတွင် React ၏အမျိုးမျိုးသောရှုထောင့်များနှင့်၎င်းတို့ကို browser တွင်ပြသပုံကိုရှင်းပြရန်ကျွန်ုပ်တို့၏ "Show React" tool ကိုအသုံးပြုပါမည်။
သင့်ကွန်ပြူတာတွင် အလားတူအဆင့်များကို လိုက်နာလိုပါက၊ src
ဖိုင်တစ်ခုသာပါဝင်ရန် ဖိုင်တွဲကို ဖယ်ထုတ်ခြင်းဖြင့် စတင်ပါ index.js
။ index.js
အောက်ဖော်ပြပါ "Show React" tool ရှိ နမူနာနှင့်တူစေရန် ဖိုင် အတွင်းရှိ မလိုအပ်သော ကုဒ်လိုင်းများကို ဖယ်ရှားသင့်သည် -
ဥပမာ
ရလဒ်ကိုကြည့်ရှုရန် "Run Example" ခလုတ်ကိုနှိပ်ပါ။
index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));