පාඩම 1: Project එක සකස් කිරීම

React යනු කුමක්ද? 🤔

React (React.js හෝ ReactJS ලෙසද හැඳින්වේ) යනු user interfaces (UI) එනම්, පරිශීලකයාට පෙනෙන සහ භාවිත කළ හැකි කොටස්, නිර්මාණය කිරීම සඳහා භාවිත කරන JavaScript library එකකි. Facebook ආයතනය විසින් මෙය නිර්මාණය කර නඩත්තු කරනු ලබයි.

React වල ප්‍රධාන අරමුණ වන්නේ විශාල, දත්ත මත පදනම් වූ web applications නිර්මාණය කිරීම පහසු කිරීමයි. React හි ඇති විශේෂත්වය නම්, එය **Components** (කොටස්) මත පදනම් වීමයි. වෙබ් පිටුවක ඇති බොත්තමක්, search bar එකක්, හෝ සම්පූර්ණ navigation bar එකක් වැනි ඕනෑම කොටසක් වෙනම component එකක් ලෙස නිර්මාණය කළ හැක. මෙමගින් කේතය නැවත භාවිත කිරීම (reusability) සහ කළමනාකරණය කිරීම ඉතා පහසු වේ.

අවශ්‍ය මූලික දේවල් (Prerequisites)

React project එකක් ආරම්භ කිරීමට පෙර, ඔබේ පරිගණකයේ පහත සඳහන් දේවල් ස්ථාපනය කර තිබිය යුතුය.

Node.js සහ npm: Node.js යනු JavaScript, browser එකෙන් පිටත run කිරීමට ඉඩ සලසන runtime environment එකකි. npm (Node Package Manager) යනු JavaScript libraries සහ tools කළමනාකරණය කරන මෙවලමකි. Node.js ස්ථාපනය කරන විට npm ද ඉබේම ස්ථාපනය වේ. Node.js නිල වෙබ් අඩවියෙන් බාගත කරගන්න.
Code Editor: කේත ලිවීම සඳහා VS Code (Visual Studio Code) වැනි හොඳ code editor එකක් භාවිත කිරීම වඩාත් සුදුසුය. VS Code නිල වෙබ් අඩවියෙන් බාගත කරගන්න.

Vite සමඟින් React Project එකක් නිර්මාණය කිරීම 🚀

අපි අපේ React project එක නිර්මාණය කිරීමට **Vite** (වීට් ලෙස උච්චාරණය කෙරේ) නම් නවීන build tool එක භාවිත කරමු. Vite මගින් ඉතා වේගවත් development server එකක් ලබා දෙන නිසා, අපේ වැඩ කටයුතු ඉක්මනින් කරගැනීමට එය උපකාරී වේ.

පියවර 1: Project එක නිර්මාණය කරන command එක run කරන්න

ඔබේ පරිගණකයේ Terminal (Windows වල Command Prompt හෝ PowerShell) එක open කර, project එක සෑදීමට කැමති තැනට ගොස් (උදා: Desktop) පහත command එක run කරන්න.

npm create vite@latest react-counter -- --template react

මෙම command එක මගින් `react-counter` නමින් අලුත් folder එකක් සාදා, React සඳහා අවශ්‍ය මූලික files සහ settings එහි ස්ථාපනය කරනු ඇත.

පියවර 2: Project Folder එකට ගොස් Dependencies ස්ථාපනය කරන්න

දැන්, අලුතින් සෑදුණු project folder එකට ඇතුල් වන්න.

cd react-counter

ඉන්පසු, project එකට අවශ්‍ය අනෙකුත් libraries (dependencies) ස්ථාපනය කිරීම සඳහා පහත command එක run කරන්න.

npm install

පියවර 3: Development Server එක ආරම්භ කරන්න

සියල්ල සූදානම්! දැන් development server එක ආරම්භ කර, අපේ React app එක browser එකේ බලමු. ඒ සඳහා පහත command එක run කරන්න.

npm run dev

මෙම command එක run කළ පසු, terminal එකේ `http://localhost:5173` වැනි URL එකක් පෙන්වයි. එම URL එක copy කර ඔබේ web browser එකේ open කළ විට, ඔබට React හි default ආරම්භක පිටුව දැකගත හැකි වනු ඇත.

සුභ පැතුම්! ඔබ සාර්ථකව ඔබේ පළමු React project එක නිර්මාණය කර, එය run කර ඇත.

මූලික ගොනු ව්‍යුහය (File Structure) 📂

Vite මගින් සාදන ලද `react-counter` ෆෝල්ඩරය තුල `src` නමින් තවත් ෆෝල්ඩරයක් ඇත. අපගේ application එකට අදාළ සියලුම කේත අප ලියන්නේ මෙම `src` ෆෝල්ඩරය තුලය. එහි ඇති ප්‍රධාන ගොනු කිහිපයක් මෙසේය:

main.jsx: මෙය අපේ application එකේ ප්‍රධාන පිවිසුම් ස්ථානයයි (entry point).
App.jsx: මෙය ප්‍රධාන React component එකයි. අපට පෙනෙන ආරම්භක පිටුව නිර්මාණය වන්නේ මෙහිය.
index.css: Global CSS styles මෙම ගොනුවේ අඩංගු වේ.

ඊළඟ පාඩමේදී, අපි මෙම ගොනු වෙනස් කර අපේම කවුන්ටරය සෑදීමට පටන් ගනිමු.