Back to Question Center
0

કોણીય વિકાસકર્તાઓ માટે પ્રતિક્રિયા            કોણીય વિકાસકર્તાઓ માટે પ્રતિક્રિયા થતી સેમલ્ટ: npmAPIsReactAngularJSES6 વધુ ... પ્રાયોજકો

1 answers:
કોણીય વિકાસકર્તાઓ માટે પ્રતિક્રિયા

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

આ લેખ એવા વિકાસકર્તાઓ માટે છે કે જેઓ કોનેર 1. સાથે પરિચિત છે અને સેમલ્ટ વિશે વધુ જાણવા માંગે છે - vendita tappeti con procione. અમે સમૃદ્ધ વેબ એપ્લિકેશન્સ, ઓવરલેપિંગ વિધેય અને ગાબડાને ભરવા માટેના વિવિધ અભિગમોને જોશો કે જે મીમટાલ ભરવાનો પ્રયાસ કરતું નથી

વાંચ્યા પછી, તમારી સમસ્યાઓની સમજૂતી હશે જે મીમટાલને ઉકેલવા માટે બહાર નીકળે છે અને તમે તમારા પોતાના પ્રોજેક્ટ્સમાં મીમોલ્ટનો ઉપયોગ કરીને તમે જે જ્ઞાન મેળવ્યું છે તેનો ઉપયોગ કરી શકો છો.

ફ્રેમવર્ક્સ વિ પુસ્તકાલયો

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

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

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

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

બોક્સની બહાર

કોનેર તમે વેબ એપ્લિકેશન્સ બનાવવા માટે એક સમૃદ્ધ લક્ષણ સેટ આપે છે. તેના લક્ષણોને સેમ્યુઅલ છે:

  • ડબલ કર્લ્સમાં ડાયનેમિક સમીકરણો સાથે એચટીએમએલ નમૂનાઓ {{}}
  • એનજી-મોડલ , એનજી-રિટેટ અને એનજી-ક્લાસ જેવા એચટીએમએલ ની ક્ષમતા વિસ્તારીને
  • તર્કનું જૂથબદ્ધ કરવા અને ડેટાને દૃશ્યમાં પસાર કરવા માટેના નિયંત્રકો
  • સમન્વયનમાં તમારા દેખાવ અને નિયંત્રકને રાખવાની સરળ રીત તરીકે બે-વે બંધનકર્તા છે
  • મોડ્યુલો જેવા મોટા સંગ્રહ સર્વર સાથે વાતચીત માટે $ http અને રૂટીંગ માટે ngRoute
  • તમારી પોતાની HTML સિન્ટેક્ષ બનાવવા માટેની કસ્ટમ ડાયરેક્ટિવ્સ
  • એપ્લિકેશનના ચોક્કસ ભાગોમાં ઑબ્જેક્ટ્સના એક્સપોઝરને મર્યાદિત કરવા માટે ડિપેન્ડન્સી ઇન્જેક્શન
  • વહેંચાયેલ વ્યવસાય તર્ક માટે સેવાઓ
  • દૃશ્ય ફોર્મેટિંગ સહાયકો માટે ફિલ્ટર્સ

બીજી બાજુ, મીઠું, તમને આપે છે:

  • જાવાસ્ક્રિપ્ટ સમીકરણોવાળા ટેમ્પલેટો માટે સિંગલ કર્લ્સમાં {}
  • ઘટકો, જે કોણીય તત્વ નિર્દેશો જેવા મોટા ભાગના છે.

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

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

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

બુટસ્ટ્રેપીંગ

સાધારણ એપ્લિકેશન્સ શરૂ કરવા માટે મોડ્યુલ, ડિપેન્ડન્સીઝની સૂચિ અને રૂટ તત્વની આવશ્યકતા છે.

     એપ્લિકેશન = કોણીય દો. ક્વેરી સિલેક્ટર ('# રુટ');કોણીય તત્વ (રુટ) તૈયાર (કાર્ય    {કોણીય બુટસ્ટ્રેપ (રુટ, ['app']);});    

રીત માટે એન્ટ્રી પોઇન્ટ રુટ નોડમાં ઘટક રેન્ડર કરે છે. ઘણાબધા રુટ ઘટકો હોવાનું પણ શક્ય છે, પણ:

     દો રુટ = દસ્તાવેજ. ક્વેરી સિલેક્ટર ('# રુટ');પ્રતિક્રિયા રેન્ડર કરો (, રુટ)    

નમૂનાઓ

કોણીય દૃશ્યની શરીરરચના જટિલ છે અને તેની ઘણી જવાબદારીઓ છે તમારા HTML નમૂનાઓમાં નિર્દેશો અને અભિવ્યક્તિનો મિશ્રણ શામેલ છે, જે દૃશ્ય અને સંકળાયેલ નિયંત્રકોને મળીને બાંધે છે. ડેટા $ સ્કોપ દ્વારા બહુવિધ સંદર્ભો દરમિયાન ડેટા વહે છે.

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

     const એપ્લિકેશન = પ્રતિક્રિયા બનાવોક્લાસ ({રેન્ડર: ફંક્શન    {વળતર (<ઘટક> 
{2 + 1}
<કમ્પોનન્ટ પ્રોપ = "વેલ્યુ" /><કમ્પોનન્ટ સમય = {નવી તારીખ getTime }><કમ્પોનન્ટ />)}})

નીચે સંકલિત કોડ સ્પષ્ટ કરવા માટે મદદ કરે છે કે મેટા ઉપર જેએસએક્સ (XX) સમીકરણો કેવી રીતે બનાવો (ઘટક, પ્રોપ્સ, બાળકો) વિધેય કોલ્સ:

     var એપ = પ્રતિક્રિયા બનાવોક્લાસ ({રેન્ડર: ફંક્શન રેન્ડર    {વળતર પ્રતિક્રિયા બનાવોએલેમેન્ટ (ઘટક,નલ,પ્રતિક્રિયા બનાવો ઍલેમેન્ટ ("div", નલ, 2 + 1),પ્રતિક્રિયા બનાવો ઍલેમેન્ટ (કોમ્પોનન્ટ, {પ્રોપ: "વેલ્યુ"}),પ્રતિક્રિયા બનાવોએલેમેન્ટ (ઘટક,{સમય: નવી તારીખ    getTime   },પ્રતિક્રિયા બનાવો ઍલેમેન્ટ (ઘટક, નલ)));}});    

ઢાંચો નિર્દેશો

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

     વર્ગ MyComponent પ્રતિક્રિયા વિસ્તરે. કમ્પોનન્ટ {રેન્ડર    {વળતર (// જેએસએક્સ અહીં રહે છે)}}    

એનજી-રિકેટ

      
  • {શબ્દ}

અમે JSX માં ઘટકોની શ્રેણી મેળવવા માટે પ્રમાણભૂત જાવાસ્ક્રિપ્ટ લૂપિંગ પદ્ધતિઓ નકશો નો ઉપયોગ કરી શકીએ છીએ.

      
    {શબ્દો નકશો ((શબ્દ) =>
  • {શબ્દ}
  • )}

એનજી-ક્લાસ

      <ફોર્મ એનજી-વર્ગ = "{સક્રિય: સક્રિય, ભૂલ: ભૂલ}">       

પ્રતિક્રિયામાં, ક્લાસમેન પ્રોપર્ટી માટે અમારી જગ્યા-વિભાજિત વર્ગોની સૂચિ બનાવવા માટે અમે અમારા પોતાના ડિવાઇસ પર છોડી રહ્યાં છીએ. આ ઉદ્દેશ્ય માટે હાલના કાર્ય જેમ કે જેડ વોટસનની ક્લાસ નામોનો ઉપયોગ કરવો તે સામાન્ય છે.

     

JSX માં આ વિશેષતાઓ વિશે વિચારવાનો માર્ગ એ છે કે તમે તે ગાંઠો પર ગુણધર્મો સ્થાપિત કરી રહ્યાં છો. એટલા માટે ક્લાસ એટ્રીબ્યુટ નામની જગ્યાએ વર્ગ નામ છે.

     ફોર્મનોડ className = "સક્રિય ભૂલ";    

એનજી-જો

      

યેપ

જો .બીજું સ્ટેટમેન્ટ જેએસએક્સમાં કામ કરતા નથી, કારણ કે જેએસએક્સ ફંક્શન કૉલ્સ અને ઑબ્જેક્ટ કન્સ્ટ્રક્શન માટે માત્ર વાક્યરચના ખાંડ છે. આ માટે ટર્નરી ઑપરેટર્સનો ઉપયોગ કરવો અથવા શરતી તર્કને રૅન્ડર મેથડની ટોચ પર ખસેડવા માટે વિશિષ્ટ છે, JSX ની બહાર. છુપાયેલા {display: none} , તમારા તત્વોને છુપાવવાના હેતુસર તમારા CSS પર (જે તે કોણીય હેન્ડલ છે).

     

લિવિંગ

ઘોસ્ટ

લિવિંગ

ઘોસ્ટ

તમને તે હવે અટકી ગઈ છે વિશિષ્ટ નમૂનો સિન્ટેક્સ અને વિશેષતાઓને બદલે, તમારે તેના બદલે તમે શું કરવા માંગો છો તે પ્રાપ્ત કરવા માટે સેમલટ વાપરવાની જરૂર પડશે.

એક ઉદાહરણ ઘટક

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

     
<સ્લાઇડ-શો સ્લાઇડ્સ = "સ્લાઇડ્સ">
     એપ્લિકેશન નિયંત્રક ("સ્લાઇડશો કન્ટ્રોલર", કાર્ય ($ અવકાશ) {$ અવકાશ સ્લાઇડ્સ = [{imageUrl: "એલન-બીવર. jpg",કૅપ્શન: "એલન એલન અલ અલ એલન"}, {imageUrl: "સ્ટીવ-બીવર. jpg",કૅપ્શન: "સ્ટીવ સ્ટીવ સ્ટીવ"}];});એપ્લિકેશન નિર્દેશ ("સ્લાઇડશો", કાર્ય    {વળતર {પ્રતિબંધિત: 'ઇ',અવકાશ: {સ્લાઇડ્સ: '='},નમૂનો: `
  • <આકૃતિ> {{સ્લાઇડ. કૅપ્શન}}
  • {{$ ઇન્ડેક્સ + 1}}
`,લિંક: ફંક્શન ($ અવકાશ, તત્વ, એટ્ર્સ) {$ અવકાશ activeIndex = 0;$ અવકાશ JumpToSlide = કાર્ય (ઇન્ડેક્સ) {$ અવકાશ activeIndex = ઇન્ડેક્સ;};}};});

કોણીયમાં સ્લાઇડશો ઘટક

કોડપેન પર સાઇટપેઇન્ટ (@SitePoint) દ્વારા પેન કોણીય સ્લાઇડશો જુઓ.

મિમેલ્ટમાં આ ઘટક બીજા ઘટકની અંદર રેન્ડર કરવામાં આવશે અને પ્રોપ્સ દ્વારા સ્લાઇડ્સ ડેટા પસાર કરશે.

     દો _સ્લાઇડ્સ = [{imageUrl: "એલન-બીવર. jpg",કૅપ્શન: "એલન એલન અલ અલ એલન"}, {imageUrl: "સ્ટીવ-બીવર. jpg",કૅપ્શન: "સ્ટીવ સ્ટીવ સ્ટીવ"}];વર્ગ એપ્લિકેશન રિપોર્ટ લંબાય છે. કમ્પોનન્ટ {રેન્ડર    {વળતર <સ્લાઇડશો સ્લાઇડ્સ = {_slides} />}}    

પ્રતિક્રિયા ઘટકો પાસે એક સ્થાનિક અવકાશ છે આ. રાજ્ય , જેને તમે કૉલ કરીને આ સંશોધિત કરી શકો છો. સેટસ્ટેટ ({કી: મૂલ્ય}) . રાજ્યમાં થયેલા કોઈપણ ફેરફારો ઘટકને પોતાને ફરીથી રેન્ડર કરવા માટેનું કારણ બને છે.

     ક્લાસ સ્લાઇડશોનો વિસ્તૃત પ્રતિક્રિયા. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર    {સુપર   આ. રાજ્ય = {activeIndex: 0};}JumpToSlide (ઇન્ડેક્સ) {આ. સેટસ્ટેટ ({activeIndex: index});}રેન્ડર    {વળતર (
    {આ. પ્રોપ્સ સ્લાઇડ્સ નકશો ((સ્લાઇડ, અનુક્રમણિકા) => (
  • <આકૃતિ>{સ્લાઇડ. કૅપ્શન? {સ્લાઇડ. કૅપ્શન} : null}
  • ))}
    {આ. પ્રોપ્સ સ્લાઇડ્સ નકશો ((સ્લાઇડ, અનુક્રમણિકા) => (
  • {ઇન્ડેક્સ + 1}
  • ))}
);}}

જૂના શાળા ઇનલાઇન ઇવેન્ટ હેન્ડલર્સ જેમ કે ઑનક્લિક જેવા પ્રતિક્રિયાઓની ઘટનાઓ. ખરાબ લાગશો નહીં, છતાં: હૂડ હેઠળ તે યોગ્ય વસ્તુ કરે છે અને અત્યંત પ્રતિનિધિત્વ કરેલા ઇવેન્ટ શ્રોતાઓને બનાવે છે.

રિડક્શનમાં સ્લાઇડશો કમ્પોનન્ટ

કોડપેન પર પેન પ્રતિક્રિયા સાઇટપેઇન્ટ (@SitePoint) દ્વારા સ્લાઇડ શો જુઓ.

બે-વે બંધનકર્તા

કોણીયના વિશ્વાસુ એનજી-મોડલ અને $ સ્કોપ એક કડી બનાવતા હોય છે જ્યાં એક ઘટકમાં જાવાસ્ક્રિપ્ટ ઓબ્જેક્ટ પર ફોર્મ એલિમેન્ટ અને પ્રોપર્ટીઝ વચ્ચેનો ડેટા આગળ અને પાછળ આવે છે.

     એપ્લિકેશન નિયંત્રક ("ટુવૅકન્ટોલર", ફંક્શન ($ અવકાશ) {$ અવકાશ વ્યક્તિ = {નામ: 'બ્રુસ'};});     
     

હેલો {{વ્યક્તિ. નામ}}!

સેમિલે તેના બદલે એક-માર્ગીય ડેટા પ્રવાહની તરફેણમાં આ પેટર્નને દૂર કર્યું છે. સમાન પ્રકારનાં દૃષ્ટિકોણ બંને પેટર્ન સાથે બનાવી શકાય છે.

     ક્લાસ વનવૉકન્ટોન્ટ રીટેક્ટ વિસ્તરે છે. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર    {સુપર   આ. રાજ્ય = {નામ: 'બ્રુસ'}}ફેરફાર (ઇવેન્ટ) {આ. સેટસ્ટેટ ({name: event. target.value});}રેન્ડર    {વળતર ( 
આ બદલો (ઇવેન્ટ)} />

હેલો {આ. રાજ્ય નામ}!

);}}

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

કોડપેન પર સાઇટપેઇન્ટ (@SitePoint) દ્વારા પેન વન-વે ડેટા ફ્લોને પ્રતિક્રિયા જુઓ.

લાક્ષણિક રીતે, એક રાજ્ય કન્ટેઈનર કમ્પોનન્ટ અથવા કંટ્રોલર વ્યૂ નીચે ઘણા સ્ટેટલેસ બાળક ઘટકો સાથે વૃક્ષની ટોચ પર બેસે છે. આના પર વધુ માહિતી માટે, શું ઘટકોમાં મીઠાની જોઈએ? દસ્તાવેજોમાંથી

તમારા માતાપિતાને કૉલ કરો

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

     // શુદ્ધ કાર્ય તરીકે લખાયેલી એક પ્રસ્તુતિક ઘટકકોન્ટ વનવૅકમ્પોનન્ટ = (પ્રોપ્સ) => ( 
પ્રોપ્સ ઓનચૅન્જ (ઇવેન્ટ લક્ષ્ય મૂલ્ય)} />

હેલો {પ્રોપ્સ નામ}!

);ક્લાસ પેન્ટકમ્પોનન્ટ રીટેક્ટ વિસ્તરે છે. કમ્પોનન્ટ {કન્સ્ટ્રક્ટર {સુપર આ. રાજ્ય = {નામ: 'બ્રુસ'};}ફેરફાર (મૂલ્ય) {આ. સેટસ્ટેટ ({name: value});}રેન્ડર {વળતર (

હેલો {આ. રાજ્ય નામ}!

)}}

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

     // આધારભૂતપણાઓ સાથે એક કોણીય ડાઈરેક્ટીવએપ્લિકેશન નિર્દેશ ('myComponent', ['નિર્દેશક', '$ ફિલ્ટર', કાર્ય (નિર્દેશક, $ ફિલ્ટર) {const formatName = $ ફિલ્ટર ('formatName');// ઉપયોગ નિર્દેશક / formatName}]પ્રતિક્રિયા ઘટક દ્વારા વપરાતા // ES6 મોડ્યુલ"સેવાઓ / સૂચક" માંથી આયાત નિર્દેશક;"ફિલ્ટર્સ" માંથી {formName} આયાત કરો;વર્ગ MyComponent પ્રતિક્રિયા વિસ્તરે. કમ્પોનન્ટ {// ઉપયોગ નિર્દેશક / formatName}    

ગ્રેટ ધ્વનિઓ હું બંને ઉપયોગ કરી શકો છો !?

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

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

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

કેવી રીતે કોણીય 2 વિશે?

કોણીય 2 ના ઘટકો ઘણી રીતે સેમ્યુઅલ ઘટકોને મળતા આવે છે. ડૉક્સના ઉદાહરણ ઘટકો પાસે ક્લાસ અને ટેમ્પ્લેટ ક્લોઝ નિકટ્ટીમાં હોય છે. ઇવેન્ટ્સ સમાન દેખાય છે. તે સમજાવે છે કે કમ્પોનન્ટ હાયરાર્કીનો ઉપયોગ કરીને દૃશ્ય કેવી રીતે બનાવવી, જેમ તમે તેને સેમલ્ટમાં બનાવી રહ્યા હોત, અને તે ES6 મૉડ્યૂલ્સને નિર્ભરતા ઇન્જેક્શન માટે ભેગો કરે છે.

     // કોણીય 2@ કમ્પોનન્ટ ({પસંદગીકાર: 'હેલો-કમ્પોનન્ટ',નમૂનો: ` 

મને કેટલીક કી આપો!
{{મૂલ્યો}}
`})વર્ગ HelloComponent {કિંમતો = '';onKeyUp (ઇવેન્ટ) {આ. મૂલ્યો + = ઇવેન્ટ લક્ષ્ય કિંમત + '| ';}}// પ્રતિક્રિયાવર્ગ HelloComponent પ્રતિક્રિયા લંબાય છે. કમ્પોનન્ટ {કન્સ્ટ્રકટર (પ્રોપ્સ) {સુપર આ. રાજ્ય = {મૂલ્યો: ''};}onKeyUp (ઇવેન્ટ) {કોન્સ્ટ મૂલ્યો = `$ {this રાજ્ય મૂલ્યો + ઇવેન્ટ લક્ષ્ય કિંમત} | `;આ. સેટસ્ટેટ ({મૂલ્યો: મૂલ્યો});}રેન્ડર {વળતર (

મને કેટલીક કી આપો!
{આ. રાજ્ય મૂલ્યો}

);}}

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

એક પૂર્ણ અરજી

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

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

  • https: // github. કોમ / માર્કબ્રૉવન 4 / જીમેલ-પ્રતિક્રિયા
  • https: // github. કોમ / ઉદાહરણો / પ્રતિક્રિયા /
  • http: // todomvc કોમ / ઉદાહરણો / કોણીય જાતિ /

લર્નિંગ સંપત્તિ

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

  • મૂર્ખ લોકો માટે પ્રતિક્રિયા - એન્ડ્રુ રે
  • મૂર્ખ લોકો માટે પ્રવાહ - એન્ડ્રુ રે
  • ટ્યૂટોરિયલ પર પ્રતિક્રિયા - ફેસબુક
  • રાઉટરનો પ્રતિક્રિયા - આરજે ફ્લોરેન્સ
  • રેડક્સ - ડૅન અબ્રામોવ દ્વારા વિડીયો શ્રેણી

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

React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
જોબ-રેડી કોન્યુલર એન્ડ ટાઇપસ્ક્રિપ્ટ ટ્રેનિંગ
ટોડ મોટો
કોણીય અને તેની ઇકોસિસ્ટમ શીખવા માટે અંતિમ સાધન. કૂપન કોડનો ઉપયોગ કરો 'SITEPOINT' મેળવવા માટે ચેકઆઉટ પર 25% બંધ .
React for Angular DevelopersReact for Angular DevelopersRelated Semalt:
npmAPIsReactAngularJSES6More. Sponsors
પ્રારંભિક અભ્યાસ માટે શ્રેષ્ઠ માર્ગ
વેસ બોઝ
તમે વાસ્તવિક વિશ્વમાં બિલ્ડ કરવા માટે એક પગલું દ્વારા પગલું તાલીમ કોર્સ પ્રતિક્રિયા. જેએસ + બપોરે એક દંપતિ માં ફાયરબેઝ એપ્લિકેશનો અને વેબસાઇટ ઘટકો કૂપન કોડનો ઉપયોગ કરો 'SITEPOINT' મેળવવા માટે ચેકઆઉટ પર 25% બંધ .
March 1, 2018