[સંગીત વગાડવાનો] 

નીલ મહેતા: અહીં તે જાય છે. 

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

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

તેથી ફેસબુક વેબ ફ્રેમવર્ક છે કે ફેસબુક દ્વારા વિકસાવવામાં આવી હતી પ્રતિક્રિયા back-- એક દંપતિ વર્ષ છે. ત્યારથી તે માં ઉપયોગ કરવામાં આવે છે તેમના મોબાઇલ એપ્લિકેશન્સ પર ફેસબુક અને વેબ એપ્લિકેશન, Instagram. ખાન એકેડેમી અન્ય છે પ્રતિક્રિયા અગ્રણી પ્રારંભિક અપનાવનારું. 

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

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

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

ઠીક છે, તેથી પ્રતિક્રિયા શું છે? પ્રતિક્રિયા એક ફ્રેમવર્ક તમે કરી શકો છો ઇન્ટરફેસો બનાવવા માટે ઉપયોગ કરે છે. એક ઇન્ટરફેસ, ફરી, છે અધિકાર વેબ પેજ? તેથી અહીં Instagram.com છે, ઉપયોગો પ્રતિક્રિયા. 

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

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

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

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

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

મૂળભૂત રીતે, તમે એક ડેટા સ્રોત છે. અને ડેટા સ્રોત નક્કી કરશે કેવી રીતે ચોક્કસ ઘટકો બહાર મૂકે છે. અને ઘટકો કરશે પછી, તેઓ બદલો છો, ત્યારે તેઓ કહેશે ડેટા સ્રોત બદલવા માટે. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

પ્રતિક્રિયા એક પુસ્તકાલય છે અને છે વર્ગ કાર્ય બનાવો. અને આ કાર્ય છે કોડ એક બીટ કે જે તમે નવી બનાવવા માટે ઉપયોગ કરી શકો છો ઘટક પ્રતિક્રિયા પ્રકાર. અને તેથી React.createClass એક ઘટક બનાવે છે, અને આ ઘટક કરશે સામગ્રી કરવા માટે સક્ષમ છે. તે કરી શકો છો મુખ્ય વસ્તુ રેન્ડર છે કંઈક એક કાર્ય તરીકે રેન્ડર. 

ફરીથી, આ ઇન્ડેક્સ સ્પષ્ટ ન હોય તો તમે, હું તમને બિલાડીઓ માટે જેએસ પર જવા ભલામણ અને તે તપાસો. સાજો કે ઝૂમ કરેલું છે? કૂલ. 

તેથી દરેક ઘટક જરૂરિયાતો એક રેન્ડર કાર્ય છે. રેન્ડર કાર્ય કહે છે હું સ્ક્રીન પર શું છાપો નથી? પરંતુ ઘટક છે જો તેમ ન હોય તો નકામું તેથી, સ્ક્રીન પર શું છાપવા માટે ખબર તમે રેન્ડર કાર્ય કરવાની જરૂર છે. 

આ, તમે વસ્તુ રેન્ડર તેથી માત્ર કેટલાક એચટીએમએલ પરત કરવાની જરૂર છે. અને શું ઠંડી છે કે છે કહેવાય વસ્તુ છે એક એક્સટેન્સન છે કે જે JSX, દ્વારા ઉપયોગ થાય છે જે જાવાસ્ક્રિપ્ટ પ્રતિક્રિયા. તે તમને અંદર HTML લખવા ચાલો તમારા જાવાસ્ક્રિપ્ટ, જે જ્યારે વિચિત્ર પ્રકારની લાગે છે તમે પ્રથમ તે વિશે વિચારો, પરંતુ તે પછી અર્થમાં ઘણો બનાવે છે. તેથી અમે આ કરી શકો છો. તમે HTML સાથે પરિચિત કરશો, તો મને ખબર અમે સામાન્ય હેતુ સાથે div છે સામગ્રી માટે કન્ટેનર. અમે અંદર એક div પાછા શકે છે, અને આ div, અમે સામગ્રી મૂકી શકો છો. 

તેથી ચાલો આપણે માત્ર રેન્ડર કરવા માંગો છો કહે દો હવે એક સીધી અપ flashcard. આ flashcard, હું કહે છે એક પ્રશ્ન અને જવાબ હશે. તેથી આ div અંદર, ચાલો એક ફકરો છાપે કે શું છે question-- કહે જીવન માટે અંતિમ જવાબ, બ્રહ્માંડ? અને પછી જવાબ છે 42, અલબત્ત, હોઈ ચાલે. 

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

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

તેથી જો તમે એપ્લિકેશન રેન્ડર છે, અને તમે તે મૂકી સ્થળ આપે છે. અને આ કેવી રીતે તમે આ કરી શકો છો છે જ્યાં તે મૂકવામાં તે કહો. હું પર એક સરળ div બનાવેલ છે પાનાંની એક ID સાથે કહેવાય પાનું, અને તે જ્યાં છે તત્વ જવા માટે ચાલે છે. 

અને અમે HTML સાથે ચલાવવા માટે જઈ રહ્યાં છો. મૂળભૂત રીતે આ વિચાર રહ્યું છે આ પાનું તત્વ ની અંદર મૂકી અમે સ્ક્રીન પર હોય છે. તેથી તે આ કોડ ચાલે છે, અને તે આ ખેંચે સ્ક્રીન પર વસ્તુ છે, તેથી અહીં આપણે છે. અમે અમારી પ્રથમ પ્રતિક્રિયા ઘટક કર્યા છે. 

તેથી માત્ર એક રીકેપ, અમે ધીમેધીમે કરવામાં ઘટક એક નવા પ્રકારની, અધિકાર? તે શું React.createClass છે. અને તે ઘટક, અમે તે શું કરવું જોઈએ તે જણાવ્યું હતું. જ્યારે આ ઘટક છે સ્ક્રીન પર છપાશે, તે વિભાગ સાથે છાપશે તે અંદર બે ફકરા. 

અને અમે શું કર્યું, અમે એક નવી એપ્લિકેશન બનાવી કોણ કૌંસ એપ્લિકેશન સંકેતલિપિ ની મદદથી. અમે તેને મૂકવા તે જણાવ્યું હતું આ પાનું તત્વ પર આધારિત છે. અને તેથી હું શું તે બનાવવામાં કે નમૂના માંથી નવા એપ્લિકેશન. અને પછી હું તે રેન્ડર કરવા માટે જણાવ્યું હતું. તેથી તે જણાવ્યું હતું કે, ઠીક છે, એપ્લિકેશન, હું શું છાપે જોઈએ? એપ્લિકેશન, એક DIV છાપે જવા કહે તે અંદર બે ફકરા સાથે. અને વોઇલા Query, સાથે અમારી DIV છે તે અંદર બે ફકરા. અત્યાર સુધી અર્થમાં બનાવવા? 

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

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

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

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

આ રેન્ડર કાર્ય તેથી કાર્ય વળતર CardView, અને આ ચોક્કસ જ વસ્તુ છે. તે જ વસ્તુ છે શા માટે જુઓ? તેના બદલે માત્ર એપ્લિકેશન રેન્ડરીંગ કે , તે અંદર DIV અને જોડ છે એપ્લિકેશન CardView રેન્ડર છે, અને CardView આ div અને ફકરા રેન્ડર કરે છે. તેથી આ અમારી પ્રથમ ઉદાહરણ છે દરેક અન્ય અંદર માળો તત્વો છે. કે અર્થમાં છે? તેથી, ફરી, અમે એક CardView તત્વ છે. અમે એપ્લિકેશન તત્વો હોય છે તે કરતાં મોટી છે છે. 

ઠીક છે, તેથી અમે માંગો છો અમારા CardView-- જો તમે આ બોલ પર કોઈ CardView ચોક્કસ કાર્ડ આપે છે, તે અધિકાર તમારા માટે છાપે પડશે? તેથી પ્રથમ, અમે એક કાર્ડ બનાવવા માટે જરૂર છે, તેથી આપણે એક કાર્ડ પદાર્થ બનાવવા દો. તેથી મારા કાર્ડ દો સમાન તમે બધા પરિચિત છો, તો આ માત્ર નોટેશનમાં નિર્માણ છે જાવાસ્ક્રિપ્ટ પદાર્થ. તે સ્ટ્રક્ટ જેવા પ્રકારની છે સી, તેથી અમે એક કાર્ડ કરવામાં અને તેથી હવે અમે આ કાર્ડ પસાર કરી શકો છો મિલકત અથવા HTML એક લક્ષણ તરીકે અમારા એપ્લિકેશન પરિભાષા. તેથી અમે આ એપ્લિકેશન કરી શકો છો કાર્ડ MyCard સમકક્ષ હોય છે. 

તમે ઇનપુટ, તમે કેવી રીતે ખબર ઇનપુટ પ્રકાર ટેક્સ્ટ અથવા બટન બરાબર વર્ગ બુટસ્ટ્રેપ માટે બીટીએન સમકક્ષ ,? જ વિચાર માટે, એપ્લિકેશન કાર્ડ બરાબર તમે કૌંસ મૂકી મળી છે અહીં એપ્લિકેશન કાર્ડ MyCard બરાબર છે, તેથી આ અમે આ કાર્ડ પદાર્થ હોય છે. હું, કે પાસ જાઉં છું એપ્લિકેશન ઘટક મિલકત. અને આ એપ્લિકેશન ઘટક કરશે તેને ઍક્સેસ કરવા માટે સક્ષમ હશે અને શું તે સાથે રસપ્રદ સામગ્રી. 

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

તેથી શું અહીં છે થાય છે તમે MyCard પદાર્થ હોય છે. તમે એપ્લિકેશન માં પસાર એપ્લિકેશન કાર્ડનો ઉપયોગ MyCard સમકક્ષ હોય છે. કે કાર્ડ પદાર્થ તમારી એપ્લિકેશન માટે આપવામાં આવે છે. એપ્લિકેશન ઍક્સેસ કરી શકો છો this.props.card છે. તે એક છબી જેવા પ્રકારની છે તે સ્ત્રોત છે તે જાણે છે. 

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

હવે માટે, હું પસાર થઇ રહ્યા હતા આ CardView પર this.props.card. અત્યાર સુધી અર્થમાં બનાવવા? તે હવે વધુ અર્થમાં બનાવવા પડશે. 

ઠીક છે, તેથી હવે અમે CardView છો. કાર્ડ આપવામાં અમારી CardView, જોઈએ તેના પ્રશ્ન અને જવાબ છાપશે. હમણાં અમે માત્ર છપાયેલ કેટલાક હાર્ડકોડ પ્રશ્નો અને જવાબો. આપણે જરૂર out-- આકૃતિ જરૂર તેઓ અમને આપ્યું કે કાર્ડ પૂછો શું પ્રશ્ન અને જવાબ છે, અને પછી સ્ક્રીન આ છાપશે. 

તેથી અમે અહીં કરી શકો છો. પ્રથમ બરાબર શું begin-- રેન્ડર. તેથી શું અમે અહીં કરી રહ્યા છીએ અમે તે ખબર છે કાર્ડ, મિલકત અમને આપવામાં આવે છે અધિકાર? તે ઇનપુટ તરીકે અમને આપવામાં આવ્યું છે. તે લગભગ જેમ જેમ કાર્ય માટે દલીલો. આ કાર્ડ એક દલીલ છે લગભગ આ CardView છે. 

અમે તે બહાર કાઢવા અને મૂકીશું તે ચલ પ્રશ્ન માં. ખાતરી કરો કે જવાબ ગયા બનાવો ચલ જવાબ આપવા માટે. કાર્ડ જવાબ આપવા માટે કે પૂછે છે. અને હવે અમે આ હોય છે, બદલે કે લખાણ બહાર છાપવા, અમે બહાર છાપવા માટે જઈ રહ્યાં છો ગમે તેઓ અમને આપ્યું હતું. 

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

તેથી મારા કાર્ડ કાર્ડ પદાર્થ છે, અને અમે એપ્લિકેશન માટે કે કાર્ડ આપ્યા છે. અને એપ્લિકેશન લઇ રહ્યું છે કાર્ડ અને તે CardView આપે છે. અને આ CardView જો તમે કહે છે, મને કોઇ flashcard પદાર્થ આપી હું તેના પ્રશ્નનો છાપે પડશે અને તેના જવાબ, અધિકાર? 

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

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

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

ઠીક છે, તેથી આપણે આ બનાવવા દો વસ્તુ ઇન્ટરેક્ટિવ. હમણાં તે કંટાળાજનક પ્રકારની છે. [અશ્રાવ્ય] શું છે? તમે કેટલાક પ્રિન્ટ કરી શકો છો પરંતુ તે કરી શકો છો બધા છે. 

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

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

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

AUDIENCE: [અશ્રાવ્ય] નીલ મહેતા: એક ફ્લેશ જેવા કાર્ડ, તમે જોઈ શકાય છે, જેમ કે પ્રશ્ન બાજુ અથવા જવાબ બાજુ? 

પ્રેક્ષક: બરાબર. 

નીલ મહેતા: જેમ અધિકાર, flashcard બે બાજુ? અરે વાહ, જેથી તમે કરવા માંગો છો હવે આ વિચાર છે હું ઇનપુટ્સ જેવી છે, જે ગુણધર્મો ધરાવે છે પરંતુ ઉહ, કામચલાઉ છે, જે રાજ્ય, તમે પૃષ્ઠ પર છે, જ્યાં, અધિકાર? ફરીથી, હું ફેસબુક માં જણાવ્યું હતું કે મેસેન્જર, હું જે વ્યક્તિની જેમ છે તમે ફેસબુક જોઈ રહ્યાં છો અથવા જે અધિકાર, પ્રોફાઇલ છે? 

આ માત્ર કામચલાઉ છે. તે વપરાશકર્તા બતાવવા માટે મહત્વપૂર્ણ છે શું થઈ રહ્યું છે, પરંતુ પાનું તાજું છે. તે ખરેખર તો કોઈ વાંધો નથી. તેથી તે કામચલાઉ રાજ્ય તેથી આપણે બધા તે રાજ્ય. 

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

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

ઠીક છે, અમારા CardView, તેથી ચાલો પ્રયાસ અને અમે તબક્કાવાર રહ્યાં છો કે નહીં ટ્રેક રાખવા અથવા નીચે સામનો કરે છે. પ્રતિક્રિયા અમે પ્રથમ દ્વારા આ કરવા પ્રારંભિક રાજ્ય સ્પષ્ટ. જ્યાં કાર્ડ શરૂ થાય છે? 

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

આ કિસ્સામાં, આગળ વાત સાચી છે કહે છે. આ અમે એક રાજ્ય છે કે જે કહે છે. રાજ્ય એક ઘટક સામે કહેવાય લક્ષણ છે. [અશ્રાવ્ય], મૂળભૂત રીતે, જેથી અમે કાર્ડ આગળના છો, અને અમે આ બદલી શકો છો તરીકે અમે કાર્ડ વિમાનની મુસાફરી. અર્થમાં બનાવવા? 

ઠીક છે, તેથી હમણાં, અમે છો, રેન્ડર પ્રશ્ન અને જવાબ દર્શાવે છે. હવે અમે શું કરવું જોઈએ પ્રશ્ન દર્શાવે છે અમે કાર્ડ આગળના પર છો, તેથી જો જવાબ કાર્ડ પાછળ છે. તમે બધા બનાવવા કે શા માટે છે કાર્ડ ઇન્ટરેક્ટિવ. તેથી છે અને આ અહીં પ્રયાસ કરીએ. વેલ, પ્રથમ માત્ર એક ચલ બનાવે છે. અમે this.state.front હવે પૂછી શકો છો. અમે એ જ અમે રાજ્ય ઍક્સેસ ઍક્સેસ પ્રોપ્સ, જેથી this.state.front. 

અમે સામે છો, તો પછી લખાણ this.props.card.question છે. અમે આ બોલ પર છો, તો કાર્ડ, અમે પ્રયાસ અને પડાવી લેવું જઈ રહ્યાં છો આ કાર્ડ ના પ્રશ્ન. અન્યથા, અમે આ બોલ પર છો, તો કાર્ડ, અમે શું કરવું? 

પ્રેક્ષક: જવાબ? 

નીલ મહેતા: હા, તેથી લખાણ this.props.card.answer સમકક્ષ હોય છે. તમે નોટિસ, તો અમે ઉપયોગ કરી રહ્યાં છો રાજ્ય નિર્ણય કરવા માટે હવે ઘટક કારણ કે અલગ જોવા મળશે આ તે સાથે કેવી રીતે સંચાર બંધ આધારિત છે. તેથી તેના બદલે આ બહાર છાપવા, અમે હમણાં જ લખાણ છાપે પડશે. સરસ, હવે તેથી, જો તમે જુઓ, અમે ફક્ત પ્રશ્ન જુઓ. અને હું જાતે અહીં રાજ્ય બદલો તો સામે ખોટા છે અમે 42 પાછા મળે છે. 

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

ઠીક છે, તેથી આ તમામ સારી છે અને સારી છે, પરંતુ હવે શું ખરેખર છે કે કેમ તે, અમને બદલવા માટે સક્ષમ બનાવે અમારા કાર્ડ ફ્રન્ટ અથવા પાછા છે. અમે એક ફ્લિપ ઉમેરીને આ કરી શકો છો બટન કાર્ડ માટે બટન કે તે [અશ્રાવ્ય] જો કાર્ડ વિમાનની મુસાફરી કરશે. તેથી આપણે અહીં, આ એક બટન ઉમેરવા દો બટન, અને આ બટન ફ્લિપ કહે છે કરશે. 

અને તેથી હવે અધિકાર, તે કાંઇ નથી. તે માત્ર સરસ લાગે છે. અમે શું કરી શકો છો અમે એક ક્લિક ઉમેરી શકો છો છે સંભાળનાર, onClick, this.flip બરાબર અને અમે પાછળથી ફ્લિપ વ્યાખ્યાયિત પડશે. પરંતુ મૂળભૂત રીતે, onClick એક કાર્ય છે કે વપરાશકર્તા તેને ક્લિક કરે ત્યારે કહેવાય નહીં. 

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

તમે આ સાંભળનાર રજીસ્ટર કરો. તમે એક ઘટના માટે સાંભળો. તમને કહેવામાં આવે છે, અને જ્યારે વિચાર ઘટના તમને કંઈક થાય. તમે pizza મળે છે. આ કિસ્સામાં, તમે જ્યારે છો ક્લિક, તમે કાર્ડ વિમાનની મુસાફરી. 

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

પ્રેક્ષક: બદલો this.state.front સાચું માંથી સાચું ખોટા, ખોટી છે. 

નીલ મહેતા: હા, તેથી લેવા ગમે this.front ફ્રન્ટ રાજ્ય છે is--. જો, આ બોલ રાજ્ય લો તે ખોટા બનાવે છે, સાચું છે. જો તે ખોટા છે, અધિકાર, તે સાચું છે? તેથી આપણે તે પ્રયાસ કરીએ. 

તમે રાજ્ય બદલી શકતા નથી માત્ર this.state કરવાથી. તમે આ કરી શકો છો. તમે તે ન કરી શકો છો. તમે એક કાર્ય ઉપયોગ કરે છે this.setState કહેવાય છે. 

તેથી જો તમે this.setState સામે કહી શકો છો કોલોન આ જ્યાં, ફરીથી, આ ઉદ્ગારવાચક બિંદુ વિરુદ્ધ થાય છે. હું આ તો ધારી. state.front સાચું છે, તે ખોટા ચાલુ પડશે. તેથી અમે રાજ્ય સેટ કરશો સાચું માંથી ખોટુ છે. જો તે ખોટા છે, અમે પડશે તે સાચું છે તેને ખોટા સુયોજિત કરો. 

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

તમે જુઓ જ્યાં અને તેથી અહીં છે પ્રતિક્રિયા ના જાદુ થોડુંક. અમે તેને કહ્યું હતું કે ક્યારેય જેમ તે ફરી રેન્ડર કરવા માટે. અમે તે કંઇ redraw કહ્યું નથી. તમે આ કરી રહ્યાં છો, તો પ્રતિક્રિયા વિના, તમે કરશો જ્યારે રહ્યો ગમે છે ફ્લિપ બટન ક્લિક છે તમે તે કહેવું હોય તો જાતે અધિકાર, ફરીથી રેન્ડર? 

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

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

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

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

કે અર્થમાં છે? કોઇ પ્રશ્નો? અરે વાહ? 

પ્રેક્ષક: કેવી રીતે કરે છે ના MVC હજુ તુલના અમે વિશે વાત કરી કે જેવા સાધનો પહેલાં. 

નીલ મહેતા: અરે વાહ, પ્રશ્ન તે MVC તુલના કરે છે કેવી રીતે છે? તમે સંસાધનો વિશે પૂછવામાં. વેલ, તે કેવી રીતે કાર્ય વિશે વાત કરો. 

MVC, તમે મોડેલ અપડેટ કરશો. આ કિસ્સામાં અમે એક કાર્ડ મોડેલ હોય તો. દૃશ્ય હશે ફ્લિપ કરો, અને નિયંત્રણ આ ફ્લિપ કાર્ય હશે. તેથી જુઓ આ કહેવું કરશે નિયંત્રક ફ્લિપ કરો. ફ્લિપ કહેવું કરશે બદલવા માટે મોડેલ, અધિકાર? 

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

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

કે સામગ્રી ઘણો છે તે જ સમયે બહાર જઈ રહી છે. અને તમે નથી તેથી જો એક પડછાયો ડોમ હોય, તો તમે કરશો કે જાતે, કારણ કે કરવું છે તમે સમગ્ર પાનું છુટકારો મેળવી શકો છો. તમે નથી પરવડી શકે છે, તેથી તમારી પાસે જાતે દરેક વસ્તુ બદલવા માટે, જે MVC ખરેખર હેરાન કરે છે. 

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

તેથી, ફરી, MVC તમે પસંદ કરવા માટે હોય છે ઉપયોગ અને કાર્યક્ષમતા સરળતા વચ્ચે, અને તમે બંને વિચાર પ્રતિક્રિયા. તેથી તે સારી છે. અર્થમાં બનાવવા? ઘન. 

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

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

બધા હક છે, એપ્લિકેશન છે જેથી યાદી કાર્ડ મેળવવા માટે જવાનું, અને તે નક્કી કરવા માટે ચાલી રહ્યું છે જે એક CardView બતાવવા માટે. આ CardView કરી શકો એક કાર્ડ, પરંતુ એપ્લિકેશન રેન્ડર અધિકાર, બધા કાર્ડો એક યાદી નહીં? 

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

પ્રેક્ષક: તમે એક ચલ બનાવી શકે જેથી તમે ફ્રન્ટ હતી જેમ. આ વાત સાચી છે, તમે કરી શકે વર્તમાન કાર્ડ 1 સમકક્ષ હોય છે? 

નીલ મહેતા: અરે વાહ, અમે આમ અધિકાર, રાજ્ય છે કરવા માંગો છો? તમે રાજ્ય ઉપયોગ કરશે ઘટક બહાર આકૃતિ જે કાર્ડ અમે વિચાર કરવા માંગો છો. જેમ આપણે યાદી છે તમામ કાર્ડ, અમે પડશે બહાર આકૃતિ રાજ્ય ઉપયોગ પ્રથમ કાર્ડ એક, તેથી બીજા કાર્ડ, ત્રીજા કાર્ડ, અને. 

તેથી એક એપ્લિકેશન જેથી એક એપ્લિકેશન મળશે , આ getInitialState કાર્ય છે getInitialState કાર્ય વળતર. અને અમે હમણાં જ activeIndex 0 કહેવું પડશે. તેથી હવે અમારી એપ્લિકેશન તે પોતાના રાજ્ય છે. 

અને તેથી હવે બહાર આકૃતિ, રેન્ડર કાર્ડ, ચાલો માત્ર એરે પર જાઓ અને તે ઇન્ડેક્સ વસ્તુ પડાવી લેવું. પસંદ કરો કાર્ડ સમાન this.props.cards this.state.activeIndex. તમે અહીં જોઈ તો, પ્રોપ્સ અને રાજ્ય ખરેખર મળીને કામ કરે છે. તેથી હવે અમે અમારા activeCard છે, અમે તેને activeCard કહી શકશો અને આ કામ કરે છે જો માતાનો જોવા દો. [અશ્રાવ્ય] 

ઓહ, કે જે લખાણ ભૂલ હતી. આહ. 

સરસ, હા, તેથી હવે અમે પાછા હતા અમે પહેલા હતા, જ્યાં જમણી? સિવાય જ જૂના કાર્યક્રમ હવે અમે આધાર આપી શકે છે કાર્ડ યાદી, માત્ર એક કાર્ડ. અને હવે, ફરી, અમે બદલી તો activeIndex, અમે 1 0 થી જઈ શકે છે અને હવે તે બીજા કાર્ડ, અને પછી અમે 0 ગયા. તેથી અહીં એક નવું souped અપ અમારી આવૃત્તિ. 

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

ઉદાહરણ તરીકે, અમે એરે હોય છે તેથી 1, 2, 3.map function-- અને આ એક માટે સંકેત કરે છે function-- X તીર X વખત એક્સ. આ દરેક નંબર માટે કહે છે, 1, 2, 3, તે લે છે. તે ચોરસ, અને તે પાછા આપે છે. તેથી જો તમે 1 શું વિચારો છો, 2, 3.map એક્સ એક્સ વખત જાય છે X તમે પાછા આપવામાં આપે છે આ કાર્ય છે કે કે એરે દરેક તત્વ પર ચાલે છે. 

પ્રેક્ષક: 1, 4 9? 

નીલ મહેતા: હા, 1, 4, 9 તમે 1 વખત 1 કરું છું. એટલે કે, તમે એક આપે છે. તે પ્રથમ તત્વ છે. 

2 ગુણ્યા 2 4 છે. કે બીજા તત્વ છે. 3 ગુણ્યા 3 9 છે. કે જે તૃતીય તત્વ છે. અર્થમાં બનાવવા? તેથી નકશો એક ટેકનિક તમે છે કાર્યાત્મક પ્રોગ્રામરો ઉપયોગ, નવી શૈલી કંઈક પ્રોગ્રામિંગ તમારા યાદીમાં દરેક તત્વ છે. અને તેથી આ પરિચિત લાગે છે. અમે કાર્ડ યાદી હોય છે. અમે દરેક માટે એક યાદી આઇટમ વિચાર કરવા માંગો છો એક છે, તેથી અમે હમણાં જ અહીં નકશો ઉપયોગ કરશો. અમે યાદી સમકક્ષ દો, કહેવું પડશે this.props, કાર્ડ, નકશો. 

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

કૂલ છે, તેથી હવે દો ખરેખર છે કે છાપશે. તેથી અમે એક ઉલ આપશે. કે unordered યાદી અંદર, અમે ફક્ત સંપૂર્ણ યાદી વળગી પડશે તેઓ અમને આપ્યું છે. કૂલ. 

બધા હક છે, તેથી હવે આ સૂચિ દૃશ્ય માત્ર શોધી કામ કરે છે. આ યાદી જુઓ વિશે કોઇ પ્રશ્નો? તમે કાર્ડો એક ટોળું હોય છે. તમે દરેક કાર્ડ માટે એક યાદી આઇટમ બનાવે છે. અને તમે એક unordered અંદર તેમને મૂકી યાદી, અને તમે તેને પાછા આપે છે. તેથી હવે આપણે તેથી અમે એમ્બેડ કાર્ય દો અમારા એપ્લિકેશન આ અંદર, તેથી અમે યાદી જુઓ કરી શકો છો. શું દલીલ અમે જુઓ યાદી પર પસાર કરે છે? શું ગુણધર્મો અમે તેને આપી શકું? તમે આપી, તો યાદ રાખો તે કાર્ડ એક ટોળું તે યાદી બનાવવા પડશે તે કાર્ડ માટે જુઓ. તેથી અમે શું પસાર થશે અહીં દલીલ છે? પ્રેક્ષક: કાર્ડ યાદી? નીલ મહેતા: અરે વાહ, કાર્ડ જેથી અધિકાર, this.props.cards બરાબર? અને તેથી આ માત્ર સમસ્યા કે તમે કરી શકો છો છે રેન્ડર એક ટોચ સ્તર તત્વ ચાલુ જેથી તમે એક div માં લપેટી મળી છે. તે વિચિત્ર છે. તેથી આપણે કે જો તે જોવા દો. તે કામ કરે છે? 

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

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

પ્રેક્ષક: તમે ઉપયોગ કરી શકો છો સામાન્ય જાવાસ્ક્રિપ્ટ JSX? અથવા તે કંઈક છે કે [અશ્રાવ્ય] સાથે આવ્યા હતા? 

નીલ મહેતા: આ પ્રશ્ન કરી શકે છે તમે સામાન્ય જાવાસ્ક્રિપ્ટ સાથે JSX ઉપયોગ કરો છો? જવાબ હા છે. JSX માત્ર તે એક રીતે તમારા લે છે તે અંદર એચટીએમએલ છે કે જાવાસ્ક્રિપ્ટ, અને તે જાવાસ્ક્રિપ્ટ માં કમ્પાઇલ તે અંદર એચટીએમએલ નથી. તેથી અહીં નોટિસ that-- નોટિસ. તમે DIV જેવા હોય છે, જેમ આ લાગે છે અને તમે તેને અંદર સામગ્રી છે. 

જાવાસ્ક્રિપ્ટ પર કમ્પાઇલ જેવી જ વસ્તુ પેદા કરે છે. હું શું હું કહી રહ્યો છું કે ધારી તે જેવી છે JSX, માત્ર એક વાકયરચનામાં છે જાવાસ્ક્રિપ્ટ માટે એક preprocessor ખૂબ PHP, જેમ HTML માટે preprocessor છે. JSC એક preprocessor છે જાવાસ્ક્રિપ્ટ કે દે તમને તમારા Javascript ની અંદર એચટીએમએલ મૂકો. અને તેથી તમે યોગ્ય ટ્રાન્સફોર્મર હોય તો જે [અશ્રાવ્ય] કહેવાય વસ્તુ છે, જે પરિવર્તન આવશે. જમણી preprocessor, તે તમને તે કરવા દો પડશે. 

AUDIENCE: [અશ્રાવ્ય] નીલ મહેતા: સામાન્ય રીતે તમે જરૂર નથી જાવાસ્ક્રિપ્ટ અંદર HTML મૂકી તમારી કરવાનું સિવાય પ્રતિક્રિયા. પરંતુ શું તમે તેમ છતાં તે કરી શકો છો. હા? 

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

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

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

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

અહીં વિન્ડો પોપ દો. ત્યાં એકાઉન્ટ બદલી દો. અહીં આ દોરીએ. તે એક પ્રક્રિયાગત અભિગમ છે. 

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

પ્રેક્ષક: એક કાર્યાત્મક ભાષામાં, બધું એક જ સમયે થાય છે? 

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

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

પ્રેક્ષક: અમ, શા માટે તમે છો var વિરોધ તરીકે દો ઉપયોગ કરો છો? 

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

તમે ચલો જાહેર કેવી રીતે તે છે. તમે દો કરી શકો છો. તમે var વાપરી શકો છો. ચાલો ટેકનિકલ એક ટોળું છે તમે તેમને જોવા કરી શકો છો reasons-- તે વધુ સારું છે શા માટે later-- છે. મૂળભૂત રીતે, ES6 કેટલાક સરસ છે નવી વાક્યરચના, કેટલાક નવા લક્ષણો જૂના જાવાસ્ક્રિપ્ટ ટોચ પર. 

તેથી અમે પાંચ મિનિટ જેવી છે. હું માત્ર વિશે વાત કરવા માગે છે વધુ એક વસ્તુ વાસ્તવિક ઝડપી. જો તમે કોઇ પ્રશ્નો હોય તો, ચાલો આ પછી તે વિશે વાત કરો. પરંતુ માત્ર જેથી આ નહીં કેમેરા પર પડેલા છે, હું માત્ર તમે કેવી રીતે વિશે થોડી વાત કરવા માંગો છો વાસ્તવમાં તમારા એપ્લિકેશન્સ પ્રતિક્રિયા ઉપયોગ કરે છે. 

તમે અહીં જાઓ, Facebook.GitHub.IO/react, આ પ્રતિક્રિયા માટે ઘર પાનું છે, અને તે તમને ખરેખર ઉપયોગ કેવી રીતે તમે બતાવીશું તમારા પૃષ્ઠો પ્રતિક્રિયા. મૂળભૂત રીતે, તે થોડો છે જટિલ પ્રતિક્રિયા સ્થાપિત કરવા માટે પ્રયાસ કરે છે. તમે માત્ર ખેંચો કારણ કે તે સરળ નથી અને ત્યાં એક જાવાસ્ક્રિપ્ટ છોડો. 

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

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

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

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

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

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

તેથી હું જેમ ભલામણ છો પ્રથમ પગલું લે છે. તમારા CodePen માં મૂકો. બનાવવા પર કામ કરવાનો પ્રયાસ કરો તે બીજું પગલું છે. ત્યાં ચોથા પગલું છે, અને માત્ર તમે તે મેળવી છે તે જોવા. 

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