Theory
LEGO Bricks से एक UI Build करना
FestConnect के page में 40 event cards हैं, हर एक same shape अलग data के साथ। BCA405-01 में आप इन्हें DOM manipulation से हाथ से बनाते, tedious और error-prone।
React एक बेहतर तरीका offer करता है: components से UI build कीजिए, reusable bricks जो आप एक बार define करते हैं और हर जगह reuse करते हैं। एक EventCard component ONCE लिखिए, फिर इसे 40 अलग events के साथ 40 बार render कीजिए। अगर यह आपको BCA405-02 से Flutter के widgets की याद दिलाता है, यह कोई accident नहीं है: same idea, अलग framework। यह unit FestConnect का front-end React में rebuild करता है, इसके 3 core ideas से शुरू करते हुए: components, JSX, और props।
Theory
Components और JSX
React components से user interfaces build करने वाली एक JavaScript LIBRARY है: self-contained, reusable pieces of UI।
एक component एक function है (Capitalised name) जो RETURN करता है क्या दिखाना है, JSX में लिखा गया: JavaScript के अंदर embedded एक HTML-like syntax।
function EventCard() { return <h2>Garba Night</h2>; }
JSX आपको markup को अपने code के बिल्कुल अंदर लिखने देता है (यह behind the scenes JavaScript में transpiled होता है)। और components NEST होते हैं: एक EventList component इसके अंदर कई EventCard components render करता है। यह composition, components के अंदर components, वह तरीका है जिससे एक पूरा page छोटी, understandable bricks से बनता है।
Practical
Props के through 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 Nीचे Flow करता, Read-Only
Props (properties का short) वह तरीका है जिससे एक PARENT एक CHILD component को data pass करता है। Listing में, EventList हर EventCard को name="Garba Night" और seats={350} pass करता है, जो इन्हें props.name और props.seats की तरह पढ़ता है।
दो rules props को define करते हैं:
- one-way flow: data नीचे flow करता है, parent से child (props के through कभी ऊपर नहीं)
- read-only: एक component अपनी own props को कभी modify नहीं करता; ये parent की हैं
यह immutable, one-directional flow React को predictable बनाता है: पता लगाने के लिए एक value कहाँ से आती है, आप parent की तरफ़ UP देखते हैं। अगर एक child को कुछ CHANGE करना है, वह STATE है (अगले lessons), props नहीं। Props child के inputs हैं, parent से fixed।
Quiz
React में props क्या हैं, और इनके बारे में एक key rule क्या है?
- Props एक component की private changeable variables हैं
- Props एक parent से एक child component को data pass करते हैं और READ-ONLY हैं: एक child को इन्हें modify नहीं करना चाहिए
- Props child से parent तक ऊपर flow करते हैं
- Props page के HTML tags जैसी ही चीज़ हैं
Show the answer
Props एक parent से एक child component को data pass करते हैं और READ-ONLY हैं: एक child को इन्हें modify नहीं करना चाहिए
Props एक parent component से एक child तक DOWN data pass करते हैं, और ये READ-ONLY हैं: child इन्हें पढ़ता है पर कभी modify नहीं करता (ये parent की हैं)। यह one-way, immutable flow है जो React को predictable बनाता है। Option A props को STATE से confuse करता है (एक component की अपनी changeable data, बाद के lessons में आती है)। Option C direction reverse करता है: props parent-to-child flow करते हैं, child-to-parent नहीं। Option D props को markup से confuse करता है: props वह data है जो एक component को pass होती है, JSX वह markup है जो यह return करता है। याद रखिए: props नीचे flow करते हैं और immutable हैं; changeable data state है।
Think first
React Components, Flutter Widgets: Same Idea?
BCA405-02 में आपने Flutter UIs widgets से बनाए जो एक tree में nest होते हैं और named parameters के through configuration लेते हैं। React का model इससे कैसे compare होता है? फिर tap कीजिए।
Show the answer
ये strikingly parallel हैं। एक React COMPONENT एक Flutter WIDGET जैसा है: एक reusable, self-contained UI piece। दोनों एक TREE में NEST होते हैं (EventCards की एक EventList; Cards का एक Column)। और React PROPS Flutter के constructor/named parameters जैसे हैं: parent से child को pass होने वाला read-only configuration। यहाँ तक कि philosophy भी match करती है: छोटे pieces compose करके complex UIs build करना, data tree के नीचे flow करते हुए। फ़र्क़ surface-level हैं: React JSX और JavaScript इस्तेमाल करता है, Flutter Dart widgets इस्तेमाल करता है; React browser में चलता है, Flutter native में compile होता है। पर MENTAL MODEL, configurable, composable UI pieces का एक tree, same है। इसे एक बार सीखिए (जैसे आपने Flutter में सीखा) और React की structure तुरंत familiar लगती है। वह transfer frameworks सीखने का real payoff है।
Watch out
React Basics Traps
Lowercase Component Names: components Capitalised होने चाहिए (EventCard, eventCard नहीं), नहीं तो React इन्हें HTML tags की तरह treat करता है।
Props Modify करना: props read-only हैं; इन्हें बदलना एक bug है; changeable data के लिए state इस्तेमाल कीजिए।
className, class नहीं: JSX className इस्तेमाल करता है (class एक JS reserved word है)।
JSX में JS के लिए {} भूलना: JavaScript values को curly braces से embed कीजिए: {props.name}।
React एक Library है, Language नहीं: यह JavaScript है; JSX एक syntax extension है, नई language नहीं।
Theory
Components Render होते हैं; अब इन्हें React कराइए
आप props से fed nested components से FestConnect का UI build कर सकते हैं। पर अभी तक components STATIC हैं: ये data display करते हैं और कभी नहीं बदलते। Real UIs user को REACT करते हैं: clicking, typing, toggling। अगला lesson respond करने वाले components cover करता है, events handle करना, lists और conditionals render करना, React की class-component style इस्तेमाल करते हुए, hooks modern function-component approach लाने से पहले। Data display करने से लेकर users को react करने तक।
Summary
Key takeaways
- React components से UIs build करने वाली एक JavaScript library है: reusable, self-contained UI pieces।
- Components functions हैं (Capitalised) जो JSX return करते हैं, JavaScript के अंदर embedded एक HTML-like syntax।
- Components nest होते हैं (components के अंदर components): एक page छोटी composable bricks से बनता है।
- Props एक parent से एक child component को data pass करते हैं: props.name, props.seats।
- Props one-way flow करते हैं (नीचे, parent से child) और READ-ONLY हैं: एक child इन्हें कभी modify नहीं करता।
- Component-tree-with-props model BCA405-02 के Flutter widget tree को mirror करता है।
- Memory hook: components bricks हैं, JSX markup-in-JS है, props नीचे flow करते हैं और read-only हैं।