React என்றால் என்ன? டெவலப்பர் அல்லாதவர்களுக்கான எளிய வழிகாட்டி

React என்பது பயனர் இடைமுகங்களை உருவாக்கும் JavaScript library — ஆப்பில் மக்கள் பார்ப்பதும் கிளிக் செய்வதுமான பகுதி. பொத்தான், தயாரிப்பு அட்டை அல்லது முழு பக்கம் போன்ற மீண்டும் பயன்படுத்தக்கூடிய components என்ற துண்டுகளிலிருந்து திரைகளை உருவாக்குகிறீர்கள்; React திரையை உங்கள் தரவுடன் ஒத்திசைவாக வைக்கிறது: தரவு மாறும்போது அதைச் சார்ந்த பக்கப் பகுதிகளை React புதுப்பிக்கிறது. இது Facebook-இல் (இப்போது Meta) உருவாக்கப்பட்டது, திறந்த மூலமானது, இணை ஆப்களை உருவாக்கும் மிகப் பரவலாகப் பயன்படுத்தப்படும் வழிகளில் ஒன்று.

AI உடன் உருவாக்கும்போது இது ஏன் முக்கியம்

AI கருவியுடன் ஒரு இணை ஆப்பை உருவாக்கினால், அது React-இல் எழுதப்பட்டிருக்க நல்ல வாய்ப்பு உள்ளது. பல AI app builder-கள் இயல்பாக React-ஐப் பயன்படுத்துகின்றன, ஏனெனில் அது பிரபலமானது, நன்கு ஆவணப்படுத்தப்பட்டது, AI மாடல்கள் கற்றுக்கொள்ள ஏராளமான React code உள்ளது.

AI-உடன் உருவாக்க React எழுதத் தெரிந்திருக்க வேண்டியதில்லை. ஆனாலும் சிறிது தெரிந்திருந்தால் உதவும்:

• மாற்றங்களைத் துல்லியமாக விவரிக்கலாம். “ProductCard component-இல் விலையை தடித்ததாக மாற்றுங்கள்” என்பது “எங்கோ விலைகள் தனித்துத் தெரிய வேண்டும்” என்பதை விடத் தெளிவானது.
• பிழைகளைப் புரிந்துகொள்ளலாம். “Cannot read properties of undefined” அல்லது “Too many re-renders” போன்ற செய்திகள் அர்த்தமுள்ளதாகத் தோன்றும்.
• சரியான தேர்வுகளைச் செய்யலாம். சாதாரண React ஆப்கள் உலாவியில் வரையப்படுகின்றன, அது தேடல் தெரிவுநிலை மற்றும் முதல் ஏற்ற வேகத்தைப் பாதிக்கிறது. அதை அறிவது வேறு அமைப்பை எப்போது கேட்க வேண்டும் என்று முடிவெடுக்க உதவும்.
• பின்னர் developers உடன் வேலை செய்யலாம். React ஒரு பொதுவான திறன், அதனால் ஒரு developer பொதுவாக React codebase-ஐ எளிதாக எடுத்துக்கொள்ள முடியும்.

அன்றாட உவமை

LEGO-ஐ நினையுங்கள். ஒரே கட்டியிலிருந்து ஒரு மாதிரியைச் செதுக்குவதற்குப் பதிலாக, நிலையான கட்டைகளிலிருந்து அதை உருவாக்குகிறீர்கள். சில கட்டைகள் ஒரு சக்கரம் ஆகும்; நான்கு சக்கரங்களும் வேறு சில பாகங்களும் ஒரு கார் ஆகும். ஒவ்வொரு காரிலும் சிவப்புச் சக்கரங்கள் வேண்டுமென்றால், சக்கர வடிவமைப்பை ஒரு முறை மாற்றினால் போதும்.

React components அந்தக் கட்டைகள். ஒரு Button component ProductCard-க்குள் பயன்படுகிறது, அது ProductGrid-க்குள், அது ShopPage-இன் பகுதி. Button-ஐ ஒரு முறை மாற்றினால், ஆப்பில் உள்ள ஒவ்வொரு பொத்தானும் மாறும்.

உவமையின் மற்ற பாதி: அறிவுறுத்தல்களை மாற்றும்போதெல்லாம் LEGO மாதிரி தானாக மறுகட்டமைக்கப்படுவதாக நினையுங்கள். அதுதான் React-இன் மற்றொரு தந்திரம் — தற்போதைய தரவுக்கு திரை எப்படி இருக்க வேண்டும் என்று விவரிக்கிறீர்கள், பக்கத்தில் என்ன மாற்ற வேண்டும் என்பதை React கண்டுபிடிக்கிறது.

முக்கியக் கருத்துகள்

Components

Component என்பது ஒரு இடைமுகத் துண்டைத் திருப்பும் JavaScript function. React ஆவணங்கள் component-ஐ தனக்கே உரிய தர்க்கமும் தோற்றமும் கொண்ட UI-இன் ஒரு பகுதி என்று விவரிக்கின்றன. Component பெயர்கள் பெரிய எழுத்தில் தொடங்கும்.

JSX

Components பொதுவாக JSX-இல் எழுதப்படுகின்றன; இது JavaScript-உடன் கலந்த HTML போலத் தெரியும்:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX கட்டாயமில்லை, ஆனால் பெரும்பாலான திட்டங்கள் அதைப் பயன்படுத்துகின்றன என்று React ஆவணங்கள் குறிப்பிடுகின்றன. உலாவியில் இயங்குவதற்கு முன் அது சாதாரண JavaScript ஆக மாற்றப்படுகிறது.

Props

Props என்பது ஒரு component-க்கு நீங்கள் அனுப்பும் உள்ளீடுகள் — மீண்டும் பயன்படுத்தக்கூடிய பகுதியின் அமைப்புகள் போல:

<ProductCard name="Lavender Candle" price={24} />

அதே ProductCard எந்த தயாரிப்பையும் காட்ட முடியும்.

State

State என்பது ஒரு component நினைவில் வைத்திருக்கும் தகவல், ஆப் இயங்கும்போது அது மாறலாம் — ஒரு மெனு திறந்திருக்கிறதா, தேடல் பெட்டியில் என்ன தட்டச்சு செய்யப்பட்டுள்ளது, கூடையில் எத்தனை பொருட்கள் உள்ளன. State மாறும்போது, திரை பொருந்துவதற்காக React component-ஐ மீண்டும் வரைகிறது.

Hooks

Hooks என்பவை use என்று தொடங்கும் பெயர்களைக் கொண்ட functions: useState (ஒரு மதிப்பை நினைவில் வைக்கும்), useEffect (வரைந்த பின் code இயக்கும், உதாரணமாக தரவைப் பெற). AI உருவாக்கிய React code முழுவதும் இவற்றைப் பார்ப்பீர்கள்.

ஒரு வேலை செய்த உதாரணம்: ஒரு கூடை எண்ணிக்கை

உங்கள் ஆன்லைன் கடையில் “கூடையில் சேர்” பொத்தானும், பொருட்களின் எண்ணிக்கை காட்டும் கூடை ஐகானும் உள்ளன என்று வைத்துக்கொள்ளுங்கள். React-இல் அது தோராயமாக இப்படி இருக்கும்:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

வாடிக்கையாளர் “கூடையில் சேர்” என்பதைக் கிளிக் செய்தால் என்ன நடக்கிறது:

1. பொத்தானின் onClick, onAdd-ஐ அழைக்கிறது, அது setCartCount-ஐ அழைக்கிறது.
2. React cartCount state-ஐ 0-இலிருந்து 1-ஆக மாற்றுகிறது.
3. React Shop-ஐ மீண்டும் வரைகிறது, CartIcon-க்கு count={1} அனுப்பி.
4. பக்கம் இப்போது “Cart (1)” காட்டுகிறது. “கூடை உரையைக் கண்டுபிடித்து மாற்று” என்று யாரும் code எழுதவில்லை — திரை தரவைப் பின்தொடர்கிறது.

வரம்புகளையும் கவனியுங்கள். இந்த எண்ணிக்கை உலாவியின் நினைவகத்தில் உள்ளது. பக்கத்தை மீண்டும் ஏற்றினால் அது 0-க்கு திரும்பும். கூடையை வைத்திருக்க, அதை நீடித்த இடத்தில் சேமிக்க வேண்டும் — cookie, உலாவி சேமிப்பு, அல்லது உங்கள் backend வழியாக ஒரு database. React திரையைக் கையாளுகிறது; அது உங்கள் தரவைச் சேமிப்பதில்லை.

ஒரு வலை ஆப்பில் React எங்கே பொருந்துகிறது

"Vite + React" ஆப் உலாவியில் வரையப்படுகிறது (ஒற்றைப் பக்க ஆப் — single-page app). Next.js ஆப் பக்கங்களை முதலில் சேவையகத்தில் வரைய முடியும், இது தேடுபொறிகளுக்கும் முதல் ஏற்ற வேகத்துக்கும் உதவுகிறது.

பொதுவான சொற்களின் விளக்கம்

பொதுவான தவறுகளும் தவறான கருத்துகளும்

• “React ஒரு நிரலாக்க மொழி.” அது JavaScript (அல்லது TypeScript) உள்ளே எழுதப்பட்டு, அவற்றிலிருந்து பயன்படுத்தப்படும் ஒரு library.
• “React என் தரவைச் சேமிக்கிறது.” State உலாவியில் வாழ்கிறது, பக்கத்தை மீண்டும் ஏற்றினால் மறைந்துவிடும். நீடித்த தரவுக்கு backend மற்றும் database தேவை.
• React code-இல் ரகசியங்களை வைப்பது. React ஆப்பில் உள்ள அனைத்தும் பார்வையாளரின் உலாவிக்கு அனுப்பப்படுகின்றன. அங்கே உள்ள API keys பொதுவில் தெரியும். அவற்றை சேவையகத்தில் வையுங்கள்.
• “React ஆப்கள் தேடலில் தரவரிசைப் பெற முடியாது.” உலாவியில் மட்டும் வரைவது தேடலுக்கு பலவீனமானது, ஆனால் முன்கூட்டிய வரைதல் அல்லது சேவையக வரைதல் பெரும்பாலானவற்றைச் சரிசெய்யும்.
• பெரிய components. 1,000 வரி கொண்ட ஒரு component-ஐ மனிதர்களும் AI-யும் பாதுகாப்பாக மாற்றுவது கடினம். சிறியவற்றைக் கேளுங்கள்.
• React வலை ஆப் ஒரு கைப்பேசி ஆப் என்று நினைப்பது. அது உலாவியில் இயங்குகிறது, கைப்பேசிகளிலும் கூட, ஆனால் App Store ஆப் அல்ல.

உங்கள் AI builder-இடம் என்ன கேட்பது

• “இந்தப் பக்கத்தை சிறிய, பெயரிடப்பட்ட components ஆகப் பிரியுங்கள், ஒவ்வொன்றும் எந்தக் கோப்பில் உள்ளது என்று சொல்லுங்கள்.”
• “ProductCard component-ஐ மீண்டும் பயன்படுத்தக்கூடியதாக ஆக்குங்கள், name, price, image ஆகியவை props ஆக.”
• “புதுப்பித்த பின்னும் கூடை இருக்குமாறு கூடையை database-இல் சேமியுங்கள்.”
• “எல்லா API keys-ஐயும் சேவையகத்தில் வையுங்கள்; React code எங்கள் சொந்த API-ஐ அழைக்க வேண்டும்.”
• “சேவையகத்திலிருந்து வரும் தரவுக்கு loading மற்றும் error நிலைகளைச் சேர்க்கவும்.”
• “இந்தப் பக்கங்களுக்கு தேடல் தெரிவுநிலை முக்கியம் என்றால், அவற்றை முன்கூட்டியே வரையுங்கள் அல்லது சேவையக வரைதல் அமைப்பைப் பயன்படுத்துங்கள்.”
• “இந்தப் பிழை என்ன பொருள் என்றும் எந்த component-இலிருந்து வருகிறது என்றும் எளிய தமிழில் விளக்குங்கள்.”

பெரிய படத்துக்கு, frontend மற்றும் backend பாருங்கள்; AI எழுதியதை மதிப்பாய்வு செய்ய, AI-உருவாக்கிய code-ஐ மதிப்பாய்வு செய்வது எப்படி பாருங்கள்.

Mythex-இல் React

நீங்கள் வேறெதுவும் கேட்காவிட்டால், Mythex புதிய திட்டங்களை Vite + React + TypeScript + Tailwind உடன் தொடங்குகிறது, நீங்கள் அரட்டை அடிக்கும்போது நேரடி முன்னோட்டம் இயங்கும். உங்கள் முதல் prompt-இல் வேறு அமைப்பைக் குறிப்பிடலாம் — உதாரணமாக “Next.js பயன்படுத்துங்கள்” அல்லது “எளிய static HTML landing page” — நீங்கள் எழுதுவதிலிருந்து Mythex அதைத் தேர்வு செய்யும்; அதற்கு அமைப்புத் திரை எதுவும் இல்லை. தொழில்நுட்பம் எப்படித் தேர்வு செய்யப்படுகிறது என்பதை docs பக்கம் விளக்குகிறது. Free-இல் code editor படிக்க மட்டுமே; Pro-இல் நேரடியாக React code-ஐத் திருத்தலாம், திட்டத்தை வேறு இடத்தில் தொடர ஏற்றுமதி செய்யலாம்.

கேள்விகள்