අපි react වලට අදාලව මූලික කරුණු ගැන කතා කරල ඉවරයි. මේ ලිපියෙන් අපි කතා කරන්නෙ වැදගත්ම කොටස. ඒ කියන්නෙ components භාවිතා කරල UI එක හදා ගන්න ආකාරය පිලිබඳව.
අපි මූලික කරුණු වලින්ම පටන් ගනිමු. මේ steps ටික තේරුම් ගන්න උත්සහ කරන්න. අමාරු දේවල් වගේ පෙනුනට වෙන වෙනම සලකල බලද්දි මේව සරල දේවල්.
Component එකක් හදාගන්න කලින් අපි බලමු හදා ගන්න බලාපොරොත්තු වෙන components වලින් වෙන්න යන දේ මොකද්ද කියල.
අපි index.html file එක සලකා බලමු.
Index.html
මේක කලින් කතා කලා වගේම සාමාන්‍ය html file එකක්. නමුත් මේකෙ වැඩිපුර coding නෑ. අපි මේකෙ තියන code parts ගැන වෙන වෙනම සලකල බලමු.
Head
සාමාන්‍ය විදියටම head tag එක අපිට මෙතනදිත් භාවිතා කරන්න පුලුවන්. පේනව ඇති සාමාන්‍ය විදියටම external CSS file එකක් මෙතනට අරගෙන තියන විදිය. අපි Bootstrap වගේ භාවිතා කරනවානම් මේක ඉතා වැදගත්.
මොකද කියනවනන් මෙතනට තමයි final output එක එන්නෙ ඕනෙම component එකකින්. ඒ හැම දේකටම අදාල CSS තියනවනන් මේකෙදි භාවිතා කරන්න පුලුවන්.
Components වලට අදාලව වෙන වෙනම CSS files තියනවනන් ඒව භාවිතා කරන්න වෙනත් විදියක් තියනව. ඒ ගැන ඉදිරියේදී කතා කරමු.
Body
මේ කොටස තමයි වැදගත්ම කොටස.
එක div tag එකක් සහ script tag එකක් තිබුනට මෙතනට තමයි තියන හැම component එකකම output එක ඇවිත් display වෙන්නෙ. හැම දේම display කරන්න අදාලව එකම එක div එකයි තියෙන්නෙ. ඒකට id එකක් දීල තියනව root කියල.
මොහොතකට මේ කියන්න යන දේ ගැන හිතල බලන්න.
javaScript මතකනන් දන්නව ඇති අපිට javaScript file එකක් හරහා HTML file එකක තියන element එකක් ඒකට අදාල ID එකෙන්, Class එකෙන් හෝ tag එකෙන් identify කරගන්න පුලුවන්.
document.getElementById( ‘some-ID’);
document.getElementByClassName( ‘some-class’);
document.getElementByTagName( ‘HTML tag’);
මේ ඕනෙම ආකාරයකට HTML file එකක තියන elements access කරන්න පුලුවන්.
මේ HTML file එකට අදාලව div එකක් සහ එම div එකට ID එකක් තියනව. ඉතින් අපිට හිතාගන්න පුලුවන් නේද ඕනෙම javaScript file එකක ඉඳන් මේක access කරන්න පුලුවන් බව.
ඒකම තමයි මෙතනදි වෙන්නෙත්. Component එක හදාගත්තම මේ කිව්ව දේ තේරුම් ගන්න පුලුවන්.
දැන් අපි සූදානම් වෙන්නෙ අපේ පලමු Component එක හදාගන්න. දැනටම අපි ලඟ තියනව App.js කියන file එක. මේකත් component එකක්ම තමයි. අපි මේ ගැන කතා කරමු.
Component එකක් වෙන්නනම් තියෙන්න ඕනෙ ප්‍රධාන දේවල් කිහිපයක්ම තියනව.
මුලින්ම අපි import කරගන්න ඕනෙ කරන දේවල් කිහිපයක් තියනව. ඒ තමයි react සහ react-DOM
Component එකක් හදා ගන්න මූලිකවම react import කරගන්නව වගේම component එක render කරන්න එහෙමත් නැත්නම් සරලව කිව්වොත් මේක display කරන්න අවශ්‍ය ආකාරයට සකස් කරන්න react-dom import කරගන්න ඕනෙ.
import React, { Component } from 'react';
import {render} from 'react-dom';
මේ කරල තියෙන්නෙ ඒ දේ තමයි.
දැන් අපි කරන්න යන්නෙ component එකට අදාලව class එකක් හදාගන්න එක. මොකද කියනවනන් අපිට අවශ්‍ය හැම දෙයක්ම වෙන්නෙ මේ කියන class එක මගින් තමයි.
අපි ඕනෙ කරන class එක හදා ගන්නෙ Component කියන class එක extend කරල. OOP concepts වල inheritance ගැන අවබෝදයක් තියනවනන් මේ දේ එතරම් අපැහැදිලි වෙන්නෙ නෑ.
මේකෙදි කියන්නෙ දැනට තියන Component කියන class එකට අදාල සියලුම ගති ගුණ එක්ක තමයි අපි අලුත් class එකක් හදාගන්නෙ.
class App extends Component { }
මේ තියෙන්නෙ අලුත් class එක හදා ගන්න ආකාරය. App කියන්නෙ අලුතෙන් හදන class එකේ class name එක.
Component එකක තවත් අනිවාර්යය කොටසක් තමයි render method එක. මේ method එක ඇතුලෙ තමයි JSX part එක තියෙන්නෙ.
Render method එක ඇතුලෙදි JSX කොටස return( ) කියන key word එකත් එක්ක තමයි තියෙන්නෙ. ඒ කියන්නෙ මෙන්න මේ විදියට.
render(){
return (
<div>
<h1>Hello World</h1>
</div>
);
}
Component එකකට අදාල තවත් වැදගත් කොටසක් තමයි component එකට අදාල content එක display කරන එක. ඒ කියන්නෙ render කරන එක.
මේ දේ කරන්න අපිට ආකාර කිහිපයක් තියනව.
එකක් තමයි component එක ඇතුලෙදිම අදාල UI එක render කරන්න පුලුවන්. එහෙම් නැත්නම් තියන component එකෙන් වෙනත් component එකකට export කරල ඒ component එකේදි render කරන්න පුලුවන්.
මේ ආකාර දෙකම භාවිතා කරන විදිය මේ ලිපි මගින් දැන ගන්න පුලුවන්.
අපි හඳුනා ගත්ත විදියට component එකක තියෙන්නෙ ඕනෙ අත්‍යවශ්‍ය කොටස් කිහිපයක් තියනව.
Import කරන කොටස
Class එක
Renser method එක
Return එක
Export කරන කොටස
මේ තියෙන්නෙ මේ දේවල් වලට අදාල සම්පූර්ණ component එක.
render(<App />, document.getElementById('root'));
මේ කොටස සලකන විට යම් විශේෂයක් තියනව. මම කලින්ම කිව්ව විදියට මෙතනින් තමයි අපේ index.html file එකට content එක JS භාවිතා කරල render කරන්නෙ.
මෙතනදි <App /> කියන self closing tag එකට දෙන්නෙ component එකේ අපි හදපු class එකේ name එක.
මේක ES6 syntax එකක්.
App කියන class එකට අදාල content එක “root” කියන ID එක තියන element එකේ render කරන්න කියල තමයි මේ කියල තියෙන්නෙ.
දැන් පැහදිලි වෙනව නේද index.html file එකේ div එකට id=”root” කියල දෙන්න හේතුව.
දැන් අපිට browser එකේ localhost:8080 කියන එක URL line එකට දුන්නම මේකෙ output එක බලා ගන්න පුලුවන්.
පහත දැක්වෙන image එකෙන් අපිට මේ කරපු දේ සරලව පැහැදිලි කරගන්න පුලුවන්.
මේ ලිපියෙන් අපි වැදගත් කරුනු රාශියක් ගැන කතා කලා. මීළඟ ලිපියෙන් මේ දේ තවත් ඉදිරියට ගෙන යමු.
මීළඟ ලිපියෙන්…
Component කිහිපයක් සම්බන්ධ කරගැනීම
සරල UI එකක් නිර්මාණය කර ගැනීම.