මුල් ලිපියෙන් අපි කතා කලා react වලට අදාල වැදගත් මූලික කරුණු පිලිබඳව. මේ ලිපියෙන් අපි react එක්ක වැඩ කරන්න පටන් ගන්න විදිය ගැන සලකා බලමු.
React වල folder structure එක.
React එක්ක වැඩ කරන්න පටන් ගන්නනම් අපිට react වලට අදාල folder structure එක හදා ගන්න අවශ්‍ය වෙනව. මේක අපිට github එකෙන් download කරගන්නත් පුලුවන්. ඒ වගේම අපිට manually හදා ගන්නත් පුලුවන්.
මුලින්ම මේ link එකෙන් github එකේ තියන react source folder එක download කරගන්න.
අපි දැන් මේකෙ තියන files, folders ගැන අවබෝධයක් ලබා ගනිමු.
Download කරගත්ත zip file එක extract කරපුවම අපිට source folder එක හම්බ වෙනව.
ඒක ඇතුලෙ පහත විදියට folder structure එක බලා ගන්න පුලුවන්.
අපි එකින් එක මේ පිලිබඳ සාකච්ඡා කරමු.
Source folder
මේ folder එකෙන් වෙන්නෙ application එකට අදාල javaScript modules ටික තියාගෙන ඉන්න එක. Modules කියන්නෙ මොනවද කියන එක ගැන කලින් ලිපියෙන් විස්තර සහිතව කතා කලා මතක ඇති.
Index.html
මේ file එකේදි තමයි react components වලින් එවන දේවල් display කරන්නෙ.
බැලූ බැල්මට මේක වැඩිය codes නැති HTML file එකක් නේද? නමුත් මේකට අදාල හැම දෙයක්ම provide කරන්නෙ components වලින්.
HTML file එකෙන් කරන්නෙ content එක display කරන එක විතරයි. javaScript වලින් මේක පිටිපස්සෙ ලොකු වැඩක් කරල දෙනව. ඒ ගැන ඉදිරියේදී සාකච්ඡා කරමු.
Package.json
මගේ mean blog post ටික කියෙව්වනන් package.json file එක ගැන හොඳ අවබෝධයක් ලබා ගන්න පුලුවන්. මේකෙන් වෙන්නෙ application එකට අදාල details ටික තියාගෙන ඉන්න එක. අපි application එකේදි use කරන packages ගැන විස්තර තියෙන්නෙත් මේ file එකේම තමයි.
මේ image එකෙන් පෙන්නන්නෙ package.json file එකේ sample content එකක්.
Webpack.config.js
මේ file එක ඕනෙ වෙන්නෙ JSX transpile කරන්න අදාල වෙන dependancies තියාගන්න.
කලින් ලිපියේ කිව්ව විදියට modules සියල්ලටම අදාලව එක JS file එකක් තමයි හැදෙන්නෙ transpile කලාට පස්සෙ. මේකෙන් කරන්නෙ නිවැරදි oder එකට modules pack කරන එක.
සරලම විදියට කිව්වොත් webpack කියන්නෙ modules bundle එකක්.
දැන් අපිට කරන්න තියෙන්නෙ dependancies install කරගෙන වැඩේ පටන් ගන්න. මේ වචන වලට බය වෙන්න එපා. මේව පොඩි දේවල් විතරයි.
React සමග application එකක් නිර්මාණය කරගනිමු.
අපි ලඟ දැන් තියනව project folder එක. දැන් project folder එක ඇතුලෙදි cmd prompt එක open කරගන්න. මේක කරගන්න පුලුවන් Shift + right_click කරල එන menu එකෙන් open command window here කියන එක click කරල.
දැන් අපි dependancies install කරගනිමු.
Command prompt එකේ “npm install” කියන command එක run කලාම package.json file එකේ තියන packages ටික install වෙනව. මේ දේ කලාට පස්සෙ අපිට බලාගන්න පුලුවන් node_modules කියන folder එක අපේ project folder එකේ හැදිල තියනව.
තව එක step එකකින් passe අපිට වැඩ පටන් ගන්න පුලුවන්. හිතපු තරම් අමාරු නෑ නේද?
දැන් කරන්න තියෙන්නෙ command prompt එකේ “npm start” කියන command එක run කරන එක.
එතකොට ටික වෙලාවක් අරගෙන application එකට අදාල environment එක හදා ගනී. මේ වැඩේ ඉවර උනාම අපේ වැඩ ටික පටන් ගන්න පුලුවන්.
දැන් අපි වැඩේට සූදානම්. මීළඟ ලිපියෙන් අපි අපේ පලවෙනි component එක හදාගෙන පුරුදු විදියටම Hello World කියන text එක display කරල වැඩ පටන් ගනිමු…
මීළඟ ලිපියෙන්…
පළමු component එක create කරගැනීම
Component එකක් භාවිතයෙන් UI එකේ text එකක් display කරගැනීම.