React පාඩම් මාලාව 🚀 - 1 වන පාඩම: ගමේ භාෂාවෙන් React වලට Entry එකක්! 😎

React පාඩම් මාලාව 🚀 - 1 වන පාඩම: ගමේ භාෂාවෙන් React වලට Entry එකක්! 😎

ආයුබෝවන් යාළුවනේ! 👋 මම චමික 😊. ඔන්න අද ඉඳන් අපි පට්ටම වැඩක් පටන් ගන්න යන්නේ - React කියන මරුම JavaScript library එක ගැන සිංහලෙන්ම, සරලවම ඉගෙනගන්න එක! 🔥 Programming කිව්වම බය හිතෙන අයටත්, English වලින් තේරුම් ගන්න අමාරු අයටත්, React ලෝකෙට ලේසියෙන්ම පියවර තියන්න උදව්වක් දෙන්න තමයි මේ blog series එක ගේන්නේ. අපි එහෙනම් කට්ටියම එකතු වෙලා, ගම්මැද style එකටම React ඉගෙන ගමුද? 😄

💡 React කියන්නේ ඇත්තටම මොකක්ද බං? 🤔

සරලවම කිව්වොත්, React කියන්නේ Facebook (දැන් Meta 🧘‍♂️) එකේ අය හදපු, user interfaces (ඒ කියන්නේ අපි screen එකේ දකින දේවල්, buttons, forms වගේ ඒවා 🎨) හදන්නම විශේෂවුණු JavaScript library එකක්. මේක library එකක් කිව්වේ, ඔයාගේ project එකට ඕන විදිහට එකතු කරගෙන පාවිච්චි කරන්න පුළුවන් නිසා (Framework එකක් වගේ නීති ගොඩකට කොටු වෙන්නේ නෑ).

React පට්ට වෙන්න හේතු කීපයක් තියෙනවා:

• UI හදන්න උපන් හපනා 💪: Website එකක හරි App එකක හරි user දකින කොටස (User Interface) හදන එක React පාවිච්චි කරලා හරිම ලේසියි, පිළිවෙලයි.
• Components කියන සංකල්පය 🧱: හිතන්නකෝ LEGO කෑලි වගේ කියලා. React වලදී අපි UI එක හදන්නේ පොඩි පොඩි, ආයේ පාවිච්චි කරන්න පුළුවන් කෑලි (Components) එකතු කරලා. මේ නිසා code එක පිරිසිදුයි, manage කරන්න ලේසියි, එකම code එක ආයේ ආයේ ලියන්න ඕන නෑ. 🧩
• සුපිරි වේගයක්! ⚡: React "Virtual DOM" කියන concept එකක් use කරනවා. සරලවම කිව්වොත්, page එකේ වෙනස් වෙන්න ඕන තැන විතරක් හරිම ඉක්මනට update කරනවා මිසක්, මුළු page එකම ආයේ load කර කර ඉන්නේ නෑ. ඒ නිසා user ට දැනෙන්නේ smooth, වේගවත් අත්දැකීමක්. 💨

🤔 React පාවිච්චි කරන්නේ කවුද? කොහෙද? 🏢💼

අද වෙනකොට ලෝකේ ලොකු පොඩි ගොඩක් tech companies එයාලගේ websites සහ apps හදන්න React මත depend වෙනවා. මේකේ තියෙන power එකයි, flexibility එකයි නිසා developersලා අතරෙත් React හරිම ජනප්‍රියයි. 🌍

උදාහරණ කීපයක්:

• Facebook & Instagram (හදපු අයම පාවිච්චි කරනවානේ! 😎📸)
• Netflix (ඔයා බලන films/series list එක එහෙම 🎥)
• Uber & Airbnb (Booking interfaces එහෙම 🚗🏠)
• WhatsApp Web
• BBC, New York Times වගේ ප්‍රවෘත්ති වෙබ් අඩවිත් පාවිච්චි කරනවා.

🛠️ වැඩේට බහිමු! React Install කරගන්නේ කොහොමද?

React එක්ක වැඩ පටන් ගන්න නම්, ඔයාගේ පරිගණකයේ Node.js install කරලා තියෙන්නම ඕනේ. 💻 Node.js නැත්නම්, එයාලගේ official website () එකට ගිහින් download කරලා install කරගන්න. (LTS version එක recommend කරන්නේ).

Node.js install කරගත්තට පස්සේ, React project එකක් හදාගන්න තියෙන්නේ හරිම simple command එකක් ගහන්න විතරයි. ඔයාගේ computer එකේ Terminal එක (Command Prompt හෝ PowerShell වගේ එකක්) open කරලා මේ command එක type කරන්න:

• npx කියන්නේ Node.js එක්ක එන tool එකක්. මේකෙන් අපිට packages (React app හදන tool එක වගේ) download නොකරම run කරන්න පුළුවන්.
• create-react-app කියන්නේ React team එකෙන්ම හදපු, React project එකක් ඕන කරන හැමදේම එක්ක හදලා දෙන tool එක.
• my-first-react-app කියන්නේ ඔයා හදන project එකට දාන නම. ඔයාට කැමති නමක් මෙතනට දෙන්න පුළුවන් (හිස්තැන් නැතුව, simple english අකුරුවලින් දෙන්න). 😉

මේ command එක ගැහුවම පොඩි වෙලාවක් යයි project එක හැදෙන්න. ⏳ ඉවර වුණාම, ඔයා හදපු project folder එක ඇතුලට යන්න මේ command එක ගහන්න:

දැන් ඔයා ඉන්නේ project එක ඇතුලේ. App එක run කරලා බලන්න මේ command එක ගහන්න:

මේක ගැහුවම auto ම ඔයාගේ web browser එකේ අලුත් tab එකක default React app එක open වෙයි. 🎉 එහෙම ආවොත්, සුභ පැතුම්! ඔයා සාර්ථකව React project එකක් setup කරගත්තා! 🥳

📦 මේ මොන Folders ද? React App එකේ ව්‍යුහය 📁

create-react-app වලින් project එක හැදුවම ඔයාට folders වගයක් පෙනෙයි. මුලින්ම ටිකක් අවුල් වගේ හිතෙයි, ඒත් මේ ප්‍රධාන ඒවා ටික දැනගත්තම ඇති:

දැනට src folder එක ඇතුලේ තියෙන App.js සහ index.js තමයි අපි වැඩියෙන්ම පාවිච්චි කරන්නේ. අනිත් ඒවා ගැන පස්සේ බලමු. 👍

🔚 අද පාඩමේ සාරාංශය ✍️✅

• React කියන්නේ User Interfaces (UI) හදන්න තියෙන සුපිරි JavaScript library එකක්.
• මේක Components (නැවත භාවිත කළ හැකි කෑලි) මත පදනම් වෙලා තියෙන නිසා code එක පිළිවෙලයි, ලේසියි. 🧱
• Virtual DOM නිසා React apps හරිම වේගවත්. ⚡
• Node.js install කරලා, npx create-react-app your-app-name command එකෙන් ලේසියෙන්ම React project එකක් පටන් ගන්න පුළුවන්. 🎉
• src folder එකේ තමයි අපි අපේ React code ලියන්නේ. 💻

📌 ඊළඟ පාඩමෙන්... 🔜

අපි බලමු කොහොමද අපේම පළවෙනි React Component එක හදාගන්නේ කියලා. App.js එකේ තියෙන දේවල් ටිකක් වෙනස් කරලා, අපිට ඕන දෙයක් screen එකේ පෙන්නන්න හදමු. 💪

වැදගත්: අනිවාර්යයෙන් ඔයාගේ machine එකේ Node.js install කරලා තියාගන්න අමතක කරන්න එපා! 😉

🙏 Thanks කියලා Comment නොකර යන්න එපා! 🫶

මේ වගේ සිංහලෙන්ම, සරලවම React ඉගෙනගන්න කැමති නම්, ඔයාගේ අදහස් පහලින් comment කරන්න. 👍 ප්‍රශ්න තියෙනවා නම් අහන්න. ඔයාලගේ support එක තමයි මට මේ series එක දිගටම කරගෙන යන්න motivation එක! ❤️

එහෙනම්, ඊළඟ Episode එකෙන් හම්බවෙමුද මචංලා? 😁👋