Theory
UI ને LEGO ના ટુકડાથી બાંધવું
FestConnect ના page પર 40 event cards છે, દરેક એક જ આકારનું પણ જુદા data સાથે. BCA405-01 માં તમે એમને DOM ને હાથે બદલીને બનાવત, જે કંટાળાજનક છે અને એમાં ભૂલ થવાની શક્યતા પણ ઘણી.
React વધુ સારો રસ્તો આપે છે: UI ને components માંથી બાંધો, એટલે કે એવા ટુકડા જેને તમે એક વાર વ્યાખ્યાયિત કરીને બધે ફરી વાપરો. EventCard નામનું component એક વાર લખો, પછી એને 40 જુદા events સાથે 40 વાર render કરો. આ તમને BCA405-02 વાળા Flutter ના widgets યાદ કરાવે તો એ સંજોગ નથી: એ જ વિચાર, જુદું framework. આ unit FestConnect નું front-end React માં ફરી બાંધે છે, અને શરૂઆત એના 3 મુખ્ય વિચારોથી થાય છે: components, JSX અને props.
Theory
Components અને JSX
React એ components માંથી વપરાશકારનાં આંતરમુખ બાંધવા માટેની JavaScript ની library છે: એટલે કે UI ના સ્વયંસંપૂર્ણ, ફરી વાપરી શકાય એવા ટુકડા.
Component એટલે એવું function (નામ મોટા અક્ષરથી શરૂ થાય) જે શું બતાવવું તે પાછું આપે, અને એ JSX માં લખાય છે: એટલે કે JavaScript ની અંદર ગોઠવાયેલી HTML જેવી syntax.
function EventCard() { return <h2>Garba Night</h2>; }
JSX તમને markup સીધું તમારા code ની અંદર લખવા દે છે (પડદા પાછળ એ JavaScript માં ફેરવાય છે). અને components એકબીજામાં ગોઠવાય છે: EventList component પોતાની અંદર ઘણાં EventCard components render કરે છે. Components ની અંદર components મૂકવાની આ ગોઠવણથી જ આખું page નાના, સમજી શકાય એવા ટુકડામાંથી બંધાય છે.
Practical
Props દ્વારા data મેળવતું component
// A reusable component. It receives data via `props`.
function EventCard(props) {
return (
<div className="card">
<h2>{props.name}</h2> {/* {} embeds JS in JSX */}
<p>Seats: {props.seats}</p>
</div>
);
}
// A parent component nests EventCards, PASSING data down as props:
function EventList() {
return (
<div>
<EventCard name="Garba Night" seats={350} />
<EventCard name="Coding Contest" seats={60} />
</div>
);
}
// EventList (parent) -> EventCard (child), data flows DOWN via props.
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Props: નીચે તરફ વહેતો, ફક્ત વાંચી શકાય એવો data
Props (એટલે properties) એ પિતા component દ્વારા પુત્ર component ને data મોકલવાની રીત છે. ઉપરના listing માં EventList દરેક EventCard ને name="Garba Night" અને seats={350} મોકલે છે, અને એ એમને props.name તથા props.seats તરીકે વાંચે છે.
Props ને બે નિયમો વ્યાખ્યાયિત કરે છે:
- એક દિશાનો પ્રવાહ: data નીચે તરફ વહે છે, પિતાથી પુત્ર તરફ (props દ્વારા કદી ઉપર નહીં)
- ફક્ત વાંચી શકાય: component એ પોતાના props કદી બદલવા નહીં; એ પિતાના છે
ન બદલી શકાય એવો, એક જ દિશાનો આ પ્રવાહ React ને ધારી શકાય એવું બનાવે છે: કોઈ કિંમત ક્યાંથી આવે છે એ શોધવા તમે પિતા તરફ ઉપર જુઓ. પુત્ર ને કશું બદલવું હોય તો એ STATE છે (પછીના પાઠ), props નહીં. Props એ પુત્ર ના inputs છે, જે પિતાએ નક્કી કરેલા હોય છે.
Quiz
React માં props એટલે શું, અને એમના વિશેનો મુખ્ય નિયમ કયો છે?
- Props એ component નાં ખાનગી, બદલી શકાય એવાં variables છે
- Props પિતા component પાસેથી પુત્ર component ને data મોકલે છે અને ફક્ત વાંચી શકાય એવાં હોય છે: પુત્ર એમને બદલી ન શકે
- Props પુત્ર પાસેથી પિતા તરફ ઉપર વહે છે
- Props એ page નાં HTML tags જેવાં જ છે
Show the answer
Props પિતા component પાસેથી પુત્ર component ને data મોકલે છે અને ફક્ત વાંચી શકાય એવાં હોય છે: પુત્ર એમને બદલી ન શકે
Props પિતા component પાસેથી પુત્ર ને નીચે તરફ data મોકલે છે, અને એ ફક્ત વાંચી શકાય એવાં હોય છે: પુત્ર એમને વાંચે છે પણ કદી બદલી શકે નહીં (એ પિતાનાં છે). એક દિશાનો, ન બદલી શકાય એવો આ પ્રવાહ જ React ને ધારી શકાય એવું બનાવે છે. વિકલ્પ A props ને STATE સાથે ગૂંચવે છે (એટલે કે component નો પોતાનો બદલી શકાય એવો data, જે પછીના પાઠમાં આવે છે). વિકલ્પ C દિશા ઊલટાવે છે: props પિતાથી પુત્ર તરફ વહે છે, પુત્ર થી પિતા તરફ નહીં. વિકલ્પ D props ને markup સાથે ગૂંચવે છે: props એ component ને મોકલાતો data છે, જ્યારે JSX એ એ પાછું આપતું markup છે. યાદ રાખો: props નીચે વહે છે અને બદલી શકાતાં નથી; બદલી શકાય એવો data એટલે state.
Think first
React ના components અને Flutter ના widgets: એક જ વિચાર?
BCA405-02 માં તમે Flutter નાં UI એવાં widgets માંથી બાંધ્યાં હતાં જે વૃક્ષમાં ગોઠવાય છે અને named parameters દ્વારા ગોઠવણ મેળવે છે. એની સામે React નું model કેવું છે? વિચારીને પછી tap કરો.
Show the answer
એ બંને આશ્ચર્યજનક રીતે સમાંતર છે. React નું COMPONENT એ Flutter ના WIDGET જેવું છે: ફરી વાપરી શકાય એવો, સ્વયંસંપૂર્ણ UI નો ટુકડો. બંને વૃક્ષમાં એકબીજામાં ગોઠવાય છે (EventCards નું EventList; Cards નું Column). અને React નાં PROPS એ Flutter ના constructor કે named parameters જેવાં છે: પિતાથી પુત્ર તરફ મોકલાયેલી, ફક્ત વાંચી શકાય એવી ગોઠવણ. તત્વજ્ઞાન પણ મળતું આવે છે: નાના ટુકડા જોડીને ગૂંચવણભર્યાં UI બાંધો, અને data વૃક્ષમાં નીચે તરફ વહેવા દો. ફરક ઉપરછલ્લા છે: React JSX અને JavaScript વાપરે છે, Flutter Dart નાં widgets; React browser માં ચાલે છે, Flutter native માં compile થાય છે. પણ માનસિક ચિત્ર, એટલે કે ગોઠવી શકાય અને જોડી શકાય એવા UI ટુકડાનું વૃક્ષ, એ જ છે. એને એક વાર શીખી લો (જેમ તમે Flutter માં શીખ્યા) એટલે React નું માળખું તરત જ ઓળખીતું લાગે. Frameworks શીખવાનું ખરું ફળ આ જ સ્થાનાંતર છે.
Watch out
React ના પાયાના ફાંદા
Components નાં નામ નાના અક્ષરે: components નાં નામ મોટા અક્ષરથી શરૂ થવાં જોઈએ (EventCard, eventCard નહીં), નહીં તો React એમને HTML નાં tags ગણે છે.
Props બદલવાં: props ફક્ત વાંચી શકાય એવાં છે; એમને બદલવાં એ ભૂલ છે; બદલી શકાય એવા data માટે state વાપરો.
class નહીં, className: JSX માં className વપરાય છે (class એ JavaScript નો અનામત શબ્દ છે).
JSX માં JavaScript માટે {} ભૂલી જવું: JavaScript ની કિંમતો છગડિયા કૌંસમાં મૂકો: {props.name}.
React એ library છે, ભાષા નહીં: એ JavaScript જ છે; JSX એ syntax નું વિસ્તરણ છે, નવી ભાષા નહીં.
Theory
Components render થાય છે; હવે એમને પ્રતિભાવ આપતાં કરો
Props થી ભરાયેલાં, એકબીજામાં ગોઠવાયેલાં components માંથી તમે FestConnect નું UI બાંધી શકો છો. પણ અત્યાર સુધી components સ્થિર છે: એ data બતાવે છે અને કદી બદલાતાં નથી. ખરાં UI વપરાશકારને પ્રતિભાવ આપે છે: click, ટાઇપ, ચાલુ-બંધ. પછીનો પાઠ પ્રતિભાવ આપતાં components આવરી લે છે, એટલે કે events સંભાળવાં, યાદીઓ તથા શરતો render કરવી, અને એ પણ React ની class-component વાળી શૈલીમાં, અને પછી hooks આધુનિક function-component વાળો રસ્તો લાવે છે. Data બતાવવાથી વપરાશકારને પ્રતિભાવ આપવા સુધી.
Summary
Key takeaways
- React એ components માંથી UI બાંધવા માટેની JavaScript ની library છે: એટલે કે UI ના ફરી વાપરી શકાય એવા, સ્વયંસંપૂર્ણ ટુકડા.
- Components એ મોટા અક્ષરે શરૂ થતાં functions છે જે JSX પાછું આપે છે, એટલે કે JavaScript માં ગોઠવાયેલી HTML જેવી syntax.
- Components એકબીજામાં ગોઠવાય છે (components ની અંદર components): page નાના, જોડી શકાય એવા ટુકડામાંથી બંધાય છે.
- Props પિતા component પાસેથી પુત્ર ને data મોકલે છે: props.name, props.seats.
- Props એક દિશામાં (નીચે તરફ, પિતાથી પુત્ર) વહે છે અને ફક્ત વાંચી શકાય એવાં હોય છે: પુત્ર એમને કદી બદલતો નથી.
- Props વાળા component ના વૃક્ષનું આ model BCA405-02 વાળા Flutter ના widget ના વૃક્ષનું પ્રતિબિંબ છે.
- યાદ રાખવાની કડી: components એ ટુકડા છે, JSX એ JavaScript માંનું markup છે, અને props નીચે વહે છે તથા ફક્ત વાંચી શકાય છે.