React කුමක්ද? React Framework ගැන සියලුම දේ

React යනු JavaScript භාෂාව භාවිතා කරන එකක් වන, කෙටි කාලයක් තුල ලොව පුරා ඉතා ජනප්‍රිය වූ front-end library එකක් වෙයි. එය Web applications සහ mobile applications ක්‍රමලේඛනය කිරීමේදී පාවිච්චි කෙරේ.

React කුමක්ද?

React යනු Facebook සමාගම විසින් නිර්මාණය කරන ලද open-source JavaScript library එකකි. එය UI (User Interface) අංග නිර්මාණය කිරීම සඳහා භාවිතා කරයි. React එකේ අනෙකුත් features වලට Virtual DOM, Component-based architecture සහ JSX (JavaScript XML) ආදී විශේෂාංග ඇත.

React හි ප්‍රධාන ගුණාංග

1. JSX (JavaScript XML)

JSX කියනවා නම් JavaScript සහ HTML එකතු කර ගැනීමේ ක්‍රමයයි. React components ලිවීමේදී අපි HTML එක JavaScript කේතයටම අදාළව භාවිතා කරමු. එය කේතය පරිවර්තනය කර ගන්නා ලෙස වැඩ කරයි.

2. Virtual DOM

React Virtual DOM පද්ධතිය භාවිතා කරයි. මේ පද්ධතිය මඟින් page එකේ වෙනස්වීම් වලට අවශ්‍ය පමණක් update කිරීමට හැකි වන අතර, අනිත් DOM elements වලට කිසිදු බලපෑමක් නොමැත. මෙය performance එක වැඩි දියුණු කරනවා.

3. Component-based architecture

React applications වලට component-based architecture එකක් ඇති බවයි. Components හොඳින් පරිපූර්ණ කළමනාකරණයක් සහ ප්‍රතිචාරශීලී UI (responsive UI) නිර්මාණය කිරීමට ඉඩ දෙයි.

4. State සහ Props

• State: Component එකක ඇති local data එකක්. State වෙනස් වුවහොත්, React component එකක් නැවත render කරයි.
• Props: Parent component එකක data එකක් child component එකකට ලබාදීම.

React භාවිතා කරන්නේ ඇයි?

React භාවිතා කිරීමට විවිධ හේතු ඇත. එමෙන්ම එය විශාල community එකක් සහ වෙළඳපොළේ ඉහල ප්‍රචලිතතාවයක් ලබාගෙන ඇත.

1. Performance: Virtual DOM සහ efficient rendering මඟින් Web applications ලාම performance එක වැඩි වේ.
2. Reusable components: Components ලියන විදිහත් මගින් code එක නවතම හා reuse කළ හැකි වේ.
3. Rich ecosystem: React සමඟ ප්‍රසිද්ධ libraries සහ tools පිරිසක් අන්තර්ජාලය තුළ පවතිනවා.
4. SEO: React, server-side rendering (SSR) මගින් SEO හොඳින් පවත්වා ගැනීමට ඉඩ සලසයි.

React සදහා ආරම්භ කරන ආකාරය

React සමඟ ඔබේ ප්‍රථම application එකක් සාදන්න:

පියවර 1: Node.js ස්ථාපනය කිරීම

React සම්බන්ධයෙන් වැඩ කිරීමට Node.js යෙදවීම අවශ්‍ය වේ. Node.js වෙතින් Node.js සවිකරගන්න.

පියවර 2: Create React App භාවිතා කිරීම

create-react-app කියන tool එක මඟින් ඔබට පහසුවෙන් React application එකක් සාදා ගත හැක. CLI එක මඟින් පහත ලෙස command එක ක්‍රියාත්මක කරන්න:

npx create-react-app my-app
cd my-app
npm start

පියවර 3: Your First Component

මෙතනින් පසුව ඔබට "Hello, World!" component එකක් හෝ වෙනත් code එකක් ඔබගේ app එකේ දක්වා එය විමසන්න.

React සහ SEO

React වලින් Web pages සෑදීමේදී SEO සඳහා කුමන අවශ්‍යතාවය තියේ?

Server-side rendering (SSR): SSR මගින් React application එකේ content එක Google Bot සහ වෙනත් search engines ලා පහසුවෙන් access කරගත හැක.

React Helmet: Page title සහ meta descriptions configure කිරීමට React Helmet භාවිතා කළ හැක.

සාමාන්‍ය React SEO ක්‍රම

SSR (Server-Side Rendering): React app එක server-side rendering method භාවිතා කරමින් බලාපොරොත්තු SEO optimization සඳහා වැඩි හොඳ results ලබාදේ.

Meta Tags සහ Title Update: react-helmet භාවිතා කර Meta Tags update කරනවා. මෙය SEO optimization එකේ වැදගත් කාර්යයක්.

React එක Web development වල නව ඉදිරියකට ලැබෙනවා. එය අධික දක්ෂතාව, performance සහ flexibility එකක් දක්වා, Front-end development සඳහා විශාල ලෙස භාවිතා වේ. අන්තර්ජාලයේ Web applications හෝ mobile applications සාදන්නට React යෙදවීම පවා කුමන නිර්දේශයක් මත පදනම් වේ.

React හි ඉතිහාසය

React එකේ ඉතිහාසය 2011 දී Facebook සමාගම විසින් පටන් ගෙන, 2013 දී open-source වශයෙන් නිReleased කළේය. React පළමුවට හුදෙක් Facebook හි අන්තර්ගත කළමනාකරණය සඳහා භාවිතා කරන ලදි. එවක්, Facebook වෙත පමණක් සීමා නොවී, React එකේ බහුතරය developer මනෝභාවයක් ලෙස බලගතු වූ අතර, 2013 මැද සිට අන්තර්ජාලයේ පවා එය ලොව පුරා ඉතා ජනප්‍රිය වූ front-end library එකක් බවට පත්විය.

React එකේ ආරම්භය

React හි පටන් ගන්නා විට, Facebook හි developer John Resig (jQuery වෙත සම්බන්ධීකෘත) සහ Jordan Walke විසින් එය නිර්මාණය කළේය. එය HTML-based rendering පද්ධතියකට විකල්පයක් ලෙසම නිර්මාණය කරන ලදි, එවක් සම්පූර්ණ dynamic content rendering හෝ fast updating කිරීමේදී JavaScript භාවිතා කරන්නට අවශ්‍යතාවක් උදා වූ අතර, එය React එකේ අරමුණ විය.

Facebook විසින් React එකේ සංවර්ධනය

Facebook සමාගම React පද්ධතිය ක්‍රියාත්මක කිරීමේදී component-based approach එකක් හඳුන්වා දී ඇත. එමගින් user interface එකේ වෙනස්වීම් වෙනස් කිරීමේදී, page එකේ වාර්ථා නොවන DOM elements දැනටමත් refresh කිරීමේ අවශ්‍යතා නොමැතිව updates කරන්නට React Virtual DOM එක හැකිවීම සහ performance එක අතිරේක වේගයෙන් වැඩි වීමේ යෙදවුම් එකක් අරමුණක් විය.

Open-source වෙත React පතල

2013 වන විට, React එක open-source වශයෙන් නිReleased කිරීමක් සිදු විය. එමෙන්ම, React වලින් ප්‍රථම version එක තුළ වෙනස්වීම් සොයාගැනීම සහ performance improvement හඳුන්වා දී, එම එක API එක භාවිතා කරන ලද්දේ Facebook හා Instagram නිර්මාණය කිරීමට. මෙම එකතු කිරීම කෙරෙහි අපේක්ෂා කරන ලද speed සහ efficiency එවක් හුගාක් වැඩි වී තිබුණි.

React 16.0 සහ එහි නව features

React 16.0 විශාල ප්‍රවර්ධනයක් කරමින් 2017 දී නිReleased විය. එහි නව features මෙන්ම:

• Error boundaries: Error handling වඩා හොඳ ලෙස කළ හැකි විය.
• Fragments: DOM එකේ node-less elements භාවිතා කර components structure වැඩිදියුණු කිරීමට ඉඩ සලසයි.
• Hooks: React hooks කුටියක පවා State සහ lifecycle functionalities එකතු කිරීමට හැකියාව සලසයි.

React හට ලැබුණු ජනප්‍රියත්වය

React 16.x versions වලදී, එය React Native හා සම්බන්ධයෙන් mobile application development එකේද ප්‍රචලිතයි. React Native මඟින්, developers ලට iOS සහ Android app එකක් එකම කේත භාවිතා කරමින් නිර්මාණය කිරීමට ඉඩ සලසයි.

ඔබේ Web applications සදහා React යෙදවීම සරල හා දක්ෂ වේ. එය Facebook, Instagram, WhatsApp, Airbnb, Netflix වැනි විශාල companies හි භාවිතා වන technology එකක් බවට පත්විය.

Hooks යනු කුමක්ද? (React Hooks සම්පූර්ණ මාර්ගෝපදේශය)

Hooks කියන්නේ මොනවාද?

Hooks යනු React තුළ භාවිතා කරන විශේෂ සංකල්පයකි.
මෙම සංකල්පය මඟින් functional components වලට state, lifecycle, context වැනි React හැකියාවන් භාවිතා කිරීමට ඉඩ ලබාදේ.

React 16.8 සංස්කරණයෙන් පසු Hooks හඳුන්වා දී ඇති අතර, අද React development වල standard ක්‍රමය ලෙස සැලකේ.

React Hooks හඳුන්වා දුන්නේ ඇයි?

Hooks හඳුන්වාදීමට පෙර React හි:

• State පාලනය කළ හැකිව තිබුණේ class components වලට පමණි
• Code එක දිගු සහ සංකීර්ණ විය
• Logic නැවත භාවිතා කිරීම අපහසු විය

Hooks හඳුන්වාදීමෙන් පසු:

• Code structure එක සරල විය
• Functional components පමණක් භාවිතා කළ හැකි විය
• React logic නැවත භාවිතා කිරීම පහසු විය

useState Hook යනු කුමක්ද?

useState Hook භාවිතා කර component එකක් තුළ data (state) පාලනය කළ හැක.
State කියන්නේ component එකේ dynamic data එකයි. User interaction, button click, form input වැනි දේවල් අනුව state වෙනස් වේ.

useState Hook එක භාවිතා කිරීමෙන්:

• Component එකේ data පාලනය කළ හැක
• UI එක state වෙනස්වීම් අනුව update වේ
• Class component අවශ්‍ය නොවේ

useEffect Hook යනු කුමක්ද?

useEffect Hook භාවිතා කර component lifecycle එක පාලනය කරයි.
Lifecycle කියන්නේ component එක:

• Load වීම
• Update වීම
• Screen එකෙන් remove වීම

වැනි අවස්ථායි.

useEffect Hook භාවිතා කරන ප්‍රධාන අවස්ථා:

• Page load වීමේදී logic run කිරීම
• State හෝ props වෙනස් වූ විට ක්‍රියාවක් සිදු කිරීම
• API call කිරීම
• Cleanup operations සිදු කිරීම

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Component Loaded");

    return () => {
      console.log("Component Unmounted");
    };
  }, []);

  return <h1>Hello React Hooks</h1>;
}

useContext Hook යනු කුමක්ද?

useContext Hook භාවිතා කර application එකේ data global ලෙස components අතර share කළ හැක.

මෙය භාවිතා කිරීමෙන්:

• Props drilling අවශ්‍ය නොවේ
• Code readability වැඩි වේ
• Large React applications වල data management පහසු වේ

Global themes, user data, language settings වැනි දේවල් සඳහා useContext Hook බහුලව භාවිතා වේ.

import { createContext, useContext } from "react";

const ThemeContext = createContext();

function Child() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="Dark">
      <Child />
    </ThemeContext.Provider>
  );
}

Custom Hooks යනු කුමක්ද?

Custom Hook කියන්නේ developer විසින් තමන්ට අවශ්‍ය logic එක එකම ස්ථානයක සකස් කර, project එකේ වෙනත් components වල නැවත භාවිතා කිරීමයි.

Custom Hooks භාවිතා කිරීමෙන්:

• Code duplication අඩු වේ
• Project maintain කිරීම පහසු වේ
• Logic එක clearly organize කළ හැක

Custom Hooks යනු React Hooks වල විශාල වාසියක් ලෙස සැලකේ.

import { useState } from "react";

function useCounter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return { count, increment };
}

Hooks භාවිතා කිරීමේ නීති

React Hooks භාවිතා කරන විට පහත නීති අනිවාර්යයෙන්ම පිළිපැදිය යුතුය:

• Hooks component එකේ top level එකේ පමණක් භාවිතා කළ යුතුය
• Conditions, loops හෝ nested functions තුළ Hooks භාවිතා නොකළ යුතුය
• Hooks භාවිතා කළ යුත්තේ React functional components හෝ custom hooks තුළ පමණි

මෙම නීති React application එක ස්ථාවරව සහ නිවැරදිව ක්‍රියාත්මක වීමට වැදගත් වේ.

Hooks සහ SEO

Hooks භාවිතා කරන React application එකක්:

• Faster rendering ලබාදේ
• Better user experience ලබාදේ
• Performance optimization හොඳ වේ

මෙම කරුණු Google ranking වලට අපරෝක්ෂව හොඳ බලපෑමක් ඇති කරයි.

React හි වාසී සහ දුර්වලතා

වාසී

1. Virtual DOM සමඟ ඉහළ කාර්ය සාධනය
   React හි Virtual DOM භාවිතා කිරීම, යාවත්කාලීන කිරීමේදී පමණක් අවශ්‍ය වෙනස්කම් යාවත්කාලීන කිරීමේ හැකියාව සලසයි. මෙය වෙබ් අඩවිවල කාර්ය සාධනය වැඩි කරයි හා පරිශීලක අත්දැකීම හොඳ කරයි.

2. කම්පොනන්ට්-මූලික ආරෝපණය
   React හි UI එක කම්පොනන්ට් අඩංගු වෙනවා. මේ මඟින් කේතය සරලයි, නැවත භාවිතා කළ හැකි අතර සකස් කිරීමේදී අවශ්‍ය වෙනස්කම් පහසුවෙන් කළ හැක.

3. සමාජය සහ බහුල ආධාරක පද්ධති
   React හි ඉතා විශාල සහ ක්‍රියාකාරී සමාජයක් ඇත. වැඩි දියුණු වීම සඳහා සහ අලුත්ම යෙදුම් නිර්මාණය සඳහා පහසුකම් සලසන බොහෝ ඉන්ටර්නෙට් මෙවලම් සහ ලයිබ්‍රරී පවතී.

4. React Native සමඟ ජංගම අයදුම්පත් සංවර්ධනය
   React Native භාවිතයෙන් iOS සහ Android යෙදුම් එකම කේත භාවිතයෙන් නිර්මාණය කළ හැක. මෙම භාවිතාව නිසා කාලය සහ වියදම් අවශ්‍යතා අඩු වේ.

5. SEO හොඳ ප්‍රතිඵල සඳහා Server-Side Rendering (SSR)
   React SSR භාවිතා කිරීම මගින්, React යෙදුම Google පරිගණක සහ වෙනත් සෙවුම් එන්ජිමවලට පහසුවෙන් යාවත්කාලීන කිරීමේ සහ අන්තර්ගත ගවේෂණය කිරීමේ හැකියාව ලබා දේ.

දුර්වලතා

1. අරඹන්නන් සඳහා අභියෝග
   React හි JSX, State, Props සහ Hooks වැනි නව කේත සංකල්ප සරල නොවන නිසා, අලුත්ම වැඩ පටන් ගන්නා දෙවෙනි අය සඳහා එය අභියෝගයක් වනවා.

2. ප්‍රලම්බ මාර්ගෝපදේශ සහ පුනර්ලේඛනය
   React එකේ නව විශේෂාංග සහ සංස්කරණ යාවත්කාලීන කිරීමේදී, වෙබ් අඩවි මත වෙනස්කම් කිරීමේදී නිවැරදි සම්පූර්ණ මාර්ගෝපදේශ හෝ ඉගෙනීමේ වාසිය නැත. මෙම නිසා අලුත් සංස්කරණවලට දෘඩාංග පරිසරයේ ව්‍යාකූලතාවය ඇතිවීමේ හැකියාව තිබේ.

3. ස්ථාපන හා සකසන ක්‍රියාවන්
   React යෙදුමක් ආරම්භ කිරීමේදී, Node.js, Webpack, සහ Babel වැනි දේවල් සකස් කිරීම, නිවැරදිව පාලනය කිරීම සඳහා ප්‍රශ්න උදා කරනවා.

4. අමතර මෙවලම් ආධාර
   React සමඟ වැඩ කිරීමේදී Redux, React Router, සහ Jest වැනි මෙවලම් මගින් වැඩි දියුණු කිරීම අවශ්‍ය වේ. මීට අමතරව, තවත් මෙවලම් සහ මෙවලම් සමඟ සම්බන්ධ වීමේදී වැඩි වේලාවක් ගත වේ.

React යනු කාර්ය සාධනය සහ විකල්ප සලසන දක්ෂ JavaScript ලයිබ්‍රරී එකකි. ඒත්, එය අලුත්ම පරිශීලකයන්ට ඉතා අභියෝගයක් වන අතර, React හි ගැටළු සහ කේත ගැටලු ගනනාවක් ඇත. එවක්, React සඳහා ලොකුම වාසියක් වන්නේ එහි ක්‍රමලේඛන, කාර්ය සාධනය සහ යෙදුම් පද්ධති නිර්මාණයේ පහසුවයි.

Hooks භාවිතා කළ යුත්තේ කවදාද?

• Modern React application develop කරන විට
• Code maintainability වැඩි කිරීමට අවශ්‍ය විට
• Functional components භාවිතා කර clean architecture එකක් හදන්න කැමති නම්

අද React development වල Hooks භාවිතා කිරීම අත්‍යවශ්‍ය දෙයක් බවට පත්ව ඇත.

Hooks යනු React development තුළ අතිශයින් වැදගත් සංකල්පයකි.
එය code එක සරල කරමින්, reusable logic ලබාදෙමින්, modern React applications නිර්මාණය කිරීමට developer ලට විශාල සහායක් ලබාදේ.

React ඉගෙනගන්නා ඕනෑම developer කෙනෙක් Hooks ගැන හොඳ අවබෝධයක් තිබීම අත්‍යවශ්‍යයි.

React වල ප්‍රධාන අයදුම්කාරී

1. Web Applications

React පාවිච්චි කරමින්, ඔබට අතිවිශාල web applications හෝ dynamic web applications නිර්මාණය කළ හැක. React හි Virtual DOM සහ component-based architecture එක, විශාල වෙබ් අඩවි සහ interactive user interfaces එකට ඉතා සුදුසු වේ. Facebook, Instagram, සහ Netflix වැනි ගොඩක් සාර්ථක වෙබ් අඩවි React භාවිතා කරමින් නිර්මාණය කර ඇත.

2. Mobile Applications

React, React Native මඟින්, ඔබට iOS සහ Android සඳහා native mobile applications සංවර්ධනය කිරීමට ඉඩ සලසයි. React Native භාවිතා කිරීමෙන්, සම්පූර්ණ වශයෙන් JavaScript භාවිතා කරමින්, එකම කේතය මඟින් දෙකම platforms සඳහා පණිවිඩ සංවර්ධනය කළ හැක. මෙය mobile app development කාර්ය මාලාව කෙටි කාලයක් තුළ ඉටු කිරීමට ඉතාමත් පරිශීලී සහ කාර්යක්ෂම ක්‍රමයක් වේ.

3. Single Page Applications (SPA)

React එක Single Page Applications (SPA) නිර්මාණයට ඉතා සුදුසු වේ. SPA යනු, පිටුවක් පමණක් මඟින් පූර්ණ වෙබ් අඩවියට පරිශීලක අත්දැකීමක් සැලසීමයි. React හි Virtual DOM සහ component-based architecture මඟින්, මෙම ආකෘතියේ විශාල ක්ෂේමතාවයක් ඇත, එමඟින් පරිශීලකයාට දැක්වීමේදී එකී මෘදුකාංග අංග අනුව interface එකක් වෙනස් කරයි, එමෙන්ම පහසු හා වේගවත් වෙයි.

4. Content Management Systems (CMS)

React භාවිතා කර CMS (Content Management System) නිර්මාණය කිරීමෙන්, පරිශීලකයන්ට දත්ත කළමනාකරණය කිරීමේදී පහසු ක්‍රම ලබා දේ. WordPress සහ Drupal වැනි CMS platforms සමඟ React එකට එක් කර, Content-driven sites සඳහා විශාල performance සහ scalability ලබා ගත හැක.

5. Real-time Applications

React හි දී real-time applications සාදා ගැනීම, ජාල සම්බන්ධතා සහ මෘදුකාංග අතර සජීවී සහ සෘජු සන්නිවේදනය මඟින් පහසු කටයුත්තකි. Chat applications, live sports updates, සහ real-time dashboards නිර්මාණය කිරීමේදී React, websocket API, සහ Redux එකතු කිරීමෙන්, මනෝභාවයෙන් ක්‍රියාකරන්නා වූ real-time systems නිර්මාණය කළ හැක.

6. E-commerce Websites

React මඟින් E-commerce websites නිර්මාණය කිරීම, අලෙවිය හා පාරිභෝගික අත්දැකීම් වඩාත් අලංකාර සහ පහසු කරයි. React සමඟ, ඔබට වෙබ් අඩවියක් තුළ ගණනාවක් ලෙස වූ items, orders, customer profiles, සහ cart interactions කාර්යක්ෂමව කළමනාකරණය කර, පාරිභෝගිකයාට විශ්වාසනීය හා තෘප්තිමත් අත්දැකීමක් ලබා දෙන්න පුළුවන්.

7. Data Dashboards and Analytics

React පාවිච්චි කර, ඔබට powerful data dashboards සහ analytics interfaces නිර්මාණය කළ හැක. React’s flexibility සහ performance සහ data-binding නිසා, data visualization සහ analytics tools මඟින්, විවිධ ආකාරයක සංඛ්‍යාත හා ගණනාවට ඉක්මනින් ලබා ගත හැක. මෙවන් dashboards, business intelligence tools, data tracking, සහ performance monitoring සඳහා ඉතා හොඳ වේ.

8. Progressive Web Apps (PWA)

React පාවිච්චි කර Progressive Web Apps (PWA) නිර්මාණය කිරීමේදී, වෙබ් අඩවියකට native mobile app එකක් මෙන්ම පරිශීලක අත්දැකීම් සපයන්නට හැකියාව ලැබේ. PWA වලින්, ඔබට offline සේවාවන් සහ native device features භාවිතා කිරීමට ඉඩ සලසයි.

නිගමනය

React, කාර්ය සාධනය සහ ගෘහය තුළම එකතු කළ හැකි component-based architecture නිසා, බොහෝ විවිධ ක්ෂේමතා හා ක්ෂේමතා වෙනස් වෙළඳාම් සඳහා ක්‍රමලේඛන පහසු කේත සාදා ගැනීමට නිවැරදි තෝරාගැනීමක් බවට පත්වෙයි. ඉහත සඳහන්, React යෙදුම් නිර්මාණයේ ප්‍රධාන භාවිතා හැකියාවන් ඉතාමත් භාවිතා කරන අවස්ථා වලට අදාළ වන අතර, එය ඔබගේ නිර්මාණය සඳහා කාර්යක්ෂම හා අලංකාර අන්තර්ගතයක් ලබා දේ.