#1 REACT JS INTRO, REACT JS COURSE 2023
Summary
TLDRThis video script covers a range of topics, including the process of setting up a React application and the technical steps involved. It delves into the installation of Node.js, creating React apps, and managing various files within the project. The presenter also explains the basics of JSX, JavaScript imports, and how to use functional components in React. There's a focus on simplifying code and project structures, with tips on removing unnecessary files, managing app states, and optimizing the development process for efficiency. The content targets developers seeking practical guidance in building modern web applications.
Takeaways
- 🎬 The video discusses the use of Node.js and React.js in building web applications.
- 📦 Node.js must be installed first, either by searching on Google or using terminal commands.
- 💻 The speaker demonstrates how to create a React app using the 'npx create-react-app' command.
- 📝 The app structure includes an HTML file and JavaScript files that help manage components and app behavior.
- 📂 The speaker explains how to clean up unnecessary files from the default React setup to streamline the project.
- 🔧 There's an emphasis on the importance of understanding the basic structure of React components and how they work.
- ⚙️ The video covers using the 'npm start' command to run the app and view it in a browser.
- 🖥️ A detailed breakdown is provided on how to import and manage components within a React app.
- 🚀 The speaker touches on optimizing the app by removing redundant code and focusing only on essential components.
- 🌐 The use of functional components in React is highlighted as an efficient way to handle state and props.
Q & A
What is the primary focus of the video script?
-The script primarily focuses on using Node.js to create and manage web applications, specifically setting up a React app and explaining various steps involved in building it.
What does the speaker mean by 'single-page application' in the script?
-A 'single-page application' refers to a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This improves user experience by making the app faster and more responsive.
What tools or technologies are mentioned for building web applications?
-The speaker mentions Node.js, npm, React, and VS Code as tools used for building and managing web applications in the script.
What is the purpose of using 'npx create-react-app'?
-The command 'npx create-react-app' is used to create a new React application with a predefined structure. It simplifies the process of setting up a React environment by automatically configuring the necessary files and dependencies.
Why does the speaker recommend deleting unnecessary files from the React app?
-The speaker recommends deleting unnecessary files like CSS and certain JavaScript files to clean up the project and remove unused or redundant code, making it easier to manage and customize the app.
What is the significance of the 'index.html' file in a React application?
-The 'index.html' file is the main HTML file that gets loaded when the React application runs. It contains a 'root' div where the entire React app is rendered, acting as the entry point for the application.
What role does the 'App.js' file play in a React project?
-The 'App.js' file is the main component of a React project. It is where the primary content and components of the application are imported and displayed, forming the core structure of the React app.
How does the speaker describe handling global dependencies for React projects?
-The speaker explains that while global dependencies can be installed, they prefer using local dependencies by running commands like 'npx create-react-app' to avoid managing global installations, which can be more complex.
What does the speaker suggest about learning React and functional components?
-The speaker suggests that functional components in React are more efficient and user-friendly, especially with recent updates, making them a better choice over class components.
What is the 'createRoot' method used for in React?
-The 'createRoot' method is used to initialize the root of a React app. It ensures that the React components are properly rendered inside the 'root' element of the HTML file.
Outlines
📺 Overview of Bigg Boss and Website Setup
The paragraph opens by discussing a variety of topics, ranging from the popular TV show Bigg Boss to website development. It highlights the requests for Bigg Boss discussions and shifts to technical aspects of website creation. The creator explains the need for specific tools like Node.js, frameworks, and setting up a single-page website. The paragraph provides instructions for dealing with overloaded pages, setting up a server, and working with YouTube integration for website promotion. The author also mentions different tasks that one must handle when setting up a website, including dealing with different data sets and processes.
🖥️ Technical Setup for a React App
This paragraph details the technical process of setting up a React app using tools like npm, npx, and React frameworks. It guides the reader through installing Node.js, creating and managing an app with npm, and using React commands. The author discusses the step-by-step approach to managing files within the application, editing files for customization, and preparing the system for app deployment. There's also emphasis on global and local installations and handling updates as well as script management.
🔧 Understanding React App Structure
The third paragraph dives deep into the React app’s structure. It explains how React files such as `index.js` and `App.js` work together to render components in the browser. The author emphasizes the importance of understanding the core components in the app, like the root and DOM elements. Additionally, it discusses how JavaScript interacts with HTML through React, focusing on dynamically rendering content and adjusting web elements in real time. The process of writing basic HTML within React is demonstrated, helping to visualize the app’s front end.
🔄 Functional Components and React Features
The final paragraph focuses on the evolution of functional components in React, highlighting how modern React development incorporates these features for more efficient coding. It briefly mentions the changes and enhancements introduced in React, particularly the use of hooks and state management. The paragraph sets up a teaser for the next video that will dive deeper into React's state and feature updates, concluding with the promise of more advanced content and functionality in future lessons.
Mindmap
Keywords
💡Bigg Boss
💡Node.js
💡React App
💡npx
💡Components
💡VS Code
💡HTML
💡JavaScript
💡Render
💡Package Manager
Highlights
Introduction to Node.js installation and usage.
Explanation of how to create a React app using the 'npx create-react-app' command.
Discussion about how to edit and delete unnecessary files in a React project.
Detailed steps on modifying the index.html file in the public folder of a React project.
Explanation of how to structure a basic React component and render it using JavaScript.
Importance of using function components in React for optimized performance.
Guide on setting up Visual Studio Code for React development and configuring necessary extensions.
Introduction to npm (Node Package Manager) and how to manage project dependencies.
Steps to handle local and global installation of npm packages for development.
Instructions on how to run a React app using 'npm start' and check the output in a browser.
Discussion on the structure of the 'App.js' file and how it serves as the main component.
Explanation of the 'createRoot' method for rendering components in the DOM.
Overview of deleting unnecessary boilerplate code and focusing on essential elements in a React app.
Tips on managing project files and components to maintain a clean project structure.
Introduction to functional components and the shift from class-based components in modern React.
Transcripts
हेलो हेलो एवरीवन महीने वेस्टइंडीज वर्सेस
फाइनली Bigg Boss करें गैस के ऊपर एक बहुत
सारी रिक्वेस्ट थी तो फाइनली
चाहिए जो कि उस
समय में
पूरा हो
[संगीत]
सेट ए क्रिएटर यूज करके रोजाना सुबह टाइम
इसकी सीधा कहते हैं
[संगीत]
ए
पोयम जानकर 34 रिया विज अय लाइक थिस
ए फ्रेमवर्क होता है जिसमें कि हमें अलग
से और कांग्रेस की रोशनी बढ़ती बेसिक
बैंकिंग सारे जेवर खबर लाइव में हमें अलग
से और पैकेजेस कॉल करने पड़ते हैं इनिशियल
सपोर्ट के लिए फॉर एग्जांपल शूटिंग करनी
है एंजॉय
दा प्रेडिफाइंड ज्यादा सब कुछ समय पर संघ
के साथ ही रिपोर्ट में हम रोल करेंगे उसके
बाद जो राइटिंग के लिए उसके लिए लघभग
इसलिए उस
पॉइंट है
ए सिंगल पेज आप इसे बना सकते हैं मतलब एक
बात वेबसाइट तुम्हारी कोई भी लांच हुई
वेबसाइट या व्यापार उसके बाद वह बसें
ओवरलोड उसके बाद पेज विल ओनली करना पड़ेगा
तो मैं एक प्रिंस दूसरी पर जाना है तो मैं
डाटा सेट करना है सिंगल लोड होता है बाकी
क्लिक करोगे स्विच ऑफ देंगे तब लेकिन
मिलूंगी जाए तो मैं दिखाओ यूट्यूब पर कैसे
हैं एक बार फोन तो कर लो यार
थे साइट एंड फीलींगस टो जीमेल उसमें भी
आस-पास इसके अलावा सबसे बड़ा रीज़न है और
यूज कर सकते हैं बॉक्सिंग की सबको ऐसा
नहीं है कि जैसे एक प्रोडक्ट कार्ड बनाना
तो बार-बार लिखो और के साथ
प्रोडक्ट्स
को
सबसे बड़ा यह
सिर्फ से
है तो रियर करने से बच जाते हैं
घृत किसी भी वेबसाइट को देखते हैं तो हमें
एक नया बाघ
है और जिसमें कि कुछ चीजें हैं जो हर पीस
में जैसे कि हम जानते हैं कि
हम बॉक्स में
कमेंट
कर सकते हैं मैं
कर सकते हैं कि
सब्सक्राइब
करें चैनल
सब्सक्राइब करें
वीडियो में सब्सक्राइब करना बिल्कुल
करते हैं और
और उसके बाद थोड़ा फैमिलियर होंगेय के
फोल्डर सकते से सुबह टाइम इसकी सीधा
वीडियो साथ करते हैं चलते कंप्यूटर में
चलो सौदा नंबर वन 0 सी पे करनी है node.js
को इंस्टॉल करना है जैसे गूगल पर सर्च
करोगे
या फिर
यहां पर यह अपने और
अगर
वह तो यह
सेट
करो को ऐड कर दिया है
है और बेस कोट आए अजीम के तुम्हारे पास हो
साफ जाहिर होती है तो वो न्यूटल में चलाओ
यह टर्मिनल चला क्लियर दबाया मैंने केंटर
किया अब इस टर्मिनल में यह मैसेज फोल्डर
के अंदर हूं इतना बटन हूं
202 अब सबसे पहले अगर मैं नोट लिख दूं
तेरे को आगे वेलकम टू लोटस
48.15 अभी तो ठीक ही चल रहा है मैंने
लेटेस्ट नहीं तो इसलिए मैं भी तुम्हें
कैसे इंस्टॉल करना या के लिए श्याम कथा
तुम्हारे सामने कोई चेंज करने की जरूरत
नहीं है
है और इससे अनचाहा कि रहने दो इंस्टॉल
इस सुझाव को मैंने Note 4 में चला हुआ तो
इससे क्या होगा क्लोज करो
फोन यह टर्मिनल ऑन कर दूं खत्म हो
का समय हो चुका है
कि एंड अगेन टर्मिनल चला तो नो टाइप करता
हूं
अजय को
अपने सुझावों से 1615 नोट का वर्जन राइट्स
ओवर में लिफ्ट 120 टूट गया जब उसके प्रेम
करूं डाइरैक्टली राइट शॉर्ट नोट चल पा रहा
है अब कंट्रोल सी दवा के मैटर नोट के पीछे
से कूट कर दिया क्लियर कर मोटा मिल
नोटिसों के बाद सबसे इंस्टॉल कैसे करेंगे
अपने लैपटॉप को अमृत टाइप करना एन पी एक्स
इसके दो तरीके हैं या तो हम रेट की शेयर
लाइक टो ब्रिंग टो ए गर्ल अपने सिस्टम में
या फिर ग्लोबल सोनकर ने तो जब जब हम रेट
क्या है बॉईल करेंगे हमें सिंपली टाइप
करना एन पीएम नहीं एन पी एक्स एन पेस्ट
मतलब सिंगल टाइम के लिए बात हो रही है
एमपी ex-cricketer
रिएक्ट ऐप यह देश के लिए कमांड एडिट इस
टाइप करना है इस वाली मशीन ठे क्रिएट योर
पेनिस के आगे हमारी ऐप का नाम जो कि स्मॉल
लेटर्स में होना चाहिए अ और सुना लिख दूं
मैं आप जैसे लाइट अभी सारा बताया ग्लोबल
सिविल लाइंस रोल करेंगे जो कि यह है
यह और बिल्कुल से अलार्म्स और कल उससे उस
समय हुआ हमें सीधा यह लिखना पड़ेगा फ्री
लैपटॉप और मै अप
सोम आफ ग्लोबल सिलाई इंस्टोल करके नहीं कर
रहा मैं ऐसे करके करूंगा अब हर बार हमें
ऐसे लिखना पड़ेगा एंपियर जब मैं इन 16
करनी होगी और तुम याद करो शिमला कोई वाटर
है तो यह करो एंटर करो एन अभियां इन चोरों
ने शॉट हो जाएगी तो
कि यह को नेटिव्स सफरिंग फ्रॉम थिस
क्रिएटिव Y2 प्रो सीबी श्रीवास्तव एंटर
करो एंटर व्याघ्र है
झाल
आप सोए देखो मेरी ऐप आ चुकी है यहां पर
बोर हो चुका है और यह बहुत ही विड्रॉल उसे
सिरहन दौड़ सो यह को मेरे पास अभी एक यह
बता कि पीएम का नोट करें पीएम का नोट के
लिए इसे इंस्टॉल कर सकते हैं अपने आप नहीं
डाल देंगे तो यह नया अपडेट कर लेता हूं यह
कमेंट करके है
हुआ है
कर दो
मां सो गई सो क्लियर टाइप करता नाटक में
लगा लें अब इस ऐप को साफ कैसे करें सबसे
पहले ब्रेड शोल्डर केंद्र मुझे शोल्डर
जाना मैं आपके शो कोड एंड टाइप करना है
बताऊंगा एक दृढ माया को माया के बाद एंटर
करना तो वीएस कोड मेरा गेट शोल्डर बोडी
शोल्डर केंद्र खुलेगा एंटर
कि यह खुल गया आसमां आपके अंदर खोला है सो
पुराना टीवी प्रोड्यूसर के पोस्ट इन थिस
मैटर में चलाओ क्लियर का ये डुप्लीकेट
सकता माया के अंदर यही हम सही है और
सिंपली एन पीएम स्टार टाइप करना है
तुम्हें इससे क्या होगा इस्तेमाल सर्विस
आठ गया का रेट का तो यह देखो ऐप हमारी चल
गई है और एक खुद बखूबी ब्राउज़र में अब
मैं नोट वाले को क्लोज करो यह हमारी आप और
यह डिफ़ाल्ट आती है इसमें चीज़ें सॉस को
अरेस्ट कर देते हैं अब यह मैं खोल के
दिखाओ कंट्रोल उसके बाद लिमिट जाऊं
2012 यह कुछ खास नहीं है सा नार्मल यह
फ्रूट फोल्डर एक डैम उसके अंदर रैप उच्चतम
यह शो एक नार्मल वेबसाइट होती है कुछ कभी
यह स्पेशल मत समझना इसे अ
कुछ स्पेशल चीज आगे वह आ जाएगी सो ए
पब्लिक फोरम में वह बहुत सारी चीजें ओपन
मत करना सोर्स वर्ल्ड रिकॉर्ड्स में बहुत
सारी चीजें लाइक बहुत सारी है मैं अब
तुम्हें कौन-कौन सी रेड्डी असर यह फाइल
छोड़ो एडिट जैसी फाइल छोड़ो और इंडेक्सड
बांड जैसी 563 फाइल को छोड़ बाकी सब डिलीट
कर दो सो एस टो एडिट एंड डिलीट
डिलीट डिलीट यह क्या यह भी तुम्हारे जानने
की जरूरत नहीं है यह जाओ डिलीट करो सिंपली
है
कि तुम्हारे पास लाइज अट यह तीन फाइल बचें
बस और हमारा घाघरा क्योंकि इन 505 अमित
डिलीट करिए वह इसमें यूज हो रही थी अभी
डोंट वरी यह फोल्ड करके तो हम समस्या क्या
है तो यह जो जो मैं बता दूं अगर 21 तो यह
फंक्शन एक्जिस्ट्स इन करता है मैं डिलीट
कर दी फाइनली हटाओ और यह इंपोर्ट जो कर
रहे थे हटाओ सीएस हटाओ
सेव इसे क्लोज टैबलेट जिसमें से यह लोगों
अब डिलीट कर चुकीं सटाओ
और बीच में क्या करता हूं मैं सवा डाल
देता हूं बस एक दीप बना रहा हूं
इसमें हेलो लिखा है
हेलो हेलो
थे वर्ड नहीं गाइस सिर्फ हुआ था मध्ए रखो
आगे हेलो भाई एप्स अलग हमारे नॉर्मली
लोकल लो सविताबेन पर है
कि अब सूर्य काम कैसे करता यह जानते हैं
इंटरनेट जैस्मा जाओ इन वह क्या वह सब
खैरियत इंपोर्ट के ओवर रेट में से रिएक्ट
डोंट क्लाइंट यह नोट रिक्वायर्ड ओम बशीद
सैंपल यह समझने इंपोर्ट करना बिल्कुल चीज
है मैंने जैसा सेटिंग बताइए रेट में हर
चीज कंपलेंड है तो यह जो ऐप वाली फाइल
इसमें कंप्लीट बनाए और यह जो डांस दिखाएं
इस यौवन नहीं है विवाह बताऊंगा कि आप पर
यह जो पॉइंट है यह पता लग गया
कॉन्फ्रेंसिंग में समझा दिया क्या होता है
सो यह जो इंडेक्स वाली फाइल है यह क्या कर
रही है यह जो भी आ रहा है यहां पर कंपनी
ने अभी ऐप है अगर 10 और बढ़ना है वो ऐप के
अंदर कुछ और बढ़ते हैं या जो भी वैसे भी
कौन फ्रेंड है वह चेंज कर रही है हमारे
पब्लिक फोल्ड करेंगे फाइल है नेक्स्ट
एचटीएमएल फाइल हमारी यह है द मैन फाइल जो
वेबसाइट लोड करें यह फाइल है और इसमें
क्या पढ़ा हुआ है अगर यह मैं खाली सी करूं
कमेंट हटाकर और मजलूमों भूख और खाली कर
दें फाइल
को है
और सुनाओ क्या-क्या पड़ा हुआ सिंपली एक है
टैग जिसका टाइटल रिएक्ट आप इसको करके सेंड
कर देते हैं फर्स्ट स्टेप
ठीक है अंदर बॉडी इसमें 9 स्क्रिप्ट आईएस
नो स्क्रिप्ट यह कर दिया था इस क्रिकेटर
ने फिर मैसेज कर देना यू नीड टो इनेबल
जावास्क्रिप्ट टो रन थिस आप ठीक है इसके
बाद सिर्फ एक डिवाइस में लैटर अली एक
बिस्कीट रूट बस
अब जावास्क्रिप्ट है तुम्हें शांति होगी
प्रोडक्ट लांच करो कर दो
कि डॉक्यूमेंट गेट एलिमेंट वाइड
सॉन्ग स्टेटमेंट विडियो के रूट किया 100
गिफ्ट मिल गया वह लड्डू अब यह रेट डोंगरी
इंपोर्ट किया था उस पर इस क्रीम मेथड
क्रिएट रूट
इसमें प्लस करना होता है
ए वाइब्रेंट जिसको जो हमारा रूट एलिमेंट
होगा और हम सेलेक्ट कर चुके हुआ सुझाव या
चेंज करेंगे वह उसके अंदर ही चेंज होगा
उस डेट के नीचे सीआईडी रूट है अभी समझाएं
कैसे हो
मैं सुबह से यही करता है अब यह रूट्रम
भाग्य बना दिया वेरिएबल और इसके पास है
मैं थोड़ा जाएगा रूट डाइनर इसके अंदर और
यह हटा भी देता हूं
तो भी एक सिलाई कोई दिक्कत नहीं होगी
अच्छा ठीक है
कल सुबह डिस्ट्रिक्ट मोड होता है कुछ अभी
जान जोड़ने क्या
कि इसके अंदर बेसिकली हमारा यह पॉइंट
रेंडर कर दिया उन्हें ऐप कंप्लेंट
हां बस इधर समझ लो अगर यह इतना भी समय
नहीं तो इसे जाने दो बस यह डिफ़ाल्ट इस
रक्षा बॉयफ्रेंड कोड इसे रहेगा और सच
बताऊं तो वो रपट में कहा विमान जो नहीं है
धीरे-धीरे कंफर्टेबल जाओगे आधे स्मार्ट
हैं यह हमारा पहला पॉइंट है जो उसमें जार
अंदर होने के लिए ना करना चाहें तो यहीं
पर बागी पॉइंट बैठ कर लेना है बट जैसा अलग
चीज ले रखे हैं क्योंकि हमें चाहिए कि
हमारी apk फाइल में भरते भरते भरते का यह
माप मैन को बांटा है अब जो भी में एडिट
करना होगा इसी में ऐड करेंगे फॉर एग्जांपल
अगर नैक पॉइंट बनाता हूं अभी
को लक्षय एक और आसमान कॉपी के ऊपर इसका
नाम हो गया कि बताए हैं
से कुछ भिन्न रखते तुम्हें कंपन एंड बस
शर्त है कि वह फर्स्ट लेटर कैपिटल मानसी
माइग्रेंट और यह मैंने रख दिया कौन पॉइंट
ऐसे लिखकर सेव कर लूंगा तो क्या होगा कुछ
नहीं होगा क्यों कि वह मैंने डॉक्टर ऐड कर
दिया बस अब अपनी मैप में ऐड नहीं किया 100
ग्राम है लोगों के बीच में यहां पर यह
हमारा घाघरा कर सकता हूं ऐसे लिखूंगा तो
अक्षय हेलो माय कंप्लीट गाइस ऐसे सौदा
मुझे कम पर एंड यहां पर यूज करना तो मुझे
ऐसे लिखना पड़ेगा
साल प्रोजेक्ट है जैसे अच्छे दिखते हैं
सेव का
यहां वह हेलो उसके बीच में यह जो बटन पर
राज योग यह वाला डिब्बा यह होगा उसके बाद
गाइस जैसे साइड अमित वह बताएं कि देवता
ब्लॉक एलिमेंट तो उसे पूरी रकम पूर्ण पूरा
है वह लाइन रैली इसलिए वह लाइन मार रहे हो
मैं इतना समझ में आ गया और के बेसिक्स
क्लियर हो जाएंगे तो यही रूट है यह समस्या
है तो आयोडाइड ओके अब समझते हैं जिससे यह
जो तुम्हें शिरडी में जैसा दिख रहा है ऐसी
मिलता है न भी बताया है क्या है फिर है
प्लस योर मैन कॉम्पोनेंट यह बनाया है यह
फंक्शन का यूज करके बनाया है हम फंक्शन
कंबोडिया सेटिंग क्लोज 20 कंपनियां सकते
हैं बट इस प्ले लिस्ट में प्रोड्यूस प्ले
लिस्ट मैं इंग्लिश मीडियम क्लास है उसको
पॉइंट को कि वह फंक्शन कंपोनेंट के
कंपैरेटिव थोड़ा हार्ड है प्लस फंक्शन
कंपोनेंट पहले बिगाड़ देते बढ़ल जब से
इसमें कुछ एडिशन फीचर जाएं रिएक्ट तक जब
से को फंक्शन कम है एकदम मस्त हुए हैं तो
यह यूज करने चाहिए सो नेक्स्ट वीडियो में
देखेंगे जैसे इसका सेंटेंस यह बेसिकली ना
जाव अपर्णा स्टेटमेंट यह है जी एडिसन जाए
उसके टॉर्च फेस्टिवल का मिक्सचर ठीक है तो
वह देखेंगे अ
कर दो
में पूरी जानकारी दो
कर दो
का
व्यंजन है
[संगीत]
Посмотреть больше похожих видео
React tutorial for beginners ⚛️
Creating our first react app using create-react-app | Complete React Course in Hindi #2
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
Cara Install React Native + Full Setup [2024]
Tutorial Solid Js dan Laravel #2 : Installasi dan Konfigurasi Solid Router
JSX - Reactを学ぶなら知っておきたい、HTMLの表現手法
5.0 / 5 (0 votes)