Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106

Summary

The video script is a detailed tutorial on setting up a React application using the latest version of React and Vite. It covers the initial setup, folder structure, and the use of components and props in React. The instructor guides viewers through creating a basic React app, explains the difference between libraries and frameworks, and demonstrates how to pass data through props to child components. The script also includes creating a navbar and footer, styling with CSS, and the use of JavaScript within JSX.

Takeaways

• 🚀 The video starts a series on officially starting with React, explaining components and props, and how JSX syntax is written in React.
• 🛠 The presenter discusses the use of 'create-react-app' for setting up the project structure and mentions its transition from React Pack to Vite.
• 💡 It's emphasized that React is a library, not a framework, focusing on specific functionalities rather than providing all the requirements to create an app.
• 🔍 The video demonstrates step-by-step instructions on creating a basic React app using Vite, including initiating the project and setting up the development server.
• 🎨 The importance of proper syntax in JSX is highlighted, including the need for closing tags and precise writing to avoid errors.
• 📝 The script covers the use of 'class' in React, explaining the switch to 'className' to avoid conflicts with JavaScript's class keyword.
• 🔄 The presenter introduces styling in React, including global CSS application and how to reset styles for a cleaner UI.
• 🏗️ The process of building a navigation bar and footer for the React app is shown, incorporating CSS for layout and aesthetics.
• 📑 The concept of components in React is explored, with the creation of a 'Card' component and the demonstration of props to pass data.
• 🔧 Inline styling with JavaScript objects is introduced, allowing dynamic styles to be applied within JSX elements.
• ♻️ The video concludes with the idea of reusability in React components, showcasing how to replicate elements and adjust properties across the app.

Q & A

What is the main topic of the video?

The main topic of the video is to start creating an official React application, discussing components, props, and how JSX syntax is written in React.

What is the purpose of the 'index.js' file in a React application?

The 'index.js' file serves as the entry point of a React application, where the app starts rendering and other main components are included.

What does the term 'props' refer to in React?

In React, 'props' refers to properties that are passed from a parent component to a child component to enable data sharing and dynamic content rendering.

What is JSX in React?

JSX is a syntax extension for JavaScript that allows developers to write HTML-like structures that get converted into React components.

What is the difference between a library and a framework in the context of React?

React is a library, not a framework. A library is focused on a specific functionality, whereas a framework provides a complete set of features required to create an application.

How does the video demonstrate creating a new React app using 'create-react-app'?

The video demonstrates creating a new React app by using the 'create-react-app' command, selecting React as the option, and setting up the project with a chosen name and JavaScript as the language.

What are the basic components of a React application discussed in the video?

The video discusses basic components such as the Navbar, Footer, and Card components, and how to include them in the app using JSX and CSS for styling.

How does the video explain the use of 'npm start' command in a React project?

The 'npm start' command is used to start the development server in a React project, which allows for the app to be served locally for testing and development.

What is the significance of 'import' statements in React components?

Import statements in React components are used to include other components, modules, or CSS files that are necessary for the functionality and styling of the component.

How does the video describe the process of passing data to components in React?

The video describes passing data to components in React through 'props', which are received as an object by the component and can be accessed to display dynamic content.

What is the role of CSS in styling React components as shown in the video?

CSS is used to style React components by applying classes or directly through inline styles, controlling layout, colors, margins, and other visual aspects of the components.

Outlines

00:00

😀 Introduction to React Official Start

The video begins with an introduction to starting an official React project, discussing components, props, and the syntax of JSX. The presenter encourages viewers to like and comment on the video. A brief mention of a previous video about creating a React app using Create React App is made, and the discussion shifts to the tools and technologies used in modern React development, such as the React app folder structure and the use of the latest version of React with JavaScript.

05:02

🛠️ Setting Up a Basic React App with Vite

The script outlines the process of setting up a basic React application using Vite, a modern tool that enhances the speed of creating React apps. It details the steps to initiate the app, including selecting the React option, choosing JavaScript, and utilizing the folder structure provided. The presenter also explains the need for installing npm packages and starting the development server, emphasizing the speed of Vite compared to Create React App.

10:04

🎨 Customizing Components with CSS in React

This paragraph delves into customizing React components with CSS. It describes how to apply CSS to a navbar and a footer, including the use of Flexbox for layout and various CSS properties to style the elements. The presenter also covers the use of global CSS and how it affects the styling of components, as well as the process of creating a basic app with navigation and components.

15:08

📝 Building a Card Component with Props in React

The focus shifts to building a card component in React and using props to pass data to it. The presenter explains how to create a card with a title and description, style it with CSS, and make it reusable by passing different props. The process of defining the card component, accepting props, and using them to display content is detailed, showcasing the power of components and props in React.

20:09

🔄 Replicating Components and Using Inline CSS

The script discusses the concept of replicating components in React and using inline styles for dynamic styling. It covers how to repeat the card component multiple times and pass different data to each instance. The presenter also introduces inline styles in React, allowing for JavaScript to be used within the style object for dynamic changes.

25:11

🌐 Wrapping Up and Inviting Feedback

In the concluding part of the script, the presenter wraps up the video by summarizing the content covered, including creating a new React app with Vite, building reusable components, and using props and CSS for styling. The audience is encouraged to leave comments and feedback, and the presenter expresses commitment to completing the playlist as promised, inviting viewers to bookmark it for future access.

Keywords

💡React

React is an open-source JavaScript library used for building user interfaces, particularly for single-page applications. In the video, React is the central theme as the script discusses starting a project with React, exploring its components, and syntax. The video aims to guide viewers on how to create a basic React application using modern tools like Vite.

💡Components

In React, a component is a piece of code that is used to create a part of the user interface. Components can be class-based or function-based and are reusable. The script mentions components as the building blocks of a React application, emphasizing the creation of a 'Card' component as an example of how to structure and display content within the app.

💡Props

Props, short for properties, are a way to pass data from one component to another in React. They are read-only and can't be modified by the child component receiving them. The script discusses props as a method to pass titles and descriptions to the 'Card' component, demonstrating how data can be shared across different parts of a React application.

💡Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is mentioned in the script as the tool used to start the React project, highlighting its efficiency and the ease with which it can set up a new project with React and TypeScript.

💡JavaScript

JavaScript is a programming language commonly used to create dynamic content on the web. The script refers to JavaScript as the language in which the React application is written, and it discusses using modern JavaScript features and syntax within the React components.

💡CSS

CSS, or Cascading Style Sheets, is used for describing the presentation of a document written in HTML or XML. In the video script, CSS is used to style the React components, such as the 'Card' component, by defining properties like width, height, and background color.

💡Function Components

Function components in React are a simpler way to write components using JavaScript functions. The script refers to function components as the method to define the 'Card' component, emphasizing their simplicity and the ease of returning elements from these components.

💡Class Components

Class components are another way of defining React components, using a class that extends React.Component. Although not the primary focus of the script, class components are mentioned in contrast to function components, showcasing the different approaches to building components in React.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. The script mentions HTML in the context of JSX, which is a syntax extension used in React to describe the structure of the UI. JSX allows developers to write HTML-like elements in their JavaScript code.

💡npm

npm stands for Node Package Manager and is a tool for managing JavaScript packages. In the video, npm is implied to be used for installing dependencies required for the React project, such as React itself and other libraries or tools like Vite.

💡CSS Flexbox

CSS Flexbox is a layout mode in CSS3 that allows for the arrangement of elements in a flexible and efficient way. The script discusses using Flexbox properties like 'display: flex' to align and distribute space among items in a container, such as styling the navigation bar in the React application.

Highlights

Introduction to starting an official React app, exploring components and props.

Explanation of React's syntax and how it differs from traditional HTML.

The use of modern tools like Vite for creating a React app for better performance.

Creating a basic React app step by step using Vite.

Understanding folder structure provided by React apps and its importance.

Difference between React as a library and other frameworks as a complete solution.

How to return elements from functional components in React.

The significance of using 'className' instead of 'class' in JSX to avoid conflicts with JavaScript's reserved keyword.

Building a navigation bar component with React and styling it with CSS.

Creating a footer component and integrating it into the app using React.

Using props to pass data from one component to another in React.

Explanation of inline styling in React and how to apply it within JSX.

Creating a card component and demonstrating how to use it multiple times with different data.

How to dynamically adjust the style of components based on props in React.

Incorporate images into card components and handle responsive design.

Using JavaScript within styled components to create dynamic styles.

Encouragement for viewers to engage with the video by liking, commenting, and subscribing.

Final thoughts on using React for building components and passing data through props.

Transcripts

गाइस आज के इस वीडियो से हम लोग ऑफिशियल

रिएक्ट को स्टार्ट करने वाले हैं देखेंगे

कंपोनेंट्स क्या होते हैं प्रॉप्स क्या

होते हैं और किस तरह से जेएस एक का

सिंटेक्स लिखा जाता है रिएक्ट में आप लोग

बस इस वीडियो को लाइक करके नीचे कमेंट

सेक्शन में रिएक्ट ऑपी जरूर लिख देना चलते

हैं कंप्यूटर स्क्रीन में लेट्स रोल द

इंट्रो सो गाइज पिछले वीडियो में हम लोगों

ने अपनी पहली रिएक्ट ऐब बनाई थी क्रिएट

रिएक्ट पब का इस्तेमाल करके हम लोगों ने

देखा था रिएक्ट क्यों इस्तेमाल करते हैं

और आपने सभी ने उसको बहुत ज्यादा पसंद

किया आज हम अपने इस रिएक्ट डिस्कशन को आगे

बढ़ाएंगे और मैं आप लोगों को मिलवा चाहता

हूं वीट से अब हमने क्रिएट रिएक्ट पप की

बात की थी हमने इसका इस्तेमाल किया था

लेकिन क्रिएट रिएक्ट पप को पहले इस्तेमाल

किया जाता था अब ये क्रिएट रिएक्ट टैप हो

गया वीट हो गया ये सब चीजें क्या है ये

आपको एक फोल्डर स्ट्रक्चर प्रदान करती है

रिएक्ट ैप का आप ये फोल्डर स्ट्रक्चर चाहो

तो फाइल बाय फाइल भी बना सकते हो लेकिन

इसकी जरूरत नहीं है अभी मॉडर्न टूल वीट है

तो हम वीट का ही प्रयोग करेंगे अपनी

रिएक्ट एप्स इसको बनाने के लिए क्रिएट

रिएक्ट ऐप को अगर आप लोग देखोगे तो इसकी

एक वेबसाइट है और इसके गिट पे आप जाओगे तो

आप देखोगे अभी भी इस पे काम वगैरह चल रहा

है लोग डिस्कस वगैरह कर रहे हैं इसके बारे

में बट आई रिकमेंड वीट सो लेट्स मूव टू

वीट नाउ और हम देखेंगे कि किस तरह से वीट

का इस्तेमाल करके हम लोग एक बेसिक रिएक्ट

ऐप बना सकते हैं ठीक है तो हम लोग यहां पर

गेट स्टार्टेड पर क्लिक करेंगे और यहां पर

हमको क्योंकि रिएक्ट ऐप बनानी है वो भी

जावा स्क्रिप्ट से टाइप स्क्रिप्ट अभी हम

यूज़ नहीं कर रहे हैं तो हम रिएक्ट पर

क्लिक करेंगे और आप यहां पर देखोगे तो

पूरी स्टेप बाय स्टेप इन लोगों ने एक ऐप

बना रखी है स्टैक ब्लड्स वी डोंट वांट दिस

तो हम क्या करेंगे कि ये जो कमांड्स है वो

चलाएंगे तो लेट्स डू वन थिंग हम यहां पर

कहेंगे एपीएम क्रिएट वीट एट लेटेस्ट तो

मैं इसको वीएस कोड में खोलूंगा फोल्डर को

बाय द वे आपको बताना चाहता हूं कि अगर

आपने व्यू जेएस का नाम सुना है जो कि एक

फ्रेमवर्क है तो उसको भी इवन यू ने बनाया

था जिन्होंने अ वीट को बनाया ठीक है तो

वीट को और व्यू जस को एक ही क्रिएटर ने

बनाया था अब ये मुझसे प्रोजेक्ट नेम पूछ

रहा है तो मैं इसका नाम रखूंगा रिएक्ट

फर्स्ट टप मैं इस तरह से रख दूंगा फर्स्ट

फ एप इसका नाम क्योंकि हमारी फर्स्ट

रिएक्ट पप है ये मुझसे पूछ रहा है कि भाई

क्या बनाना है आपको रिएक्ट बनानी है ठीक

है तो मैंने रिएक्ट चुन लिया अभ ये कह रहा

है जावास्क्रिप्ट हां भाई जावास्क्रिप्ट

एरो कीज का इस्तेमाल करके मैंने बना लिया

आपने देखा हाउ फास्ट वाज दैट कितना फास्ट

था ये हमारी फर्स्ट टप जो है यहां पर बन

गई है और इसके अंदर एक फोल्डर स्ट्रक्चर

बन गया है तो क्लोज करते हैं वीएस कोड को

और इस फर्स्ट टैप के अंदर आते हैं शिफ्ट

राइट क्लिक करके इस फोल्डर को खोल लूंगा

मैं अपने वीएस कोड में और अब हम यहां से

स्टार्ट करेंगे तो अगर आप इसके पैकेज ड

जसन में जाओ तो आप लोगों को कमांड मिलेगा

डेव च मींस कि अगर मैं यहां पर एनपीएम रन

डेव लिखूंगा तो एक डेव सर्वर स्टार्ट हो

जाएगा अभी कह रहा है वीट इज नॉट डिफाइंड

तो हमें एनपीएम आई करना पड़ेगा व्हिच इज

फुल फॉर्म फॉर एनपीएम इंस्टॉल शॉर्टकट

कहना चाहिए मुझे शॉर्टकट फॉर एनपीएम

इंस्टॉल अब वापस से आओगे यहां पर तो देखो

हमने यहां पर एक बार रिएक्ट पप को बना

लिया ट के थ्रू तो हमें एनपीएम इंस्टॉल

करना पड़ेगा फिर एक बार नोड मॉड्यूल

फोल्डर बन जाएगा तो हम एनपीएम रन डेव

करेंगे और हमारा जो सर्वर है वो स्टार्ट

हो जाएगा अब वीट जो है वो रिलेटिवली

क्रिएट रिएक्ट ऐप से काफी फास्ट है थैंक्स

टू द मॉडर्न टूल्स एंड टेक्नोलॉजीज इट

यूसेज कंट्रोल क्लिक करूंगा लोकल होस्ट

5173 पे तोय आप देख सकते हो यहां पर यह वट

प्लस रिएक्ट बना हुआ है यहां पर और एक

बेसिक ऐप यहां पर बनी हुई है और यहां पर

एक काउंटर ऐप जो कि हमने पिछले वीडियो में

बनाई थी वो यहां पर बनी बनाई हमको मिलती

है ये कह रहे हैं कि भाई

src.com और यह भी हटा दूंगा आप कहोगे भाई

क्या कर रहे हो सब कुछ हटा दूंगा मैं जो

जो यूज़ नहीं हो रहे यहां पर यह सब हटा

दूंगा सिर्फ इतना रहने दूंगा आप इतना देखो

मैं तो यह भी हटा दूंगा यार app.css भी

नहीं चाहिए मुझे अब आप देखो कि रि के अंदर

हर कंपोनेंट एक फंक्शन होता है क्लास

बेस्ड कंपोनेंट्स भी होते हैं लेकिन हम

फंक्शन कंपोनेंट्स के साथ ही डील करेंगे

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

फंक्शन ऐप लिखा हुआ है यह हमारा ऐप फंक्शन

है अब एट दिस पॉइंट मुझे आप लोगों का बहुत

सारा ध्यान चाहिए आप लोग बिल्कुल फोकस करो

और इस फंक्शन को देखो यह फंक्शन जो हमारा

प प वाला जो कंपोनेंट है यह हमारा जैसे कि

इक्ड html5 होता है ये हमारा रिएक्ट पप का

एंट्री पॉइंट यानी कि यहां जो कुछ भी होगा

वो सब हमारा यहां पर दिखेगा ठीक है आप

देखो यहां कुछ नहीं है तो यहां कुछ नहीं

दिख रहा है यहां पर अगर मैंने ए लिख दिया

तो यहां पर ए दिखेगा ये देखो ए दिख गया

यहां पर दिख रहा है आप लोगों को तो यहां

पर जो हमने लिखा हुआ है वो सब दिखेगा अब

मैं आप लोगों को बताना चाहता हूं कि जो

रिएक्ट है वो एक लाइब्रेरी होती है

फ्रेमवर्क नहीं होती है ये बात आप लोगों

को याद रखना है क्यों लाइब्रेरी होती है

फ्रेमवर्क नहीं होती है क्या डिफरेंस है

लाइब्रेरी और फे फ्रेमवर्क में होता क्या

है कि जो लाइब्रेरी होता है वह एक

स्पेसिफिक फंक्शनैलिटी को टारगेट करता है

और जो फ्रेमवर्क होता है वह सब कुछ जो कि

एक ऐप को क्रिएट करने के लिए रिक्वायर्ड

होता है वो प्रदान करता है जैसे कि

नेक्स्ट जेएस एक फ्रेमवर्क है वो आपको

बहुत सारी चीजें बिल्ट इन प्रदान करता है

जैसे कि आपको एसईओ जैसी चीजें प्रदान करता

है हम देखेंगे उसको भी कभी कभी ना किसी

दिन देखेंगे हम लेकिन अभी हम लोग फोकस

करेंगे कि ये रिएक्ट प किस तरह से काम कर

रही है अब देखो जब भी हम इस फंक्शन

कंपोनेंट से कुछ भी रिटर्न करते हैं तो यह

रूल होता है इसको एज अ रूल मान लो आप कि

हम सिर्फ एक टैग को इंपोर्ट कर सकते हैं

अब यह कोई बेसिक एटीएमएल नहीं है यह जेएस

एक है ठीक है ये जेएस एक है तो यहां पर

अगर मैं लिख दूं डिव तो ये जो डेव है ये

[संगीत]

एएए और उसमें हम जावास्क्रिप्ट की

शक्तियों का भी इस्तेमाल कर सकते हैं अभी

सिर्फ इतना ही समझ लो आप बिल्कुल बेसिक

बेसिक ठीक है जेएस एक लेकिन थोड़ी सी

स्ट्रिक्ट होती है एटीएमएल से आपको सारे

टैग्स को क्लोज करना पड़ता है उसी के

साथ-साथ आपको एकदम टू द पॉइंट लिखना पड़ता

है वरना एरर आएगा जैसे कि अगर मैं यहां पर

एक आईएमजी टैग लगा दूं मैं लिख दूं हैरी ड

जपजी और अगर मैं ये इसको इस तरह से क्लोज

नहीं करूंगा ना तो

हो गया आप लोगों का जो कि आपको पता होना

चाहिए दूसरा रूल जो कि मैं आपको ऑलरेडी

बता चुका हूं कि जब आप रिटर्न कर रहे हो

किसी एक फंक्शन कंपोनेंट से सिर्फ एक टैग

आप लोग या तो ये जो एमटी रैपर है इसको आप

रिटर्न करोगे नहीं तो आप यहां पर कुछ डिव

डव जो कुछ भी है आप रिटर्न करोगे अगर

मैंने कुछ ऐसा कर दिया मैं आपको दिखाता

हूं किसकी बात कर रहा हूं मैं यह तो चल

जाएगा ठीक है डिव लिखा मैंने और मैं इसको

जरा इस तरह से लिखूंगा जो कि ये क्लोजिंग

टैग है डेव अगर मैंने इसके अंदर एक और डेव

लगा दिया यहां पर तो ये एक एरर है क्योंकि

भाई रिटर्न सिर्फ आप एक डिव कर सकते तो आप

दो-दो डेव अलग-अलग कैसे रिटर्न कर रहे हो

या तो आप इसको एक रैपर में रैप करो पूरे

को समझ रहे हो आप लोग तो ये रूल होता है

अब आप कहोगे ये क्यों होता है अभी के लिए

आप उसको भूल जाओ क्यों होता है ये होता है

बस ठीक है अभी के लिए हमें सिर्फ इतना

जानना है फिर दूसरी चीज जो मैं आपको

ऑलरेडी बता चुका हूं वो ये है कि आपको

क्लास नहीं क्लास नेम का प्रयोग करना है

क्योंकि क्लास ऑलरेडी होता है

जावास्क्रिप्ट में ये एटीएमएल एंड

जावास्क्रिप्ट है एटीएमएल नहीं है तो

इसमें अगर मुझे क्लास का प्रयोग मैंने कर

दिया तो कंफ्यूजन हो जाएगा ना कि भाई

क्लास ये जावास्क्रिप्ट वाला क्लास है या

फिर ये एचटीएमएल वाला क्लास है इसलिए हम

लोग इसमें क्लास नेम प्रयोग करते हैं तो

जैसे मान लो कि दो शुभम है आप लोगों की

क्लास में तो आप लोग कभी हो सकता है किसी

को शुभम वन कह दो किसी को शुभम टू कह दो

मान लो एक का नाम है शुभम जोशी और एक का

नाम है शुभम अग्रवाल तो हो सकता है कि

किसी एक का नाम आप लोग गोलू रख दो और

दूसरे का नाम आप सोनू रख दो क्योंकि आप

नहीं चाहते दोनों को शुभम शुभम का और

कंफ्यूजन जो है वो क्रिएट हो इसलिए यहां

पर भी वही है कि क्लास नेम इज इक्वल टू कई

जगह तो शुभम वन शुभम टू शुभम थ्री भी करते

हैं लेकिन हां ठीक है यार मतलब वो डिपेंड

करता है अगर मैं यहां पर हैरी लिखूं तो

यहां पर रिफ्लेक्ट करेगा क्योंकि ये मेरा

एंट्री पॉइंट है ठीक है ये मेरा एंट्री

पॉइंट है अब आप कहोगे ये वर्टिकली सेंटर

क्यों हो रहा है वो भी मैं आपको बताता हूं

ये जो index.js है सीएसएस है ना ये अप्लाई

हो रही है ये ग्लोबल सीएसएस है जो सब जगह

अप्लाई हो रही है तो ये सीएसएस रिसेट लगा

हुआ है जिसको मैंने अभी हटाया तो आप देख

सकते हो यहां पर हैरी ऊपर आ गया ये एक

बेसिक ऐप की तरह बर्ताव कर रहा है तो चलो

यार अब एक काम करते हैं इस सबको भूल जाते

हैं सब कुछ हटाते हैं यहां से और एक ऐप

बनाते हैं एक ऐसी ऐप बनाते हैं जिसको हम

लोग इस्तेमाल करेंगे तो एसआरसी के अंदर

मैं एक कंपोनेंट्स फोल्डर बनाऊंगा जिसके

अंदर मैं

एस नाम का एक कंपोनेंट बनाऊंगा मैं

लिखूंगा आर ए एफ सई अगर आपको नहीं पता य

आर एएफ सई क्या है तो ये इस तरह का एक

बॉयलर प्लेट फंक्शन कंपोनेंट हमें देता है

और ये आपको मिलता है एक बार आपने ये वाली

एक्सटेंशन इंस्टॉल कर ली तो इसका नाम है

es7 रिएक्ट रिडक्स ग्राफ कएल रिएक्ट नेटिव

स्नेप इट्स ये दोनों ही आप इंस्टॉल कर लो

ये एक है डीएस z डर की के तरफ से एक है

इनकी तरफ से इनका नाम देख लेना भाई यार अब

ठीक है और ये सारी एक्सटेंशंस है मैं अपनी

सारी एक्सटेंशंस दिखा देता हूं आपको सारी

आपको इंस्टॉल नहीं करनी है जस्ट दिखा रहा

हूं आपको अग इन केस आपको जानना है मैं

क्या-क्या यूज़ करता हूं तो इसको मैंने

अभी बंद किया और अब मैं क्या करूंगा कि

यहां पर एक नाव बार लिखूंगा एक बेसिक सा

नाव बार लिखूंगा और इन द प्रोसेस आप लोगों

को समझाऊं कि चीजें किस तरह से काम करती

हैं यहां पर तो मुझे एक नाव बार बनाना है

तो मैं क्या करता हूं हमेशा से मैं एक यूल

बनाता हूं सबसे पहले एक नेव टैग बनाऊंगा

ठीक है और यहां पर मैं जेएस एक करूंगा

जेएस एक मैं यहां पर लिखूंगा वव और वव

लिखने के बाद मैं एक यूल लिखूंगा यूल के

अंदर मैं एआई लिखूंगा और यहां पर मैं

लिखूंगा मान लो होम और इसके बाद कुछ और

चीजें हम लोग लिखते हैं जैसे कि अबाउट

कांटेक्ट ठीक है अबाउट और

कांटेक्ट और इसमें कुछ सीएसएस भी मैं

लिखूंगा ठीक है तो इसकी जो सीएसएस होगी वो

मैं nbc.com

इस app.js में जो व बार है उसको मैं

इंक्लूड करूंगा ठीक है तो मैंने यहां पर

ऑटोमेटिक इसको इंपोर्ट कर लिया और यहां पर

ये नेव बार को इंक्लूड कर लिया और आप लोग

को मैं दिखाऊं तो ये यहां पर मुझसे कह रहा

है कि भाई आप एक काम करो इसको ड जए एक

एक्सटेंशन से लगाओ डॉट जए एक्सटेंशन नहीं

चलेगी तो चलो ठीक है यार इसको ड जए एक

एक्सटेंशन से हम लोग लगा लेते हैं और अभी

इसको मैं रीलोड करूंगा जब तो आप देखो यहां

पर मेरा न बार आना चाहिए था बट मेरा n बार

यहां पर आ नहीं रहा है मुझे दिख नहीं रहा

है लेट मी सी व्हाट्स रंग तो मैं इसको

यहां पर /

क्योंकि ये इसी फोल्डर के अंदर है और अब

आप देखो यहां पर ये जो जेएस है सीएसएस है

सॉरी वो हमारी यहां पर लग गई है इस पे ठीक

है तो अब मैं आप लोगों को दिखाना चाहता

हूं कि एक बार मैं यहां पर वव बार में

अपनी सीएसएस लिखूं तो मैं क्या-क्या कर

सकता हूं तो मैं अगर यहां पर लिखूं कि भाई

जो नाव है उसमें मैं डिस्प्ले फ्लेक्स

करना चाहता हूं एंड ओबवियसली मैं ये सब

हटा दूंगा ये जो रेड कलर मैंने किया था और

मैं कहूंगा यूल भी मेरा डिस्प्ले फ्लेक्स

है तो मैं नेव बार को और उसी के साथ-साथ

यल को डिस्प्ले फ्लेक्सस करना चाहता हूं

तो ये कुछ इस तरह से आ जाएगा फिर मैं

कहूंगा कि भाई जो मेरा एआई है उसमें मैं

लिस्ट स्टाइल को नन करना चाहता हूं और

जिससे कि यह बिंदु जो है वह हट जाएंगे फिर

मैं कहूंगा कि भाई जो मेरा यूल है यल में

मैं एक चीज करना चाहता हूं कि कैप ऐड करना

चाहता हूं मान लो 34 पिक्सल्स का ताकि ये

थोड़ी दूरी बना ले तो इस तरह से मैं नाव

बार बना सकता हूं मान लो मैं जो नाव है

उसमें कहूं कि जो बैकग्राउंड कलर है उसको

कुछ बीच कर दो ठीक है तो ये इसका ये भी आ

जाएगा ठीक है और मैं फिर एक सीएसएस रिसेट

लगाऊंगा यहां पर सब सब कुछ के लिए पूरी पप

के लिए तो मैं इक्सड सीएए में लिखूंगा और

मैं यहां पर लिखूंगा मार्जिन रो एक तो

मार्जिन जीरो करूंगा और पैडिट जीरो करूंगा

m0 और p0 तो ये करने से य जो गैप था वो

चला गया एंड ओबवियसली मुझे थोड़ा सा वव

बार के अंदर टॉप बॉटम में देना पड़ेगा तो

मैं नाव बार के अंदर टॉप बॉटम में कैसे

दूंगा गैप मैं यहां पर लिख सकता हूं नव

बार में गैप कर दूंगा मान लो 23 पिक्सल्स

और इससे कुछ नहीं होगा पैडिट देनी होगी

क्योंकि गैप तो भाई आइटम्स के लिए होता है

तो मैं पैडिट में लिखूंगा 23 पिक्सल्स और

ये देखो काफी हद तक हमारा नबर बन गया नॉट

द बेस्ट बार आउट देयर बट बन गया ठीक है तो

मैंने क्या किया एक नेव बार कंपोनेंट

बनाया इस व बार कंपोनेंट की अपनी सीएसएस

बनाई और फिर मैंने क्या किया इसको इंक्लूड

कर दिया अपनी पड जए एक में जो कि एंट्री

पॉइंट है हां ठीक है प बार को हमने

इंक्लूड कर दिया बट लेट्स मेक अ फुटर अब

मैं एक फुटर बनाना चाहता हूं तो फुटर को

बनाने के लिए मैं क्या करूंगा यहां पर फटर

ड जए एक बनाऊंगा एक नया कंपोनेंट आर ए स

लिखूंगा और मान लो यहां पर मैं लिखना

चाहता हूं कॉपीराइट कोड वि har.com ठीक

ठीक है और फिर मान लो मैं लिखना चाहता हूं

कुछ इस तरह से ऑल राइट्स रिजर्व्ड ठीक है

और मैं इसको डिव को सेंटर करना चाहता हूं

तो मैं क्या करूंगा कि फटर डॉट यहां पर

फुटर डॉट सीएसएस बना लूंगा और यहां पर मैं

लिखूंगा कि भाई एक काम करना जो डेव होगा

उसमें टेक्स्ट लाइन को सेंटर कर देना ठीक

है ताकि सब कुछ सेंटर हो जाए और अभी मैं

आप लोगों को ये फुटर दिखाऊं तो ये यहां पर

नहीं दिखेगा क्यों नहीं दिखा भाई इंक्लूड

ही नहीं किया मैंने कहां से दिखेगा तो मैं

क्या करूंगा कि यहां पर कुछ इस तरह से

फुटर को लिख दूंगा ठीक है और मैं जैसे ही

फुटर को सॉरी इसको ऐसे नहीं इसको इस तरह

से हमें क्लोज करना पड़ता है कंपोनेंट को

और फुटर में जैसे ही यहां पर लिखूंगा तो

देखो ऑटोमेटिक इसने इंपोर्ट किया फुटर और

मेरा फुटर भी यहां पर आ गया बट ये टेक्स्ट

लाइन सेंटर नहीं हुआ और टेक्स्ट लाइन

सेंटर इसलिए नहीं हुआ क्योंकि इस डिव पर

यह सीएसएस अप्लाई नहीं हुई क्या मैंने

इंपोर्ट नहीं करी है यस मैंने इंपोर्ट

नहीं करी है फरड सीएए तो मैं क्या करूंगा

डॉट स् फरड सीएए को इंपोर्ट करूंगा एंड

दिस विल बी सेंटर्ड ठीक है दिस विल बी

सेंटर्ड अब मैं क्या कर सकता हूं कि इसमें

मैं पोजीशन स्टिकी कर सकता हूं पोजीशन

स्टिकी कर सकता हूं या फिर फिक्स्ड कर

सकता हूं और बॉटम ज़ीरो कर सकता हूं बॉटम

कर दूंगा ज़ीरो तो ये बिल्कुल नीचे पहुंच

जाएगा तो अगर मैं ये चाहता हूं तो ये भी

कर सकता हूं पोजीशन स्टिकी अ और बॉटम सॉरी

फिक्स्ड और बॉटम ज़ीरो तो मैं अगर ये करूं

तो आप देखो यहां पर मैं फरड सीएए में

आऊंगा और मैं इसमें ये भी डाल दूंगा

पोजीशन फिक्स और बॉटम ज़ीरो तब ये देखो

कुछ इस तरह से दिखेगा बट प्रॉब्लम ये आ गई

कि ये मैंने फरड

[संगीत]

फटर ड सीएए क्योंकि पूरे डिव को टारगेट कर

रही है तो इससे थोड़ी सी दिक्कत हो गई तो

मैं इसमें क्लास नेम इज इक्वल टू फुटर दे

दूंगा और मैं कहूंगा कि भाई डिव डॉट फुटर

में करो भाई बस ये बस डिब डॉट फुटर में

करो ये वाले डिब को माफ करो तो आप देखो

यहां पर कि पोजीशन स्टिकी और बॉटम जीरो

करने से ये नीचे आ गया ठीक है तो लेट्स

नॉट डू दिस मैं इसको करना नहीं चाहता हूं

सो लेट्स नॉट डू दिस ठीक है तो मैं सिंपली

यहां पर इस डिव में इनफैक्ट डॉट फुटर मुझे

करना चाहिए इस डॉट फुटर में मैं सिंपली

टेक्स्ट लाइन सेंटर करूंगा बैकग्राउंड

इसका ब्लैक करूंगा कलर इसका वाइट करूंगा

इनफैक्ट नॉट एगजैक्टली ब्लैक बट थोड़ा सा

मैं ग्रेश रखूंगा यहां ग्रे की तरफ रखूंगा

और अभी आपको दिखाता हूं यह कैसा हो गया और

इसकी जो विड्थ है वो मैं 100% कर दूंगा तो

मैं इसकी विड्थ को कर दूंगा 100% या 100

वड भी कर सकता हूं देखो यहां पर इस तरह से

कॉपीराइट कोड with.com ऑलराइट रिजर्व आ

गया और जो मेरी और कंपोनेंट्स होंगे या जो

भी जेएसएस में लिखना चाहता हूं मैं

डायरेक्टली यहां पर लिख सकता हूं तो मैं

यहां पर एक मेन टैग बना सकता हूं और मैं

यहां पर लिख सकता हूं दिस इज माय इट्स मेन

कंटेंट कुछ इस तरह से मैं बना सकता हूं

फिर यहां पर डॉट कार्ड्स बना सकता हूं मैं

और इसके बाद यहां पर कार्ड कंपोनेंट बना

सकता हूं अलग-अलग तो मैं आप लोगों को एक

चीज दिखाना चाहता हूं कि किस तरह से हम

लोग इस्तेमाल करते हैं कंपोनेंट्स को तो

अभी हमारे पास ये एंट्री पॉइंट है जो कि

पड जए एक है इस एंट्री पॉइंट में हमने

फुटर लगाया वव बार लगाया और यहां पर हम

अपना जो मेन साइट है वो लिखना हमने शुरू

कर दी ठीक है अब मैं क्या करूंगा आप लोगों

को एक कार्ड बना के दिखाऊंगा एक कार्ड

कंपोनेंट बना के दिखाऊंगा मैं ये हटा देता

हूं दिस इज माय साइट्स मेन कंटेंट ये हटा

दे देता हूं और अगर आप चाहो तो मैं फुटर

को स्टिकी भी कर सकता हूं तो मैं अगर यहां

पर पोजीशन अ फिक्स्ड करूं और मैं कहूं

बॉटम जीरो बॉटम जीरो कर दो और लेफ्ट कर दो

50 वड ठीक है तो लेफ्ट को मैं 50 वड

करूंगा तो ये यहां पर इधर आ गया बट एक

प्रॉब्लम यह हुई कि ये 50 वड पूरा खिसक

गया व्हिच आई डोंट वांट एक्चुअली ये करने

की मुझे जरूरत नहीं है तो बॉटम जीरो मैं

यहां पर करूंगा और आप देखो कि ये कुछ इस

तरह दिखेगा अगर मैं चाहूं इसको और बेटर

बनाना तो मैं इस कॉपीराइट के सी को ऐसे कर

दूंगा कॉपीराइट कर दूंगा और यहां पर मैं

एम पर कॉपी लिख दूंगा तो मैं यहां पर

लिखूंगा m पर कॉपी सेमीकलन और ये कुछ इस

तरह से दिखेगा फिर कॉपीराइट कोड with.com

ऑल राइट्स रिजर्व और मैं यहां पर w भी लिख

सकता हूं तो ये मेरा फुटर हो गया ये मेरा

app.js हो गया अब आप देखो हम एक नया

कंपोनेंट बनाएंगे जिसका नाम हम लोग

लिखेंगे काड ज एक ठीक है तो यह आर ए ए स

लिखूंगा एंटर मारूंगा तो यह कार्ड बनेगा

अब मैं यहां पर क्या कर सकता हूं मैं यहां

पर एक कार्ड बना सकता हूं ये मेरा कार्ड

है और मैं यहां पर कह सकता हूं कि डिव

क्लास इ इक्वल टू कार्ड क्लास नेम इ इक्वल

टू कार्ड और यहां पर मैं क्या कर सकता हूं

कि एक h1 लगा सकता हूं और कहूंगा टाइटल ऑफ

दी कार्ड और यहां पर एक पैराग्राफ बनाऊंगा

और पी लिखकर मैं यहां पर लिखूंगा

डिस्क्रिप्शन ऑफ

दी कार्ड ठीक है और मैं इस कार्ड कंपोनेंट

को यहां पर यूज कर लूंगा मैं कहूंगा एक

कार्ड मेरा कुछ इस तरह से लगा दो और मैं

इसको ऐसे सेल्फ क्लोजिंग रखूंगा इसको मैं

ऐसे मिटा दूंगा फॉर्मेट डॉक्यूमेंट करूंगा

तो ये कुछ इस तरह से दिखेगा जैसे कि आप

देख सकते हो और यहां पर आप देखो कि यह

मैंने जैसे ही किया तो मेरा कार्ड यहां पर

विजिबल हो जाना चाहिए बट ये मेरा कार्ड

विजिबल नहीं हो रहा है कार्ड इज नॉट

डिफाइंड ओके तो मुझे कार्ड को इंपोर्ट

करना पड़ेगा तो मैं यहां पर अगर इंपोर्ट

कार्ड लिखूंगा तो ये मेरा कार्ड इंपोर्ट

हो जाएगा और मेरा ये देखो एक कार्ड जो है

वो बन गया ठीक है इसकी विड्थ को मैं कर

सकता हूं से 22 पिक्सल्स इस कार्ड की

विड्थ को 22 पिक्सेल कर सकता मैं कार्ड

सीएसएस लगाकर तो वो सारे काम में कर सकता

हूं मैं यहां पर कह सकता हूं काड सीएसएस

और यहां पर मैं लिख सकता हूं डॉट कार्ड

में विड्थ कर दो 100 पिक्सल्स ठीक है या

फिर एक काम करता हूं यार इसको 20 वड कर

देता हूं और यहां पर मैंने डॉट कार्ड लिखा

है और डॉट कार्ड मैंने लगा रखा है तो उसकी

विड्थ यह हो गई फिर मैं इसमें बॉर्डर भी

लगाना चाहता हूं ू

पिक्सल सॉलिड ब्लैक ठीक है तो यह मैंने

लगाया और यहां पर बॉर्डर नहीं आया लेकिन

लेट मी सी व्हाट्स रंग मैंने कार्ड को

इंपोर्ट नहीं किया है तो मैं इंपोर्ट

करूंगा डॉट स्ल कार्ड डॉट सीएसएस लिखूंगा

ठीक है तो मैंने कार्ड कंपोनेंट बनाया और

ये देखो यहां पर ये ऐसे आ गया ठीक है मैं

चाहूं तो इसमें मार्जिन भी दे सकता हूं तो

मैं कह सकता हूं भाई मार्जिन दे दो 34

पिक्सल्स व्हिच माइट बी अ लॉट बट दैट शुड

बी फाइन ठीक है तो मैंने ये कार्ड यहां पर

रख दिया तो अब मैं क्या कर सकता हूं इन

कार्ड कंपोनेंट्स को इन कार्ड कंपोनेंट्स

को अपनी app.js एक में मैं डुप्लीकेट कर

कर सकता हूं मैं कहता हूं मुझे चार कार्ड

चाहिए तो मुझे चार कार्ड ये इस तरह से मिल

गए मैं चाहूं तो ये जो जो कार्ड्स वाली

क्लास है मेरी ये जो कार्ड्स वाली क्लास

है मैं चाहूं तो इसमें डिस्प्ले फ्लेक्स

लगा सकता हूं फिर मुझे सारे कार्ड्स

हॉरिजॉन्टल दिखेंगे तो एक काम कर सकते हैं

हम लोग ये जो app.js एक है इसमें हम यह जो

कार्ड्स है उसको डिस्प्ले फ्लेक्स दे सकते

हैं तो मैं in.css में आऊंगा और मैं

कहूंगा भाई जो डॉट कार्ड्स है उसमें

डिस्प्ले फ्लेक्स दे दो तो ये डिस्प्ले

फ्लेक्सस हो जाएगा और ये कार्ड्स ऐसे

दिखेंगे तो मैंने चार कार्ड्स को रीयूज कर

लिया लेकिन मैं चाहता हूं कि कार्ड का जो

टाइटल

है वो मैं इस तरह से पास कर पाऊ और जो

इसका डिस्क्रिप्शन

है वो मैं इस तरह से पास कर पाऊ तो क्या

मैं ऐसा कर सकता हूं द आंसर इ यस मैं ऐसा

कर सकता हूं और इसे हम कहते हैं प्रॉप्स

इसे हम कहते हैं प्रॉप्स टाइटल एक प्रॉप

है डिस्क्रिप्शन एक प्रॉप है तो कार्ड

कंपोनेंट को हम कह रहे टाइटल ये कर दो

डिस्क्रिप्शन य कर दो लेकिन हमें कार्ड

कंपोनेंट में इन प्रॉप्स को एक्सेप्ट करना

पड़ेगा एस एन ऑब्जेक्ट कॉल्ड प्रॉप्स इसका

नाम आप कुछ भी दे स सकते हो बट जनरली

प्रॉप्स दिया जाता है क्योंकि ये प्रॉप्स

होते हैं ठीक है तो यहां पर मैंने प्रॉप्स

लिखा अब मैं क्या करूंगा यहां पर लिखूंगा

प्रॉप्स ड टाइटल तो जब भी हमें जेएस एक के

अंदर जावास्क्रिप्ट लिखनी होती है तब हम

इस तरह के कर्ली ब्रैकेट्स का इस्तेमाल

करते हैं और जैसे ही हम इस तरह के कर्ली

ब्रैकेट्स को खोल लेते हैं जेएस एक समझ

जाता है कि हां भाई अब जावास्क्रिप्ट लिखी

जा रही है तो उसको जावास्क्रिप्ट की तरह

इंटरप्रेट करो ठीक है तो मैं यहां पर क्या

करूंगा लिखूंगा प्रॉप्स डॉट टाइटल तो ये

क्या करेगा प्रॉप्स ऑब्जेक्ट में जो अगर

टाइटल हुआ प्रॉप्स ऑब्जेक्ट के अंदर तो

टाइटल उसका डाल देगा यहां पर क्या प्रॉप्स

में टाइटल आ रहा है भाई हम पास तो कर रहे

टाइटल कार्ड वन और डिस्क्रिप्शन कार्ड टू

तो ये इस कंपोनेंट में प्रॉप्स एस एन

ऑब्जेक्ट मिलेगा फिर से समझो जो भी मैं

ऐसे पास करूंगा टाइटल इ इक्वल टू ये

डिस्क्रिप्शन इक्वल टू ये वो यहां पर जिस

कंपोनेंट ये कार्ड है देखो यहां पर चाहो

तो आप कंट्रोल क्लिक भी कर सकते हो यहां

पहुंचो के सीधे कंट्रोल क्लिक करके इस

कंपोनेंट में एस प्रॉप्स आ जाएगा ठीक है

और यहां पर मैं कह सकता हूं प्रॉप्स डॉट

डिस्क्रिप्शन टॉप्स डॉट डिस्क्रिप्शन और

यहां पर डिस्क्रिप्शन आ जाएगा तो आप देखो

कार्ड वन कार्ड टूडी एस यहां कुछ क्यों

नहीं आ रहा है क्योंकि पास ही नहीं किया

कुछ तो आ जाओ करते हैं पास आ जाओ मैं इन

कार्ड्स को हटाता हूं और इनको रिप्लिकेट

करता हूं एक दो तीन बार और यहां पर मैं कर

दूंगा कार्ड टू यहां पर कर दूंगा कार्ड

थ्री यहां पर कर दूंगा कार्ड फोर सेम यहां

पर भी मैं करूंगा यहां पर कार्ड वन डीएससी

कार्ड टू डीएससी कार्ड थ डीएससी और कार्ड

4 डीएससी और आप देखो मैं अपने कार्ड

कंपोनेंट को इस्तेमाल कर पा रहा हूं तो

मैं जितनी बार चाहे यहां पर इसको रीयूज कर

सकता हूं अब मान लो मैं चाहता हूं कार्ड

की हाइट भी हो मुझे सिर्फ एक बार इस कार्ड

जए एक कंपोनेंट को चेंज करना पड़ेगा और ये

सब में मिल जाएगी कार्ड की हाइट तो मैं

कार्ड ड सीएसएस के अंदर य जो कार्ड है

इसमें हाइट भी लिख दूंगा कि भाई हाइट भी

मुझे चाहिए कितनी चाहिए मुझे चाहिए 10वी

की हाइट और आप देखो यहां पर इसको हाइट भी

मिल गई अगर मैं चाहूं कि ये 10 वीए ना दूं

मैं मान लो 300 पिक्सेल दे दूं तो आपको वो

भी मिल जाएगी सारे कार्ड्स में ये हाइट लग

जाएगी हाउ ऑसम इज दैट यानी कि हम कार्ड्स

भी बना सकते हैं अब मान लो मैं चाहता हूं

कि यार कार्ड के ऊपर अगर इमेज होती तो

कितना अच्छा होता तो मुझे सिर्फ एक

बार एक बार मुझे डालना

होगा किसी इमेज को तो मान लो मैं जाता हूं

यार ये इमेज में डाल लू ये काफी बढ़िया लग

रही है यार अच्छी इमेज है तो मैं यहां पर

क्या करूंगा कॉपी करूंगा इस इमेज के लिंक

को कार्ड में आऊंगा और यहां पर मैं लिख

दूंगा आईएमजी एसआरसी इ इक्वल टू दिस और आप

देखो चारों के चारों कार्ड्स में ये लग गई

लेकिन ओबवियसली मुझे इसकी विड्थ को भी जो

है चेंज करना पड़ेगा तो मैं क्या कर सकता

हूं कि इसकी जो विड्थ है उसको मैं कर सकता

हूं कितना करूंगा इसकी विड्थ को चाहे मैं

इस विड्थ को एक नंबर की तरह पास कर सकता

हूं जैसे मान लो मैं 233 कर दूं तो 233

किया तो ये हो गया देखो ठीक है और मैं

चाहूं तो इसको सेंटर भी कर सकता हूं

सीएसएस आपको आती है वो आप लगा लेना ठीक है

बट इसको मैं चाहूं तो एज अ स्ट्रिंग पास

कर सकता हूं ऐसे या फिर मैं कह सकता हूं

कि भाई इस चीज को भी मैं एज अ

जावास्क्रिप्ट लिखना चाहता हूं तो मैं ये

करूंगा तो यहां पर अब मैं जावास्क्रिप्ट

लिखूंगा तो मैं इस तरह से लिखूंगा 233 तो

ये एज एन इंटी जर इंटरप्रेट होगा और ये

पूरा जो वैल्यू होगी वो विड्थ को मिल

जाएगी तो ये चीज आपको समझना थोड़ी जरूरी

है तो यहां पर आप देखो 233 मैंने किया तो

ये ऐसे हो गया मैं चाहूं तो इसको अभी और

बढ़ा सकता हूं 333 कर सकता हूं तो ये कुछ

इस तरह से आ गई और मैं इसका ओवरफ्लो जो है

वो कह सकता हूं कि भाई ओवरफ्लो हिडन कर दो

अब मैं इसमें इनलाइन सीएसएस डालना चाहता

हूं वो मैं कैसे डालूंगा ये भी देखो कैसे

डालूंगा मैं लिखूंगा स्टाइल मैं कहूंगा

स्टाइल इज इक्वल टू अब मैं यहां पर

जावास्क्रिप्ट लिख सकता हूं इन ब्रैकेट्स

के अंदर मैं एज स्ट्रिंग नहीं डाल सकता

इनलाइन सीएसएस यहां पर एज जावास्क्रिप्ट

डालूंगा अब ये तो जावास्क्रिप्ट का कर्ली

ब्रैकेट हो गया जिसका मतलब ये हुआ कि मैं

इसके अंदर जावास्क्रिप्ट लिखने वाला हूं

अब ये एक और जो कर्ली ब्रैकेट मैंने लगाया

वो एक ऑब्जेक्ट का लगाया मैं यहां पर मान

लो लिखूं बैकग्राउंड कलर अब देखो मैंने

जैसे ही ये लिखा तो एक ये ऑब्जेक्ट आया

बैकग्राउंड कलर तो जब भी हम जेएस एक में

सीएसएस डालते हैं तो इस तरह से इस्तेमाल

करते हैं हम बैकग्राउंड कलर को और कोलन

करके मैं यहां पर लिख दूंगा रेड तो आप

देखो इसका जो बैकग्राउंड कलर है वो रेड हो

जाएगा बट ये दिख नहीं रहा है कोई बात नहीं

हम कुछ और यूज करते हैं अगर मैं यहां पर

लिखूं बॉर्डर और मैं लिखूं टू पिक्सेल

सॉलिड ब्लैक टू पिक्सेल सॉलिड ब्लैक तो यह

बॉर्डर यहां पर अप्लाई हो जाएगा आप देख

सकते हो ये मिल गया उसी तरह से मैं कह

सकता हूं कि भाई जो ओवरफ्लो है उसको क्या

करो हिडन कर दो ओवरफ्लो हिडन चाहिए और

ओवरफ्लो हिडन मैंने जैसे ही किया तो

ओवरफ्लो हिडन क्यों नहीं हुआ लेट मी सी

ओवरफ्लो हिडन होना चाहिए मैं चाहता हूं कि

इस इमेज का ओवरफ्लो हिडन हो बट ओवरफ्लो

मुझे कार्ड में हिडन करना है बाय द वे तभी

तो देखो ओवरफ्लो हिडन हम लगाते हैं कंटेनर

में ठीक है तो इसीलिए ये गलती मैंने करी

है ओवरफ्लो हिडन इस इमेज प क्लिक करोगे तो

आ तो गया है बट मुझे ये ओवरफ्लो हिडन यहां

नहीं लगाना है मुझे कार्ड पे लगाना है ऊपर

लगाना है तो मैं वही करूंगा यहां पर

लिखूंगा स्टाइल या तो मैं इस कार्ड में

यहां पर जाके लिख दूं व फ्लो हिडन वो भी

चलेगा भाई ठीक है वो भी चलेगा उससे भी ये

हाइड हो जाएगी या फिर मैं अगर इनलाइन

सीएसएस जो कि मैं आपको लिख के दिखाता हूं

वो मैं ऐसे लिखूंगा स्टाइल इज इक्वल टू

पहले मैंने ये करली ब्रैकेट लगाया पहला

जिससे कि मेरा मतलब है कि मैं

जावास्क्रिप्ट यूज कर रहा हूं अब मैं इसके

अंदर एक जावास्क्रिप्ट ऑब्जेक्ट बना रहा

हूं जिसमें मैं लिखूंगा ओवरफ्लो और वीएस

कोड आपका साथ ही है वीएस कोड आपको सजेस्ट

करता रहेगा जैसे-जैसे आप लोग लिखोगे और

मैं कह दूंगा हिडन और ये जैसे ही मैं

करूंगा तो देखो ओवरफ्लो हिडन हो गया और

सारे कार्ड्स में ये अप्लाई हो गई ठीक है

आई होप समझ में आया आप लोगों को कि किस

तरह से रिएक्ट को इस्तेमाल करना है तो एक

बेसिक रिएक्ट पप तो हमने बना ही लिए और

सारे कांसेप्ट भी समझ लिए हैं प्रॉप्स

क्या होते हैं एक कंपोनेंट से दूसरे

कंपोनेंट में आप डाटा पास करते हो प्रॉप्स

के थ्रू जैसे कि यहां पर हमने टाइटल और

डिस्क्रिप्शन दिया कार्ड को हम कार्ड

स्केलेटन को ये बताना चाहते हैं कि भाई

हमारा टाइटल ये है डिस्क्रिप्शन ये है और

कार्ड स्केलेटन कैसे दिखेगा हमें कंट्रोल

क्लिक करके ये देखो ये इस तरह से कार्ड का

स्केलेटन दिखता है जिसमें कि हमने डाटा

प्रॉप्स की तरह पास किया और यहां पर इसको

रिसीव किया इस तरह से प्रॉस ड टाइटल प्रॉस

डिस्क्रिप्शन आप कितना भी बड़ा डाटा पास

कर सकते हो एक कंपोनेंट से दूसरे कंपोनेंट

में और आप चाहो तो यहां पर पूरे पूरे

ऑब्जेक्ट्स भी पास कर सकते हो कई चीजें आप

लोग कर सकते हो यहां पर ठीक है तो ये आपकी

मर्जी है ठीक है तो ये यहां पर मैंने

प्रॉस ड डिस्क्रिप्शन प्रॉस टाइटल यहां पर

एक्सेप्ट किया ये मेरा कार्ड कंपोनेंट है

ठीक है तो इस तरह से हम लोग रिएक्ट को यूज

करते हैं तो एक बार जल्दी से री पप कर

लेते हैं इन केस यू आर लॉस्ट मैं आप लोगों

को बताता हूं कि क्या किया हमने इस वीडियो

में सबसे पहले हम लोगों ने वीट के थ्रू एक

नई ऐप बनाई फिर हमने कहा कि यार जो app.js

है वो एंट्री पॉइंट होता है यानी कि जो

हमारी ऐप दिखेगी वो यहां से स्टार्ट होगी

जो आप कह लोगे जो कंट्रोल होगा वो यहां से

शुरू होगा जैसे index.htm में आपकी जो

बार कंपोनेंट को उठा के यहां पर रख देगा

फिर यह कहेगा चलो ठीक है आपने यहां पर कुछ

जेएस एक लिखी हुई है जो कि

html2text अब किस तरह से हम और पेजेस

बनाएंगे किस तरह से नेविगेशन होगा वह सब

मैं आपको आने वाले वीडियोस में बताऊंगा आप

इस वीडियो के कमेंट में सिग्मा बैच ओपी

जरूर लिख देना यार क्योंकि बहुत कम लोग

लिख रहे हैं अभी बहुत ही लो हो गया है सब

लोगों का जो एनर्जी लेवल है पता नहीं

क्यों यार परट मैं अपना एनर्जी लेवल हाई

रखते हुए बहुत अच्छी तरह से इस प्लेलिस्ट

को कंप्लीट करने वाला हूं जो वादा था वो

पूरा करने वाला हूं आप लोग जो है इसको

बुकमार्क कर लेना प्लेलिस्ट को अगर एक्सेस

नहीं किया है और फर्स्ट वीडियो में जाकर

अगर आप लोगों ने रिव्यू नहीं छोड़ा है अभी

तक तो जरूर छोड़ना अभी के लिए इस वीडियो

में इतना ही गाइस थैंक यू सो मच गाइस

वाचिंग दिस वीडियो एंड आई विल सी यू

नेक्स्ट

[संगीत]

टाइम