React

1. 1

   React क्या है?

   स्वागत है। अगर आपने JavaScript की एक पंक्ति भी कभी नहीं लिखी और आपको यह भी पक्का नहीं कि "फ़्रेमवर्क" क्या होता है, तो आप सही जगह पर हैं। इस पाठ के...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 मिनट
2. 2

   JSX और Components

   पिछले पाठ में आपने एक कंपोनेंट को कुछ ऐसा लौटाते देखा जो HTML जैसा लगता था: return <h1>Hello, React</h1>;। यह देखकर ज़रा अजीब लगना चाहिए था।...

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 मिनट
3. 3

   Props

   अब तक आपने जो भी कंपोनेंट लिखा है, उसमें सब कुछ जमाकर लिखा हुआ था। Greeting हमेशा उसी एक नाम को नमस्ते कहता है, Card हमेशा वही टेक्स्ट दिखाता है।...

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 मिनट
4. 4

   useState के साथ State

   आपके द्वारा अब तक लिखे गए हर कंपोनेंट समान props के लिए समान output render करते हैं, हर बार। यह एक heading या एक card के लिए ठीक है, लेकिन यह उसी पल...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 मिनट
5. 5

   इवेंट्स को हैंडल करना

   जो कंपोनेंट सिर्फ़ प्रॉप्स और स्टेट के आधार पर रेंडर होता रहता है, वह अपने आप में इंटरैक्टिव नहीं होता, किसी को यह भाँपना पड़ता है कि उपयोगकर्ता ने...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 मिनट
6. 6

   सशर्त रेंडरिंग और सूचियाँ

   आपने आज तक जितनी स्क्रीन देखी हैं, उनमें से लगभग हर एक किसी शर्त के हिसाब से एक चीज़ की जगह दूसरी दिखाती है: "आपके नए संदेश हैं" वाली पट्टी जो तभी...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 मिनट
7. 7

   फॉर्म और नियंत्रित इनपुट

   सादे HTML <input> में एक अक्षर लिखिए और ब्राउज़र उसे ख़ुद संभाल लेता है: DOM एलिमेंट चुपचाप याद रखता है कि आपने क्या लिखा, और किसी और को बताने की...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 मिनट
8. 8

   useEffect के साथ साइड इफ़ेक्ट

   अब तक कंपोनेंट का काम इतना ही था: अपने मौजूदा प्रॉप्स और स्टेट को देखकर एक सवाल का जवाब देना, कि इस वक़्त स्क्रीन पर क्या होना चाहिए। वही इनपुट देने...

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 मिनट
9. 9

   डेटा प्राप्त करना

   असल दुनिया का कोई भी एप्लिकेशन सिर्फ़ वही डेटा दिखाकर काम नहीं चला सकता जो उपयोगकर्ता की स्क्रीन पर पहले से मौजूद है। कभी न कभी किसी कंपोनेंट को...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 मिनट
10. 10

    Component कंपोजिशन

    आपने बॉर्डर और छाया वाला एक कार्ड बनाया है, और वह अच्छा दिखता है। अब वही कार्ड आपको किसी फ़ोटो के चारों तरफ़ चाहिए, किसी लॉगिन फ़ॉर्म के चारों तरफ़...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 मिनट
11. 11

    Context और useContext

    आपके ऐप में डार्क मोड का टॉगल है। टॉगल सेटिंग्स पैनल में रहता है, पर जिसे उसकी ख़बर चाहिए वह एक बटन है जो किसी पेज के भीतर कार्ड, कार्ड के भीतर टेबल,...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 मिनट
12. 12

    useReducer

    चेकआउट फ़ॉर्म शुरुआत में सरल होता है। एक मान चाहिए, तो आप useState जोड़ देते हैं। फिर त्रुटि संदेश की ज़रूरत पड़ती है, तो एक और useState। फिर लोडिंग...

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 मिनट
13. 13

    Custom Hooks

    आपने एक ड्रॉअर लिखा जो खुलता और बंद होता है। तीन useState पंक्तियाँ और एक हैंडलर जो एक बूलियन को उलट देता है। फिर वही चीज़ एक ड्रॉपडाउन के लिए, फिर...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 मिनट
14. 14

    Performance और Memoization

    आपके ऐप में दो हज़ार पंक्तियों वाली एक टेबल है और उसके ऊपर एक खोज बॉक्स। हर कीस्ट्रोक भारी लगता है: आप टाइप करते हैं, और आधे सेकंड बाद अक्षर दिखाई...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 मिनट
15. 15

    React Router के साथ रूटिंग

    अब तक आपने जो कुछ भी बनाया है वह एक ही पते पर रहता है। एक अकेला पेज है, और उपयोगकर्ता को जो कुछ भी दिखाना है, आप उसे स्टेट से दिखाते या छिपाते हैं।...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 मिनट
16. 16

    React Components का परीक्षण

    आप किसी साझा कंपोनेंट में एक पंक्ति बदलते हैं और फिर बीस मिनट पूरे एप्लिकेशन में क्लिक करते घूमते हैं कि कहीं और कुछ टूटा तो नहीं। अगले हफ़्ते फिर...

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 मिनट
17. 17

    कैपस्टोन: टू-डू ऐप

    अब तक के हर पाठ ने आपको एक बार में एक ही विचार थमाया और उसके इर्द-गिर्द एक छोटा सा उदाहरण रख दिया। असली एप्लिकेशन ऐसे नहीं होते। असली एप्लिकेशन में...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 मिनट

हर पाठ, क्विज़ और ट्यूटर का जवाब आपकी भाषा में आता है। AI ट्यूटर उसी भाषा में जवाब देता है जिसमें आप पूछते हैं।

See how hiring teams interview engineers on React, in production-like environments.