React सीखें और अभ्यास करें

इसे लिखकर React सीखें। यह React JavaScript ट्यूटोरियल आपको JSX की पहली पंक्ति से लेकर Hooks, स्टेट मैनेजमेंट और पूरे ऐप्स तक ले जाता है, और आपके लिखे हर कंपोनेंट का लाइव प्रीव्यू आपके फ़ोन पर ही रेंडर होता है।

88 कोर्स और 324 इंटरैक्टिव लेसन, A1 से C1 स्तर तक। छोटा-सा कॉन्सेप्ट पढ़ें, असली कोड टाइप करें, Run पर टैप करें और परिणाम देखें। लैपटॉप या किसी सेटअप की ज़रूरत नहीं।

अपने फ़ोन पर कोड लिखें

• JSX के लिए बनाया गया कोड एडिटर, जिसमें लाइव प्रीव्यू आपके कंपोनेंट को ऐप के अंदर रेंडर करता है

• रनटाइम (ReactDOM और Babel) ऐप में शामिल है, इसलिए आपका कोड सर्वर पर नहीं, डिवाइस पर चलता है

• मल्टी-फ़ाइल प्रोजेक्ट: एक कंपोनेंट को दूसरे में इंपोर्ट करें, जैसे असली ऐप्स बनाए जाते हैं

• अपने रेंडर किए गए बटन पर टैप करें, फ़ॉर्म में टाइप करें और देखें कि UI कैसे प्रतिक्रिया देता है

लैब

• Hooks Lab: हर स्टेट चेंज और हर री-रेंडर को होते हुए देखें

• Props knobs: स्लाइडर से प्रॉप बदलें और कंपोनेंट को अपडेट होते देखें

• रेंडर प्रोफ़ाइलर और स्टेट टाइमलाइन (Pro): पता लगाएँ कि कौन-सा कंपोनेंट री-रेंडर हुआ और क्यों, फिर अपनी स्टेट में पीछे जाकर देखें

कदम-दर-कदम, शुरुआती से उन्नत तक

• मूल बातें: JSX, कंपोनेंट्स, प्रॉप्स, स्टेट, इवेंट्स, लिस्ट्स और कीज़, कंडीशनल रेंडरिंग

• Hooks: useState, useEffect, useRef, useReducer, कस्टम Hooks, useLayoutEffect और बहुत कुछ

• फ़ॉर्म और वैलिडेशन, React Hook Form, नियंत्रित और अनियंत्रित इनपुट्स

• स्टेट मैनेजमेंट: Context, Redux Toolkit और RTK Query, Zustand और Jotai

• React Router, डेटा फ़ेचिंग, TanStack Query, SWR और ऑप्टिमिस्टिक UI

• TypeScript, टेस्टिंग, Storybook, एक्सेसिबिलिटी और सिक्योरिटी

• परफ़ॉर्मेंस: मेमोइज़ेशन, कोड स्प्लिटिंग, Suspense, ट्रांज़िशन्स, वर्चुअलाइज़्ड लिस्ट्स

• React 19 और Server Components, SSR और हाइड्रेशन, स्ट्रीमिंग

• Next.js App Router, डेटा फ़ेचिंग और ऑथेंटिकेशन

• वेब डेवलपर्स के लिए React Native की मूल बातें

• डिप्लॉयमेंट, माइक्रो-फ़्रंटएंड्स और मॉड्यूल फ़ेडरेशन

असली प्रोजेक्ट बनाएँ

20 गाइडेड प्रोजेक्ट्स, एक बार में एक छोटे कदम के साथ: लाइक बटन, प्रोफ़ाइल कार्ड्स, टिप कैलकुलेटर, क्विज़ गेम, स्टॉपवॉच, साइन-अप फ़ॉर्म, शॉपिंग कार्ट, इमेज कैरोसेल, पेजिनेटेड लिस्ट, टूडू ऐप और बहुत कुछ। आगे बढ़ने से पहले हर कदम यह जाँचता है कि आपका कंपोनेंट सचमुच काम करता है।

तब तक अभ्यास करें जब तक यह पक्का न हो जाए

• Hooks, रेंडरिंग, फ़ॉर्म्स, Context और परफ़ॉर्मेंस पर 30 कोडिंग मिशन (आसान, मध्यम और कठिन)

• UI Match: लक्ष्य कंपोनेंट को फिर से बनाएँ और स्ट्रक्चर, स्टाइल और टेक्स्ट के लिए स्कोर पाएँ

• Bug Hunt: टूटे हुए कंपोनेंट में बग ढूँढें और ठीक करें

• Component Recall: स्पेस्ड रिपीटिशन के साथ, पहले से काम कर रहे कोड में गायब हिस्से को फिर से टाइप करें

• 50 सवालों वाली क्विज़, 50 इंटरव्यू सवाल और एक चीट शीट

• दैनिक चुनौती, स्ट्रीक्स, XP और लीडरबोर्ड

AI मेंटर (PRO)

किसी Hook या एरर पर अटक गए? स्पष्ट व्याख्या के लिए AI मेंटर से पूछें, AI से अपने कोड की समीक्षा करवाएँ और समाधान सुझाने दें, या किसी भी विषय पर कस्टम लेसन बनवाएँ।

प्रमाणपत्र (PRO)

फ़ाइनल परीक्षा पास करें और साझा किया जा सकने वाला प्रमाणपत्र पाएँ।

मुफ़्त और Pro

मुफ़्त: पहला कोर्स, एक गाइडेड प्रोजेक्ट, 2 कोडिंग मिशन, लाइव प्रीव्यू वाला कोड एडिटर, Hooks Lab, props knobs, Bug Hunt और हर दिन 3 UI Match जाँचें। मुफ़्त संस्करण में विज्ञापन दिखते हैं।

Pro: सभी 88 कोर्स, सभी प्रोजेक्ट्स और मिशन, AI मेंटर, रेंडर प्रोफ़ाइलर और स्टेट टाइमलाइन, प्रमाणपत्र परीक्षा और बिना विज्ञापनों के।

ऐप 22 भाषाओं में उपलब्ध है।

React, Meta Platforms, Inc. का ट्रेडमार्क है। Next.js, Vercel, Inc. का ट्रेडमार्क है। यह एक स्वतंत्र लर्निंग ऐप है, जिसका Meta या Vercel से कोई संबंध नहीं है और न ही उनका समर्थन प्राप्त है।

गोपनीयता नीति: https://www.coddykit.com/terms/privacy-policy