మీ మొదటి కంపోనెంట్

కంపోనెంట్‌లు: UI బిల్డింగ్ బ్లాక్స్

Web లో, HTML దాని బిల్ట్-ఇన్ <h1> మరియు <li> వంటి ట్యాగ్‌ల సెట్‌తో రిచ్ స్ట్రక్చర్డ్ డాక్యుమెంట్‌లను రూపొందించడానికి అనుమతిస్తుంది:

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

ఈ మార్కప్ ఈ ఆర్టికల్ ని రిప్రజెంట్ చేస్తుంది <article>, దాని హెడ్డింగ్ <h1>, మరియు టేబుల్ ఆఫ్ కంటెంట్‌ను <ol> రూపంలో ప్రదర్శిస్తుంది. ఇలాంటి మార్కప్, స్టైల్ కోసం CSS, మరియు ఇంటరాక్టివిటీ కోసం JavaScript కలిసి, Web లో మీరు చూస్తున్న ప్రతి సైడ్‌బార్, అవతార్, మోడల్, డ్రాప్‌డౌన్ — ప్రతి UI కంపోనెంట్ వెనుక కలిసి ఉంటాయి.

React మీ మార్కప్, CSS, మరియు JavaScript ను కస్టమ్ “కంపోనెంట్స్” గా కలిపే అవకాశాన్ని ఇస్తుంది, మీ యాప్‌కు రీయూజబుల్ UI ఎలిమెంట్స్. మీరు పై కోడ్‌ను <TableOfContents /> కంపోనెంట్‌గా మార్చి ప్రతి పేజీలో కూడా రెండర్ చేయవచ్చు. అంతర్గతంగా, ఇది ఇంకా అదే HTML ట్యాగ్లను ఉపయోగిస్తుంది, ఉదాహరణకు <article>, <h1> మరియు తదితరాలు.

HTML ట్యాగ్‌లతో చేసినట్లుగా, మీరు కంపోనెంట్స్‌ని కలపడం, ఆర్డర్ చేయడం మరియు నెస్టింగ్ చేయడం ద్వారా పూర్తి పేజీలను డిజైన్ చేయవచ్చు. ఉదాహరణకు, మీరు చదివే డాక్యుమెంటేషన్ పేజీ React కంపోనెంట్స్‌తో తయారైంది:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

మీ ప్రాజెక్ట్ పెరుగుతున్న కొద్దీ, మీరు ఇప్పటికే రాసిన కంపోనెంట్లను రీయూజ్ చేయడం ద్వారా మీ డిజైన్లను రూపొందించవచ్చని గమనిస్తారు, తద్వారా మీ డెవలప్మెంట్ వేగవంతం అవుతుంది. మా పై టేబుల్ ఆఫ్ కంటెంట్‌ను ఏ స్క్రీన్‌లోనైనా <TableOfContents /> ద్వారా చేర్చవచ్చు! మీరు React ఓపెన్ సోర్స్ కమ్యూనిటీ ద్వారా పంచబడిన వేలాది కంపోనెంట్లను ఉపయోగించి మీ ప్రాజెక్ట్‌ను ప్రారంభించవచ్చు, ఉదాహరణకు Chakra UI మరియు Material UI.

కంపోనెంట్‌ ను డిఫైన్ చేయడం

సాంప్రదాయంగా వెబ్ పేజీలను క్రియేట్ చేస్తున్నప్పుడు, వెబ్ డెవలపర్లు ముందుగా వారి కంటెంట్‌ను మార్కప్ చేసి, తరువాత కొంచెం JavaScript ని జోడించడం ద్వారా ఇంటరాక్షన్‌ను అందించేవారు. ఇది ఇంటరాక్షన్ ఒక అదనపు ఫీచర్ లాగా ఉన్నప్పుడు బాగా పనిచేసేది. కానీ ఇప్పుడు, ఇది చాలా సైట్లకు మరియు అన్ని యాప్‌లకు అవసరంగా మారింది. React ఇంటరాక్షన్‌ను మొదటి ప్రాధాన్యంగా ఉంచుతుంది, అయినప్పటికీ అదే టెక్నాలజీని ఉపయోగిస్తుంది: React కాంపొనెంట్ అనేది JavaScript ఫంక్షన్, దీనిని మీరు మార్కప్‌తో కలపవచ్చు. ఇది ఎలా కనిపిస్తుందో ఇక్కడ ఉంది (క్రింది ఉదాహరణను మీరు ఎడిట్ చేయవచ్చు):

ఇలా కాంపొనెంట్‌ను నిర్మించవచ్చు:

స్టెప్ 1: కంపోనెంట్‌ను ఎక్స్‌పోర్ట్ చేయండి

export default ప్రిఫిక్స్ ఒక స్టాండర్డ్ JavaScript సింటాక్స్ (React కి ప్రత్యేకం కాదు). ఇది మీరు ఒక ఫైల్‌లో మెయిన్ ఫంక్షన్‌ ని మార్క్ చేయడానికి అనుమతిస్తుంది, తద్వారా మీరు ఆ ఫంక్షన్‌ ని ఇతర ఫైళ్ల నుంచి ఇంపోర్ట్ చేసుకోవచ్చు. (కంపోనెంట్లను ఇంపోర్ట్ మరియు ఎక్స్‌పోర్ట్ చేయడం గురించి మరింత తెలుసుకోండి!)

స్టెప్ 2: ఫంక్షన్ ని డిఫైన్ చేయండి

function Profile() { } తో మీరు Profile అనే పేరుతో ఒక JavaScript ఫంక్షన్ ని డిఫైన్ చేస్తారు.

స్టెప్ 3: మార్కప్ జోడించండి

కంపోనెంట్ src మరియు alt అట్రిబ్యూట్లతో కూడిన <img /> ట్యాగ్‌ను రిటర్న్ చేస్తుంది. <img /> ను HTML లాగా రాస్తారు, కానీ ఇది వాస్తవానికి JavaScript లో ఉండే కోడ్! ఈ సింటాక్స్‌ను JSX అని పిలుస్తారు, మరియు ఇది JavaScript లో మార్కప్‌ను ఎంబెడ్ చేయటానికి అనుమతిస్తుంది.

రిటర్న్ స్టేట్మెంట్‌ను ఈ కంపోనెంట్‌లోని విధంగా ఒకే లైనులో రాయవచ్చు:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

మీ మార్కప్ return కీవర్డ్‌తో ఒకే లైన్‌లో లేకపోతే, మీరు దాన్ని ఒక జంట పేరెంటీసిస్‌లో చుట్టాలి:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

ఒక కంపోనెంట్ ను ఉపయోగించడం

ఇప్పుడు మీరు మీ Profile కంపోనెంట్‌ను డిఫైన్ చేసిన తర్వాత, మీరు దీన్ని ఇతర కంపోనెంట్లలో నెస్టు చేయవచ్చు. ఉదాహరణకు, మీరు అనేక Profile కంపోనెంట్లను ఉపయోగించే Gallery కంపోనెంట్‌ను ఎక్స్‌పోర్ట్ చేయవచ్చు:

బ్రౌజర్ ఏమి చూస్తుంది

కేస్‌లో ఉన్న తేడాను గమనించండి:

• <section> ఇది చిన్న అక్షరాలలో ఉంది, కాబట్టి React కు తెలుసు మనం HTML ట్యాగ్‌ను సూచిస్తున్నాము.
• <Profile /> ఇది పెద్ద P తో ప్రారంభమవుతుంది, కాబట్టి React కు తెలుసు మనం Profile అనే కాంపొనెంట్‌ను ఉపయోగించాలనుకుంటున్నాము.

మరియు Profile లో ఇంకా HTML ఉంది: <img />. చివరికి, బ్రౌజర్ ఇది చూస్తుంది:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

కంపోనెంట్లను నెస్టింగ్ మరియు ఆర్గనైజ్ చేయడం

కంపోనెంట్లు సాధారణ JavaScript ఫంక్షన్లు, కాబట్టి మీరు ఒకే ఫైల్‌లో అనేక కంపోనెంట్లను ఉంచవచ్చు. కాంపొనెంట్‌లు చిన్నవిగా లేదా పరస్పరంగా బలంగా సంబంధం ఉన్నప్పుడు ఇది అనుకూలంగా ఉంటుంది. ఈ ఫైలు చాలా నిండి పోయినప్పుడు, మీరు ఎప్పుడైనా Profile కంపోనెంట్‌ను ప్రత్యేకమైన ఫైల్‌కు తరలించవచ్చు. మీరు ఈ విధానం గురించి త్వరలో ఇంపోర్ట్స్ పేజీలో నేర్చుకుంటారు.

కారణంగా, Profile కంపోనెంట్స్ Gallery లో రేండర్ అవుతున్నాయి—చెప్పాలంటే, అనేకసార్లు!—కాబట్టి మనం చెప్పవచ్చు Gallery అనేది ఒక పేరెంట్ కంపోనెంట్, మరియు ప్రతి Profile ను “చైల్డ్” గా రేండర్ చేస్తుంది. ఇది React యొక్క మ్యాజిక్ భాగం: మీరు ఒక కంపోనెంట్ని ఒకసారి డిఫైన్ చేసి, అప్పుడు దాన్ని మీరు ఇష్టపడే ఎన్ని ప్రదేశాల్లోనూ, ఎన్ని సార్లు అయినా ఉపయోగించవచ్చు.

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}