అత్యంత ప్రాచుర్యం పొందిన ఫ్రంట్-ఎండ్ జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌గా, రియాక్ట్ ఎకోసిస్టమ్ శక్తివంతమైనది మరియు మీరు మీ అనువర్తనంలో ఏకీకృతం చేయగల ఉపయోగకరమైన సాధనాలు మరియు ప్యాకేజీలతో నిండి ఉంది. మేము ఇక్కడ మరికొన్ని ఉపయోగకరమైన వాటిని చర్చిస్తాము మరియు వాటిని ఎలా ఉపయోగించాలో మీకు చూపుతాము.

DevTools ను రియాక్ట్ చేయండి

devtools ను స్పందించండి

రియాక్ట్ డెవ్‌టూల్స్ అనేది క్రోమ్ మరియు ఫైర్‌ఫాక్స్ కోసం పొడిగింపు, ఇది రియాక్ట్ అనువర్తనాలను డీబగ్ చేసేటప్పుడు చాలా ఉపయోగకరంగా ఉంటుంది. మీరు దీన్ని Chrome యొక్క ఎలిమెంట్ ఇన్స్పెక్టర్ అని అనుకోవచ్చు – ఇది అప్లికేషన్ ట్రీని క్రిందికి తరలించడానికి మిమ్మల్ని అనుమతిస్తుంది, కానీ HTML మరియు CSS ని చూడటానికి బదులుగా, మీరు ఆధారాలు మరియు స్థితిని చూస్తున్నారు.

మీరు Chrome యొక్క devtools తో అంశాన్ని తనిఖీ చేసినట్లే మీరు అంశాలను కూడా ఎంచుకోవచ్చు, ఇది సంక్లిష్టమైన అనువర్తనాలతో పనిచేసేటప్పుడు ఉపయోగపడుతుంది.

పొడిగింపులో రియాక్ట్ ప్రొఫైలర్ కూడా ఉంది, ఇది కాంపోనెంట్ రెండరింగ్ మరియు మీ పనితీరులో పేలవమైన పనితీరు మరియు “జంక్” ను తొలగించడంలో సహాయపడుతుంది.

రియాక్ట్ ప్రొఫైలర్ టైమ్స్ కాంపోనెంట్ రెండరింగ్ మరియు పేలవమైన పనితీరును తొలగించడంలో సహాయపడుతుంది

ప్రొఫైలర్ మీ అనువర్తనాన్ని స్కాన్ చేయవచ్చు మరియు ఎక్కువ రెండరింగ్ అవసరమయ్యే భాగాల బార్ చార్ట్ను రూపొందించగలదు.

రియాక్టర్ రూటర్

మీ అనువర్తనంలో మార్గం-ఆధారిత రౌటింగ్‌ను నిర్వహించడానికి రియాక్ట్-రౌటర్ అనువైన ప్యాకేజీ. ఇది మీ అనువర్తనం యొక్క ఎగువ స్థాయిలో కూర్చుని, URL మార్గం ఆధారంగా ఇతర భాగాలకు నిర్దేశించే క్రొత్త భాగాన్ని జోడిస్తుంది, ఇది ప్రతి ఒక్కటి వ్యక్తిగత పేజీలను సూచించే “కంటైనర్” భాగాలుగా నిర్వహించడానికి మిమ్మల్ని అనుమతిస్తుంది.

ఉదాహరణకు, టాప్ మీ అప్లికేషన్ యొక్క భాగం ఇలా ఉంటుంది:

export default function App() {
  return (
    
      
); }

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

మీరు వేరియబుల్స్‌తో మార్గాలను కూడా సెటప్ చేయవచ్చు users/:userID, వీటిని పిల్లల భాగంలో తిరిగి పొందవచ్చు useParams().

రియాక్ట్ రూటర్ అన్ని రౌటింగ్‌లను నిర్వహిస్తుంది కాబట్టి, ఇది క్లయింట్‌కు చాలా వేగంగా ఉంటుంది. దీనిని ఒకే పేజీ అప్లికేషన్ లేదా SPA అంటారు. సర్వర్ నుండి క్రొత్త పేజీలను అభ్యర్థించే బదులు, క్లయింట్ ప్రస్తుత పేజీని డైనమిక్‌గా తిరిగి వ్రాస్తుంది. రియాక్ట్ రూటర్ విషయంలో, అతుకులు లేని అనుభవాన్ని అందించడానికి ఇది URL ద్వారా మార్గాలు – మీ సైట్ తక్షణమే లోడ్ అవుతోందని మీ వినియోగదారులు అనుకుంటారు.

Redux

Redux అనేది మీ రియాక్ట్ అప్లికేషన్ కోసం స్టేట్ కంటైనర్. ప్రస్తుత స్థితిని మార్చడానికి మీరు పంపగల చర్యలు మరియు తగ్గించే వాటితో పూర్తి చేయగల ఏదైనా భాగం నుండి మీరు కనెక్ట్ చేయగల గ్లోబల్ డేటా స్టోర్‌ను జోడిస్తుంది.

వాస్తవానికి, రిడక్స్ రియాక్ట్ యొక్క కాంటెక్స్ట్ API కోసం ఒక అద్భుతమైన రేపర్. సందర్భం ఇంటర్మీడియట్ భాగాల ద్వారా ప్రాప్లను మాన్యువల్‌గా పాస్ చేయకుండా ఏదైనా భాగానికి డేటాను పంపించడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు మీ ప్రాథమిక Redux- వంటి గ్లోబల్ డేటా స్టోర్‌ను చాలా తేలికగా అమలు చేయగలిగినప్పటికీ, Redux ఈ విధానంపై కొన్ని ప్రయోజనాలను కలిగి ఉంది.

అన్నింటిలో మొదటిది, Redux యొక్క డీబగ్గింగ్ సాధనాలు చాలా బాగున్నాయి. రాష్ట్రం మార్పులేనిది మరియు చర్యలు మరియు తగ్గించేవారి ద్వారా మాత్రమే నవీకరించబడుతుంది కాబట్టి, ఇది సమయ ప్రయాణ డీబగ్గింగ్‌ను అనుమతిస్తుంది. మీరు సమయానికి తిరిగి స్క్రోల్ చేయవచ్చు మరియు మీ చర్యలు ప్రస్తుత స్థితిని ప్రభావితం చేస్తాయి మరియు Redux Devtools ను ఉపయోగించి మీ రాష్ట్ర వృక్షాన్ని అన్వేషించవచ్చు.

రీడక్స్ డెవ్టూల్స్

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

Redux కూడా కాంపోనెంట్ అప్‌డేట్‌లను శుభ్రంగా నిర్వహిస్తుంది: ఒకే రాష్ట్ర మార్పు కనెక్ట్ చేయబడిన ప్రతి భాగం యొక్క రెండర్‌ను ప్రేరేపించదు, అది ప్రభావితం చేసేవి మాత్రమే, అనవసరమైన జంక్‌ను నివారిస్తాయి.

శైలి భాగాలు

శైలి భాగాలు

styled-components రియాక్ట్‌లో CSS తో పనిచేయడం సులభం చేస్తుంది. మీరు అన్నింటికీ తరగతి పేర్లను ఇవ్వవచ్చు మరియు వాటిని ఎప్పటిలాగే స్టైల్ చేయవచ్చు, ఇది “స్మార్ట్” కాదు మరియు ఆధారాలు మరియు స్థితికి కనెక్ట్ అవ్వదు. రియాక్ట్ దాని స్వంత శైలి వ్యవస్థను కలిగి ఉంది, కానీ ఇది వేరే వాక్యనిర్మాణాన్ని ఉపయోగిస్తుంది మరియు కొంచెం చిలిపిగా ఉంటుంది.

స్టైల్‌డ్ కాంపోనెంట్స్ ఈ సమస్యను సిఎస్‌ఎస్‌ను నేరుగా అక్షర స్ట్రింగ్‌కు వ్రాయడానికి అనుమతించడం ద్వారా పరిష్కరిస్తుంది, ఈ ప్రక్రియలో కొత్త “స్టైల్ కాంపోనెంట్” ను సృష్టిస్తుంది. ఉదాహరణకు, మీరు రంగును బట్టి బటన్‌ను సృష్టించవచ్చు props.primary ఫైల్ స్థానంలో background ఆధారాల నుండి వెతుకుతున్న ఫంక్షన్‌తో విలువ, ఇలా:

const Button = styled.a`
border-radius: 3px;
padding: 0.5rem 0;
background: ${props => props.primary ? "palevioletred" : "white"};
border: 2px solid white;`

మీరు ఆదిమవాసులకు మాత్రమే పరిమితం కాలేదు – మీరు మీ భాగాల యొక్క అందమైన సంస్కరణలను సృష్టించవచ్చు.

బూట్స్ట్రాప్ రియాక్ట్

బూట్స్ట్రాప్ రియాక్ట్

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

రియాక్ట్ బూట్స్ట్రాప్ బూట్స్ట్రాప్ ఆదిమాలను రియాక్ట్ భాగాలుగా అందిస్తుంది, ఇది మీ అనువర్తనం యొక్క అవసరాలకు అనుగుణంగా అనుకూల శైలితో విస్తరించవచ్చు. పాడింగ్, మార్జిన్లు, ఫ్లెక్స్‌బాక్స్ మరియు లేఅవుట్ వంటి తెరవెనుక ఆకృతీకరణ నుండి బూట్స్ట్రాప్ ఇబ్బందిని తొలగిస్తుంది, మీ అనువర్తనం యొక్క శైలి మరియు కార్యాచరణపై దృష్టి పెట్టడానికి మిమ్మల్ని అనుమతిస్తుంది.

మరింత తెలుసుకోవడానికి మీరు వారి కాంపోనెంట్ లైబ్రరీని ఇక్కడ బ్రౌజ్ చేయవచ్చు.

చరిత్ర పుస్తకం

మీ అనువర్తనం చాలా భాగాలను ఉపయోగిస్తుంటే, వాటిని నిర్వహించడానికి మరియు పరీక్షించడానికి మంచి మార్గంలో మీరు ఆసక్తి కలిగి ఉండవచ్చు. స్టోరీబుక్ ఒంటరిగా UI భాగాలను సృష్టించడానికి మరియు పరీక్షించడానికి శాండ్‌బాక్స్డ్ వాతావరణాన్ని అందిస్తుంది, అదే విధంగా కాంపోనెంట్ లైబ్రరీని నిర్వహించడానికి మరియు నిర్వహించడానికి సులభమైన మార్గం.

చరిత్ర పుస్తకం

ప్రతి భాగం ఒంటరిగా చూడవచ్చు మరియు వారికి పంపిన డేటాను నియంత్రించే బహుళ “గుబ్బలు” ఉన్నాయి. భాగం కోసం విస్తృతమైన డాక్యుమెంటేషన్ రాయడం కూడా సాధ్యమే, ఇది అంతర్గత వినియోగాన్ని మెరుగుపరచడంలో సహాయపడుతుంది. వాస్తవానికి, స్టోరీబుక్‌కు ప్రతి భాగం కోసం కొంత స్థాయి అదనపు కాన్ఫిగరేషన్ అవసరం, మరియు డాక్యుమెంటేషన్ రాయడం ఉచితం కాదు, కానీ పెద్ద జట్లకు ./components ఫోల్డర్, స్టోరీబుక్ దీన్ని నిర్వహించడానికి సహాయపడుతుంది.

మీరు దీన్ని ఎలా ఉపయోగించాలో ప్రదర్శించాలనుకుంటే, వారి కాంపోనెంట్ లైబ్రరీలను నిర్వహించడానికి స్టోరీబుక్‌ను ఉపయోగించే ఐబిఎం, ఉబెర్ మరియు కోర్సెరా వంటి సంస్థల నుండి ఆన్‌లైన్‌లో చాలా లైవ్ డెమోలు అందుబాటులో ఉన్నాయి.

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

Source link