පාඩම 2: පළමු React App එක නිර්මාණය කිරීම 🚀

නවීන React app එකක් සෑදීමට ඇති පහසුම ක්‍රමය වන `Vite` භාවිතා කර අපගේ පළමු project එක සාදා ගනිමු.

අපි නිර්මාණය කරන්නේ කුමක්ද? (Our Goal)

මෙම පාඩම් මාලාව අවසානයේදී, අපි React භාවිතයෙන් පහත දැක්වෙන සරල Counter App එක නිර්මාණය කරමු. මෙය React හි මූලික සංකල්ප වන Components, State, සහ Events ක්‍රියා කරන ආකාරය තේරුම් ගැනීමට ඉතා හොඳ ආරම්භයකි.

React Counter App (Final Preview)

0

React Project එක නිර්මාණය කිරීම

Command Prompt (CMD) හෝ Terminal එක open කර, ඔබට project එක සෑදීමට අවශ්‍ය folder එකට යන්න. ඉන්පසු පහත command එක run කරන්න. මෙය `Vite` නම් වේගවත් build tool එක භාවිතයෙන් React project එකක් සාදා දෙනු ඇත.

npm create vite@latest

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

✔ Project name: … - project එකේ නම දෙන්න (උදා: react-counter-app)
✔ Select a framework: › - ලැයිස්තුවෙන් React තෝරන්න.
✔ Select a variant: › - JavaScript තෝරන්න.

ඉන්පසු, අවශ්‍ය සියලුම files සහ folders අප වෙනුවෙන් නිර්මාණය වනු ඇත.

Project එක Run කිරීම

Project එක සෑදූ පසු, එම folder එකට ඇතුළු වී, අවශ්‍ය packages install කර, app එක run කිරීමට පහත commands පිළිවෙලින් භාවිතා කරන්න.

cd react-counter-app
npm install
npm run dev

cd react-counter-app: සෑදූ project folder එකට ඇතුල් වීම.
npm install: Project එකට අවශ්‍ය සියලුම packages (libraries) install කිරීම.
npm run dev: Development server එකක් start කිරීම.

Server එක start වූ පසු, terminal එකේ පෙන්වන local address එක (උදා: `http://localhost:5173/`) ඔබගේ web browser එකේ open කළ විට, ඔබට React හි default welcome page එක දැකගත හැකිවනු ඇත. ඊළඟ පාඩම් වලදී, අපි මෙම default පිටුව ඉවත් කර, ඉහත preview එකේ ඇති Counter App එක නිර්මාණය කරමු.

⬅️ මුල් පිටුවට