React-ലേക്കുള്ള ആമുഖം: ആദ്യം മുതൽ ഒരു യൂസർ ഇൻ്റർഫേസ് നിർമ്മിക്കുക

React എന്നത് യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു JavaScript ലൈബ്രറിയാണ്. ഇത് Facebook വികസിപ്പിച്ച് പരിപാലിക്കുന്നു, കൂടാതെ ഫ്രണ്ട്എൻഡ് ഡെവലപ്‌മെൻ്റിലെ ഏറ്റവും പ്രചാരമുള്ള ടൂളുകളിൽ ഒന്നായി ഇത് മാറിയിരിക്കുന്നു. ഈ ഗൈഡ് നിങ്ങളെ ആദ്യം മുതൽ React-ൻ്റെ അടിസ്ഥാന ആശയങ്ങൾ ഘട്ടം ഘട്ടമായി മനസ്സിലാക്കാനും ഒരു ലളിതമായ യൂസർ ഇൻ്റർഫേസ് നിർമ്മിക്കാനും സഹായിക്കും.

എന്തുകൊണ്ട് React തിരഞ്ഞെടുക്കണം?

React-ന് താഴെ പറയുന്ന ഗുണങ്ങളുണ്ട്:

• ഘടനാപരമായത് (Component-based): React യൂസർ ഇൻ്റർഫേസിനെ സ്വതന്ത്രവും വീണ്ടും ഉപയോഗിക്കാനാവുന്നതുമായ ഘടകങ്ങളായി (components) വിഭജിക്കുന്നു. ഇത് കോഡ് പരിപാലിക്കാനും മനസ്സിലാക്കാനും എളുപ്പമാക്കുന്നു.
• പ്രഖ്യാപനരീതി (Declarative): React ഒരു പ്രഖ്യാപന ശൈലിയിലുള്ള പ്രോഗ്രാമിംഗ് ഉപയോഗിക്കുന്നു, അതായത് നിങ്ങൾ അവതരിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന കാര്യങ്ങൾ വിവരിച്ചാൽ മതി, React സ്വയമേവ അപ്‌ഡേറ്റുകളും റെൻഡറിംഗും കൈകാര്യം ചെയ്യും.
• കാര്യക്ഷമമായത് (Efficient): React വെർച്വൽ DOM ഉം (Virtual DOM) മികച്ച ഡിഫ് അൽഗോരിതവും (diff algorithm) ഉപയോഗിക്കുന്നതിനാൽ യൂസർ ഇൻ്റർഫേസ് കാര്യക്ഷമമായി അപ്‌ഡേറ്റ് ചെയ്യാനും അനാവശ്യമായ റെൻഡറിംഗ് കുറയ്ക്കാനും സാധിക്കുന്നു.
• വലിയ കമ്മ്യൂണിറ്റി പിന്തുണ (Large community support): React-ന് വലിയ കമ്മ്യൂണിറ്റിയും സമ്പന്നമായ എക്കോസിസ്റ്റവുമുണ്ട്, ട്യൂട്ടോറിയലുകൾ, ലൈബ്രറികൾ, ടൂളുകൾ എന്നിവ ധാരാളമായി ലഭ്യമാണ്, ഇത് നിങ്ങളുടെ ഡെവലപ്‌മെൻ്റിന് സഹായകമാകും.
• ക്രോസ്-പ്ലാറ്റ്ഫോം ശേഷി (Cross-platform capability): React Native ഉപയോഗിച്ച് നിങ്ങൾക്ക് React ഉപയോഗിച്ച് നേറ്റീവ് മൊബൈൽ ആപ്ലിക്കേഷനുകൾ (iOS, Android) വികസിപ്പിക്കാൻ കഴിയും.

തയ്യാറെടുപ്പുകൾ

ആരംഭിക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ താഴെ പറയുന്ന ടൂളുകൾ ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക:

• Node.js: Node.js ഒരു JavaScript റൺടൈം എൻവയോൺമെൻ്റാണ്, ഇത് React ഡെവലപ്‌മെൻ്റ് ടൂളുകൾ പ്രവർത്തിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. നിങ്ങൾക്ക് ഇത് https://nodejs.org/ എന്നതിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്ത് ഇൻസ്റ്റാൾ ചെയ്യാവുന്നതാണ്.
• npm അല്ലെങ്കിൽ yarn: npm (Node Package Manager), yarn എന്നിവ JavaScript പാക്കേജ് മാനേജർമാരാണ്, React-ൻ്റെ ഡിപ്പൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യാനും കൈകാര്യം ചെയ്യാനും ഇത് ഉപയോഗിക്കുന്നു. സാധാരണയായി Node.js ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ npm ഒരുമിച്ച് ഇൻസ്റ്റാൾ ചെയ്യപ്പെടും. yarn https://yarnpkg.com/ എന്നതിൽ നിന്ന് ഇൻസ്റ്റാൾ ചെയ്യാവുന്നതാണ്.

നിങ്ങളുടെ ആദ്യത്തെ React ആപ്ലിക്കേഷൻ ഉണ്ടാക്കുക

ഒരു React പ്രോജക്റ്റ് വേഗത്തിൽ നിർമ്മിക്കാൻ നമ്മുക്ക് create-react-app ഉപയോഗിക്കാം.

1. npm ഉപയോഗിച്ച് നിർമ്മിക്കുക:

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

2. yarn ഉപയോഗിച്ച് നിർമ്മിക്കുക:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

മുകളിൽ കൊടുത്ത കമാൻഡുകൾ പ്രവർത്തിപ്പിച്ച ശേഷം, create-react-app സ്വയമേവ my-first-react-app എന്ന പേരിൽ ഒരു ഡയറക്ടറി ഉണ്ടാക്കുകയും അതിൽ ഒരു React പ്രോജക്റ്റ് ആരംഭിക്കുകയും ചെയ്യും. npm start അല്ലെങ്കിൽ yarn start കമാൻഡ് ഡെവലപ്‌മെൻ്റ് സെർവർ ആരംഭിക്കും, നിങ്ങളുടെ React ആപ്ലിക്കേഷൻ കാണാനായി ബ്രൗസറിൽ http://localhost:3000 എന്ന URL-ൽ പ്രവേശിക്കുക.

ഡയറക്ടറി ഘടന

create-react-app ഉണ്ടാക്കുന്ന പ്രോജക്റ്റിൻ്റെ ഡയറക്ടറി ഘടന താഴെക്കൊടുക്കുന്നു:

my-first-react-app/
├── node_modules/         # പ്രോജക്റ്റ് ഡിപൻഡൻസികൾ
├── public/               # സ്റ്റാറ്റിക് ഉറവിടങ്ങൾ (HTML ഫയലുകൾ പോലുള്ളവ)
│   ├── index.html        # ആപ്ലിക്കേഷന്റെ എൻട്രി പോയിന്റ് HTML ഫയൽ
│   └── ...
├── src/                  # React സോഴ്സ് കോഡ്
│   ├── App.css           # App ഘടകത്തിന്റെ CSS ശൈലി
│   ├── App.js            # App ഘടകം
│   ├── App.test.js       # App ഘടകത്തിന്റെ ടെസ്റ്റ് ഫയൽ
│   ├── index.css         # ഗ്ലോബൽ CSS ശൈലി
│   ├── index.js          # ആപ്ലിക്കേഷന്റെ എൻട്രി പോയിന്റ് JavaScript ഫയൽ
│   ├── logo.svg          # React ലോഗോ
│   └── ...
├── .gitignore            # Git അവഗണിക്കുന്ന ഫയലുകൾ
├── package.json          # പ്രോജക്റ്റിന്റെ മെറ്റാഡാറ്റയും ഡിപൻഡൻസികളും
├── README.md             # പ്രോജക്റ്റിന്റെ വിവരണ ഡോക്യുമെൻ്റ്
└── yarn.lock             # ഡിപൻഡൻസി പതിപ്പ് ലോക്കിംഗ് ഫയൽ (yarn ഉപയോഗിക്കുകയാണെങ്കിൽ)

React ഘടകങ്ങളെ മനസ്സിലാക്കുക

React ആപ്ലിക്കേഷനുകൾ നിർമ്മിച്ചിരിക്കുന്നത് ഘടകങ്ങൾ ഉപയോഗിച്ചാണ്. ഘടകങ്ങൾ എന്നത് യൂസർ ഇൻ്റർഫേസിൻ്റെ പ്രത്യേക ഭാഗങ്ങൾ റെൻഡർ ചെയ്യുന്നതിനായുള്ള സ്വതന്ത്രവും വീണ്ടും ഉപയോഗിക്കാനാവുന്നതുമായ കോഡ് ബ്ലോക്കുകളാണ്.

src/App.js ഫയലിൽ, നിങ്ങൾക്ക് സ്ഥിരമായുള്ള ഒരു App ഘടകം കാണാൻ കഴിയും:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

കോഡിൻ്റെ വിശദീകരണം:

• import React from 'react'; React ലൈബ്രറി ഇമ്പോർട്ട് ചെയ്യുന്നു.
• function App() { ... } App എന്ന് പേരുള്ള ഒരു ഫംഗ്ഷൻ ഘടകം നിർവചിക്കുന്നു.
• return ( ... ) ഒരു JSX എക്സ്പ്രഷൻ നൽകുന്നു, അത് ഘടകം റെൻഡർ ചെയ്യേണ്ട ഉള്ളടക്കത്തെ വിവരിക്കുന്നു.
• export default App; App ഘടകത്തെ എക്സ്പോർട്ട് ചെയ്യുന്നു, അതുവഴി മറ്റ് ഫയലുകളിൽ ഉപയോഗിക്കാൻ സാധിക്കും.

JSX (JavaScript XML)

JSX എന്നത് JavaScript സിന്റാക്സ് എക്സ്റ്റൻഷനാണ്, ഇത് JavaScript കോഡിൽ HTML-പോലെയുള്ള കോഡ് എഴുതാൻ നിങ്ങളെ അനുവദിക്കുന്നു. മുകളിലെ ഉദാഹരണത്തിൽ, ... എന്നത് ഒരു JSX എക്സ്പ്രഷനാണ്. JSX കോഡ് Babel ഉപയോഗിച്ച് സാധാരണ JavaScript കോഡിലേക്ക് മാറ്റുന്നു, അതുവഴി ബ്രൗസറിന് മനസ്സിലാക്കാൻ കഴിയും.

App ഘടകം മാറ്റിയെഴുതുക

നമുക്ക് App ഘടകം മാറ്റിയെഴുതി ഒരു ലളിതമായ കൗണ്ടർ ഉണ്ടാക്കാം.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
```  const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n    \n      \n\n# കൗണ്ടർ\n\n      നിലവിലെ എണ്ണം: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**മാറ്റങ്ങൾക്കുള്ള വിശദീകരണം:**\n\n* `import React, { useState } from 'react';` `useState` ഹുക്ക് ഇമ്പോർട്ട് ചെയ്യുന്നു. ഫങ്ഷണൽ കോമ്പോണന്റുകളിൽ സ്റ്റേറ്റ് ചേർക്കാൻ ഉപയോഗിക്കുന്ന ഒരു റിയാക്ട് ഹുക്കാണ് `useState`.\n* `const [count, setCount] = useState(0);` `useState` ഹുക്ക് ഉപയോഗിച്ച് `count` എന്ന് പേരുള്ള ഒരു സ്റ്റേറ്റ് വേരിയബിൾ ഉണ്ടാക്കുകയും അത് `0` ആയി ഇനിഷ്യലൈസ് ചെയ്യുകയും ചെയ്യുന്നു. `count` സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാനുളള ഫങ്ഷനാണ് `setCount`.\n* `const increment = () => { setCount(count + 1); };` `count` സ്റ്റേറ്റിന്റെ എണ്ണം 1 കൂട്ടാനായി `increment` എന്ന ഫങ്ഷൻ ഡിഫൈൻ ചെയ്യുന്നു.\n* `const decrement = () => { setCount(count - 1); };` `count` സ്റ്റേറ്റിന്റെ എണ്ണം 1 കുറയ്ക്കാനായി `decrement` എന്ന ഫങ്ഷൻ ഡിഫൈൻ ചെയ്യുന്നു.\n* `നിലവിലെ എണ്ണം: {count}

` പേജിൽ `count` സ്റ്റേറ്റിന്റെ മൂല്യം കാണിക്കുന്നു. `{count}` എന്നത് JSX കോഡിൽ ജാവാസ്ക്രിപ്റ്റ് വേരിയബിളുകൾ ചേർക്കാൻ ഉപയോഗിക്കുന്ന ഒരു JSX എക്സ്പ്രഷനാണ്.\n* `+` , `-` എന്നീ ബട്ടണുകൾ ഉണ്ടാക്കുകയും അവയിൽ യഥാക്രമം `increment`, `decrement` ഫങ്ഷനുകൾ ബൈൻഡ് ചെയ്യുകയും ചെയ്യുന്നു. ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഒരു പ്രത്യേക ഫങ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യാൻ ഉപയോഗിക്കുന്ന ഇവന്റ് ഹാൻഡിലാണ് `onClick`.\n\n`src/App.js` ഫയൽ സേവ് ചെയ്ത ശേഷം ബ്രൗസർ ഓട്ടോമാറ്റിക്കായി റിഫ്രഷ് ആവുകയും നിങ്ങൾക്ക് ഒരു സിമ്പിൾ കൗണ്ടർ കാണാൻ സാധിക്കുകയും ചെയ്യും.   const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n     {/* CSS ക്ലാസുകളെ റഫർ ചെയ്യാൻ styles ഒബ്ജക്റ്റ് ഉപയോഗിക്കുക */}\n      

# കൗണ്ടർ

      നിലവിലെ എണ്ണം: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**സാധാരണ CSS ഫയൽ ഉപയോഗിക്കുന്നു:**\n\nഗ്ലോബൽ സ്റ്റൈലുകൾ നിർവചിക്കാൻ നിങ്ങൾക്ക് സാധാരണ CSS ഫയൽ ഉപയോഗിക്കാം. `src/index.css` ഫയലിൽ, നിങ്ങൾക്ക് ഗ്ലോബൽ സ്റ്റൈലുകൾ നിർവചിക്കാം.\n\nഉദാഹരണത്തിന്, താഴെ പറയുന്ന CSS സ്റ്റൈൽ ചേർക്കുക:\n\n```css\nbody {\n  font-family: sans-serif;\n}\n```\n\nഈ സ്റ്റൈൽ ആപ്ലിക്കേഷനിലെ `body` എലമെന്റിൽ മുഴുവനായി ബാധകമാകും.\n\n## അടുത്ത പടി\n\nഅഭിനന്ദനങ്ങൾ, നിങ്ങളുടെ ആദ്യത്തെ React ആപ്ലിക്കേഷൻ പൂർത്തിയാക്കിയിരിക്കുന്നു! അടുത്തതായി, React-നെക്കുറിച്ച് കൂടുതൽ പഠിക്കാൻ സാധിക്കും, ഉദാഹരണത്തിന്:\n\n*   **ഘടക ആശയവിനിമയം:** വ്യത്യസ്ത ഘടകങ്ങൾ തമ്മിൽ എങ്ങനെ ആശയവിനിമയം നടത്താമെന്ന് പഠിക്കുക.\n*   **ഫോം കൈകാര്യം ചെയ്യൽ:** ഫോമുകൾ എങ്ങനെ ഉണ്ടാക്കാമെന്നും കൈകാര്യം ചെയ്യാമെന്നും പഠിക്കുക.\n*   **റൂട്ടിംഗ്:** React Router ഉപയോഗിച്ച് മൾട്ടി-പേജ് ആപ്ലിക്കേഷനുകൾ എങ്ങനെ ഉണ്ടാക്കാമെന്ന് പഠിക്കുക.\n*   **Redux അല്ലെങ്കിൽ Context API:** ആപ്ലിക്കേഷന്റെ അവസ്ഥ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് പഠിക്കുക.\n*   **Hooks:** `useEffect`, `useContext` തുടങ്ങിയ React Hooks-നെക്കുറിച്ച് ആഴത്തിൽ മനസ്സിലാക്കുക.\n\nReact ഒരു സാങ്കേതിക വിദ്യയാണ്, അത് നിരന്തരം പരിശീലിക്കുകയും പഠിക്കുകയും ചെയ്യേണ്ടതുണ്ട്. പഠനം ആസ്വദിക്കൂ!