React.js භාවිතයෙන් වෙබ් යෙදුමක් නිර්මාණය කිරීම පිළිබඳ නිබන්ධනය
React.js යනු අන්තර්ක්‍රියාකාරී පරිශීලක අතුරුමුහුණත් (UIs) ගොඩනැගීම සඳහා භාවිතා කරන ජනප්‍රිය ඉදිරිපස-අන්ත සංවර්ධන පුස්තකාලයකි. Facebook විසින් සංවර්ධනය කරන ලද React.js, Instagram, Airbnb සහ WhatsApp ඇතුළු බොහෝ ප්‍රධාන සමාගම් විසින් භාවිතා කර ඇත. ඔබ ඵලදායී, වේගවත් සහ ප්‍රතිචාරාත්මක වෙබ් යෙදුම් ගොඩනැගීමට බලාපොරොත්තු වන්නේ නම් , React.js ඔබට නිවැරදි තේරීම විය හැකිය.
පෙන්ඩහුලුවන්
අපි ආරම්භ කිරීමට පෙර, ඔබේ පරිගණකයේ Node.js සහ npm (Node Package Manager) ස්ථාපනය කර ඇති බවට වග බලා ගන්න. React.js භාවිතයෙන් වෙබ් යෙදුම් සංවර්ධනය කිරීමට අවශ්‍ය පරිසරය සහ මෙවලම් සපයන බැවින් Node.js සහ npm අත්‍යවශ්‍ය වේ .
පියවර 1: ප්‍රතික්‍රියා ව්‍යාපෘතිය ආරම්භ කිරීම
නව React.js යෙදුමක් නිර්මාණය කිරීම සඳහා, අපට ආරම්භක වින්‍යාසය අවම කරන යෙදුම් නිර්මාණය කිරීමේ මෙවලමක් වන Create React App භාවිතා කළ හැකිය. ඔබගේ ටර්මිනලයේ හෝ විධාන විමසුමේ පහත විධානය ක්‍රියාත්මක කරන්න:
"`බෑෂ්
npx create-react-app මගේ-app
සීඩී මගේ යෙදුම
npm ආරම්භය
""
මෙම විධානය මඟින් `my-app` නමින් නව නාමාවලියක් නිර්මාණය කර, අවශ්‍ය සියලු පරායත්තතා බාගත කර ස්ථාපනය කර, සංවර්ධන සේවාදායකය ආරම්භ කරනු ඇත. දැන් ඔබට බ්‍රව්සරයක් විවෘත කර `http://localhost:3000` වෙත පිවිස පෙරනිමි React.js යෙදුම දැක ගත හැකිය.
පියවර 2: ෆෝල්ඩර ව්‍යුහය
Create React App නිර්මාණය කර ඇති ෆෝල්ඩර ව්‍යුහය දෙස බලමු:
""
මගේ යෙදුම/
├── නෝඩ්_මොඩියුල/
├── පොදු/
│ └── දර්ශකය.html
└── එස්ආර්සී/
├── ඇප්.css
├── ඇප්.ජේ.එස්.
├── යෙදුම.පරීක්ෂණ.ජේඑස්
├── දර්ශකය.css
├── දර්ශකය.js
└── logo.svg
""
– `node_modules/`: ඔබගේ සියලුම ව්‍යාපෘති පරායත්තතා අඩංගු වේ.
– `public/`: යෙදුමේ පිවිසුම් ස්ථානය වන `index.html` ඇතුළු ස්ථිතික ගොනු අඩංගු වේ.
– `src/`: ඔබ ඔබේ වැඩි කාලයක් ගත කරන ස්ථානය. React සංරචක, CSS ගොනු සහ අනෙකුත් වත්කම් අඩංගු වේ.
පියවර 3: අනවශ්‍ය ගොනු මකා දැමීම
පිරිසිදු ස්ලයිට් එකකින් පටන් ගැනීමට, අපි අනවශ්‍ය ගොනු කිහිපයක් මකා දමමු. `src/` ෆෝල්ඩරය තුළ `logo.svg` සහ `App.test.js` මකන්න. ඉන්පසු, `App.css` සහ `index.css` විවෘත කර, ඒවා තුළ ඇති සියලුම CSS කේත මකා දමා පිරිසිදු ස්ටයිල්ෂීට් එකකින් ආරම්භ කරන්න.
පියවර 4: ඔබේ පළමු සංරචකය නිර්මාණය කිරීම
React.js යනු සංරචක මත පදනම් වූවකි. සංරචක යනු ඔබේ වෙබ් යෙදුමේ ගොඩනැඟිලි කොටස් වේ. අපගේ පළමු සංරචකය නිර්මාණය කිරීම සඳහා `App.js` වෙනස් කරමු.
`src/App.js` විවෘත කර පහත කේතය සමඟ එය ප්‍රතිස්ථාපනය කරන්න:
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
'./App.css' ආයාත කරන්න;
ශ්‍රිතය යෙදුම() {
ආපසු (
මගේ ප්‍රතික්‍රියා යෙදුමට සාදරයෙන් පිළිගනිමු.
);
}
අපනයන පෙරනිමි යෙදුම;
""
JSX (JavaScript XML) භාවිතයෙන් `App.js` තුළ React කේතය ආරම්භ කරන්න, එමඟින් JavaScript තුළ HTML වැනි වාක්‍ය ඛණ්ඩයක් ලිවීමට අපට ඉඩ සලසයි. ඔබගේ වෙනස්කම් සුරකින්න සහ ඔබගේ බ්‍රව්සරයේ ප්‍රතිඵල බලන්න.
පියවර 5: නව සංරචක එකතු කිරීම
දැන් අපි අලුත් සංරචක කිහිපයක් එකතු කරමු. `src` ෆෝල්ඩරය තුළ `components` නමින් නව ෆෝල්ඩරයක් සාදන්න. ඉන්පසු `components` ෆෝල්ඩරය තුළ `HelloWorld.js` නව ගොනුවක් සාදන්න.
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
ශ්‍රිතය HelloWorld() {
ආපසු (
හෙලෝ වර්ල්ඩ්!
);
}
අපනයන පෙරනිමි HelloWorld;
""
`App.js` විවෘත කර අප විසින් නිර්මාණය කරන ලද `HelloWorld` සංරචකය ආයාත කරන්න:
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
'./App.css' ආයාත කරන්න;
'./components/HelloWorld' වෙතින් HelloWorld ආයාත කරන්න;
ශ්‍රිතය යෙදුම() {
ආපසු (
මගේ ප්‍රතික්‍රියා යෙදුමට සාදරයෙන් පිළිගනිමු.
);
}
අපනයන පෙරනිමි යෙදුම;
""
දැන්, `App.js` ප්‍රධාන පිටුවේ `HelloWorld` සංරචකය විදැහුම් කරයි.
පියවර 6: useState සමඟ රාජ්‍ය කළමනාකරණය එකතු කිරීම
React එකේ state කළමනාකරණය සඳහා ඉතා බලවත් කොකු තියෙනවා. අපි අපේ යෙදුමට state එකක් එකතු කරමු. උදාහරණයක් ලෙස, බොත්තමක් ක්ලික් කරන සෑම අවස්ථාවකම වැඩි වන කවුන්ටරයක් එකතු කරමු.
`HelloWorld.js` විවෘත කර state සහ `useState` කොක්ක එකතු කරන්න:
"ජේඑස්එක්ස්"
'react' වලින් React, { useState } ආයාත කරන්න;
ශ්‍රිතය HelloWorld() {
const [ගණන, setCount] = useState(0);
const incrementCount = () => {
කට්ටල ගණන(ගණන + 1);
}
ආපසු (
හෙලෝ වර්ල්ඩ්!
ගණන: {ගණන}
);
}
අපනයන පෙරනිමි HelloWorld;
""
`count` තත්ත්වය 0 අගයකින් ආරම්භ කර ඇති අතර, බොත්තම ක්ලික් කරන සෑම අවස්ථාවකම, `incrementCount` ශ්‍රිතය මෙම අගය වැඩි කරයි.
පියවර 7: මෝස්තර එකතු කිරීම
මෝස්තරය එකතු කිරීම සඳහා, අපට `App.css` ගොනුවේ CSS භාවිතා කළ හැකිය, නැතහොත් අපට styled-components වැනි CSS-in-JS පුස්තකාලයක් භාවිතා කළ හැකිය. දැනට අපි සම්මත CSS සමඟ රැඳී සිටිමු.
`App.css` විවෘත කර මෝස්තර කිහිපයක් එක් කරන්න:
"සීඑස්එස්"
.යෙදුම {
පෙළ-පෙළගැස්ම: මැද;
}
.යෙදුම්-ශීර්ෂකය {
පසුබිම් වර්ණය: 282c34;
අවම උස: 100vh;
ප්රදර්ශනය: flex;
flex-දිශාව: තීරුව;
align-items: මධ්යස්ථානය;
යුක්ති සහගත-අන්තර්ගතය: මධ්යස්ථානය;
අකුරු ප්‍රමාණය: calc(10px + 2vmin);
වර්ණය: සුදු;
}
බොත්තම {
padding: 10px 20px;
ආන්තික-ඉහළ: 20px;
අකුරු ප්‍රමාණය: 16 පීඑක්ස්;
}
""
පියවර 8: React Router සමඟ Routing එකතු කිරීම
අපගේ යෙදුමේ විවිධ පිටු අතර සංචාලනය එක් කිරීමට, අපට React Router භාවිතා කළ හැකිය. පහත විධානය ක්‍රියාත්මක කිරීමෙන් React Router ස්ථාපනය කරන්න:
"`බෑෂ්
npm ස්ථාපනය react-router-dom
""
ඉන්පසු, `components` ෆෝල්ඩරය තුළ `Home.js` සහ `About.js` යන නව සංරචක දෙකක් සාදන්න.
`නිවස.js`:
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
ශ්‍රිතය මුල් පිටුව() {
ආපසු (
මුල් පිටුව
);
}
පෙරනිමි මුල් පිටුව අපනයනය කරන්න;
""
`js ගැන`:
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
ශ්‍රිතය ගැන() {
ආපසු (
අප ගැන
);
}
අපනයන පෙරනිමිය ගැන;
""
ඊළඟට, `App.js` විවෘත කර මාර්ගගත කිරීම සකසන්න:
"ජේඑස්එක්ස්"
'react' වලින් React ආයාත කරන්න;
'react-router-dom' වෙතින් { BrowserRouter as Router, Route, Link, Switch } ආයාත කරන්න;
'./App.css' ආයාත කරන්න;
'./components/HelloWorld' වෙතින් HelloWorld ආයාත කරන්න;
'./components/Home' වෙතින් Home ආයාත කරන්න;
'./components/About' වෙතින් About ආයාත කරන්න;
ශ්‍රිතය යෙදුම() {
ආපසු (
);
}
අපනයන පෙරනිමි යෙදුම;
""
මේ සමඟ, අපි අපගේ යෙදුමේ විවිධ පිටු අතර මූලික සංචාලනයක් එකතු කර ඇත්තෙමු.
වසා දැමීම
React.js භාවිතයෙන් වෙබ් යෙදුමක් නිර්මාණය කිරීම සඳහා වන මූලික නිබන්ධනයක් එයයි . අපි ව්‍යාපෘති සැකසුම, සංරචක නිර්මාණය, රාජ්‍ය කළමනාකරණය, මෝස්තරකරණය සහ මාර්ගගත කිරීම ආවරණය කර ඇත්තෙමු. React.js සතුව වඩාත් සංකීර්ණ වෙබ් යෙදුම් ගොඩනැගීමට ඔබට උපකාර කළ හැකි පුස්තකාල සහ මෙවලම් රාශියක් සහිත පොහොසත් පරිසර පද්ධතියක් ඇත.
සුභ පැතුම්, මේ නිබන්ධනය React.js සමඟ ඔබේ ගමන ආරම්භ කිරීමට උපකාරී වනු ඇතැයි මම බලාපොරොත්තු වෙමි!
