Module 2 – ඔබගේ පළමු React Project එක

React ඉගෙනීමේ මූලිකම පියවර වන්නේ project එකක් නිවැරදිව සකසා ගැනීමයි. අපි මේ සඳහා නවීන හා වේගවත් build tool එකක් වන **Vite** භාවිතා කරමු.

20% සම්පූර්ණයි

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

Vite යනු React යෙදුම් නිර්මාණය කිරීමට සහ run කිරීමට භාවිතා කරන ඉතා වේගවත් build tool එකකි. එය පැරණි `create-react-app` වලට වඩා developer experience එක බෙහෙවින් වැඩි දියුණු කරයි.

ඔබගේ project එක නිර්මාණය කිරීමට, ඔබගේ **Terminal** (Command Prompt/PowerShell) එක විවෘත කර පහත command එක ඇතුළත් කර `Enter` යතුර ඔබන්න.

npm create vite@latest

මෙම command එක run කළ පසු, Vite ඔබෙන් ප්‍රශ්න කිහිපයක් අසනු ඇත:

  1. Project name: ඔබගේ project එකට නමක් දෙන්න (උදා: `my-first-react-app`).
  2. Select a framework: ලැයිස්තුවෙන් `React` තෝරාගන්න (arrow keys භාවිතා කර `Enter` ඔබන්න).
  3. Select a variant: `JavaScript` තෝරාගන්න.

මෙම පියවරයන් අවසානයේ, ඔබ ලබාදුන් නමින් නව folder එකක් නිර්මාණය වනු ඇත. දැන්, එම folder එකට ඇතුළු වී අවශ්‍ය packages (dependencies) install කරගැනීමට පහත command දෙක පිළිවෙලින් run කරන්න.

cd my-first-react-app
npm install
`npm install` command එක මගින් project එකට අවශ්‍ය සියලුම code libraries (React ඇතුළුව) `node_modules` නම් folder එකට download කරනු ලැබේ.

Folder ව්‍යුහය (Folder Structure) තේරුම් ගැනීම

ඔබගේ project folder එක VS Code වලින් විවෘත කළ විට, ඔබට ප්‍රධාන files සහ folders කිහිපයක් දැකගත හැක. දැනට අපට වැදගත්ම වන්නේ මේවායි:

  • /node_modules: `npm install` මගින් download කළ සියලුම third-party packages මෙහි අඩංගු වේ. මෙම folder එක කිසිවිටකත් ඔබ විසින් edit නොකළ යුතුය.
  • /public: වෙබ් අඩවියේ ප්‍රධාන HTML file එක (`index.html`) සහ images, fonts වැනි static assets මෙහි තබනු ලැබේ.
  • /src (Source): අපගේ React application එකේ සියලුම කේත (components, CSS, etc.) අඩංගු වන්නේ මෙම folder එක තුළයි. අප වැඩිපුරම වැඩ කරන්නේ මෙම folder එක තුළයි.
  • /src/App.jsx: අපගේ යෙදුමේ ප්‍රධාන component එක. මුලින්ම browser එකේ දිස්වන්නේ මෙම file එකේ ඇති අන්තර්ගතයයි.
  • /src/main.jsx: අපගේ React application එක public folder එකේ ඇති `index.html` file එකට සම්බන්ධ කරන (mount කරන) ප්‍රධාන file එකයි.
  • package.json: Project එක පිළිබඳ විස්තර (නම, version), dependencies (අවශ්‍ය packages), සහ scripts (`npm run dev` වැනි) අඩංගු වන වැදගත් configuration file එකකි.

Development Server එක Run කිරීම

ඔබගේ React application එක browser එකේ බැලීම සඳහා development server එක run කළ යුතුය. ඔබගේ terminal එකේ (project folder එක තුළ සිටින බවට වග බලා ගන්න), පහත command එක ඇතුළත් කරන්න:

npm run dev

මෙමගින් development server එක ආරම්භ වන අතර, terminal එකේ `http://localhost:5173/` වැනි URL එකක් පෙන්වනු ඇත. එම URL එක ඔබගේ web browser එකේ open කළ විට, ඔබට React හි default welcome page එක දැකගත හැක.

**Hot Reloading:** Vite හි ඇති විශේෂ වාසියක් නම්, ඔබ `src` folder එකේ ඇති file එකක් edit කර save කළ විගස, browser එකේ ඇති පිටුව refresh නොකරම එම වෙනස්කම් ස්වයංක්‍රීයව දිස්වීමයි.

Module 2: කුඩා කාර්යය (Mini Task)

ඔබගේ project එකේ ඇති src/App.jsx file එක VS Code වලින් විවෘත කරන්න.

එහි ඇති HTML වලට සමාන කේතය සොයාගෙන, `

` ටැගය තුළ ඇති පාඨය (text) "මගේ පළමු React App එක" ලෙස වෙනස් කර file එක save කරන්න.

දැන් browser එක දෙස බලන්න. ඔබ සිදුකළ වෙනස ක්ෂණිකව එහි දිස්වෙනවාදැයි පරීක්ෂා කරන්න!

පෙර කොටස ඊළඟ කොටස: Components