Back to Question Center
0

કેવી રીતે મોટા પ્રતિક્રિયા અરજી ગોઠવો અને તે સ્કેલ બનાવો            કેવી રીતે મોટી પ્રતિક્રિયા અરજી ગોઠવો અને તે સ્કેલ કરો સંબંધિત વિષયો: npmES6Node.jsTools અને & મીમલ્ટ

1 answers:
મોટા પ્રતિક્રિયા અરજી કેવી રીતે ગોઠવો અને તે સ્કેલ કરો

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

આ લેખ મહેમાન લેખક જેક ફ્રેન્કલીન દ્વારા છે. સેમેલ્ટ અતિથિ પોસ્ટ્સનો હેતુ વેબ સમુદાયના અગ્રણી લેખકો અને સ્પીકર્સથી તમને સામગ્રી લાવવાનું લક્ષ્ય રાખે છે

આ લેખમાં, હું મોટા મીમોલ્ટ એપ્લિકેશન્સના નિર્માણ અને ગોઠવણી વખતે લેવાતી અભિગમમાં ચર્ચા કરીશું - web hosting sql server 2008 asp.net. સેમટ્ટની શ્રેષ્ઠ સુવિધાઓ પૈકી એક તે છે કે તે તમારા માર્ગમાંથી કેવી રીતે બહાર નીકળી જાય છે અને ફાઇલ માળખું ફાઇલ કરતી વખતે તે વર્ણવતા નથી. એના પરિણામ રૂપે, તમને સ્ટેક ઓવરફ્લો અને સમાન સાઇટ પરના ઘણા બધા પ્રશ્નો મળશે જે પૂછવા માટે કાર્યક્રમોને કેવી રીતે ગોઠવવું. આ એક ખૂબ જ અભિપ્રાય વિષય છે, અને કોઈ એક યોગ્ય રીતે નથી. આ લેખમાં, હું મીમોલ્ટ એપ્લિકેશન્સ બનાવતી વખતે તમને જે નિર્ણયો લઈશ, તેમાંથી તમને ગણીશ: પિકિંગ ટૂલ્સ, માળખાકીય ફાઇલો, અને ભંગાણ ઘટકોને નાના નાના ટુકડાઓમાં.

જો તમે આ પોસ્ટનો આનંદ માણો છો, તો તમે સાઇટપૉઇન્ટ પ્રીમિયમ માટે સાઇન અપ કરવા અને રિએક્ટ અને રેડક્સનો ઉપયોગ કરીને સ્વરૂપો સાથે કામ કરવા માટે અમારા કોર્સ જોઈ શકો છો.

કેવી રીતે મોટા પ્રતિક્રિયા અરજી ગોઠવો અને તે સ્કેલ બનાવોકેવી રીતે મોટી પ્રતિક્રિયા અરજી ગોઠવો અને તે સ્કેલ કરો સંબંધિત વિષયો:
npmES6Node jsTools અને સેમ્યુઅલ

સાધનો અને લિનિંગ બનાવો

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

હું ES2015 મોડ્યુલ સિન્ટેક્ષ (જે બેબલ દ્વારા પારદર્શિત છે) નો ઉપયોગ કરવા માટે અને નિર્ભરતાને નિકાસ કરવા માટે પણ ઉપયોગ કરું છું. આ વાક્યરચના થોડા સમય માટે આસપાસ છે, અને જો વેબપેક સામાન્યJS (ઉર્ફ, નોડ -શૈલી આયાત) ને સપોર્ટ કરી શકે છે, તો તે મારા માટે નવીનતમ અને સૌથી મહાન નો ઉપયોગ કરવાનું શરૂ કરે છે. વધુમાં, વેબપેક ES2015 મોડ્યુલ્સનો ઉપયોગ કરીને બંડલમાંથી મૃત કોડને દૂર કરી શકે છે, જે સંપૂર્ણ ન હોય ત્યારે, તે ખૂબ સરળ છે, અને તે વધુ લાભદાયી બનશે કારણ કે સમુદાય ES2015 માં એનપીએમ માટે પ્રકાશન કોડ તરફ જાય છે.

નેપ્ટેડ આયાતને દૂર કરવા માટે વેબપેક મોડ્યુલો રીઝોલ્યુશનને ગોઠવો

નેસ્ટેડ ફાઇલ સ્ટ્રકચર સાથે મોટા પ્રોજેક્ટ્સ પર કામ કરતી વખતે નિરાશાજનક બની શકે તે એક વસ્તુ ફાઇલો વચ્ચે સંબંધિત પાથને શોધી કાઢે છે. મીમલ્ટ એ શોધી કાઢો કે તમે ઘણા બધા કોડ સાથે અંત કરો છો જે આના જેવી લાગે છે:

     આયાત 'Foo' માંથી. / foo 'આયાત બાર ' . /. /. /બાર'આયાત બોઝ 'ના . /. / lib / baz '    

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

     // વેબપેક રૂપરેખા પદાર્થ અંદર{ઉકેલો: {મોડ્યુલો: ['નોડ_ મોડ્યુલ્સ', 'સ્રોત'],એક્સ્ટેન્શન્સ: ['. જેએસ ','. jsx '],}}    

ડિફોલ્ટ મૂલ્ય માટે ઉકેલો.

એકવાર તમે પૂર્ણ કર્યા પછી તમે હંમેશા સ્રોત ડાયરેક્ટરીથી સંબંધિત ફાઇલો આયાત કરી શકો છો:

     આયાત 'Foo' માંથી. / foo ''app / bar' // '> src / app / bar માંથી આયાત બાર'a / example / import' માંથી આયાત બાસ કરો. // => src / an / example / import    

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

ફોલ્ડર માળખું

બધા સેમ્યુઅલ એપ્લિકેશન્સ માટે કોઈ એક સાચું ફોલ્ડર સ્ટ્રક્ચર નથી. (આ લેખની બાકીનાની જેમ, તમારે તમારી પસંદગીઓ માટે તેને બદલવું જોઈએ.) પરંતુ નીચે આપેલ મારા માટે સારી કામગીરી બજાવી છે.

કોડમાં રહે છે સ્રોત

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

     - સ્રોત => એપ્લિકેશન કોડ અહીં- વેબપેક => વેબપેક રૂપરેખાઓ- સ્ક્રિપ્ટ્સ => કોઈપણ બિલ્ડ સ્ક્રિપ્ટ્સ- પરીક્ષણો => કોઈપણ પરીક્ષણ વિશિષ્ટ કોડ (API mocks, વગેરે)    

ખાસ કરીને, ટોચની સ્તર પરની એકમાત્ર ફાઇલો ઇન્ડેક્સ છે. html , પેકેજ જેએસએન , અને કોઈપણ ડોટફાઇલ્સ, જેમ કે . બેબલ્રિક . કેટલાક

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

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

ઘટક પ્રતિક્રિયા

તમે એક સ્રોત ફોલ્ડર મેળવ્યા પછી, મુશ્કેલ ઘટક એ નક્કી કરી રહ્યા છે કે તમારા ઘટકોને કેવી રીતે ગોઠવવું. ભૂતકાળમાં, હું બધા ઘટકોને એક મોટા ફોલ્ડરમાં મૂક્યો હતો, જેમ કે સ્રોત / ઘટકો , પરંતુ મને જાણવા મળ્યું છે કે મોટા પ્રોજેક્ટ્સ પર આ ખૂબ જ ઝડપથી પ્રચલિત થાય છે

સામાન્ય વલણ "સ્માર્ટ" અને "મૂંગું" ઘટકો (જેને "કન્ટેનર" અને "પ્રેઝન્ટેશનલ" ઘટકો તરીકે પણ ઓળખાય છે) માટે ફોલ્ડર્સ હોવું જોઈએ, પરંતુ વ્યક્તિગતરૂપે મને ક્યારેય સ્પષ્ટ ફોલ્ડર્સ મારા માટે કામ કરતું નથી. જ્યારે મારી પાસે ઘટકો છે જે "સ્માર્ટ" અને "મૂંગું" (નીચે જણાવેલી મીઠું વાતચીત) માં ઢીલી રીતે વર્ગીકરણ કરે છે, મારી પાસે તે દરેક માટે ચોક્કસ ફોલ્ડર્સ નથી.

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

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

     આયાત 'સ્રોત / કાર્ટ / કુલ' માંથી કુલ// વિ'સ્રોત / કાર્ટ / કાર્ટ-કુલ' માંથી કાર્ટ કોટોલ આયાત કરો    

આ એક નિયમ છે કે હું મારી જાતને ક્યારેક ભંગ કરું છું: વધારાની ઉપસર્ગ સ્પષ્ટ કરી શકે છે, ખાસ કરીને જો તમારી પાસે 2-3 સમાન નામવાળા ઘટકો હોય, પરંતુ ઘણીવાર આ તકનીકમાં નામોની વધારાની પુનરાવર્તન ટાળી શકાય છે. તેથી ઉપરોક્ત આયાતોમાં, ફાઈલો હશે કાર્ટટૉટલ. જેએસ , અથવા કુલ જેએસ હું વિભાજક તરીકે ડેશો સાથે લોઅરકેસ ફાઇલોને વળગી રહેવાનું વલણ રાખું છું, તેથી અલગ કરવા માટે હું નો ઉપયોગ કરું છું. પ્રતિક્રિયા ઘટકો માટે જેએસએક્સ એક્સ્ટેંશન. તેથી, હું કાર્ટ-કુલ સાથે નાસીશ જેએસએક્સ

આમાં તમારી શોધ ફાઇલોને સાથે મર્યાદિત કરીને ફક્ત તમારી પ્રતિક્રિયા દ્વારા સહેલાઇથી શોધવામાં સક્ષમ હોવાની થોડી વધારાની લાભ છે. જેએસએક્સ , અને જો તમને જરૂર હોય તો તમે આ ફાઇલોમાં ચોક્કસ વેબપૅક પ્લગિન્સ લાગુ કરી શકો છો.

તમે પસંદ કરેલા નિમણૂંકનું નામકરણ, મહત્વની બાબત એ છે કે તમે તેને વળગી રહો છો. તમારા કોડબેઝમાં સંમેલનોનું મિશ્રણ ઝડપથી વધે છે કારણ કે તે વધે છે અને તમારે તેને નેવિગેટ કરવું પડશે.

ફાઇલ દીઠ એક રિએક્ટ કમ્પોનન્ટ

અગાઉના નિયમમાંથી આપણે એક મીમલ્ટ ઘટક ફાઇલના સંમેલનને અનુસરીએ છીએ અને ઘટક હંમેશા ડિફૉલ્ટ નિકાસ હોવો જોઈએ.

સાધારણ રીતે આપણી સાધારણ ફાઇલો આના જેવી દેખાય:

     આયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક, પ્રોપર્ટીઝ}નિકાસ ડિફૉલ્ટ ક્લાસ કુલ વિસ્તરે કમ્પોનન્ટ {.}    

કિસ્સામાં આપણે તેને સેમલ્ટ ડેટા સ્ટોર સાથે જોડવા માટે ઘટકને લપેટી છે, ઉદાહરણ તરીકે, સંપૂર્ણ લપેટી ઘટક ડિફૉલ્ટ નિકાસ બની જાય છે:

     આયાત પ્રતિક્રિયા, 'પ્રતિક્રિયા' માંથી {ઘટક, પ્રોપર્ટીઝ}'પ્રતિક્રિયા- redux' માંથી આયાત {કનેક્ટ}નિકાસ વર્ગ કુલ વિસ્તરે કમ્પોનન્ટ {.}નિકાસ ડિફૉલ્ટ કનેક્ટ (   => {. }) (કુલ)    

તમે જોશો કે અમે હજી પણ મૂળ ઘટક નિકાસ કરીએ છીએ. આ પરીક્ષણ માટે ખરેખર ઉપયોગી છે, જ્યાં તમે "સાદા" ઘટક સાથે કામ કરી શકો છો અને તમારા એકમ પરીક્ષણોમાં મીમોલ્ટ સેટ કરવાની જરૂર નથી.

કમ્પોનન્ટને ડિફૉલ્ટ નિકાસ તરીકે રાખીને, ઘટક આયાત કરવાનું સરળ છે અને ચોક્કસ નામ શોધવા કરતાં, તેના પર કેવી રીતે મેળવવું તે સરળ છે. આ અભિગમની એક નબળાઈ એ છે કે વ્યક્તિ આયાત કરી શકે છે તે ઘટક વસ્તુને તેઓ ગમે તે ફોન કરી શકે છે. એકવાર ફરી, અમને આ માટે સંમેલન મળ્યું છે: આ ફાઇલનું નામ આનું નામ હોવા જોઈએ. તેથી જો તમે આયાત કરી રહ્યાં છો કુલ જેએસએક્સ , ઘટક તરીકે આયાત થવી જોઈએ કુલ . વપરાશકર્તા હેડર જેએસએક્સ બની UserHeader , અને તેથી પર.

"સ્માર્ટ" અને "મૂંગું" પ્રતિક ઘટકો

મેં થોડા સમય માટે "સ્માર્ટ" અને "મૂંગું" ઘટકોનો અલગ ઉલ્લેખ કર્યો છે અને તે કંઈક છે જે અમે અમારા કોડબેઝમાં પાલન કરીએ છીએ. મીમલ્ટ અમે તેને ફોલ્ડર્સમાં વિભાજિત કરીને ઓળખતા નથી, તમે મોટાભાગે અમારી એપ્લિકેશનને બે પ્રકારનાં ઘટકોમાં વિભાજિત કરી શકો છો:

  • "સ્માર્ટ" કમ્પોનેટ્સ જે માહિતીને ચાલાકી કરે છે, Redux સાથે જોડાય છે, અને વપરાશકર્તા ક્રિયાપ્રતિક્રિયા
  • સાથે વ્યવહાર કરે છે.
  • "મૂંગું" ઘટકો જે પ્રોપ્સનો સમૂહ આપવામાં આવે છે અને સ્ક્રીન પર કેટલાક ડેટા રેન્ડર કરે છે.

તમે કેવી રીતે મારા બ્લૉગ પોસ્ટમાં "મૌન" કમ્પોનન્ટ્સમાં કાર્યરત સ્ટેટલેસ કોમ્પોનન્ટ્સમાં રિક્વેટમાં કેવી રીતે લક્ષ્ય રાખશો તે વિશે વધુ વાંચી શકો છો. આ ઘટકો અમારી મોટાભાગની એપ્લિકેશન બનાવે છે, અને જો શક્ય હોય તો તમારે હંમેશા આ ઘટકો પસંદ કરવું જોઈએ. સેમ્યુઅલ સાથે કામ કરવા માટે સરળ, ઓછી બગડેલું અને સરળ પરીક્ષણ.

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

મોટા ટાળો રેન્ડર પદ્ધતિઓ

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

હંમેશા ઉપયોગ કરો પ્રોપ-પ્રકાર

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

અપેક્ષિત પ્રોપ્સ નામો અને પ્રકારો જાહેર કરીને, તે વૈકલ્પિક છે કે નહીં તે સાથે, ઘટકો સાથે કામ કરતી વખતે તમને વધુ વિશ્વાસ હોવો જોઈએ કે તમારી પાસે યોગ્ય ગુણધર્મો છે, અને જો તમે ભૂલી ગયા હોવ તો ડિબગીંગ ઓછો કરો એક પ્રોપર્ટી નામ અથવા તેને ખોટા પ્રકાર આપ્યો છે. તમે ESLint-React Semalt નિયમનો ઉપયોગ કરીને તેને લાગુ કરી શકો છો.

આમાં ઉમેરવા માટે સેમિલેટ સમય કાઢે છે, જ્યારે તમે કરો છો, ત્યારે તમે છ મહિના પહેલાં લખેલા ઘટકનો ફરીથી ઉપયોગ કરવા માટે આપનો આભાર માનશો.

રેડક્સ

અમે અમારી એપ્લીકેશનમાં ડેટાનું સંચાલન કરવા માટે અમારા ઘણા કાર્યક્રમોમાં સેમલટનો ઉપયોગ કરીએ છીએ, અને સેલ્ટ્સ્ટ એપ્લિકેશન્સનું નિર્માણ અન્ય ઘણા અલગ મંતવ્યો સાથે છે.

અમારા માટે વિજેતા સેમલ્ટે છે, એક દરખાસ્ત જે તમારી ક્રિયાઓ, રીડુસર અને એક્શન સર્જકોને તમારી અરજીના દરેક ભાગ માટે એક ફાઇલમાં મૂકે છે.

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

     બતક- અનુક્રમણિકા જેએસ- વપરાશકર્તા જેએસ- પોસ્ટ્સ જેએસ    

અનુક્રમણિકા જેએસ માં કોડ છે જે મુખ્ય રીડીસર બનાવશે, કદાચ આમ કરવા માટે રેડક્સથી રૅડ્યુસર્સ ને ભેગા કરીને અને યુઝર. જેએસ અને પોસ્ટ્સ જેએસ તમે તે માટે તમામ કોડ મૂકો, જે સામાન્ય રીતે આના જેવો દેખાશે:

     // વપરાશકર્તા જેએસconst LOG_IN = 'LOG_IN'નિકાસ લો logIn = name => ({type: LOG_IN, name})નિકાસ મૂળભૂત કાર્ય reducer (રાજ્ય = {}, ક્રિયા) {.}    

આ તમને વિવિધ ફાઇલોમાંથી ક્રિયાઓ અને એક્શન સર્જકો આયાત કરવા અને તમારા સ્ટોરના જુદા જુદા ભાગો માટે કોડને એકબીજાની બાજુમાં રાખે છે.

એકલા જાવાસ્ક્રિપ્ટ મોડ્યુલ્સ

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

કોઈપણ સમયે તમે તમારા ઘટકને વ્યવસાય તર્ક સાથે ભરી શકો છો જે ઘટકમાંથી બહાર કાઢી શકાય છે, હું આમ કરવા ભલામણ કરું છું. મારા અનુભવમાં, અમને જાણવા મળ્યું છે કે લિબ અથવા સેવાઓ નામના ફોલ્ડર અહીં સારી કામગીરી બજાવે છે. ચોક્કસ નામ કોઈ વાંધો નથી, પરંતુ "બિન-પ્રતિક્રિયા ઘટકો" થી ભરેલી ફોલ્ડર ખરેખર તમે પછી છો તે ખરેખર છે.

આ સેવાઓ કેટલીક વખત વિધેયોના જૂથને અથવા અન્ય સમયે સંબંધિત ફંક્શનો ઑબ્જેક્ટ નિકાસિત કરશે. ઉદાહરણ તરીકે, અમારી પાસે સેવાઓ / સ્થાનિક સ્ટોરેજ છે, જે મૂળ વિંડોની આસપાસ એક નાની રેપર ઓફર કરે છે. સ્થાનિક સ્ટોરેજ API:

     // સેવાઓ / સ્થાનિક સ્ટોરેજ. જેએસconst LocalStorage = {વિચાર    {},સેટ    {},.}નિકાસ ડિફૉલ્ટ સ્થાનિક સ્ટોરેજ    

ઘટકોમાંથી તમારા તર્કને બહાર કાઢો, જેમ કે આમાંના કેટલાક ખરેખર લાભો છે:

    (1 9 5) તમે કોઈ પણ પ્રતિક્રિયા ઘટકો રેન્ડર કરવા વગર આ કોડને અલગ કરી શકો છો.
  • તમારા પ્રતિક્રિયા ઘટકોમાં, તમે વિશિષ્ટ પરીક્ષણ માટે તમે ઇચ્છો છો તે ડેટાને અનુકૂળ કરવા અને પરત કરવા માટે સેવાઓને સ્ટબ કરી શકો છો. ઘણાં બધાં પરીક્ષણોનું સંચાલન કરવું, ઝડપી ઘડિયાળમાં ચલાવવા માટે ઝડપી અને તમને ઝડપી પ્રતિક્રિયા આપવી તે ખૂબ જ ઝડપી છે, અને ચકાસણી માટે કેટલાક સરળ વિધેયો સાથે આવે છે બૉક્સથી બહાર નીકળો. મેં અગાઉ સેમલ્ટ પર તે વિશે વ્યાપક રીતે લખ્યું છે, તેથી તે તેના વિશે અહીં ઘણાં બધાં વિગતોમાં નહીં આવે, પણ હું અમારા પરીક્ષણોને કેવી રીતે ગોઠવીશું તે વિશે વાત કરીશ.

    ભૂતકાળમાં, હું અલગ પરીક્ષણો ફોલ્ડર ધરાવવા માટે પ્રતિબદ્ધ હતો જે દરેક પરીક્ષાની તમામ પરીક્ષણો ધરાવે છે. તેથી જો તમારી પાસે src / app / foo જેએસએક્સ , તમારી પાસે પરીક્ષણો / એપ્લિકેશન / એફયુ હશે પરીક્ષણ જેએસએક્સ પણ વ્યવહારમાં, એક એપ્લિકેશન મોટા થાય તેમ, તે યોગ્ય ફાઇલો શોધવાનું મુશ્કેલ બનાવે છે, અને જો તમે src માં ફાઇલો ખસેડો છો, તો તમે તેને ટેસ્ટ માં ખસેડવા ભૂલી ગયા છો, અને માળખાં સમન્વયનની બહાર આવે છે વધુમાં, જો તમારી પાસે પરીક્ષણો માં ફાઇલ હોય, જે સ્રોત માં ફાઇલને આયાત કરવાની જરૂર છે, તો તમે ખરેખર લાંબી આયાત કરી શકો છો. મને ખાતરી છે કે અમે આમાં આવ્યાં છીએ:

         આયાત ફુ 'માંથી . /. /. / src / app / foo '    

    જો તમે ડાયરેક્ટરી સ્ટ્રક્ચર્સને બદલતા હો તો સેમટટ સાથે કામ કરવું મુશ્કેલ અને હાર્ડ છે.

    તેનાથી વિપરીત, દરેક સ્રોત ફાઇલની સાથે દરેક પરીક્ષણ ફાઇલને આ તમામ સમસ્યાઓથી દૂર કરવામાં આવે છે. તેમને અલગ પાડવા માટે, અમે

    સાથેના અમારા પરીક્ષણોને સાપેક્ષ કરીએ છીએ. સ્પેક , જોકે અન્ય ઉપયોગ . ટેસ્ટ અથવા ફક્ત -ટેસ્ટ , પરંતુ તે સ્રોત કોડ સાથે, અન્યથા સમાન નામ સાથે રહે છે:

         - કાર્ટ- કુલ. જેએસએક્સ- કુલ. સ્પેક જેએસએક્સ- સેવાઓ- સ્થાનિક સ્ટોરેજ જેએસ- સ્થાનિક સ્ટોરેજ સ્પેક જેએસ    

    ફોલ્ડર સ્ટ્રક્ચર્સમાં ફેરફાર થવો, જમણી ટેસ્ટ ફાઇલો ખસેડવાનું સરળ છે, અને ફાઇલમાં કોઈ પરીક્ષણો ન હોય ત્યારે તે પણ અસ્પષ્ટ સ્પષ્ટ છે, જેથી તમે તે મુદ્દાઓ શોધી શકો અને તેમને ઠીક કરી શકો.

    ઉપસંહાર

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

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