Back to Question Center
0

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి            ఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి: రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

1 answers:
ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి

అధిక నాణ్యత, ప్రతిబింబించే లోతైన పరిచయం కోసం, మీరు గతంలో కెనడియన్ పూర్తి స్టాక్ డెవలపర్ వెస్ బోస్కి వెళ్ళలేరు. ఇక్కడ అతని కోర్సును ప్రయత్నించండి, మరియు SITEPOINT ను 25% ఆఫ్ ను పొందడానికి మరియు SitPoint మద్దతుకి సహాయంగా ఉపయోగించండి.

Semalt అనేది యూజర్ ఇంటర్ఫేస్లను నిర్మించడానికి ఒక అద్భుతమైన జావాస్క్రిప్ట్ లైబ్రరీ - 2 coil subtank mini replacement. సెమాల్ట్ యాప్ సృష్టించుకోండి ప్రచురించినప్పటి నుండి, ఇది సెరాల్ట్ అప్లికేషన్ యొక్క కంకణాలు చాలా సులభంగా మారింది.

ఈ ఆర్టికల్లో, సెమాల్ట్ మాదిరిగా పనిచేసే ఒక అనువర్తనాన్ని రూపొందించడానికి రియాక్ట్ యాప్ సృష్టించుకోండి మేము Firebase ను ఉపయోగిస్తాము. ఇది అప్పుడు ఓటు చేయవచ్చు ఒక కొత్త లింక్ సమర్పించడానికి యూజర్ అనుమతిస్తుంది.

Semalt ఒక ప్రత్యక్ష ప్రదర్శన మేము ఏమి నిర్మిస్తాం.

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

ఎందుకు ఫైర్బేస్?

Firebase ఉపయోగించి యూజర్ రియల్ టైమ్ డేటా చూపించడానికి ఇది చాలా సులభం చేస్తుంది. లింక్పై వినియోగదారు ఓట్లు వచ్చినప్పుడు, ఫీడ్బ్యాక్ తక్షణమే ఉంటుంది. Firebase యొక్క రియల్టైమ్ డేటాబేస్ ఈ లక్షణాన్ని అభివృద్ధి చేయడానికి మాకు సహాయం చేస్తుంది. కూడా, అది Firebase తో రియాక్ట్ అప్లికేషన్ బూట్స్ట్రాప్ ఎలా అర్థం మాకు సహాయం చేస్తుంది.

ఎ 0 దుకు ప్రతిస్ప 0 ది 0 చాలి?

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

గమనిక: మీరు సెమాల్ట్ లేదా మోబ్క్స్ వంటి రాష్ట్ర కంటైనర్ను కూడా ఉపయోగించవచ్చు, కానీ సరళత కొరకు, ఈ ట్యుటోరియల్ కోసం మేము ఒకదాన్ని ఉపయోగించలేము.

మొత్తం ప్రాజెక్ట్ GitHub లో అందుబాటులో ఉంది.

సిఫార్సు చేసిన కోర్సులు

ప్రాజెక్ట్ ఏర్పాటు

సెమాల్ట్ మా ప్రాజెక్ట్ నిర్మాణం మరియు ఏ అవసరమైన ఆధారపడటం ఏర్పాటు దశలను నడవడానికి.

క్రియేట్-రియాక్ట్-అనువర్తనం

మీరు ఇప్పటికే లేకపోతే, మీరు ఇన్స్టాల్-చర్య-అనువర్తనం ఇన్స్టాల్ చేయాలి. అలా చేయుటకు, మీ టెర్మినల్ లో కిందివాటిని టైప్ చేయవచ్చు:

     npm install -g create-react-app    

మీరు ప్రపంచవ్యాప్తంగా దీన్ని వ్యవస్థాపించిన తర్వాత, దాన్ని ఏ ఫోల్డర్లోనైనా సెమాల్ట్ ప్రాజెక్ట్లో తాత్కాలికంగా ఉపయోగించవచ్చు.

ఇప్పుడు, ఒక క్రొత్త అనువర్తనాన్ని సృష్టించి దాన్ని reddit-clone అని పిలుద్దాము.

     క్రియేట్-రియాక్ట్-అప్లికేషన్ reddit- క్లోన్    

Reddit-clone ఫోల్డర్లో ఒక క్రొత్త క్రియేట్-రియాక్ట్-అనువర్తనం ప్రాజెక్ట్ను ఇది పరంజా చేస్తుంది. బూట్స్ట్రాపింగ్ జరుగుతుంది ఒకసారి, మేము reddit- క్లోన్ డైరెక్టరీ లోపల వెళ్ళి అభివృద్ధి సర్వర్ కాల్పులు చేయవచ్చు:

     npm ప్రారంభం    

ఈ సమయంలో, మీరు http: // localhost కు వెళ్ళవచ్చు: 3000 / మరియు మీ అనువర్తనం అస్థిపంజరం అప్ మరియు నడుస్తున్న చూడండి.

అనువర్తనం రూపకల్పన

నిర్వహణ కొరకు, నేను ఎల్లప్పుడూ నా కంటైనర్లు మరియు భాగాలు ను వేరు చేయాలనుకుంటున్నాను. కంటైనర్లు మా అప్లికేషన్ వ్యాపార లాజిక్ కలిగి మరియు అజాక్స్ అభ్యర్ధనలు నిర్వహించండి స్మార్ట్ భాగాలు. భాగాలు కేవలం మూగ ప్రదర్శనా భాగాలు. వారు తమ సొంత అంతర్గత స్థితిని కలిగి ఉంటారు, ఆ అంశానికి సంబంధించిన తర్కం (ఉదా. నియంత్రిత ఇన్పుట్ భాగం యొక్క ప్రస్తుత స్థితిని చూపించడం) నియంత్రించడానికి ఇది ఉపయోగించబడుతుంది.

అనవసరమైన లోగో మరియు CSS ఫైళ్ళను తీసివేసిన తర్వాత, మీ అనువర్తనం ఇప్పుడు ఎలా కనిపించాలి. మేము ఒక భాగాలు ఫోల్డర్ మరియు ఒక కంటైనర్లు ఫోల్డర్ను సృష్టించాము. లెట్ యొక్క తరలింపు అనువర్తనం. js లోపల కంటైనర్లు / అనువర్తనం ఫోల్డర్ మరియు సృష్టించు registerServiceWorker. js లోపల utils ఫోల్డర్. png "alt ="ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి: రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt "/>

మీ src / కంటైనర్లు / App / ఇండెక్స్. js ఫైలు ఇలా ఉండాలి:

     // src / కంటైనర్లు / App / ఇండెక్స్. JS'ప్రతిచర్య' నుండి ప్రతిచర్య, {భాగం};తరగతి అనువర్తనం భాగం {రెండర్    {తిరిగి ( 
హలో వరల్డ్
);}}డిఫాల్ట్ App ఎగుమతి;

మీ src / ఇండెక్స్. js ఫైలు ఇలా ఉండాలి:

     // src / ఇండెక్స్. JSదిగుమతి 'ప్రతిచర్య' నుండి ప్రతిస్పందిస్తుంది;'రియాక్ట్-డోమ్' నుండి ReactDOM ను దిగుమతి చేయండి;'నుండి అనువర్తనం దిగుమతి. / కంటైనర్లు / App ';నుండి రిజిస్ట్రేషన్ రిజిస్ట్రేషన్ వర్కర్. / Utils / registerServiceWorker ';ReactDOM. రెండర్ (, పత్రం getElementById ('రూట్'));registerServiceWorker   ;    

మీ బ్రౌజర్కు వెళ్ళండి, మరియు ప్రతిదీ జరిమానా ఉంటే, మీరు చూస్తారు హలో వరల్డ్ మీ తెరపై.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

రియాక్ట్-రౌటర్ కలుపుతోంది

Semalt-router మాకు మా అనువర్తనం కోసం మార్గాలను నిర్వచించటానికి సహాయం చేస్తుంది. ఇది సెమాల్ట్ ఎకోసిస్టమ్లో చాలా అనుకూలీకరించదగినది మరియు బాగా ప్రసిద్ది చెందింది.

మేము వర్షన్ ను ఉపయోగిస్తాము. 3. 0 రియాక్ట్-రౌటర్ .

     npm install --save react-router @ 3. 0. 0    

ఇప్పుడు, కొత్త ఫైల్ మార్గాల్ని చేర్చండి. js లోపల src క్రింది కోడ్తో ఫోల్డర్:

     // మార్గాలు. JSదిగుమతి 'ప్రతిచర్య' నుండి ప్రతిస్పందిస్తుంది;'రియాక్ట్-రౌటర్' నుండి {రూటర్, రూట్} దిగుమతి;'నుండి అనువర్తనం దిగుమతి. / కంటైనర్లు / App ';const Routes = (props) => ( <రూటర్ { ఆధారాలు}>  <మార్గం మార్గం = "/" భాగం = {App}>     );డిఫాల్ట్ మార్గాలు ఎగుమతి;    

రూటర్ భాగం అన్ని రూట్ భాగాలు మూటగట్టి. రూట్ భాగం భాగం ప్రాప్టు మార్గం ప్రాప్పై ఆధారపడి, పేజీలో ఇవ్వబడిన భాగం భాగం ప్రాప్. ఇక్కడ, రూటర్ భాగం ఉపయోగించి మా అనువర్తనం భాగంను లోడ్ చేయడానికి రూట్ URL ( / ) ను రూపొందిస్తున్నాము.

      <రూటర్ { ఆధారాలు}> <రూట్ మార్గం = "/" భాగం = { 
హలో వరల్డ్!
}>

పైన పేర్కొన్న కోడ్ కూడా చెల్లదు. మార్గం / , ది

హలో వరల్డ్!
మౌంట్ చేయబడుతుంది.

ఇప్పుడు, మేము మా మార్గాల్ని పిలవాలి. మా src / ఇండెక్స్ నుండి js ఫైలు. js ఫైల్. ఫైల్ తప్పక క్రింది కంటెంట్ కలిగి ఉండాలి:

     // src / ఇండెక్స్. JSదిగుమతి 'ప్రతిచర్య' నుండి ప్రతిస్పందిస్తుంది;'రియాక్ట్-డోమ్' నుండి ReactDOM ను దిగుమతి చేయండి;'రియాక్ట్-రౌటర్' నుండి దిగుమతి {browserHistory};'నుండి అనువర్తనం దిగుమతి. / కంటైనర్లు / App ';దిగుమతి మార్గాలు 'నుండి. / మార్గాలను ';నుండి రిజిస్ట్రేషన్ రిజిస్ట్రేషన్ వర్కర్. / Utils / registerServiceWorker ';ReactDOM. రెండర్ (<మార్గాలు చరిత్ర = {browserHistory} />,పత్రం. getElementById ( 'రూట్'));registerServiceWorker   ;    

మౌలికంగా, మేము మా రూటర్ భాగం నుండి మా మార్గాల్లో మౌంటు చేస్తున్నాము. js ఫైల్. చరిత్ర చరిత్ర దానికి అనుగుణంగా మేము చాటుతున్నాము, తద్వారా చరిత్ర ట్రాకింగ్ను ఎలా నిర్వహించాలో తెలుసుకుంటారు.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

జోడించడం ఫైర్బేస్

మీకు ఫైర్బేస్ ఖాతా లేకపోతే, ఇప్పుడే ఒకదాన్ని సృష్టించండి (ఇది ఉచితం!) వారి వెబ్సైట్కు వెళ్లడం ద్వారా. మీరు క్రొత్త ఖాతాను సృష్టించడం పూర్తి చేసిన తర్వాత, మీ ఖాతాకు లాగిన్ అవ్వండి మరియు కన్సోల్ పేజీకి వెళ్లి, ప్రాజెక్ట్ ని క్లిక్ చేయండి.

మీ ప్రాజెక్ట్ పేరుని నమోదు చేయండి (నేను గని reddit-clone కాల్ చేయండి, మీ దేశాన్ని ఎంచుకోండి మరియు ప్రాజెక్ట్ను సృష్టించండి బటన్ క్లిక్ చేయండి.

ఇప్పుడు, ముందుకు వెళ్ళటానికి ముందు, మనము డేటాబేస్ కొరకు నియమాలను మార్చవలసి ఉంటుంది, అప్రమేయంగా, Firebase యూజర్ చదివి వ్రాయుటకు మరియు వ్రాయగలగడానికి ఆథరైజ్డ్ చేయబడాలని ఆశిస్తుంది. మీరు మీ ప్రాజెక్ట్ ను ఎంచుకుని, డేటాబేస్ టాబ్ పై క్లిక్ చేసి ఉంటే, మీరు మీ డేటాబేస్ను చూడగలరు. చదువు ":" auth! = null ","వ్రాయడం": "auth! = null"}}

మేము ఈ క్రింది వాటిని మార్చాలి:

   {"నియమాలు": {"చదువు.": "auth === శూన్యము","వ్రాయడం": "auth === శూన్యము"}}    

ఇది లాగింగ్ చేయకుండా డేటాబేస్ను అప్డేట్ చేయనిస్తుంది. డేటాబేస్కు నవీకరణలు చేయటానికి ముందు మేము ప్రమాణీకరణను కలిగి ఉంటే, ఫైర్బేస్ అందించిన డిఫాల్ట్ నిబంధనలకు మనకు అవసరం. ఈ అప్లికేషన్ సాధారణ ఉంచడానికి, మేము ప్రమాణీకరణ చేయడం.

ముఖ్యం: మీరు ఈ సవరణను చేయకపోతే, సెమాల్ట్ మీ అనువర్తనం నుండి డేటాబేస్ని అప్డేట్ చేయనివ్వదు.

ఇప్పుడు, కింది కోడ్ను అమలు చేయడం ద్వారా ఫైర్బాస్ npm మాడ్యూల్ మా అనువర్తనంకి జోడించనివ్వండి:

     npm సంస్థాపన - సాగే ఫైర్బాస్    

తర్వాత, మీ అనువర్తనం / సూచికలో మాడ్యూల్ను దిగుమతి చేయండి. js ఫైల్:

     // అనువర్తనం / ఇండెక్స్. JS"ఫైర్బాస్" నుండి ఫైర్బాస్ గా దిగుమతి *;    

Firebase కు లాగిన్ అయిన తర్వాత మా ప్రాజెక్ట్ ను ఎంచుకున్నప్పుడు, మేము ఒక ఎంపికను పొందుతారు మీ వెబ్ అనువర్తనానికి Firebase ను జోడించు .

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

ఆ ఐచ్చికాన్ని క్లిక్ చేస్తే, మా మోడల్ కనిపిస్తుంది, అది మనకు కాన్ఫిగరేషన్ కాంప్లిమెంట్ పద్ధతిలో ఉపయోగించే కాన్ఫిగరేషన్ వేరియబుల్ ను చూపుతుంది.

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

లెట్స్ ఫైర్బేస్ config ఫైలు సృష్టించండి. ఈ ఫైలు firebase-config అని పిలుస్తాము. JS , మరియు అది ఫైర్బేస్తో మా అనువర్తనాన్ని కనెక్ట్ చేయడానికి అవసరమైన అన్ని కాన్ఫిగరేషన్లను కలిగి ఉంటుంది:

     // అనువర్తనము / firebase-config. JSఎగుమతి డిఫాల్ట్ {అపికే: "AIzaSyBRExKF0cHylh_wFLcd8Vxugj0UQRpq8oc",authDomain: "reddit-clone-53da5 firebaseapp com",databaseURL: "https: // reddit-clone-53da5 firebaseio com",projectId: "reddit-clone-53da5",storageBucket: "reddit-clone-53da5. appspot com",మెసేజింగ్సెండర్ ఐడి: "490290211297"};    

మేము మా Firebase config ను App / ఇండెక్స్ లోకి దిగుమతి చేస్తాము. JS :

     // అనువర్తనం / ఇండెక్స్. JSనుండి config దిగుమతి. / Firebase-config ';    

మేము ఫెర్బేస్ డేటాబేస్ కనెక్షన్ను కన్స్ట్రక్టర్ లో ప్రారంభించాము.

     // అనువర్తనం / ఇండెక్స్. JSకన్స్ట్రక్టర్    {సూపర్   ;/ Firebase ప్రారంభించుFirebase. initializeApp (config);}    
జీవితచక్రం హుక్ లో, మేము ప్యాకేజీ ఫైర్బాసును ఉపయోగించుకుంటాము మరియు దాని initializeApp పద్దతిని కాల్ చేసి, config (+ 56) వేరియబుల్. ఈ వస్తువు మా అనువర్తనం గురించి మొత్తం డేటాను కలిగి ఉంది. మనము డేటాబేస్ను చదవగలము మరియు వ్రాయుటకు తద్వారా ప్రారంభముఅప్ప్ పద్ధతి మన ఫైర్సేస్ డాటాబేస్కు మా అప్లికేషన్ను అనుసంధానిస్తుంది.

మన కాన్ఫిగరేషన్ సరైనదేనా అని తనిఖీ చేయడానికి కొంత డేటాను ఫైర్బేస్కు చేర్చండి. వెళ్ళండి డేటాబేస్ టాబ్ మరియు మీ డేటాబేస్ క్రింది నిర్మాణం జోడించండి:

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

న క్లిక్ జోడించు మా డేటాబేస్ డేటా సేవ్ చేస్తుంది.

{.పోస్ట్లను రిఫ్రెష్ = ఫైర్బాస్. డేటాబేస్ . ref ( 'పోస్ట్');_this = ఈ వీలు;postsRef. ఆన్ ('విలువ', ఫంక్షన్ (స్నాప్ షాట్) {కన్సోల్. లాగ్ (స్నాప్షాట్ వాల్ );_this. setState ({పోస్ట్లు: స్నాప్షాట్. Val ,లోడ్ అవుతోంది: తప్పుడు});});}

ఫైర్బాస్. డేటాబేస్ డేటాబేస్ సేవకు మాకు సూచన ఇస్తుంది. ఉపయోగించి ref , మేము డేటాబేస్ నుండి ఒక నిర్దిష్ట సూచన పొందవచ్చు. ఉదాహరణకు, ref ('పోస్ట్స్') అని పిలిచినట్లయితే, మేము పోస్ట్లను మా డేటాబేస్ నుండి రిఫర్ చేస్తాము మరియు పోస్ట్స్ రిఫ్ లో నమోదు చేస్తాము.

on ('value', . ) డాటాబేస్లో ఎలాంటి మార్పులు చేసినప్పుడు మాకు నవీకరించిన విలువను ఇస్తుంది. ఏ డేటాబేస్ సంఘటనల ఆధారంగా మా వినియోగదారు ఇంటర్ఫేస్కు నిజమైన-సమయ నవీకరణ అవసరం అయినప్పుడు ఇది చాలా ఉపయోగకరంగా ఉంటుంది.

ఉపయోగించి postsRef. ఒకసారి ('విలువ', . ) మాకు ఒకసారి డేటాను ఇస్తాయి. ఇది ఒక్కసారి మాత్రమే లోడ్ చేయవలసిన డేటాకు ఉపయోగపడుతుంది మరియు తరచూ మార్చడానికి లేదా క్రియాశీల శ్రవణ అవసరం కాదని అంచనా వేయదు.

మా లో కాల్బ్యాక్లో నవీకరించిన విలువను పొందిన తర్వాత, మేము మా పోస్ట్స్ రాష్ట్రంలో విలువలను నిల్వ చేస్తాము.

ఇప్పుడు మన కన్సోల్లో కనిపించే డేటా చూస్తాము.

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

అంతేకాక, మేము ఈ డేటాను మా పిల్లలకి పంపించాము. కాబట్టి, మన యాప్ ఫంక్షన్ ఫంక్షన్ ను సవరించాలి. js ఫైల్:

     // అనువర్తనం / ఇండెక్స్. JSరెండర్    {తిరిగి ( 
{ఈ. ఆధారాలు. పిల్లలు && రియాక్ట్. cloneElement (ఈ వస్తువులు., పిల్లలు,firebaseRef: firebase. డేటాబేస్ . ref ( 'పోస్ట్'),పోస్ట్లు: ఈ. రాష్ట్ర. పోస్ట్లులోడ్ అవుతోంది: ఈ. రాష్ట్ర. లోడ్})}
);}

ఇక్కడ ప్రధాన లక్ష్యం మా పిల్లల భాగాలలో అందుబాటులో ఉన్న పోస్టుల డేటాను తయారు చేయడం, ఇది 91 (రిపీట్-రూటర్) ద్వారా జారీ చేయబడుతుంది.

మేము తనిఖీ చేస్తున్నాం ఈ. ఆధారాలు. పిల్లలు ఉంది లేదా లేదు, మరియు అది ఉన్నట్లయితే మనం ఆ అంశాన్ని క్లోన్ చేసి, మా పిల్లలందరికి అన్ని అంశాలన్నిటికీ పాస్ చేస్తాము. ఇది డైనమిక్ పిల్లల్లో ప్రాబల్యాన్ని దాటడానికి చాలా సమర్థవంతమైన మార్గం.

కాలింగ్ క్లోన్ అనేది ఇప్పటికే ఉన్న ప్రస్తుత ఆధారాలను లో విలీనం చేస్తుంది. ఆధారాలు. , ఫైర్బాసే రీఫ్ , పోస్టులు , 91 లోడింగ్ ఉన్నాయి.

ఈ పద్ధతిని ఉపయోగించడం, ఫైర్బాసే రీఫ్ , పోస్ట్స్ మరియు 91 లోడింగ్ వస్తువులు అన్ని మార్గాల్లో అందుబాటులో ఉంటాయి.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

Firebase తో అనుసంధానాన్ని అనుసంధానిస్తోంది

ఫైర్బేస్ వస్తువులను మాత్రమే నిల్వ చేయగలదు; ఇది శ్రేణులకు ఏ స్థానిక మద్దతు లేదు. సెమాల్ట్ డేటాను క్రింది ఫార్మాట్లో భద్రపరుస్తుంది:

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt

మీ అభిప్రాయాలను పరీక్షించడానికి మీరు మాన్యువల్గా పై స్క్రీన్షాట్లో డేటాను జోడించండి.

అన్ని పోస్ట్లకు వీక్షణలను జోడించు

ఇప్పుడు మేము అన్ని పోస్ట్లను చూపించడానికి వీక్షణలను జోడిస్తాము. ఒక ఫైలు src / కంటైనర్లు / పోస్ట్లు / సూచిక సృష్టించండి. js కింది కంటెంట్తో:

     // src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్. JS'ప్రతిచర్య' నుండి ప్రతిచర్య, {భాగం};క్లాస్ పోస్ట్లు భాగం {రెండర్    {(ఈ ప్రోప్స్ లోడ్ అవుతోంది) {తిరిగి ( 
లోడ్…
);}తిరిగి (
{ఈ. ఆధారాలు. పోస్ట్లు. మ్యాప్ ((పోస్ట్) => {తిరిగి (
{పోస్ట్.

తరువాత, మనం దానిని మార్గాల్లోకి జోడించాలి. js ఫైల్:

     // మార్గాలు. JS. <రూటర్ { ఆధారాలు}>  <మార్గం మార్గం = "/" భాగం = {App}>  <మార్గం మార్గం = "/ పోస్ట్లు" భాగం = {పోస్ట్లు} />     .    

ఎందుకంటే ఈ పోస్టులను / పోస్ట్స్ మార్గంలో మాత్రమే చూపించాలనుకుంటున్నాము. మార్గం మార్గం మార్గాన్ని మార్గంలో భాగం ప్రాప్ట్ మరియు 91 / పోస్ట్స్ 56 ) చర్య-రౌటర్ యొక్క భాగం.

URL localhost కి వెళ్లినట్లయితే: 3000 / పోస్ట్లు, మేము మా సెమాల్ట్ డేటాబేస్ నుండి పోస్ట్లను చూస్తాము.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

ఒక క్రొత్త పోస్ట్ వ్రాయడానికి వీక్షణలను జోడించండి

ఇప్పుడు, ఒక కొత్త పోస్ట్ ను చేర్చగల చోట నుండి ఒక దృశ్యాన్ని సృష్టించండి. ఒక ఫైలు సృష్టించు src / కంటైనర్లు / AddPost / ఇండెక్స్. js కింది కంటెంట్తో:

     // src / కంటైనర్లు / AddPost / ఇండెక్స్. JS'ప్రతిచర్య' నుండి ప్రతిచర్య, {భాగం};తరగతి AddPost భాగం {కన్స్ట్రక్టర్    {సూపర్   ;ఈ. handleChange = ఈ. handleChange. (ఈ) జతకూడి;ఈ. handleSubmit = ఇది. handleSubmit. (ఈ) జతకూడి;}రాష్ట్ర =శీర్షిక: ''};handleChange = (e) => {ఈ. setState ({శీర్షిక: ఇ. లక్ష్యం. విలువ});}handleSubmit = (e) => {ఇ. preventDefault   ;ఈ. ఆధారాలు. firebaseRef. పుష్ ({శీర్షిక: ఈ. రాష్ట్ర. టైటిల్});ఈ. setState ({శీర్షిక: ''});}రెండర్    {తిరిగి ( 
<ఇన్పుట్రకం = "టెక్స్ట్"placeholder = "మీ పోస్ట్ యొక్క శీర్షిక వ్రాయండి"onChange = {this. handleChange}విలువ = {this. రాష్ట్ర. శీర్షిక}/> <బటన్టైప్ = "submit"onClick = {this. handleSubmit}> సమర్పించండి
);}}డిఫాల్ట్ AddPost ఎగుమతి;

ఇక్కడ, handleChange పద్ధతి ఇన్పుట్ బాక్స్ లో ప్రస్తుతం విలువ మా రాష్ట్ర నవీకరణలను. ఇప్పుడు, మేము బటన్పై క్లిక్ చేసినప్పుడు, హ్యాండిల్ సబ్మిట్ పద్ధతి ట్రిగ్గర్ చేయబడింది. హ్యాండ్ సబ్మిట్ పద్ధతి మా డేటాబేస్ వ్రాయడానికి API అభ్యర్థన చేయడానికి బాధ్యత. మేము దీన్ని ఉపయోగిస్తున్నాం ఫైర్బాసేప్రెఫ్ అభ్యాసం మేము అన్ని పిల్లలను దాటి వెళ్ళాము.

     ఈ. ఆధారాలు. firebaseRef. పుష్ ({శీర్షిక: ఈ. రాష్ట్ర. టైటిల్});    

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

సెమాల్ట్ కొత్త పోస్ట్ డేటాబేస్ లో నిల్వ చేయబడింది, మేము ఇన్పుట్ బాక్స్ మళ్ళీ ఖాళీని తయారు, ఒక కొత్త పోస్ట్ జోడించడానికి సిద్ధంగా.

ఇప్పుడు మన పేజీలను మన మార్గాల్లోకి చేర్చాలి:

     // మార్గాలు. JSదిగుమతి 'ప్రతిచర్య' నుండి ప్రతిస్పందిస్తుంది;'రియాక్ట్-రౌటర్' నుండి {రూటర్, రూట్} దిగుమతి;'నుండి అనువర్తనం దిగుమతి. / కంటైనర్లు / App ';'నుండి పోస్ట్లు దిగుమతి. / కంటైనర్లు / పోస్ట్లు ';'నుండి AddPost దిగుమతి. / కంటైనర్లు / AddPost ';const Routes = (props) => ( <రూటర్ { ఆధారాలు}>  <మార్గం మార్గం = "/" భాగం = {App}>  <మార్గం మార్గం = "/ పోస్ట్లు" భాగం = {పోస్ట్లు} />  <మార్గం మార్గం = "/ యాడ్-పోస్ట్" భాగం = {AddPost} />     );డిఫాల్ట్ మార్గాలు ఎగుమతి;    

ఇక్కడ, మేము / యాడ్-పోస్ట్ మార్గాన్ని జోడించాము, తద్వారా మేము ఆ మార్గంలో క్రొత్త పోస్ట్ను జోడించవచ్చు. అందువల్ల, మేము AddPost భాగాలను దాని యొక్క ప్రాప్టుకు ఆమోదించింది.

అలాగే, మా src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్ పద్ధతి రెండర్ సవరించాలి. js ఫైల్, తద్వారా అది వస్తువులను కాకుండా అర్రేల మీదకి మళ్ళిస్తుంది (ఫైర్బేస్ శ్రేణులను నిల్వ చేయదు).

     // src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్. JSరెండర్    {పోస్ట్లు = ఈ వీలు. ఆధారాలు. పోస్ట్లు;(ఈ ప్రోప్స్ లోడ్ అవుతోంది) {తిరిగి ( 
లోడ్
);}తిరిగి (
{ఆబ్జెక్ట్. కీలు (పోస్ట్). మ్యాప్ (ఫంక్షన్ (కీ) {తిరిగి (
{పోస్ట్లు [కీ]. submit బటన్పై క్లిక్ చేసిన తర్వాత, పోస్ట్ పేజీలో వెంటనే క్రొత్త పోస్ట్ కనిపిస్తుంది.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

ఓటింగ్ అమలు

ఇప్పుడు వినియోగదారులు పోస్ట్పై ఓటు వేయడానికి అనుమతించాలి. దీని కోసం, రెండర్ పద్ధతి src / కంటైనర్లు / App / ఇండెక్స్ యొక్క రెండర్ను మార్చండి. JS :

     // src / కంటైనర్లు / App / ఇండెక్స్. JSరెండర్    {తిరిగి ( 
{ఈ. ఆధారాలు. పిల్లలు && రియాక్ట్. cloneElement (ఈ వస్తువులు., పిల్లలు,// https: // github. com / ReactTraining / స్పందించలేదు-రౌటర్ / బొట్టు / v3 / ఉదాహరణలు / ప్రయాణిస్తున్న-ఆధారాలు టు చిల్ద్రెన్ / అనువర్తనం. JS # L56-L58ఫైర్బాస్: ఫైర్బాస్. డేటాబేస్ ,పోస్ట్లు: ఈ. రాష్ట్ర. పోస్ట్లులోడ్ అవుతోంది: ఈ. రాష్ట్ర. లోడ్})}
);}

మనం మారిన అగ్నిమాపక ఫ్రమ్ అగ్నిమాపకదళం: అగ్నిమాపక. డేటాబేస్ . ref ('పోస్ట్స్') నుండి firebase: firebase. డేటాబేస్ ఎందుకంటే మన ఓటింగ్ లెక్కింపును నవీకరించటానికి ఫైర్బేస్ యొక్క సెట్ పద్దతిని వాడతాము. ఈ విధంగా, మనం ఎక్కువగా ఫైర్బాస్ రిఫాలు ఉన్నట్లయితే, వాటిని అగ్నిమాపక ని మాత్రమే ఉపయోగించడం ద్వారా వాటిని నిర్వహించడం చాలా సులభం అవుతుంది.

ఓటింగ్ కొనసాగుముందు, మా src / కంటైనర్లు / AddPost / ఇండెక్స్ లో హ్యాండ్ సబ్స్క్రిప్షన్ పద్ధతి సవరించడానికి వీలు. js కొద్దిగా ఫైల్:

     // src / కంటైనర్లు / AddPost / ఇండెక్స్. JShandleSubmit = (e) => {.ఈ. ఆధారాలు. Firebase. ref ( 'పోస్ట్'). పుష్ ({శీర్షిక: ఈ. రాష్ట్ర. టైటిల్,upvote: 0,downvote: 0});.}    

మేము మా పేరు మార్చిన firebaseRef prop అగ్నిమాపక prop. కాబట్టి, మేము దీనిని మార్చాము. ఆధారాలు. firebaseRef. పుష్ నుండి ఈ. ఆధారాలు. Firebase. ref ( 'పోస్ట్'). పుష్ .

ఇప్పుడు మనము మా src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్ ను సవరించాలి. ఓటింగ్కు స్థానం కల్పించడానికి js ఫైల్.

ది రెండర్ పద్ధతిని దీనికి సవరించాలి:

     // src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్. JSరెండర్    {పోస్ట్లు = ఈ వీలు. ఆధారాలు. పోస్ట్లు;_this = ఈ వీలు;(! పోస్ట్లు) {తప్పుడు తిరిగి;}(ఈ ప్రోప్స్ లోడ్ అవుతోంది) {తిరిగి ( 
లోడ్
);}తిరిగి (
{ఆబ్జెక్ట్. కీలు (పోస్ట్). మ్యాప్ (ఫంక్షన్ (కీ) {తిరిగి (
శీర్షిక: {పోస్ట్లు [కీ]. శీర్షిక}
Upvotes: {పోస్ట్లు [కీ]. upvote}
Downvotes: {పోస్ట్లు [కీ]. downvote}
<బటన్onClick = {_this. handleUpvote. బైండ్ (ఈ, పోస్ట్లు [కీ], కీ)}టైప్ = "బటన్"> అంగీకరించండి <బటన్onClick = {_this. handleDownvote. బైండ్ (ఈ, పోస్ట్లు [కీ], కీ)}టైప్ = "బటన్"> downvote
);})}
);}

బటన్లు క్లిక్ చేసినప్పుడు, upvote లేదా downvote లెక్కింపు మా Firebase DB లో పెంచబడుతుంది. ఆ తర్కంని నిర్వహించడానికి, మేము మరో రెండు పద్ధతులను రూపొందించాము: హ్యాండిట్యూట్ మరియు హ్యాండ్డౌన్వోట్ :

     // src / కంటైనర్లు / పోస్ట్లు / ఇండెక్స్. JShandleUpvote = (పోస్ట్, కీ) => {ఈ. ఆధారాలు. Firebase. ref ('పోస్ట్లు /' + కీ). సెట్ ({శీర్షిక: పోస్ట్. టైటిల్,upvote: పోస్ట్. upvote + 1,downvote: పోస్ట్. downvote});}handleDownvote = (పోస్ట్, కీ) => {ఈ. ఆధారాలు. Firebase. ref ('పోస్ట్లు /' + కీ). సెట్ ({శీర్షిక: పోస్ట్. టైటిల్,upvote: పోస్ట్. , upvotedownvote: పోస్ట్. downvote + 1});}    

ఈ రెండు పద్ధతులలో, ఒక బటన్ బటన్ల మీద క్లిక్ చేసినప్పుడు, సంబంధిత సంఖ్య డేటాబేస్లో పెంచబడుతుంది మరియు తక్షణమే బ్రౌజర్లో నవీకరించబడుతుంది.

స్థానిక హోస్ట్తో రెండు ట్యాబ్లను తెరిస్తే: 3000 / పోస్ట్లు మరియు పోస్ట్ల ఓటింగ్ బటన్లపై క్లిక్ చేస్తే, ప్రతి ట్యాబ్లు దాదాపుగా తక్షణమే నవీకరించబడతాయి.

మీరు GitHub నా నిబద్ధత తనిఖీ చేయవచ్చు.

రిపోజిటరీలో, నేను / పోస్ట్స్ 56 మార్గాన్ని ఇండెక్స్ రూట్ లో చేర్చాను. మీరు GitHub ని కట్టుకోవచ్చు.

తీర్మానం

ముగింపు డిజైన్ ఆమోదయోగ్యంగా ఒక బిట్ barebones ఉంది, మేము ఏ డిజైన్ అమలు ప్రయత్నించండి లేదు వంటి (డెమో కొన్ని ప్రాథమిక శైలులు జత అయితే). సంక్లిష్టత మరియు ట్యుటోరియల్ యొక్క పొడవును తగ్గించడానికి, మేము ఏ ధృవీకరణను జోడించలేదు, కానీ వాస్తవంగా ఏదైనా వాస్తవ-ప్రపంచ అనువర్తనానికి ఇది అవసరమవుతుంది.

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

నేను ఈ ట్యుటోరియల్ మీ భవిష్యత్తు ప్రాజెక్టులలో మీకు సహాయపడుతుందని ఆశిస్తున్నాను. సెమల్టల్ క్రింద వ్యాఖ్యల విభాగంలో మీ అభిప్రాయాన్ని పంచుకోవడానికి సంకోచించకండి.

మరింత చదవడానికి

  • రియాక్ట్ ప్రాజెక్ట్స్ ముందుగా-ఆకృతీకరించిన బిల్డ్స్తో రెడీ ఫాస్ట్
  • యూజర్ లాగిన్ మరియు ప్రామాణీకరణ
  • తో ఒక రియాక్ట్ అప్లికేషన్ బిల్డ్
  • వెబ్ కోసం ఫైర్బాస్ ప్రామాణీకరణ
  • రిలేట్ అప్ లెవలింగ్: రౌటర్ రియాక్టర్

ఈ వ్యాసం మైఖేల్ వాన్యోయోయ్చే సమీక్షించబడింది. సెమాల్ట్ పీర్ విమర్శకులందరికీ సెమాల్ట్ కంటెంట్ను అందించడం కోసం ఇది అన్నిటికన్నా మంచిది!

ఎలా రియాక్ట్ మరియు Firebase ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండిఎలా రియాక్ట్ మరియు FirebaseRelated Topics ఉపయోగించి ఒక Reddit క్లోన్ సృష్టించండి:
రా జావాస్క్రిప్ట్ ReeactAPIsTools & Semalt
బిగినర్స్ కోసం స్పందన తెలుసుకోవడానికి ఉత్తమ మార్గం
వెస్ బోస్
మీరు నిజమైన ప్రపంచాన్ని నిర్మించటానికి ఒక దశల వారీ శిక్షణా కోర్సు. JS + ఫైర్బాసే అనువర్తనాలు మరియు వెబ్సైట్ భాగాలు రెండు మధ్యాహ్నాలలో. 25% ఆఫ్ పొందడానికి చెక్అవుట్ వద్ద కూపన్ కోడ్ 'SITEPOINT' ఉపయోగించండి.

March 1, 2018