React කියන්නේ මොකක්ද ? What is React ?

සරලවම කිව්වොත්, React කියන්නේ Web Pages සහ Web Applications වල අපිට ඇහැට පේන කොටස් (User Interfaces) හදන්න පාවිච්චි කරන JavaScript මෙවලම් පෙට්ටියක් වගේ දෙයක්. හරියට ඔයාගෙ Web Site තියෙන Buttons, Menu, Text Box වගේ දේවල් හදන්න උදව් වෙන tool එකක්.

මේක මුලින්ම හැදුවේ Facebook (දැන් Meta) සමාගම.

React වල තියෙන ප්‍රධානම සංකල්පය තමයි “කොම්පෝනන්ට්ස්” (components) කියන එක. හිතන්න ඔයාගෙ Web Site එක lego වලින් හදනවා කියලා. එක lego කෑල්ලක් වගේ තමයි එක Components එකක් කියන්නේ. උදාහරණයක් විදියට, Search bar එක එක Component එකක්, Log වෙන button එක තව එකක්, උඩ තියෙන navigation bar එක තවත් එකක්. මේ පොඩි පොඩි කොටස් වෙන වෙනම හදලා, පස්සේ එකට එකතු කරලා සම්පූර්ණ Web Site හදාගන්න පුළුවන්. මේ ක්‍රමය නිසා Code එක පිළිවෙලට තියාගන්න, කළමනාකරණය කරන්න සහ නැවත නැවත පාවිච්චි කරන්න ලේසියි.

React පටන් ගන්න මොනවද ඕන වෙන්නේ?

React වලින් වැඩ කරන්න පටන් ගන්න කලින් ඔයාගෙ Computer එකේ අත්‍යවශ්‍ය දේවල් දෙකක් install කරලා තියෙන්න ඕන.

1. Node.js: මේකෙන් කරන්නේ ඔයාගෙ වෙබ් බ්‍රව්සරයෙන් පිටත, ඒ කියන්නේ ඔයාගෙ කම්පියුටර් එකේම JavaScript කේතය ක්‍රියාත්මක කරන්න ඉඩ දෙන එක. React project එකක් හදද්දී මේක අනිවාර්යයෙන්ම අවශ්‍ය වෙනවා.
2. npm (Node Package Manager): ඔයා Node.js install කරද්දීම npm එකත් install වෙනවා. මේක හරියට library එකක් වගේ. ඔයාගෙ project එකට අවශ්‍ය වෙන React වගේ අමතර මෙවලම් සහ code Package install කරගන්න, කළමනාකරණය කරගන්න උදව් වෙන්නේ මේ npm තමයි.

ඔයාට Node.js නිල වෙබ් අඩවියට ගිහින් මේ දෙකම එකට download කරලා install කරගන්න පුළුවන්. Click Here to Download – Node JS

Install කරගෙන ඉවර උනහම අපි ඊලගට කරන්න ඕනේ Node JS Path එක හරියට Setup කරගන්න එක.

සාමාන්‍යයෙන් Node Js Install කරද්දි Environment Variable එකෙහි Path එක auto add වෙනවා. මුලින්ම Path එක Add වෙලාද කියලා Check කරන්න add වෙලා නම් මේ පියවර Skip කරන්න.

හරි.. දැන් අපි Computer එකේ search Bar එකට ගිහිල්ලා. Environment Variable නමින් Search කරලා open කරගන්න ඊට පස්සේ Advanced Tap යටතේ තියෙන Environment Variable කියන Button Click කර System Variables යටතේ New Button එක ඔස්සේ ගොස් Browse Directory ඔස්සේ ඔබගේ Node Js Installation File Path එක Selected කරගෙන Variable Name එකට – Nodejs ලෙස ලබ දී Ok click කරන්න.

Code Editor ?

ඒ වගේම ඔයාට Code කරන්න අවශ්‍ය කරන Code Editor Tool එකක් අවශය වෙනවා. මම ඔයාලට Recommend කරන්නේ Visual Studio Code බාවිත කරන්න කියලා.

Click Here to Download – Visual Code Studio

ඔයාගේ පළවෙනි React Project එක හදාගන්නේ කොහොමද?

Node.js සහ npm install කරගත්තට පස්සේ, React project එකක් හදන එක හරිම ලේසියි. ඒකට “Create React App” කියලා tool එකක් තියෙනවා. එක command එකකින් මුළු project එකටම අවශ්‍ය මූලික සැකසුම ඒකෙන් කරලා දෙනවා.

කෙසේ වෙතත් අපි මෙතනදි පරන Create React App Installation එක බාවිතා කරන්නේ නැහැ. මොකද එය දැන් යල්පැනගිහින් තියෙන නිසා.

අපි ඒ වෙනුවට Create කරන්නේ Vite React Project එකක්.

React App install කරද්දි විදි කීපයකට Setup කරගන්න පුලුවන් ඉතින් මම මෙතනදි ඉක්මන්ම ක්‍රමය බාවිතා කරනවා මුලින්ම අපි මෙහෙම පටන් ගමු.

මුලින්ම අපි අපේ Working Directory එක එහෙම නැත්නම් අපි Project කරන්නම හදාගත්ත Folder එකට අපි යනවා. මෙතනදි ඔයාට ඔයාගේ Project එකේ Path එක කැමති විදියට තියාගෙන ඔයාට Setup කරගන්න ඕනේ Folder ඇතුලට ගිහිල්ලා එහි තියෙන File Path එක Click කරලා එහි cmd ලෙස Type කරලා Enter Press කරනවා. ඊට පස්සෙ ඔයාට බලාගන්න පුලුවන් ඔයා selected කරගත්ත File පාත් එකත් එක්ක Terminal එකක් open වේවි.

කරන්න තියෙන්නේ මෙච්චරයි:

• පියවර 1: 

npm create vite@latest sample-project -- --template react

1. npm create vite@latest

• මේක හරියට ඔයා කෝකියාට කියනවා වගේ, “මට අලුත්ම රෙසිපියට (@latest) ‘වීට්’ (vite) කියන කෑම එක හදලා දෙන්න” කියලා.
• npm create කියන්නේ “අලුතෙන් යමක් හදන්න” කියන අණ.
• vite කියන්නේ React project හදන්න පාවිච්චි කරන හරිම වේගවත්, නූතන මෙවලමක් (tool). @latest කියන්නේ ඒකේ අලුත්ම version එක ගන්න කියන එක.

1. sample-project

• මේ ඔයාගේ ඕඩර් එකට දෙන නම. “මේ කෑම එකට ‘sample-project’ කියලා නම ගහන්න” වගේ දෙයක්.
• සරලවම, ඔයා හදන project එකේ ෆෝල්ඩරය හැදෙන්නේ මේ නමින්. ඔයාට මේ වෙනුවට කැමති නමක් දෙන්න පුළුවන්.

1. --

• මේ ඉරි කෑලි දෙකෙන් කරන්නේ ඔයාගේ ප්‍රධාන ඕඩර් එකයි, ඒකට දාන විශේෂ ඉල්ලීම් ටිකයි වෙන් කරන එක. “හරි, මගේ ඕඩර් එක ඕක. දැන් මට ඕන විදිය ගැන අහගන්න…” කියලා කියනවා වගේ.

1. --template react

• මේ තමයි ඔයාගේ විශේෂ ඉල්ලීම. “මේ කෑම එක හදද්දි, ‘රියැක්ට්’ (react) කියන අමුද්‍රව්‍ය (template) එකෙන් හදන්න” කියලා කියනවා.
• මේකෙන් vite tool එකට කියනවා, ඔයාට project එක හදන්න ඕන React framework එක පාවිච්චි කරන්න පුළුවන් විදියට කියලා. එතකොට ඒකට අවශ්‍ය මූලික ෆයිල් ඔක්කොම ඒ විදියට හැදිලා එනවා.

එක වාක්‍යයකින් කිව්වොත්: මේ සම්පූර්ණ command එකෙන් කියවෙන්නේ, “අලුත්ම Vite මෙවලම පාවිච්චි කරලා, React වලට ගැලපෙන විදියට, sample-project’ කියන නමින් මට අලුත් project එකක් හදලා දෙන්න” කියන එකයි.

• පියවර 2:

Project එක හැදුනු ෆෝල්ඩරය ඇතුලට යන්න. (ඔයා project එකට දුන්න නම මෙතන type කරන්න).

cd sample-project

• පියවර 4:

React Install කරන්න.මෙතනදි තමයි අපේ Project එකට ඕන කරන Packages සහ NPM Install වෙන්නේ. මෙතන විනාඩියක් හෝ කිහිපයක් ගත වේ.

npm install 

• පියවර 5:

මේ command එක , ඔයාගෙ web browser එකේ අලුත් tab එකක React ලාංඡනය කැරකෙමින් තියෙන default පිටුවක් open වෙයි.

npm run dev

• පියවර 6:

මේ command එක ඔයාට පුලුවන් ඔයාගේ Project එක Command එකක් හරහාම ඔයා Used කරන Code editor එකෙන් open කරගන්න.

code .

ඔන්න ඔයා සාර්ථකව ඔයාගේ පළවෙනි React ඇප් එක හදාගෙන ඉවරයි! දැන් ඔයාට project File බලලා, ඔයාගෙම Components හදන්න පටන් ගන්න පුළුවන්.