React JS එක්ක වැඩ කරමු. (part - 1)

මේ post series එකෙන් මම කතා කරන්නෙ ReactJS ගැන.

මේකෙදි මම බලාපොරොත්තු වෙනව ඉතාම සරල විදියට basic concepts වල ඉඳන්ම react ගැන කතා කරන්න.

මොන තරම් හොඳට coding ගැන දැනගෙන හිටියත් basic නැතිනම් අපිට ඉස්සරහට යන්න අමාරුයි. මේ නිසා අපි basic වලින්ම පටන් ගනිමු.

ReactJs කියන්නෙ Facebook එකෙන් නිර්මාණය කරපු user interface සඳහා භාවිතා කරන්න පුලුවන් open source Java script library එකක්.

React අද වෙනකොට ලෝකෙ ඉතාමත් ප්‍රසිද්ධ technology එකක් වෙලා තියනව. මේකට හේතු අපි කතා කරමු.

React වලින් හදපු application එකක් ඉතාම පහසුවෙන් Browser එකේ, server එකේ වගේම mobile devices වලට support කරනව.

ඒ වගේම තවත් දෙයක් තමයි reactive විදියට User Interface නිර්මානය කරගැනීමේ පහසුව. මේ දේ කරන්න පුලුවන් වෙනත් technologies අතර React ඉදිරියෙන් ඉන්නව.

උදාහරණයක් විදියට මේ අවස්තාව ගමු. හිතන්න අපි messenger හෝ whatsapp හෝ වෙනත් chat app එකක් ගැන. අපි මේ වගේ app එකකින් තවත් කෙනෙකුට message එකක් send කලාම ඒක deliver වුනා කියල පෙන්නනව. ඒ message එක read කලාම “seen” status එක පෙන්නනව. ඒ වගේම තමයි message එකක් type කරද්දි “typing” කියල පෙන්නනව.

මේ දේ වෙන්නෙ කොහොමද කියල නිකමටවත් හිතුවද? අන්න ඒ වගේ දේවල් අපිට ඉතා පහසුවෙන් react වලදි කරගන්න පුලුවන්.

අපි react භාවිතා කරද්දි හමු වෙන මූලික දෙයක් තමයි components. මේ දේ නිසා අපේ application එකේ complexity එක අඩු කරගන්න පුලුවන්. මේ දේවල් ගැන විස්තර සහිතව ඉදිරියේදී කතා කරමු.

React ගැන කතා කරද්දී අපිට හමු වෙන දේවල් ටිකක් ගැන දැන් කතා කරමු. මේ දේවල් ටිකනම් ඉතා වැදගත්. ඒ නිසා අවබෝධයක් ලබාගන්න උත්සහ කරන්න. බැරි වෙන්නෙ නෑ. මොකද මේ දේවල් ඉතාමත් සරල දේවල්.

NodeJs සහ npm (node package manager) එක.

අපි react එක්ක වැඩ කරනවනන් අපේ computer එකේ node install කරල තියන එක ඉතා වැදගත්. ඇත්තටම මොකටද node????? අපේ react application එකේ backend එකටද? Node ගැන අපි දන්නෙ නෑනෙ? ඒ නිසා අපිට react බැරි වෙයිද?

මේව නේද දැන් තියන ප්‍රශ්න??? නෑ එහෙම කිසි ප්‍රශ්නයක් නෑ. අපිට මෙතනදි node ඕනෙ වෙන්නෙ react වලදි භාවිතා කරන්න වෙන packages එක්ක වැඩ කරන්න වෙන්නෙ npm එහෙම නැත්නම් node package manager එක හරහා නිසා.

අපි node install කරද්දී npm එකත් automatically install වෙනව. මේ නිසා තමයි අපි node install කරගන්න ඕනෙ. Node ගැන වගේම npm එක ගැනත් විස්තරයක් මගේ MEAN blog post වල තියෙන දෙවනි post එකේ තියනව (MEAN - Part 2). පුලුවන්නම් ඒක බලන්න.

https://nodejs.org/en/

මේ තියන link එකෙන් අපිට node setup එක download කරගෙන install කරගන්න පුලුවන්.

Components

කලින් කිව්ව වගේ components කියන්නෙ react වලදි ඕනෙ වෙන ප්‍රධාන දෙයක්. අපි සංකීර්ණ එක වැඩක් කරගන්න component කිහිපයක උදව් ලබාගන්නව. මෙතනදි වෙන්නෙ සංකීර්ණ කාර්යය කොටස් වලට වෙන් කරගෙන එක් එක් component වලට අදාලව බෙදල දෙන එක.

උදාහරණයක් විදියට පහත interface එක සලකමු.

මේ තියෙන්නෙ youtube වගේ video viewer එකක්. මේකෙ තියන කොටස් components වලට වෙන් කරගෙන තියන විදිය තමයි මේකෙන් පෙන්නන්නෙ. මෙතනදි components 3ක් දකින්න පුලුවන්.

• Search bar

• Video

• Thumbnails

මේවට අදාල කාර්යයන් වෙන වෙනම components වලින් කරල දෙනව.

Redux JS

Redux කියන්නෙත් react වගේම open source java script library එකක්. මේකෙදි මූලික වශයෙන් කරන්නෙ application එකේ state එක manage කරන එක. Redux අපිට react සමග වගේම angular සමගත් භාවිතා කරන්න පුලුවන්. මේකෙදි වෙනස් environment වලට support කරන විදියට, ඒවට අවශ්‍ය ලෙස හැඩගැහෙන්න පුලුවන් විදියට application හදන්න පුලුවන්.

මූලිකවම redux කියන්නෙ react එක්ක එකතු වෙලා user interface හදන library එකක් කියල මතක තබා ගන්න.

Ecma Script 6 (ES6)

මේ කියන්නෙ JavaScrit වල අලුත් version එකක්. මේ වෙද්දිනම් ES7 ඇවිත් තියෙන්නෙ. නමුත් අපි වැඩ කරන්නෙ ES6 එක්ක.

ES6 වලදි අපිට හමු වෙන සමහර syntax javaScript වලට වඩා ටිකක් වෙනස්.

සරලම උදාහරණයක් ගමු.

Const App = ( ) => {

//Body

}

මේ තියෙන්නෙ ES6 වලින් තියන javaScript function එකක්. Syntax වල වෙනස දැන් තේරුම් ගන්න පුලුවන් නේද?

JSX (Java Script syntax extension)

JSX කියන්නෙ java script file එකක් ඇතුලෙදි HTML tags පාවිච්චි කරන්න පුලුවන් ආකාරයක්. දැන් ප්‍රශ්නයක් එන්න පුලුවන් මොකටද JS ඇතුලට HTML tags කියල. ඇත්තටම react වලදි මේක ඉතා ප්‍රයෝජනවත් වෙනව. අපි මේ උදාහරණයත් එක්ක ඒ ගැන කතා කරමු.

ඊට කලින් කියන්න ඕනෙ මේ syntax තේරුනේ නෑ කියල ගැටලුවක් නෑ. මේක සරල පැහැදිලි කිරීමක් පමණයි.

Const App = function( ) {

return <div> Hello World </div>;

}

මේ JS function එක ඇතුලෙ තියන HTML div tag එකට අදාල කොටසට තමයි JSX කියන්නෙ. Function එක call කලාම සාමාන්‍ය අවස්ථා වලදී කාර්යයක් වෙනව වගේ මෙතනදි වෙන්නෙ HTML කොටස display කරන එක.

තේරුම් ගන්න පුලුවන් නේද මොන තරම් වැදගත් වෙනවද කියල.

Transpiler (Web pack + Babel)

අපි react වලදි code කරන්න භාවිතා කරන්නෙ කලින් කිව්ව වගේ ES6, JSX වගේ දේවල්. ගොඩක් වෙලාවට මේ syntax සමහර browsers වලට support කරන්නෙ නෑ. මේ නිසා browser එකට තේරෙන විදියට අපේ code එක convert කරන්න තමයි transpiler ඕනෙ වෙන්නෙ. Babel කියන transpiler එකෙන් මේ දේ කරගන්න පුලුවන්.

මේ syntax වෙනස මොන වගේද කියල පහත උදාහරණ මගින් තේරුම් ගන්න පුලුවන්.

මේක බැලුවම වෙනස වටහා ගන්න පුලුවන් නේද? ඒ වගේම අපිට මොන තරම් පහසුවක්ද ES6 වගේ JavaScript versions වලින් ලැබෙන්නෙ. නැත්නම් අපිට code කරන්න වෙන්නෙ දකුනු පැත්තෙ පේන විදියට තමයි.

අනිත් දේ තමයි transpile කලාට පස්සෙ javaScript files සියල්ලටම අදාල එක file එකක් ලැබෙනව.

අන්තිමට source code එකට අදාල වෙන්නෙ index.html file එක, js file එක වගේම css file එකක් විතරයි.

මේ files තුනෙන් තමයි user interface එක ලැබෙන්නෙ.

පහත රූපයෙන් මේ කතා කරපු සියලු දේවල් සරලව දක්වල තියනව.

මම හිතනව react වල මූලික දේවල් බොහෝ ප්‍රමාණයක් මේ කොටසින් ඔබ දැන ගන්න ඇති කියල. React වල තවත් ඉතා වැදගත් කොටසක් ඉදිරි ලිපියෙන් සාකච්ඡා කරමු.

මීළඟ ලිපියෙන්…

• React වල folder structure එක

• React එක්ක වැඩ කරන්න පටන් ගන්න විදිය