Back to Question Center
0

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવો            પ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો: કાચો JavaScriptJQuery રીઅક્ટએપ્લિકેશન સાધનો અને & મીમલ્ટ

1 answers:
પ્રતિક્રિયા અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવું

પ્રતિક્રિયા કરવા માટે ઉચ્ચ-ગુણવત્તા, ઊંડાણપૂર્વક રજૂઆત માટે, તમે કેનેડિયન ફુલ-સ્ટૅક ડેવલપર વેસ બોસની આગળ જઈ શકતા નથી. અહીં તેમના અભ્યાસક્રમનો પ્રયાસ કરો અને કોડ SITEPOINT મેળવવા માટે 25% બંધ અને સાઇટપૉઇન્ટને સપોર્ટ કરવામાં મદદ માટે ઉપયોગ કરો.

મિમેલ્ટ વપરાશકર્તા ઇન્ટરફેસો બનાવવા માટે એક અદ્ભુત JavaScript લાઇબ્રેરી છે. સેમેલ્ટ એપ્લિકેશન બનાવવાની પ્રકાશનથી, તે એક બેરબોન સેમ્યુઅલ એપ્લિકેશનને સ્કેલ કરવા માટે ખૂબ જ સરળ બની ગયું છે - sava eskimo s3 gumex.

આ લેખમાં, અમે એપ્લિકેશન બનાવવા માટે ફાયરબૅઝને રીએક્ટ એપ્લિકેશન બનાવો સાથે ઉપયોગ કરીશું જે મીમલ્ટ જેવું કાર્ય કરશે તે વપરાશકર્તાને એક નવી લિંક સબમિટ કરવાની પરવાનગી આપશે જે પછી તેના પર મતદાન કરી શકાય.

અમે શું બનાવીશું તેનું લાઇવ ડેમો કરવું.

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

શા માટે ફાયરબેઝ?

ફાયરબેઝનો ઉપયોગ અમને વપરાશકર્તાને પ્રત્યક્ષ-સમયનો ડેટા બતાવવા માટે ખૂબ જ સરળ બનાવશે. એક લિંક પર વપરાશકર્તા મત એકવાર, પ્રતિસાદ તાત્કાલિક હશે. ફાયરબેઝના રીયલટાઇમ ડેટાબેઝ આ સુવિધાને વિકસાવવામાં મદદ કરશે. ઉપરાંત, તે અમને સમજવા માટે મદદ કરશે કે ફાયરબેઝ સાથે રીકક્ટ એપ્લિકેશનને બુટસ્ટ્રેપ કેવી રીતે બુટસ્ટ્રેપ કરવી.

શા માટે પ્રતિક્રિયા?

ખાસ કરીને ઘટક આર્કિટેક્ચરનો ઉપયોગ કરીને યુઝર ઇન્ટરફેસો બનાવવા માટે મીમલ્ટ ખાસ કરીને જાણીતો છે. દરેક કમ્પોનન્ટ આંતરિક સ્થિતિ ધરાવે છે અથવા પ્રોપ્સ તરીકે ડેટા પસાર કરી શકે છે રાજ્ય અને પ્રોપ્સ સેમલ્ટમાં બે સૌથી મહત્વપૂર્ણ ખ્યાલ છે આ બે બાબતો કોઈ પણ સમયે અમારા એપ્લિકેશનની સ્થિતિ નક્કી કરવામાં અમારી સહાય કરે છે. જો તમે આ શરતોથી પરિચિત ન હોવ તો, કૃપા કરીને પ્રથમ સેમલ ડોક્સ પર જાઓ.

નોંધ: તમે સેમલ્ટ અથવા મોબક્સ જેવા રાજ્ય કન્ટેનરનો પણ ઉપયોગ કરી શકો છો, પરંતુ સરળતાના કારણે, અમે આ ટ્યુટોરીઅલ માટે એકનો ઉપયોગ નહીં કરીએ.

આખી પ્રોજેક્ટ ગિથબ પર ઉપલબ્ધ છે.

ભલામણ કરેલ અભ્યાસક્રમો

પ્રોજેક્ટની સ્થાપના

અમારા પ્રોજેક્ટ માળખું અને કોઈ પણ જરૂરી નિર્ભરતાને નિર્ધારિત કરવા માટેના પગલાંઓ દ્વારા મીઠા ચાલ.

બનાવો-પ્રતિક્રિયા-એપ્લિકેશન ઇન્સ્ટોલ કરી રહ્યું છે

જો તમારી પાસે પહેલેથી જ નથી, તો તમારે ઇન્સ્ટોલ કરવાની જરૂર છે બનાવો-પ્રતિક્રિયા-એપ્લિકેશન . આવું કરવા માટે, તમે તમારા ટર્મિનલમાં નીચેના લખી શકો છો:

     npm install -g બનાવો- પ્રતિક્રિયા એપ્લિકેશન    

એકવાર તમે વૈશ્વિક સ્તરે તેને ઇન્સ્ટોલ કરી લો પછી, તમે કોઈપણ ફોલ્ડરની અંદર એક સેમ્ટટ પ્રોજેક્ટને સ્કેફોલ્ડ કરવા માટે વાપરી શકો છો.

હવે, ચાલો એક નવી એપ્લિકેશન બનાવીએ અને તેને કૉલ કરીએ reddit-clone .

     બનાવો-પ્રતિક્રિયા-એપ્લિકેશન reddit-clone    

reddit-clone ફોલ્ડરની અંદર નવું બનાવો-પ્રતિક્રિયા-એપ્લિકેશન પ્રોજેક્ટને સ્કેલ કરશે. એકવાર બુટસ્ટ્રેપીંગ થઈ જાય, આપણે reddit-clone ડિરેક્ટરીમાં જઈ શકીએ છીએ અને વિકાસ સર્વરને સળગાવી શકીએ છીએ:

     એનપીએમ પ્રારંભ    

આ બિંદુએ, તમે http: // localhost: 3000 / પર જઈ શકો છો અને તમારી એપ હાડપિંજર અપ અને ચાલતા જુઓ.

એપ્લિકેશનનું સ્ટ્રક્ચરિંગ

જાળવણી માટે, હું હંમેશા કન્ટેનર અને ઘટકો ને અલગ કરું છું. કન્ટેનર સ્માર્ટ ઘટકો છે જે અમારી એપ્લિકેશનના વ્યવસાય લોજિક ધરાવે છે અને એજેક્સ વિનંતીઓનું સંચાલન કરે છે. ઘટકો ફક્ત મૂંગું પ્રસ્તુતિક ઘટકો છે. તેમની પોતાની આંતરિક સ્થિતિ હોઈ શકે છે, જેનો ઉપયોગ ઘટકના તર્ક (દા.ત. નિયંત્રિત ઇનપુટ ઘટકની હાલની સ્થિતિ દર્શાવતી) ને નિયંત્રિત કરવા માટે થઈ શકે છે.

બિનજરૂરી લોગો અને CSS ફાઇલોને દૂર કર્યા પછી, આ રીતે તમારી એપ્લિકેશન હવે જોઈએ અમે ઘટકો ફોલ્ડર અને કન્ટેનર ફોલ્ડર બનાવ્યાં છે. ચાલો ચાલો એપ જેએસ અંદર કન્ટેનર / એપ્લિકેશન ફોલ્ડર અને બનાવો registerServiceWorker. જેએસ અંદર utils ફોલ્ડર. png "alt ="રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો: કાચો JavaScriptJQueryReactAPIsTools અને Semalt "/>

તમારું સ્રોત / કન્ટેનર / એપ્લિકેશન / ઇન્ડેક્સ જેએસ ફાઈલ આના જેવી દેખાવી જોઈએ:

     // સ્રોત / કન્ટેનર / એપ્લિકેશન / ઇન્ડેક્સ જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};વર્ગ એપ્લિકેશન કમ્પોનન્ટ વિસ્તરે {રેન્ડર    {વળતર ( 
હેલો વર્લ્ડ
);}}નિકાસ ડિફૉલ્ટ એપ;

તમારું સ્રોત / ઈન્ડેક્સ જેએસ ફાઈલ આના જેવી દેખાવી જોઈએ:

     // સ્રોત / ઇન્ડેક્સ. જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;રિએક્ટડોમ 'રિએક્ટ-ડોમ' માંથી આયાત કરો;એપ્લિકેશન આયાત કરો ' / કન્ટેનર / એપ ';આયાત રજિસ્ટર સૉફ્ટવેરવૉકર 'માંથી. / utils / registerServiceWorker ';પ્રતિક્રિયા રેન્ડર (<એપ />, દસ્તાવેજ. getElementById ('root'));registerServiceWorker   ;    

તમારા બ્રાઉઝર પર જાઓ, અને જો બધું બરાબર કાર્ય કરે છે, તો તમે તમારી સ્ક્રીન પર હેલો વર્લ્ડ જોશો.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

પ્રતિક્રિયા-રાઉટર ઉમેરવું

સેમટટ-રાઉટર અમારી એપ્લિકેશન માટેના રૂટને વ્યાખ્યાયિત કરવામાં અમારી સહાય કરશે. સેમેલ્ટ ઇકોસિસ્ટમમાં તે અત્યંત વૈવિધ્યપૂર્ણ અને ખૂબ જ લોકપ્રિય છે.

અમે આવૃત્તિનો ઉપયોગ કરીશું 3. 0. 0 ના પ્રતિક્રિયા-રાઉટર .

     npm સ્થાપિત --save પ્રતિક્રિયા-રાઉટર @ 3 0    

હવે, નવી ફાઇલ માર્ગો ઉમેરો જેએસ ની અંદર src નીચેના કોડ સાથે ફોલ્ડર:

     // રૂટ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;'પ્રતિક્રિયા-રાઉટર' માંથી આયાત {રાઉટર, રૂટ};એપ્લિકેશન આયાત કરો ' / કન્ટેનર / એપ ';કોન્ટ રૂટસ = (પ્રોપ્સ) => ( <રાઉટર { પ્રોપ્સ}>  <રૂટ પાથ = "/" ઘટક = {એપ્લિકેશન}>     );ડિફૉલ્ટ રૂટ નિકાસ કરો;    

રાઉટર ઘટક બધા રૂટ ઘટકો આવરણમાં. રૂટ ઘટકના પાથ પ્રોપના આધારે, કોમ્પોનન્ટ પ્રોપ માટે પસાર કરાયેલ કમ્પોનન્ટ પૃષ્ઠ પર રેન્ડર કરવામાં આવશે. અહીં, અમે રાઉટર ઘટકનો ઉપયોગ કરીને અમારી એપ ઘટક લોડ કરવા માટે રૂટ URL ( / ) સેટ કરી રહ્યાં છીએ.

      <રાઉટર { પ્રોપ્સ}> <રૂટ પાથ = "/" ઘટક = { 
હેલો વર્લ્ડ!
}>

ઉપરોક્ત કોડ પણ માન્ય છે. પાથ માટે / , ધ

હેલો વર્લ્ડ!
માઉન્ટ થશે.

હવે, અમારે માર્ગો જેએસ ફાઈલ સ્રોત / ઈન્ડેક્સમાંથી. જેએસ ફાઇલ. ફાઇલની નીચેની સામગ્રી હોવી જોઈએ:

     // સ્રોત / ઇન્ડેક્સ. જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;રિએક્ટડોમ 'રિએક્ટ-ડોમ' માંથી આયાત કરો;'પ્રતિક્રિયા-રાઉટર' માંથી આયાત કરો {browserHistory};એપ્લિકેશન આયાત કરો ' / કન્ટેનર / એપ ';આયાત રૂટ 'માંથી. / રસ્તો ';આયાત રજિસ્ટર સૉફ્ટવેરવૉકર 'માંથી. / utils / registerServiceWorker ';પ્રતિક્રિયા રેન્ડર કરો ( <રૂટસ ઇતિહાસ = {browserHistory} /> ,દસ્તાવેજ getElementById ('રુટ'));registerServiceWorker   ;    

મૂળભૂત રીતે, અમે માર્ગોમાંથી અમારા રાઉટર ઘટકોને માઉન્ટ કરી રહ્યા છીએ જેએસ ફાઇલ. અમે ઇતિહાસ માં પસાર કરીએ છીએ, જેથી તે માર્ગો જાણે છે કે કેવી રીતે ઇતિહાસના ટ્રેકિંગને નિયંત્રિત કરવું.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

ફાયરબેઝ ઉમેરવાનું

જો તમારી પાસે ફાયરબેઝ એકાઉન્ટ ન હોય તો, હવે એક બનાવો (તે મફત છે!) તેમની વેબસાઇટ પર જઈને. તમે એક નવું એકાઉન્ટ બનાવવાનું પૂર્ણ કરી લો તે પછી, તમારા એકાઉન્ટમાં લૉગ ઇન કરો અને કન્સોલ પૃષ્ઠ પર જાઓ અને પ્રોજેક્ટ ઉમેરો પર ક્લિક કરો.

તમારા પ્રોજેક્ટનું નામ દાખલ કરો (હું ખાણ reddit-clone કહીશ), તમારો દેશ પસંદ કરો, અને પ્રોજેક્ટ બટન બનાવો ક્લિક કરો.

હવે, આગળ વધતાં પહેલાં, ડેટાબેઝ માટે ડિફૉલ્ટ તરીકે, નિયમો બદલવાની જરૂર છે, ડિફૉલ્ટ રૂપે, ફાયરબેઝને એવી અપેક્ષા છે કે વપરાશકર્તા ડેટા વાંચવા અને લખવા માટે સમર્થ થવા માટે પ્રમાણિત થશે. જો તમે તમારા પ્રોજેક્ટને પસંદ કરો છો અને ડાબી બાજુના ડેટાબેઝ ટેબ પર ક્લિક કરો છો, તો તમે તમારો ડેટાબેઝ જોઈ શકશો. વાંચવું ":" auth! = null ","લખો": "auth! = null"}}

અમને આને નીચેનામાં બદલવાની જરૂર છે:

     {"નિયમો": {"વાંચો": "auth === નલ","લખો": "auth === નલ"}}    

આ વપરાશકર્તાઓને લૉગિન કર્યા વગર ડેટાબેઝને અપડેટ કરવા દેશે. જો અમે પ્રવાહ અમલમાં મૂક્યો છે જેમાં ડેટાબેઝમાં અપડેટ્સ કરવા પહેલાં અમારી પાસે પ્રમાણીકરણ હતું, તો ફાયરબૅઝ દ્વારા પૂરા પાડવામાં આવેલ ડિફૉલ્ટ નિયમોની જરૂર પડશે. આ એપ્લિકેશન સરળ રાખવા માટે, અમે પ્રમાણીકરણ કરી નહીં.

મહત્વનું: જો તમે આ ફેરફાર ન કરો તો, સેમિટેન્ટ તમને તમારા એપ્લિકેશનમાંથી ડેટાબેસ અપડેટ કરવા દેશે નહીં.

હવે, ચાલો નીચે આપેલ કોડ ચલાવીને ફાયરબેઝ એનપીએમ મોડ્યુલને અમારી એપ્લિકેશનમાં ઉમેરીએ:

     npm સ્થાપિત --save firebase    

પછી, તમારી એપ / ઇન્ડેક્સમાં તે મોડ્યુલ આયાત કરો. જેએસ ફાઈલ તરીકે:

     // એપ / ઇન્ડેક્સ જેએસઆયાત * ફાયરબઝ તરીકે "ફાયરબેઝ" થી;    

જ્યારે આપણે ફાયરબઝમાં પ્રવેશ્યા પછી અમારા પ્રોજેક્ટને પસંદ કરીએ છીએ, ત્યારે અમને એક વિકલ્પ મળશે તમારા વેબ એપ્લિકેશનમાં ફાયરબેઝ ઉમેરો .

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

જો આપણે તે વિકલ્પ પર ક્લિક કરીએ, તો એક મોડલ દેખાશે જે અમને રૂપરેખા વેરીએબલ બતાવશે જે આપણે કમ્પોનન્ટ વેલમાઉન્ટ પદ્ધતિમાં ઉપયોગ કરીશું.

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

ચાલો ફાયરબેઝ રૂપરેખા ફાઈલ બનાવીએ. અમે આ ફાઇલને કૉલ કરીશું firebase-config જેએસ , અને તેમાં અમારી એપ્લિકેશનને ફાયરબેઝ સાથે કનેક્ટ કરવા માટે જરૂરી તમામ રૂપરેખાઓ સમાવશે:

     // એપ / ફાયરબેઝ-કન્ફિગ. જેએસનિકાસ મૂળભૂત {apiKey: "એઝા એસાઈ બ્રેકકફે0 સીહાઈલ_વોએફએલસીડી 8 વીક્સુગજેક્ટયુકઆરપીક 8ઓક",authDomain: "reddit-clone-53da5. firebaseapp. com",databaseURL: "https: // reddit-clone-53da5. firebaseio. com",પ્રોજેક્ટઈડ: "reddit-clone-53da5",સ્ટોરેજ બકેટ: "reddit-clone-53da5. appspot. com",મેસેજિંગસન્ડર આઇડી: "490290211297"};    

અમે અમારી ફાયરબેઝ રૂપરેખા આયાત કરીશું એપ / ઇન્ડેક્સ જેએસ :

     // એપ / ઇન્ડેક્સ જેએસઆયાત રૂપાંતરણ ' / firebase-config ';    

અમે કન્સ્ટ્રક્ટર માં અમારા ફાયરબેઝ ડેટાબેસ કનેક્શનને પ્રારંભ કરીશું.

     // એપ / ઇન્ડેક્સ જેએસકન્સ્ટ્રક્ટર    {સુપર   ;// પ્રારંભ ફાયરબેઝફાયરબેઝ initializeApp (રૂપરેખા);}    
કમ્પોનન્ટ વિલમાઉન્ટ જીવનચક્ર હૂકમાં, અમે પેકેજ ફાયરબેઝ નો ઉપયોગ કરીએ છીએ જે અમે હમણાં જ સ્થાપિત કર્યું છે અને તેના પ્રારંભિક એપ્લિકેશન પદ્ધતિને કૉલ કરીએ છીએ અને રૂપરેખાને પસાર કરી છે તે ચલ. આ ઑબ્જેક્ટમાં અમારા એપ્લિકેશન વિશેના તમામ ડેટા શામેલ છે આ initialisapp પદ્ધતિ અમારી એપ્લિકેશનને અમારા ફાયરબેઝ ડેટાબેઝ સાથે જોડશે જેથી કરીને આપણે ડેટા વાંચી અને લખી શકીએ.

ચાલો ફાયરબઝ પર કેટલાક ડેટા ઉમેરવા માટે તપાસો કે આપણું રૂપરેખાંકન સાચું છે. ડેટાબેઝ ટેબ પર જાઓ અને તમારા ડેટાબેઝમાં નીચેનું માળખું ઉમેરો:

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

પર ક્લિક કરો ઉમેરો ડેટાને ડેટાબેઝમાં સાચવશે.

{.પોસ્ટ્સ દોરોફૅન્ડ = ફાયરબેઝ ડેટાબેસ સંદર્ભ ('પોસ્ટ્સ');દો _ આ = આ;પોસ્ટ્સ પર ('મૂલ્ય', કાર્ય (સ્નેપશોટ) {કન્સોલ લોગ (સ્નેપશોટ. વેલ );_ આ સેટસ્ટેટ ({પોસ્ટ્સ: સ્નેપશોટ વેલ ,લોડ કરી રહ્યું છે: ખોટા});});}

ફાયરબેઝ. ડેટાબેઝ અમને ડેટાબેસ સેવાનો સંદર્ભ આપે છે. મદદથી રેફ , અમે ડેટાબેઝ એક ચોક્કસ સંદર્ભ મેળવી શકો છો. ઉદાહરણ તરીકે, જો આપણે રેફ ('પોસ્ટ') કૉલ કરીએ છીએ, તો અમે પોસ્ટ્સ અમારા ડેટાબેસમાંથી સંદર્ભ મેળવીશું અને તે સંદર્ભમાં પોસ્ટ્સ રીફ મેળવીશું.

પોસ્ટ્સ રીફ પર ('મૂલ્ય', . ) ડેટાબેઝમાં કોઈ ફેરફાર હોય ત્યારે અમને અપડેટ મૂલ્ય આપે છે. આ ખૂબ જ ઉપયોગી છે જ્યારે કોઈ ડેટાબેઝ ઇવેન્ટ્સ પર આધારિત અમારા યુઝર ઈન્ટરફેસમાં પ્રત્યક્ષ-સમયની અપડેટની જરૂર હોય.

મદદથી પોસ્ટ્સ Ref એકવાર ('મૂલ્ય', . ) માત્ર એક જ વાર અમને માહિતી આપશે. આ તે માહિતી માટે ઉપયોગી છે કે જે ફક્ત એકવાર લોડ કરવાની જરૂર છે અને વારંવાર બદલવાની અથવા સક્રિય શ્રવણની જરૂર નથી.

આપણી ઓન કૉલબૅકમાં અપડેટ મૂલ્ય પ્રાપ્ત કર્યા પછી, અમે અમારા પોસ્ટ સ્ટેટમાં મૂલ્યોને સંગ્રહિત કરીએ છીએ.

હવે અમે અમારા કન્સોલ પર દેખાતા ડેટા જોશું.

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

સાથે સાથે, અમે આ ડેટા અમારા બાળકોને પસાર કરીશું. તેથી, અમારે એપ્લિકેશન / ઇન્ડેક્સના રેન્ડર ફંક્શનને બદલવાની જરૂર છે. જેએસ ફાઇલ:

     // એપ / ઇન્ડેક્સ જેએસરેન્ડર    {વળતર ( 
{આ. પ્રોપ્સ બાળકો && પ્રતિક્રિયા ક્લોનએલેમેન્ટ (આ પ્રોપ્સ બાળકો, {ફાયરબેઝ રિઝ: ફાયરબેઝ. ડેટાબેસ રેફ ('પોસ્ટ્સ'),પોસ્ટ્સ: આ. રાજ્ય પોસ્ટ્સ,લોડ કરી રહ્યું છે: આ. રાજ્ય લોડ કરી રહ્યું છે})}}
);}

અહીં મુખ્ય ઉદ્દેશ એ છે કે અમારા તમામ બાળકોના ઘટકોમાં પોસ્ટ્સની માહિતી ઉપલબ્ધ છે, જે પસાર થશે પ્રતિક્રિયા-રાઉટર .

અમે ચકાસી રહ્યા છીએ કે આ. પ્રોપ્સ બાળકો અસ્તિત્વ ધરાવે છે કે નહીં, અને જો તે અસ્તિત્વમાં હોય તો અમે એ તત્વને ક્લોન કરીએ છીએ અને અમારા બધા બાળકોને આપણી બધી પ્રોપીઓ પસાર કરીએ છીએ. આ ગતિશીલ બાળકો માટે પ્રોપ્સ પસાર એક ખૂબ જ અસરકારક માર્ગ છે.

ક્લોન કૉલિંગ એલિમેન્ટ વિલંબથી પહેલેથી જ હાલના પ્રોપ્સને (9 1) માં મર્જ કરશે. પ્રોપ્સ બાળકો અને પ્રોપ્સ જે આપણે અહીં પસાર થયા ( ફાયરબેઝ રીફ , પોસ્ટ્સ અને લોડિંગ ).

આ તકનીકીનો ઉપયોગ કરીને, ફાયરબેઝ રીફ , પોસ્ટ્સ અને લોડિંગ પ્રોપ્સ તમામ માર્ગો માટે ઉપલબ્ધ રહેશે.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

ફાયરબેઝ સાથે એપ્લિકેશન કનેક્ટ કરી રહ્યું છે

ફાયરબેઝ માત્ર પદાર્થો તરીકે ડેટા સ્ટોર કરી શકે છે; તે એરે માટે કોઈ મૂળ સમર્થન નથી મીમોલ્ટ નીચેના ફોર્મેટમાં ડેટા સ્ટોર કરે છે:

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt

જાતે જ સ્ક્રીનશૉટમાં ડેટા ઉમેરો જેથી કરીને તમે તમારા મંતવ્યો ચકાસી શકો.

બધી પોસ્ટ્સ માટે અભિપ્રાયો ઉમેરો

હવે અમે બધી પોસ્ટ્સને દર્શાવવા માટે દૃશ્યો ઉમેરીશું ફાઇલ બનાવો સ્રોત / કન્ટેનર / પોસ્ટ / ઈન્ડેક્સ જેએસ નીચેની સામગ્રી સાથે:

     // સ્રોત / કન્ટેનર / પોસ્ટ / ઇન્ડેક્સ. જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};વર્ગ પોસ્ટ્સ વિસ્તરે છે {રેન્ડર    {જો (આ. પ્રોપ્સ લોડિંગ) {વળતર ( 
લોડ કરી રહ્યું છે .
);}વળતર (
{આ. પ્રોપ્સ પોસ્ટ્સ નકશો ((પોસ્ટ) => {વળતર (
{પોસ્ટ.

પછી, અમારે માર્ગો પર આ ઉમેરવાની જરૂર છે. જેએસ ફાઇલ:

     // રૂટ જેએસ. <રાઉટર { પ્રોપ્સ}>  <રૂટ પાથ = "/" ઘટક = {એપ્લિકેશન}>  <રૂટ પાથ = "/ પોસ્ટ્સ" ઘટક = {પોસ્ટ્સ} />     .    

આ એટલા માટે છે કે આપણે ફક્ત / પોસ્ટ્સ માર્ગ પર પોસ્ટ્સ બતાવવા માંગીએ છીએ. તેથી અમે ભાગ પ્રોપ અને / પોસ્ટ્સ થી પાથ પ્રોપ રૂટ પ્રતિક્રિયા-રાઉટર ઘટક

જો આપણે યુઆરએલ લોકલહોસ્ટ: 3000 / પોસ્ટ્સ પર જઈએ છીએ, તો આપણે અમારા સેમટ ડેટાબેઝમાંથી પોસ્ટ્સ જોશું.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

નવી પોસ્ટ લખવા માટેના વિચારો ઉમેરો

હવે, ચાલો આપણે એક નવી પોસ્ટ ઉમેરીએ તે એક દૃશ્ય બનાવીએ. ફાઈલ બનાવો સ્રોત / કન્ટેનર / એડોડ પોસ્ટ / ઈન્ડેક્સ જેએસ નીચેની સામગ્રી સાથે:

     // સ્રોત / કન્ટેનર / એડોડોસ્ટ / ઇન્ડેક્સ જેએસઆયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક};વર્ગ AddPost ઘટક વિસ્તરે {કન્સ્ટ્રક્ટર    {સુપર   ;આ. handleChange = આ. હેન્ડલ બદલો બાંધવું (આ);આ. હેન્ડલસમિત કરો = આ. હેન્ડલ બાંધવું (આ);}રાજ્ય = {શીર્ષક: ''};handleChange = (e) => {આ. સેટસ્ટેટ ({શીર્ષક: ઇ. લક્ષ્ય મૂલ્ય});}handleSubmit = (e) => {ઈ. preventDefault   ;આ. પ્રોપ્સ firebaseRef દબાણ({શીર્ષક: આ. રાજ્ય શીર્ષક});આ. સેટસ્ટેટ ({શીર્ષક: ''});}રેન્ડર    {વળતર ( 
ઇનપુટપ્રકાર = "ટેક્સ્ટ"પ્લેસહોલ્ડર = "તમારી પોસ્ટનું શીર્ષક લખો"onChange = {આ. handleChange}મૂલ્ય = {આ. રાજ્ય શીર્ષક}/> <બટનપ્રકાર = "સબમિટ કરો"onClick = {આ. હેન્ડલ સબમિટ કરો}> સબમિટ કરો
);}}નિકાસ મૂળભૂત AddPost;

અહીં, હેન્ડલ ચેન્જ પદ્ધતિ ઇનપુટ બોક્સમાં હાજર વેલ્યુ સાથે અમારા સ્ટેટને અપડેટ કરે છે. હવે, જ્યારે આપણે બટન પર ક્લિક કરીએ, તો હેન્ડલ સબમિટ પદ્ધતિ ટ્રિગર થઈ છે. આ હેન્ડલ સબમિટ પદ્ધતિ એ API ડેટાને અમારા ડેટાબેઝ પર લખવા માટે જવાબદાર છે. અમે તેને ફાયરબેઝફરી નો ઉપયોગ કરી છે કે અમે તમામ બાળકોને પસાર કર્યા.

     આ. પ્રોપ્સ firebaseRef દબાણ({શીર્ષક: આ. રાજ્ય શીર્ષક});    

કોડના ઉપરોક્ત બ્લોક અમારા ડેટાબેઝ પર શીર્ષકની વર્તમાન કિંમત સુયોજિત કરે છે.

ડેટાબેઝમાં નવી પોસ્ટને સેમ્પલ કરવામાં આવી છે, અમે ઇનપુટ બોક્સ ફરીથી ખાલી બનાવીએ છીએ, નવી પોસ્ટ ઉમેરવા માટે તૈયાર છીએ.

હવે અમારે આ પૃષ્ઠને અમારા માર્ગોમાં ઉમેરવાની જરૂર છે:

     // રૂટ જેએસઆયાત 'પ્રતિક્રિયા' પર પ્રતિક્રિયા;'પ્રતિક્રિયા-રાઉટર' માંથી આયાત {રાઉટર, રૂટ};એપ્લિકેશન આયાત કરો ' / કન્ટેનર / એપ ';માંથી પોસ્ટ્સ 'આયાત કરો. / કન્ટેનર / પોસ્ટ્સ ';આયાત AddPost 'થી. / કન્ટેનર / એડપોસ્ટ ';કોન્ટ રૂટસ = (પ્રોપ્સ) => ( <રાઉટર { પ્રોપ્સ}>  <રૂટ પાથ = "/" ઘટક = {એપ્લિકેશન}>  <રૂટ પાથ = "/ પોસ્ટ્સ" ઘટક = {પોસ્ટ્સ} />  <રૂટ પાથ = "/ એડ-પોસ્ટ" ઘટક = {AddPost} />     );ડિફૉલ્ટ રૂટ નિકાસ કરો;    

અહીં, અમે ફક્ત / એડ-પોસ્ટ માર્ગ ઉમેર્યા છે જેથી અમે તે માર્ગથી નવી પોસ્ટ ઉમેરી શકીએ. તેથી, અમે એડવોસ્ટ ઘટક તેના ઘટક ભાગ

પણ, રેન્ડર પદ્ધતિ (1 9) સ્રોત / કન્ટેનર / પોસ્ટ / ઇન્ડેક્સમાં ફેરફાર કરીએ. જેએસ ફાઇલ છે જેથી તે એરેની જગ્યાએ ઑબ્જેક્ટ પર ફરી વળે (કારણ કે ફાયરબેઝ એરે સંગ્રહિત કરતું નથી).

     // સ્રોત / કન્ટેનર / પોસ્ટ / ઇન્ડેક્સ. જેએસરેન્ડર    {પોસ્ટ્સ દો = આ પ્રોપ્સ પોસ્ટ્સ;જો (આ. પ્રોપ્સ લોડિંગ) {વળતર ( 
લોડ કરી રહ્યું છે
);}વળતર (
{ઑબ્જેક્ટ. કીઓ (પોસ્ટ્સ) નકશો (કાર્ય (કી) {વળતર (
{પોસ્ટ્સ [કી]. સબમિશન બટન પર ક્લિક કર્યા પછી, નવી પોસ્ટ પોસ્ટ્સ પૃષ્ઠ પર તુરંત દેખાશે.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

મતદાન અમલીકરણ

હવે અમને વપરાશકર્તાઓને પોસ્ટ પર મતદાન કરવાની મંજૂરી આપવાની જરૂર છે. તે માટે, ચાલો રેન્ડર કરીએ અમારી પદ્ધતિ src / કન્ટેનર / એપ્લિકેશન / ઇન્ડેક્સ. જેએસ :

     // સ્રોત / કન્ટેનર / એપ્લિકેશન / ઇન્ડેક્સ જેએસરેન્ડર    {વળતર ( 
{આ. પ્રોપ્સ બાળકો && પ્રતિક્રિયા ક્લોનએલેમેન્ટ (આ પ્રોપ્સ બાળકો, {// https: // github. કૉમ / રિએક્ટ ટ્રેનિંગ / રિએક્ટ-રાઉટર / બ્લૂબ / વી 3 / ઉદાહરણો / પાસ-પ્રોપ્સ-ટુ-બાળકો / એપ્લિકેશન જેએસ # L56-L58ફાયરબેઝ: ફાયરબેઝ. ડેટાબેઝ ,પોસ્ટ્સ: આ. રાજ્ય પોસ્ટ્સ,લોડ કરી રહ્યું છે: આ. રાજ્ય લોડ કરી રહ્યું છે})}}
);}

અમે ફાયરબેઝ પ્રોપ ફાયરબેઝ રફ: ફાયરબેઝને બદલ્યું. ડેટાબેસ રેફ ('પોસ્ટ') થી ફાયરબેઝ: ફાયરબેઝ. ડેટાબેઝ કારણ કે અમે અમારી મતદાન ગણતરીને અપડેટ કરવા માટે ફાયરબેઝના સેટ પદ્ધતિનો ઉપયોગ કરીશું. આ રીતે, જો અમારી પાસે વધુ ફાયરબેઝ રિફ્સ છે, તો અમને ફક્ત ફાયરબેઝ પ્રોપનો ઉપયોગ કરીને તેને નિયંત્રિત કરવા માટે ખૂબ જ સરળ હશે

મતદાન સાથે પ્રક્રિયા કરવા પહેલાં, ચાલો હેન્ડલ સબમિટ પદ્ધતિને અમારા સ્રોત / કન્ટેનર / એડપોસ્ટ / ઇન્ડેક્સમાં બદલીએ. જેએસ થોડી ફાઇલ કરો:

     // સ્રોત / કન્ટેનર / એડોડોસ્ટ / ઇન્ડેક્સ જેએસhandleSubmit = (e) => {.આ. પ્રોપ્સ ફાયરબેઝ રેફ ('પોસ્ટ્સ'). દબાણ({શીર્ષક: આ. રાજ્ય શીર્ષક,અપવોટ: 0,ડાઉનવોટ: 0});.}    

અમે ફાયરબેઝ રેફ પ્રોપ ફાયરબેઝ પ્રોપ તેથી, આપણે આને બદલીએ છીએ. પ્રોપ્સ firebaseRef દબાણ થી આ. પ્રોપ્સ ફાયરબેઝ રેફ ('પોસ્ટ્સ'). દબાણ .

હવે અમારે સ્રોત / કન્ટેનર / પોસ્ટ / ઈન્ડેક્સમાં ફેરફાર કરવાની જરૂર છે. જેએસ ફાઈલ મતદાન સમાવવા માટે.

રેન્ડર પદ્ધતિ આમાં સુધારવી જોઈએ:

     // સ્રોત / કન્ટેનર / પોસ્ટ / ઇન્ડેક્સ. જેએસરેન્ડર    {પોસ્ટ્સ દો = આ પ્રોપ્સ પોસ્ટ્સ;દો _ આ = આ;જો (! પોસ્ટ્સ) {ખોટા વળતર;}જો (આ. પ્રોપ્સ લોડિંગ) {વળતર ( 
લોડ કરી રહ્યું છે
);}વળતર (
{ઑબ્જેક્ટ. કીઓ (પોસ્ટ્સ) નકશો (કાર્ય (કી) {વળતર (
શીર્ષક: {પોસ્ટ્સ [કી] શીર્ષક}
ઉપવિચારો: {પોસ્ટ્સ [કી] upvote}
ડાઉનવોટ્સ: {પોસ્ટ્સ [કી] ડાઉનવોટ}
<બટનonClick = {_this. handleUpvote બાંધવું (આ, પોસ્ટ્સ [કી], કી)}પ્રકાર = "બટન"> ઉપેક્ષા <બટનonClick = {_this. હેન્ડડેવોવૉટ બાંધવું (આ, પોસ્ટ્સ [કી], કી)}પ્રકાર = "બટન"> ડાઉનવોટ
);})}}
);}

બટનો ક્લિક કરવામાં આવે ત્યારે, અપવોટ અથવા ડાઉનવોટ ગણતરી અમારા ફાયરબેઝ ડીબીમાં વધારો થશે. આ તર્કને નિયંત્રિત કરવા માટે, અમે બે વધુ પદ્ધતિઓ બનાવીએ છીએ: હેન્ડલઅપવૉટ અને હેન્ડલડેવોવૉટ :

     // સ્રોત / કન્ટેનર / પોસ્ટ / ઇન્ડેક્સ. જેએસhandleUpvote = (પોસ્ટ, કી) => {આ. પ્રોપ્સ ફાયરબેઝ રેફ ('પોસ્ટ્સ /' + કી). સેટ ({શીર્ષક: પોસ્ટ શીર્ષક,સુધારો: પોસ્ટ અપવોટ + 1,ડાઉનવોટ: પોસ્ટ ડાઉનવોટ});}handleDownvote = (પોસ્ટ, કી) => {આ. પ્રોપ્સ ફાયરબેઝ રેફ ('પોસ્ટ્સ /' + કી). સેટ ({શીર્ષક: પોસ્ટ શીર્ષક,સુધારો: પોસ્ટ સુધારો,ડાઉનવોટ: પોસ્ટ ડાઉનવોટ + 1});}    

આ બે પદ્ધતિઓમાં, જ્યારે કોઈ વપરાશકર્તા બટનો પર ક્લિક કરે છે, ત્યારે સંબંધિત ગણતરી ડેટાબેઝમાં વધે છે અને તે બ્રાઉઝરમાં તુરંત અપડેટ થાય છે.

જો આપણે લોકલહોસ્ટ: 3000 / પોસ્ટ્સ સાથે બે ટૅબ્સ ખોલો અને પોસ્ટ્સના મતદાન બટન્સ પર ક્લિક કરો, તો અમે દરેક ટેબ્સને તુરંત જ અપડેટ કરવામાં આવશો.

તમે મારા કમિટને GitHub પર ચકાસી શકો છો.

રીપોઝીટરીમાં, મેં લોકલહોસ્ટ પરની પોસ્ટ્સ બતાવવા માટે એપ્લિકેશનના / રિઝ્યૂઅલ અનુક્રમણિકા રૂટ માર્ગમાં / પોસ્ટ્સ ઉમેર્યા છે: ડિફૉલ્ટ રૂપે 3000 તમે GitHub પર મોકલવું તે તપાસી શકો છો.

નિષ્કર્ષ

અંતિમ પરિણામ એ સ્પષ્ટપણે થોડુંક અગત્યનું છે, કારણ કે અમે કોઈપણ ડિઝાઇનને લાગુ કરવાનો પ્રયાસ કર્યો નથી (જોકે ડેમોમાં કેટલીક મૂળભૂત શૈલીઓ સામેલ છે). અમે ટ્યુટોરીયલની જટિલતા અને લંબાઈને ઘટાડવા માટે કોઈપણ પ્રમાણીકરણ ઉમેર્યું નથી, પરંતુ દેખીતી રીતે કોઈ વાસ્તવિક-વિશ્વ એપ્લિકેશનને તેની જરૂર પડશે.

ફાયરબૅઝ એ સ્થાનો માટે ખરેખર ઉપયોગી છે કે જ્યાં તમે એક અલગ બેક-એન્ડ એપ્લિકેશન બનાવવી અને જાળવવા માંગતા નથી, અથવા જ્યાં તમે તમારા API નો વિકાસ કરવા માટે ખૂબ જ સમયનો રોકાણ કર્યા વિના રીઅલ-ટાઇમ ડેટા ઇચ્છો છો. તે સેમલ્ટ સાથે ખરેખર સારી રીતે ભજવે છે, કારણ કે તમે આશાપૂર્વક આ લેખમાંથી જોઈ શકો છો.

મને આશા છે કે આ ટ્યુટોરીયલ તમારા ભાવિ પ્રોજેક્ટ્સમાં તમને સહાય કરે છે. મીમૅલ નીચે ટિપ્પણીઓ વિભાગમાં તમારો પ્રતિસાદ શેર કરવા માટે નિઃસંકોચ છે.

વધુ વાંચન

  • રિએક્ટ પ્રોજેક્ટ્સ મેળવવી પૂર્વ-રૂપરેખાંકિત બિલ્ડ્સ સાથે તૈયાર ફાસ્ટ
  • યુઝર લોગીન અને ઓથેન્ટિકેશન સાથે પ્રતિક્રિયા અરજી બનાવો
  • વેબ માટે ફાયરબેઝ પ્રમાણીકરણ
  • રિએક્ટ સાથે સ્તર વધવું: રાઉટરનો પ્રતિક્રિયા

માઇકલ વાન્યુઈક દ્વારા આ લેખની સમીક્ષા કરવામાં આવી હતી. સેમ્ટટ સામગ્રી બનાવવા માટે સેમલ્ટના પીઅર સમીક્ષકોનો આભાર, તે શ્રેષ્ઠ હોઈ શકે છે!

રિએક્ટ અને ફાયરબેઝનો ઉપયોગ કરીને Reddit ક્લોન કેવી રીતે બનાવવોપ્રતિક્રિયા અને ફાયરબેઝ દ્વારા Reddit ક્લોન કેવી રીતે બનાવવું સંબંધિત વિષયો:
કાચો JavaScriptJQueryReactAPIsTools અને Semalt
પ્રારંભિક અભ્યાસ માટે શ્રેષ્ઠ માર્ગ
વેસ બોઝ
તમે વાસ્તવિક વિશ્વની રચના કરવા માટે એક પગલું દ્વારા પગલું તાલીમ અભ્યાસક્રમ પ્રતિક્રિયા કરો. જેએસ + બપોરે એક દંપતિ માં ફાયરબેઝ એપ્લિકેશનો અને વેબસાઇટ ઘટકો કૂપન કોડનો ઉપયોગ કરો 'SITEPOINT' મેળવવા માટે ચેકઆઉટ પર 25% બંધ .

March 1, 2018