YouTube2Text
YouTube2Text → Transcripts → Understand the react flow and project structure | The Workflow of React App How the react app works

Understand the react flow and project structure | The Workflow of React App How the react app works — Transcript

by Sachin Sharma Academy · 2,195 words · 261 segments · language en · Watch on YouTube
Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

  1. 0:01तुम यहां पर हमारा रिएक्ट सेटअप इंस्टॉल
  2. 0:04हो चुका है अब हम लोग प्रोजेक्ट स्ट्रक्चर
  3. 0:07के बड़े में आ कुछ चीज देखते हैं तो देखिए
  4. 0:10प्रोजेक्ट स्ट्रक्चर की हम बात करें तो
  5. 0:14प्रोजेक्ट स्ट्रक्चर में जो इंपॉर्टेंट
  6. 0:17फाइल्स होती है वह कौन सी होती है तो जैसे
  7. 0:20देखिए अगर आप प्रोजेक्ट स्ट्रक्चर की बात
  8. 0:22करेंगे तो यहां पर सबसे पहले जो फाइल होती
  9. 0:27है वो होती index.html फाइल जब हमारा
  10. 0:30प्रोजेक्ट रन होता है तो index.html फाइल
  11. 0:33रन होती है राइट जैसे यहां पर आप देखोगे
  12. 0:37तो मेरा जो प्रोजेक्ट है वो अभी रन हो गया
  13. 0:39है और यहां पर अगर मैं index.html फाइल को
  14. 0:44ओपन करता हूं तो index.html फाइल में
  15. 0:48देखिए यह रूट एलिमेंट होता है ना तो जब भी
  16. 0:52हम लोगों ने बोला था की रिएक्ट कंपोनेंट
  17. 0:55लाइब्रेरी है तो यहां पर जब भी आप मतलब
  18. 1:00रिएक्ट को जब भी आप रिक्टमेंट डेवलपमेंट
  19. 1:02करेंगे तो आपको एक रूट एलिमेंट की जरूर
  20. 1:04पड़ेगी तो जो एप्लीकेशन का स्ट्रक्चर होगा
  21. 1:06वो कुछ इस तरीके से होगा मां लो ये आपका
  22. 1:09एक रूट एलिमेंट है और इस रूट एलिमेंट के
  23. 1:14अंदर आपको अलग-अलग कंपोनेंट इंटर करने
  24. 1:16होंगे जिसे देखिए यहां पर ये एक रूट
  25. 1:19एलिमेंट हो गया है ये जो है वो क्या हो
  26. 1:21गया यहां पर एक रूट एलिमेंट हो गया और
  27. 1:23यहां पर स्क्रिप्ट में इन्होंने एक मोडल
  28. 1:26एड किया जिसको इन्होंने बोला में डॉट j6
  29. 1:29तो आपको ये ये जो रिटायरमेंट है वो आपको
  30. 1:33यहां पर जो है एक रूट एलिमेंट बनाना
  31. 1:36पड़ेगा तो जो हेड टैग होता है ना हेड टैग
  32. 1:40में हमको कुछ नहीं करना होता अगर हम
  33. 1:42व्हाइट का उसे करेंगे तो यह सेटअप
  34. 1:44ऑटोमेटेकली हमको रिजेक्ट जीसस करके देती
  35. 1:47है व्हाइट करके देता है तो यहां पर देखिए
  36. 1:49हैदर तो आज आईटी इस रहेगा लेकिन बॉडी वाला
  37. 1:52जो क्षेत्र है
  38. 1:54बॉडी वाले क्षेत्र में यहां पर यह रूट
  39. 1:57एलिमेंट रहेगा और यहां पर यह मॉडल जो है
  40. 2:00वो कौन सा मॉडल हमने उसे किया है में डॉट
  41. 2:03j6 और सर्क के अंदर आपको एक में डॉट j6
  42. 2:08फाइल जो है मिलेगी जैसे ये है में डॉट
  43. 2:10जेएस फाइल है और में डॉट j6 फाइल जो है वो
  44. 2:15कौन से कंपोनेंट को उसे कर रही है अप डॉट
  45. 2:18के एसएस को उसे कर रही है तो यहां पर आपको
  46. 2:20अप डॉट के एसएस फाइल भी मिल जाएगी यानी की
  47. 2:24अगर मैं बोलूं की एप्लीकेशन का स्ट्रक्चर
  48. 2:26कैसा कम कर रहा है तो यहां पर एप्लीकेशन
  49. 2:29का स्ट्रक्चर कुछ इस तरीके से कम कर रहा
  50. 2:32है यहां पर आपकी ये फाइल है और इस फाइल को
  51. 2:36बोला गया है की एक इंडेक्स फाइल है
  52. 2:39इंडेक्स फाइल आपकी जो कनेक्ट है वह कनेक्ट
  53. 2:43है आपकी में रोड जैसे यानी की यह जो फाइल
  54. 2:46है आपकी वह में डॉट j6 फाइल है और में डॉट
  55. 2:52j6 फाइल जो है वह पर क्लिक कनेक्ट है
  56. 2:55app.j सेक्स से तो यहां पर एक कंपोनेंट
  57. 2:59आपका हो गया
  58. 3:00ab.j6 तो ये पूरा इस तरीके का एक
  59. 3:04स्ट्रक्चर है जो ये कम कर रहा है यहां पर
  60. 3:07तो इस तरीके से हम लोग यहां पर ये ये जो
  61. 3:13एप्लीकेशन का पूरा फ्लो है वो यहां पर कुछ
  62. 3:16इस तरीके से चल रहा है अब यहां पर समझना
  63. 3:19वाली बात ये है की ये जो फाइल का पूरा
  64. 3:23स्ट्रक्चर है वो कैसे कम करता है तो जैसे
  65. 3:25मैंने बताया की सबसे पहले
  66. 3:28index.html फाइल रन होगी और यह index.html
  67. 3:32फाइल जो है हमारी इस index.html फाइल में
  68. 3:34यहां पर आप देखोगे तो
  69. 3:38index.html फाइल में
  70. 3:40यहां पर आपने में कंपोनेंट को यानी की यह
  71. 3:43मॉडल है तो यहां पर आपने क्या किया की में
  72. 3:48को में को आपने यहां पर लेकर आए तो आप में
  73. 3:52सर्क के अंदर आप में में जाएंगे है तो यह
  74. 3:54में ए गया अब इस में के अंदर क्या हो रहा
  75. 3:57है की यहां पर देखो अप जो अप है वह यहां
  76. 4:01पर रेंडर हो रहा है और यह पूरा जो डाटा है
  77. 4:04यह पूरा जो आउटपुट है वो कहां से ए रहा है
  78. 4:07वो ए रहा है यहां से इस पूरे सिस्टम से
  79. 4:12पूरा आउटपुट जो है वो ए रहा है अप से तो
  80. 4:16अप डॉट यहां पर जो भी नाम लिखा होगा जैसे
  81. 4:19यहां कंपोनेंट का नाम है अप तो कंपोनेंट
  82. 4:23का नाम अप हो गया तो
  83. 4:25app.j6 जो फाइल है वो यहां पर आपको अप डॉट
  84. 4:29जस्स के नाम से पूरा कंपोनेंट बनाना होता
  85. 4:32है
  86. 4:33और जब आप यहां पर अप डॉट j6 के नाम से
  87. 4:37पूरा कंपोनेंट बनाएंगे तो app.j6 जो फाइल
  88. 4:40है वो यहां पर आपको जो है वो दिखाई देगी
  89. 4:45और यहां से पूरा का पूरा आउटपुट जो है वो
  90. 4:48ए रहा है तो अब हम समझते हैं की कंपोनेंट
  91. 4:52क्या होते हैं क्योंकि यहां पर जो अप डॉट
  92. 4:56जैज़ जो है या अप डॉट j6 जो है
  93. 5:00app.j6 जो है वो यहां पर एक कंपोनेंट ही
  94. 5:04है और क्योंकि रिएक्ट कंपोनेंट लाइब्रेरी
  95. 5:08है तो यहां पर समझना जरूरी हो जाता है की
  96. 5:11कंपोनेंट क्या होते हैं तो देखिए यहां पर
  97. 5:13मैंने
  98. 5:16पी पी डॉट j6 फाइल में मैं गया तो यहां पर
  99. 5:20आप देखोगे की यह एक फंक्शन है और यह
  100. 5:23फंक्शन क्या रिटर्न कर रहा है एचटीएमएल
  101. 5:26रिटर्न कर रहा है ठीक है तो ऐसे फंक्शन जो
  102. 5:29एचटीएमएल रिटर्न करते हैं वह अपने आप में
  103. 5:32कंपोनेंट कहलाने हैं ऐसे फंक्शन जो
  104. 5:34एचटीएमएल रिटर्न करते हैं वह अपने आप में
  105. 5:37कंपोनेंट कहलाने हैं तो यहां पर यह फंक्शन
  106. 5:40एक कंपोनेंट रिटर्न कर रहा है ये यहां से
  107. 5:42स्टार्ट हुआ है और यहां से और हुआ इसको हम
  108. 5:45लोग बोलते हैं फ्रेगमेंट आप अगर मल्टीपल
  109. 5:49कंपोनेंट रिटर्न कर रहे तो आपको इसके साथ
  110. 5:51उसे करना होता है तो हमारे कैसे में यहां
  111. 5:55पर देखिए एक देव है ये देव है इसके अंदर
  112. 5:57लोगो ए रहे हैं तो ये दीव है और इस दीव के
  113. 6:00अंदर ये दो लोगो ए रहे हैं तो आप देखेंगे
  114. 6:02ये दीप है इसके अंदर ये फर्स्ट लोगो है और
  115. 6:05ये जो है वो सेकंड लोगो है ठीक है उसके
  116. 6:08बाद में दूसरा h1 जो दीव है वो यहां पर
  117. 6:12आया की व्हाइट प्लस रिएक्ट तो ये व्हाइट
  118. 6:15प्लस ये इसको मैं कुछ इस तरीके से यहां
  119. 6:18इसको मैं चेंज करके लिखना हूं मी फर्स्ट
  120. 6:24ऐसे में लिख देता हूं तो इसको से कर देता
  121. 6:28हूं फाइल को तो आप देखोगे यह चेंज हो गया
  122. 6:30देखिए यहां पर ये तुरंत इसका इफेक्ट यहां
  123. 6:33देखने को मिला तो यह हा है और यहां पर यह
  124. 6:37क्लास है और इस क्लास में यहां पे जो
  125. 6:39कंपोनेंट और जो रिजल्ट है वो ये बाकी सर
  126. 6:43जो रिजल्ट है वो इससे हर है तो यहां पर एक
  127. 6:46कंपोनेंट है तो कंपोनेंट किस तरीके से
  128. 6:48बनाए जाते हैं तो कंपनी इसी तरीके से बनते
  129. 6:52हैं अब इस कंपोनेंट को उसे करने के लिए
  130. 6:54आपको यहां पर स्क्वायर करना पड़ेगा
  131. 6:57ठीक है तो यहां पर देखिए कंपोनेंट बना
  132. 7:00कंपोनेंट बने के बाद में यहां पे जो
  133. 7:05कंपोनेंट है वो कॉम्पोनेंट्स से मैंने
  134. 7:07यहां एक्सपोर्ट डिफॉल्ट अप किया एक्सपोर्ट
  135. 7:10डिफॉल्ट अप किया क्योंकि मैं यहां से इसको
  136. 7:13एक्सपोर्ट करूंगा तब मैं दूसरे किसी फाइल
  137. 7:17में जाके मैं इस कंपोनेंट को इंपोर्ट कर
  138. 7:20सकता हूं तो यहां से अप डॉट के से जो
  139. 7:24कंपोनेंट है वो यहां से रिटर्न हुआ और आप
  140. 7:27में डॉट जस्स में गए तो यहां पर देखिए हम
  141. 7:29लोगों ने इंपोर्ट किया तो हम लोगों ने
  142. 7:32इंपोर्ट कैसे किया अप फ्रॉम अप डॉट j6 के
  143. 7:37अंदर से हम लोगों ने यहां पर इसको जो है
  144. 7:40वो इंपोर्ट किया अब इंपोर्ट करने के बाद
  145. 7:43में रिएक्ट डम देखिए जी तरीके से एचटीएमएल
  146. 7:46दो होता है इस तरीके से रिएक्ट डम भी होता
  147. 7:49है और यहां पर हमको एक रूट एलिमेंट देना
  148. 7:52होगा तो यह जो आईडी हमने पास की है वह
  149. 7:55index.html के रूट एलिमेंट में यानी की यह
  150. 7:59जो कंपोनेंट है वह इस रूट एलिमेंट के अंदर
  151. 8:02जाकर एड हो जाएगा अगर आप हिरण की देखेंगे
  152. 8:05और इसको मैं स्पेक्टलीमेंट करूं इस पर
  153. 8:08एलिमेंट करने के बाद में मैं अगर यहां पे
  154. 8:10जाता हूं तो यहां पे देखिए रूट एलिमेंट के
  155. 8:13अंदर यह पूरा कंपोनेंट जो है वो एक्जिस्ट
  156. 8:15हो गया या एड हो गया तो ये आईडी मेरे को
  157. 8:19यहां पर करनी पड़ती है में डॉट जस्स के
  158. 8:21अंदर ये बम डॉट क्रिएट एलिमेंट उसके बाद
  159. 8:24में डॉक्यूमेंट डॉट गेट एलिमेंट बाय आईडी
  160. 8:26और इसके अंदर जो है वो मेरे को रेंडर
  161. 8:30फंक्शन
  162. 8:32के अंदर मेरे को यह जो कंपोनेंट है अभी हम
  163. 8:37दूसरा कोई कंपोनेंट बनाएंगे तो उसे
  164. 8:39कंपोनेंट को भी मैं यहां पर एड कर सकता
  165. 8:42हूं
  166. 8:43है तो यह हो गई कंपोनेंट की बात और किस
  167. 8:46तरीके से कंपोनेंट रेंडर होता है वो हमने
  168. 8:48देखा अब हम लोग एक छोटा सा कंपोनेंट बना
  169. 8:51के देखते हैं तो मैं क्या करता हूं सर्क
  170. 8:54के अंदर जाता हूं यह जो अप वाला कंपोनेंट
  171. 8:57है इसको पूरा मैं जिसे कॉपी कर लेट हूं
  172. 9:00कॉपी करने के बाद में मैं क्या करता हूं
  173. 9:02यहां पर सर्क के अंदर जाता हूं और सर्क के
  174. 9:06अंदर में एक फाइल क्रिएट करता हूं जिसको
  175. 9:09मैं बोलना हूं हेलो तो देखिए आप जब
  176. 9:11कंपोनेंट बनाएंगे तो जो पहले कैरेक्टर
  177. 9:13होता है वो आपका कैपिटल से होना चाहिए
  178. 9:16गाइडलाइन है रिएक्ट की उसको हम लोग फॉलो
  179. 9:19करेंगे यहां पर देखिए अभी मैंने यहां पर
  180. 9:22इसको पेस्ट कर दिया इसमें मुझे उसे स्टेट
  181. 9:26की इसमें मुझे किसी भी चीज की जरूर नहीं
  182. 9:29है तो मैं सबको हटा रहा हूं अब यहां पर जो
  183. 9:33नाम है वह आपने जो फाइल का नाम रखा है वही
  184. 9:36कंपोनेंट के फंक्शन का नाम होगा तो मुझे
  185. 9:39यहां पर लिख देना है हेलो तो मैंने यहां
  186. 9:42पर सिंपल हेलो लिखा है और इसकी मुझे जरूर
  187. 9:45नहीं है तो मैं इसको हटा देता हूं यहां पर
  188. 9:47मुझे रिटर्न करना है प्रेग्नेंट यहां पर
  189. 9:50आएगा दीव यहां पर आएगा और यह पूरा डाटा
  190. 9:53मुझे नहीं चाहिए तो मैं हटा देता हूं और
  191. 9:56यहां पर सिंपल में दीप को बैंड कर देता
  192. 9:58हूं और यहां पर मैं लिख देता हूं सिंपल
  193. 10:02हेलो ठीक है ये हेलो लिख दिया मैंने अब
  194. 10:05यहां पर क्या होगा की जैसे ही आप हेलो
  195. 10:07लिखेंगे तो ये जो
  196. 10:10हेलो लिखने के बाद ये क्या होगा की आपको
  197. 10:13यहां पर इसको एक्सपोर्ट भी करना पड़ेगा तो
  198. 10:16मैं यहां एक्सपोर्ट डिफॉल्ट और यह जो
  199. 10:18कंपोनेंट का नाम है वो क्या है यहां पर
  200. 10:20हेलो है इसको मैं उसे कर दूंगा अब ये
  201. 10:23कंपोनेंट जो है वो बैंक रेडी हो गया है
  202. 10:25आपका ये जो कंपोनेंट है वो एक हेलो
  203. 10:28कंपोनेंट को यहां पर रेंडर कर रहा है और
  204. 10:31यह सिंपल एक दीव है और इस दीव के अंदर
  205. 10:35सिंपल हेलो लिखा ए रहा है ठीक है आप
  206. 10:43डॉट j6 पर जाएंगे और यहां पर आपको इंपोर्ट
  207. 10:47करना पड़ेगा याद रखिए आप इंपोर्ट तभी कर
  208. 10:50पाएंगे जब आपने एक्सपोर्ट किया है तो यहां
  209. 10:52पर एक ही कंपोनेंट है तो मैंने एक्सपोर्ट
  210. 10:55डिफॉल्ट हेलो कर दिया है तो यह हेलो यहां
  211. 10:58से एक्सपोर्ट हुआ और में डॉट जैसे इसमें
  212. 11:01हम लोग ए गए अब यहां पर मैं लिखना हूं
  213. 11:03इंपोर्ट इंपोर्ट में मैंने जी तरीके हेलो
  214. 11:07लिखा तो देखिए यहां पर सिस्टम ने ऑटोमेटिक
  215. 11:10ले लिया इंपोर्ट हेलो फ्रॉम hello.jsex तो
  216. 11:14ये देखिए सिस्टम ने ऑटोमेटिक इसको ले लिया
  217. 11:16और यहां पर अब हम लोग जो है देखिए इसका
  218. 11:20कलर अभी हाइलाइटिंग नहीं हो रहा है तो अगर
  219. 11:24आप इस पर माउस ले जाएंगे तो सिस्टम आपको
  220. 11:26बोल रहा है की हेलो
  221. 11:31कंपोनेंट को केवल इंपोर्ट किया है आपने
  222. 11:34हेलो कंपोनेंट को यहां पर उसे नहीं किया
  223. 11:37है तो यहां पर देखिए मैं अभी हेलो
  224. 11:40कंपोनेंट को रीडर करूंगा तो मैं यहां पर
  225. 11:42लिख देता हूं है और यह हेलो को मैंने यहां
  226. 11:45रेंडर किया अब आप देखोगे आउटपुट में तो
  227. 11:48देखिए यहां पर आपको यह हेलो भी देखने को
  228. 11:50मिल गया अब अगर मैं इसको मां लो h1 के
  229. 11:53अंदर लिखना हूं तो मैं यहां जाता हूं यहां
  230. 11:55पर मैं एक h1 लगा देता हूं तो मैंने एच1
  231. 11:58के अंदर हेलो को कर दिया है ये स्ट्रिंग
  232. 12:01मैंने h1 के अंदर दे दाल दी है और इसको
  233. 12:04मैंने से किया तो आप देखोगे यह हेलो यहां
  234. 12:07पर ए गया तो इस तरीके से हम लोग रिएक्ट के
  235. 12:10अंदर कंपोनेंट बनाते हैं
  236. 12:12इन कंपोनेंट यह कंपोनेंट बनाने का एक
  237. 12:16तरीका है ठीक है कंपोनेंट क्या होते हैं
  238. 12:18तो कंपोनेंट मतलब ऐसे फंक्शन जो एचटीएमएल
  239. 12:21रिटर्न करते हैं उनको हम लोग कंपोनेंट
  240. 12:23बोलते हैं
  241. 12:25और जी तरीके से हमने यह दो कंपोनेंट बनाया
  242. 12:27ना पूरे पेज पर ऐसे जितने भी स्ट्रक्चर
  243. 12:30होगा वो इसे कंपोनेंट बनेगा उसे कंपोनेंट
  244. 12:33को हम लोग डिटेल में देखेंगे जब हम
  245. 12:35कंपोनेंट के चैप्टर पे जाएंगे
  246. 12:38फिलहाल बेसिक प्रोजेक्ट को अंडरस्टैंडिंग
  247. 12:42करने का चैप्टर था की हम लोग प्रोजेक्ट को
  248. 12:45किस तरीके से बना सकते तो हम लोगों ने
  249. 12:47देखा है यहां पर की किस तरीके से एचटीएमएल
  250. 12:50फिर एक कंपोनेंट में कंपोनेंट यह यहां पर
  251. 12:53हमारा क कर रहा है अब हम लोग देखेंगे जैसे
  252. 12:57एक्स किस तरीके से क करता है तो देखिए
  253. 12:58हमारा जैसे जो टॉपिक है वो बहुत
  254. 13:01इंपॉर्टेंट है तो हम लोग पहले जैसे
  255. 13:05कंप्लीट करेंगे j6 अगर आप देखिए j6 की अगर
  256. 13:09मैं बात करूं ना तो यहां पर अगर आप फाइल
  257. 13:11का एक्सटेंशन भी देख रहे थे यहां पर जेएस
  258. 13:14आता है तो j6 हो सकता है फिर कंडीशन हो
  259. 13:18शक्ति है यह दोनों डिटेल में देखने वाले
  260. 13:21चैप्टर हैं तो हम लोग स्टार्ट करेंगे
  261. 13:25स्टार्ट करते हैं

About this transcript

This page contains the full transcript of Understand the react flow and project structure | The Workflow of React App How the react app works by Sachin Sharma Academy, generated from the public captions YouTube serves with the video. The transcript has 2,195 words across 261 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.

YouTube to Transcript YouTube Summary YouTube Shorts transcript YouTube to SRT / VTT All transcripts API