From 0fe7a75159535eb568d153d47efb640b3667828d Mon Sep 17 00:00:00 2001 From: Akshit Gupta Date: Wed, 9 Mar 2022 21:16:00 +0530 Subject: [PATCH 01/18] UI building block section : done --- beta/src/pages/learn/your-first-component.md | 159 ++++++++----------- 1 file changed, 69 insertions(+), 90 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index cae284d46..bc7053a26 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -1,24 +1,24 @@ --- -title: Your First Component +title: आपका पहला कौम्पोनॅन्ट --- -Components are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +कौम्पोनॅन्ट React की मुख्य अवधारणाओं में से एक हैं। वे नींव हैं जिस पर आप यूजर इंटरफेस (UI) का निर्माण करते हैं, जो उन्हें आपकी React यात्रा शुरू करने के लिए एक आदर्श स्थान बनाता है! -* What a component is -* What role components play in a React application -* How to write your first React component +- एक कौम्पोनॅन्ट क्या है +- React एप्लिकेशन में कौम्पोनॅन्ट क्या भूमिका निभाते हैं +- अपना पहला React कौम्पोनॅन्ट कैसे लिखें -## Components: UI building blocks {/*components-ui-building-blocks*/} +## कौम्पोनॅन्ट: UI बिल्डिंग ब्लॉक्स {/* components-ui-building-blocks */} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +Web पर, HTML हमें `

    ` और `
  • ` जैसे टैग के अंतर्निहित सेट के साथ समृद्ध संरचित दस्तावेज़ बनाने देता है: ```html
    @@ -31,11 +31,11 @@ On the Web, HTML lets us create rich structured documents with its built-in set
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +यह मार्कअप इस लेख `
      `, इसके शीर्षक `

      `, और एक (संक्षिप्त) सामग्री तालिका को एक क्रमबद्ध सूची `
        ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ संयुक्त, और जावास्क्रिप्ट अन्तरक्रियाशीलता के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे निहित है — UI का हर टुकड़ा जो आप Web पर देखते हैं। -React lets you combine your markup, CSS, and JavaScript into custom "components," **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए पुन: प्रयोज्य `UI` तत्वों में संयोजित करने देता है। ** ऊपर देखी गई सामग्री कोड की तालिका को `` कौम्पोनॅन्ट में बदल दिया जा सकता है आप हर पेज पर रेंडर कर सकते हैं। हुड के तहत, यह अभी भी उसी HTML टैग का उपयोग करता है जैसे `
        `, `

        `, आदि। -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस दस्तावेज़ पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है: ```js @@ -51,9 +51,9 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI](https://material-ui.com/). +जैसे-जैसे आपकी परियोजना बढ़ती है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके विकास को गति देकर बनाए जा सकते हैं। ऊपर दी गई हमारी सामग्री तालिका `` के साथ किसी भी स्क्रीन पर जोड़ी जा सकती है! आप React ओपन सोर्स समुदाय जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा साझा किए गए हजारों कौम्पोनॅन्ट के साथ अपनी परियोजना को शुरू भी कर सकते हैं। -## Defining a component {/*defining-a-component*/} +## Defining a component {/* defining-a-component */} Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_**. Here's what that looks like (you can edit the example below): @@ -61,28 +61,25 @@ Traditionally when creating web pages, web developers marked up their content an ```js export default function Profile() { - return ( - Katherine Johnson - ) + return Katherine Johnson; } ``` ```css -img { height: 200px; } +img { + height: 200px; +} ``` And here's how to build a component: -### Step 1: Export the component {/*step-1-export-the-component*/} +### Step 1: Export the component {/* step-1-export-the-component */} The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) -### Step 2: Define the function {/*step-2-define-the-function*/} +### Step 2: Define the function {/* step-2-define-the-function */} With `function Profile() { }` you define a JavaScript function with the name `Profile`. @@ -92,7 +89,7 @@ React components are regular JavaScript functions, but **their names must start -### Step 3: Add markup {/*step-3-add-markup*/} +### Step 3: Add markup {/* step-3-add-markup */} The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. @@ -118,7 +115,7 @@ Without parentheses, any code on the lines after `return` [will be ignored](http -## Using a component {/*using-a-component*/} +## Using a component {/* using-a-component */} Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: @@ -126,12 +123,7 @@ Now that you've defined your `Profile` component, you can nest it inside other c ```js function Profile() { - return ( - Katherine Johnson - ); + return Katherine Johnson; } export default function Gallery() { @@ -147,17 +139,20 @@ export default function Gallery() { ``` ```css -img { margin: 0 10px 10px 0; height: 90px; } +img { + margin: 0 10px 10px 0; + height: 90px; +} ``` -### What the browser sees {/*what-the-browser-sees*/} +### What the browser sees {/* what-the-browser-sees */} Notice the difference in casing: -* `
        ` is lowercase, so React knows we refer to an HTML tag. -* `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +- `
        ` is lowercase, so React knows we refer to an HTML tag. +- `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: @@ -170,7 +165,7 @@ And `Profile` contains even more HTML: ``. In the end, this is what the b
        ``` -### Nesting and organizing components {/*nesting-and-organizing-components*/} +### Nesting and organizing components {/* nesting-and-organizing-components */} Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports](/learn/importing-and-exporting-components). @@ -182,7 +177,7 @@ Your React application begins at a "root" component. Usually, it is created auto Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. -Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they _also_ generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. Still, many websites only use React to [add "sprinkles of interactivity"](/learn/add-react-to-a-website). They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. @@ -192,20 +187,18 @@ Still, many websites only use React to [add "sprinkles of interactivity"](/learn You've just gotten your first taste of React! Let's recap some key points. -* React lets you create components, **reusable UI elements for your app.** -* In a React app, every piece of UI is a component. -* React components are regular JavaScript functions except: +- React lets you create components, **reusable UI elements for your app.** +- In a React app, every piece of UI is a component. +- React components are regular JavaScript functions except: 1. Their names always begin with a capital letter. 2. They return JSX markup. - - -### Export the component {/*export-the-component*/} +### Export the component {/* export-the-component */} This sandbox doesn't work because the root component is not exported: @@ -213,17 +206,14 @@ This sandbox doesn't work because the root component is not exported: ```js function Profile() { - return ( - Aklilu Lemma - ); + return Aklilu Lemma; } ``` ```css -img { height: 181px; } +img { + height: 181px; +} ``` @@ -238,17 +228,14 @@ Add `export default` before the function definition like so: ```js export default function Profile() { - return ( - Aklilu Lemma - ); + return Aklilu Lemma; } ``` ```css -img { height: 181px; } +img { + height: 181px; +} ``` @@ -257,28 +244,29 @@ You might be wondering why writing `export` alone is not enough to fix this exam -### Fix the return statement {/*fix-the-return-statement*/} +### Fix the return statement {/* fix-the-return-statement */} Something isn't right about this `return` statement. Can you fix it? -You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears _after_ the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. - ```js export default function Profile() { - return - Katsuko Saruhashi; + return; + Katsuko Saruhashi; } ``` ```css -img { height: 180px; } +img { + height: 180px; +} ``` @@ -296,7 +284,9 @@ export default function Profile() { ``` ```css -img { height: 180px; } +img { + height: 180px; +} ``` @@ -307,24 +297,21 @@ Or by wrapping the returned JSX markup in parentheses that open right after `ret ```js export default function Profile() { - return ( - Katsuko Saruhashi - ); + return Katsuko Saruhashi; } ``` ```css -img { height: 180px; } +img { + height: 180px; +} ``` -### Spot the mistake {/*spot-the-mistake*/} +### Spot the mistake {/* spot-the-mistake */} Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) @@ -332,12 +319,7 @@ Something's wrong with how the `Profile` component is declared and used. Can you ```js function profile() { - return ( - Alan L. Hart - ); + return Alan L. Hart; } export default function Gallery() { @@ -353,7 +335,10 @@ export default function Gallery() { ``` ```css -img { margin: 0 10px 10px 0; height: 90px; } +img { + margin: 0 10px 10px 0; + height: 90px; +} ``` @@ -368,12 +353,7 @@ Change `function profile()` to `function Profile()`, and then change every ` - ); + return Alan L. Hart; } export default function Gallery() { @@ -389,14 +369,16 @@ export default function Gallery() { ``` ```css -img { margin: 0 10px 10px 0; } +img { + margin: 0 10px 10px 0; +} ``` -### Your own component {/*your-own-component*/} +### Your own component {/* your-own-component */} Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component thats shows `

        Good job!

        `. Don't forget to export it! @@ -404,7 +386,6 @@ Write a component from scratch. You can give it any valid name and return any ma ```js // Write your component below! - ``` @@ -415,9 +396,7 @@ Write a component from scratch. You can give it any valid name and return any ma ```js export default function Congratulations() { - return ( -

        Good job!

        - ); + return

        Good job!

        ; } ``` @@ -425,4 +404,4 @@ export default function Congratulations() { -         \ No newline at end of file + From 1471ba9c3a97761d9f52f0b2326002a8f63d43f1 Mon Sep 17 00:00:00 2001 From: Akshit Gupta Date: Thu, 17 Mar 2022 03:21:22 +0530 Subject: [PATCH 02/18] defining a component section : done --- beta/src/pages/learn/your-first-component.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index bc7053a26..b10f31bbf 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -53,9 +53,9 @@ HTML टैग्स की तरह ही, आप संपूर्ण प जैसे-जैसे आपकी परियोजना बढ़ती है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके विकास को गति देकर बनाए जा सकते हैं। ऊपर दी गई हमारी सामग्री तालिका `` के साथ किसी भी स्क्रीन पर जोड़ी जा सकती है! आप React ओपन सोर्स समुदाय जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा साझा किए गए हजारों कौम्पोनॅन्ट के साथ अपनी परियोजना को शुरू भी कर सकते हैं। -## Defining a component {/* defining-a-component */} +## एक कौम्पोनॅन्ट को परिभाषित करना {/* defining-a-component */} -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_**. Here's what that looks like (you can edit the example below): +परंपरागत रूप से वेब पेज बनाते समय, वेब डेवलपर्स ने अपनी सामग्री को चिह्नित किया और फिर कुछ जावास्क्रिप्ट पर छिड़क कर बातचीत को जोड़ा। यह तब बहुत अच्छा काम करता था जब वेब पर बातचीत एक अच्छी सुविधा थी। अब यह कई साइटों और सभी ऐप्स के लिए अपेक्षित है। एक ही तकनीक का उपयोग करते हुए React पहले अन्तरक्रियाशीलता रखता है: **एक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसे आप _मार्कअप के साथ छिड़क सकते हैं_**। यह कैसा दिखता है (आप नीचे दिए गए उदाहरण को संपादित कर सकते हैं): @@ -73,33 +73,33 @@ img { -And here's how to build a component: +यहाँ एक कौम्पोनॅन्ट बनाने का तरीका बताया गया है: -### Step 1: Export the component {/* step-1-export-the-component */} +### Step 1: कौम्पोनॅन्ट निर्यात करें {/* step-1-export-the-component */} -The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) +`export default` उपसर्ग एक [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) है (React के लिए विशिष्ट नहीं)। यह आपको फ़ाइल में मुख्य फ़ंक्शन को चिह्नित करने देता है ताकि आप बाद में इसे अन्य फ़ाइलों से आयात कर सकें। ([Importing and Exporting Components](/learn/importing-and-exporting-components) में आयात करने पर अधिक!) -### Step 2: Define the function {/* step-2-define-the-function */} +### Step 2: फ़ंक्शन को परिभाषित करें {/* step-2-define-the-function */} -With `function Profile() { }` you define a JavaScript function with the name `Profile`. +`function Profile() { }` के साथ आप `Profile` नाम से एक जावास्क्रिप्ट फ़ंक्शन को परिभाषित करते हैं। -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +React कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, लेकिन **उनके नाम बड़े अक्षर से शुरू होने चाहिए** या वे काम नहीं करेंगे! -### Step 3: Add markup {/* step-3-add-markup */} +### Step 3: मार्कअप जोड़ें {/* step-3-add-markup */} -The component returns an `` tag with `src` and `alt` attributes. `` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript. +कौम्पोनॅन्ट `src` और `alt` विशेषताओं के साथ एक `` टैग देता है। `` HTML की तरह लिखा गया है, लेकिन वास्तव में यह जावास्क्रिप्ट है! इस सिंटैक्स को [JSX](/learn/writing-markup-with-jsx) कहा जाता है, और यह आपको जावास्क्रिप्ट के अंदर मार्कअप एम्बेड करने देता है। -Return statements can be written all on one line, as in this component: +रिटर्न स्टेटमेंट सभी को एक लाइन पर लिखा जा सकता है, जैसा कि इस कौम्पोनॅन्ट में है: ```js return Katherine Johnson; ``` -But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses like this: +लेकिन अगर आपका मार्कअप `return` कीवर्ड की तरह एक ही लाइन पर नहीं है, तो आपको इसे इस तरह के कोष्ठकों की एक जोड़ी में लपेटना होगा: ```js return ( @@ -111,7 +111,7 @@ return ( -Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +कोष्ठक के बिना, `return` के बाद लाइनों पर कोई भी कोड [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! From afa329c73380e273c25a103a67fb93a90faa9c8e Mon Sep 17 00:00:00 2001 From: Akshit Date: Thu, 14 Apr 2022 19:17:23 +0530 Subject: [PATCH 03/18] page almost finished --- beta/src/pages/learn/your-first-component.md | 60 ++++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index b10f31bbf..ed30eb1c1 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -115,9 +115,9 @@ return ( -## Using a component {/* using-a-component */} +## एक कौम्पोनॅन्ट का उपयोग करना {/* using-a-component */} -Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components: +अब जब आपने अपना `Profile` कौम्पोनॅन्ट परिभाषित कर लिया है, तो आप इसे अन्य कौम्पोनॅन्ट के अंदर घोंसला बना सकते हैं। उदाहरण के लिए, आप एक `Gallery` कौम्पोनॅन्ट निर्यात कर सकते हैं जो एकाधिक `Profile` कौम्पोनॅन्ट का उपयोग करता है: @@ -147,14 +147,14 @@ img { -### What the browser sees {/* what-the-browser-sees */} +### ब्राउज़र क्या देखता है {/* what-the-browser-sees */} -Notice the difference in casing: +आवरण में अंतर पर ध्यान दें: -- `
        ` is lowercase, so React knows we refer to an HTML tag. -- `` starts with a capital `P`, so React knows that we want to use our component called `Profile`. +- `
        ` लोअरकेस है, इसलिए React जानता है कि हम एक HTML टैग को संदर्भित करते हैं। +- `` पूंजी `P` से शुरू होता है, इसलिए React जानता है कि हम `Profile` नामक हमारे कौम्पोनॅन्ट का उपयोग करना चाहते हैं। -And `Profile` contains even more HTML: ``. In the end, this is what the browser sees: +और `Profile` में और भी अधिक HTML शामिल हैं: ``। अंत में, ब्राउज़र यही देखता है: ```html
        @@ -165,42 +165,42 @@ And `Profile` contains even more HTML: ``. In the end, this is what the b
        ``` -### Nesting and organizing components {/* nesting-and-organizing-components */} +### कौम्पोनॅन्ट को घोंसला बनाना और व्यवस्थित करना {/* nesting-and-organizing-components */} -Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports](/learn/importing-and-exporting-components). +कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, इसलिए आप एक ही फ़ाइल में कई कौम्पोनॅन्ट को रख सकते हैं। यह तब सुविधाजनक होता है जब कौम्पोनॅन्ट अपेक्षाकृत छोटे होते हैं या एक दूसरे से कसकर जुड़े होते हैं। यदि इस फ़ाइल में भीड़ हो जाती है, तो आप हमेशा `Profile` को एक अलग फ़ाइल में ले जा सकते हैं। आप इसे जल्दी ही [page about imports](/learn/importing-and-exporting-components) पर सीखेंगे। -Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. +चूंकि `Profile` कौम्पोनॅन्ट `Gallery` के अंदर प्रस्तुत किए जाते हैं—यहां तक कि कई बार!—हम कह सकते हैं कि `Gallery` एक **मूल कौम्पोनॅन्ट है,** प्रत्येक `Profile` को "बच्चे" के रूप में प्रस्तुत करता है। यह React के जादू का हिस्सा है: आप एक कौम्पोनॅन्ट को एक बार परिभाषित कर सकते हैं, और फिर इसे कई जगहों पर और जितनी बार चाहें उपयोग कर सकते हैं। -Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components. +आपका React एप्लिकेशन "रूट" कौम्पोनॅन्ट से शुरू होता है। आमतौर पर, जब आप कोई नया प्रोजेक्ट शुरू करते हैं तो यह अपने आप बन जाता है। उदाहरण के लिए, अगर आप [CodeSandbox](https://codesandbox.io/) या [Create React App](https://create-react-app.dev/) का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट को `src/App.js` में परिभाषित किया गया है। अगर आप [Next.js](https://nextjs.org/) फ्रेमवर्क का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट `page/index.js` में परिभाषित होता है। इन उदाहरणों में, आप मूल कौम्पोनॅन्ट का निर्यात कर रहे हैं। -Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once. +अधिकांश React ऐप्स सभी तरह से कौम्पोनॅन्ट का उपयोग करते हैं। इसका मतलब है कि आप न केवल बटन जैसे पुन: प्रयोज्य टुकड़ों के लिए कौम्पोनॅन्ट का उपयोग करेंगे, बल्कि साइडबार, सूचियों और अंततः पूर्ण पृष्ठों जैसे बड़े टुकड़ों के लिए भी! कौम्पोनॅन्ट UI कोड और मार्कअप को व्यवस्थित करने का एक आसान तरीका है, भले ही उनमें से कुछ का उपयोग केवल एक बार किया गया हो। -Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they _also_ generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads. +Next.js जैसे फ्रेमवर्क इसे एक कदम आगे ले जाते हैं। एक खाली HTML फ़ाइल का उपयोग करने और जावास्क्रिप्ट के साथ पेज को प्रबंधित करने के लिए React को "टेक ओवर" करने देने के बजाय, वे आपके React कौम्पोनॅन्ट से स्वचालित रूप से HTML उत्पन्न करते हैं। यह आपके ऐप को जावास्क्रिप्ट कोड लोड होने से पहले कुछ सामग्री दिखाने की अनुमति देता है। -Still, many websites only use React to [add "sprinkles of interactivity"](/learn/add-react-to-a-website). They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need. +फिर भी, कई वेबसाइटें केवल React का उपयोग करती हैं [add "sprinkles of interactivity"](/learn/add-react-to-a-website)। उनके पास पूरे पृष्ठ के लिए एक के बजाय कई मूल कौम्पोनॅन्ट हैं। आप जितना चाहें उतना उपयोग कर सकते हैं - या जितना कम - React दें। -You've just gotten your first taste of React! Let's recap some key points. +आपने अभी-अभी React का अपना पहला स्वाद प्राप्त किया है! आइए कुछ प्रमुख बिंदुओं का पुनर्कथन करें। -- React lets you create components, **reusable UI elements for your app.** -- In a React app, every piece of UI is a component. -- React components are regular JavaScript functions except: +- React आपको कौम्पोनॅन्ट बनाने देता है, **आपके ऐप के लिए पुन: प्रयोज्य UI तत्व।** +- React ऐप में, UI का हर टुकड़ा एक कौम्पोनॅन्ट है। +- React कौम्पोनॅन्ट नियमित जावास्क्रिप्ट कार्य हैं सिवाय: - 1. Their names always begin with a capital letter. - 2. They return JSX markup. + 1. उनके नाम हमेशा बड़े अक्षर से शुरू होते हैं। + 2. वे JSX मार्कअप लौटाते हैं। -### Export the component {/* export-the-component */} +### कौम्पोनॅन्ट निर्यात करें {/* export-the-component */} -This sandbox doesn't work because the root component is not exported: +यह sandbox काम नहीं करता क्योंकि मूल कौम्पोनॅन्ट निर्यात नहीं किया जाता है: @@ -218,11 +218,11 @@ img { -Try to fix it yourself before looking at the solution! +समाधान देखने से पहले इसे स्वयं ठीक करने का प्रयास करें! -Add `export default` before the function definition like so: +फ़ंक्शन परिभाषा से पहले `export default` जोड़ें जैसे: @@ -240,17 +240,17 @@ img { -You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components](/learn/importing-and-exporting-components). +आप सोच रहे होंगे कि इस उदाहरण को ठीक करने के लिए केवल `export` लिखना ही पर्याप्त क्यों नहीं है। आप [Importing and Exporting Components](/learn/importing-and-exporting-components) में `export` और `export default` के बीच अंतर जान सकते हैं। -### Fix the return statement {/* fix-the-return-statement */} +### रिटर्न स्टेटमेंट को ठीक करें {/* fix-the-return-statement */} -Something isn't right about this `return` statement. Can you fix it? +इस `return` स्टेटमेंट में कुछ गलत है। क्या तुम इसे ठीक कर सकते हो? -You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears _after_ the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +इसे ठीक करने का प्रयास करते समय आपको "Unexpected token" त्रुटि मिल सकती है। उस स्थिति में, जांचें कि अर्धविराम _after_ समापन कोष्ठक प्रकट होता है। `return ( )` के अंदर अर्धविराम छोड़ने से एक त्रुटि होगी। @@ -273,7 +273,7 @@ img { -You can fix this component by moving the return statement to one line like so: +आप रिटर्न स्टेटमेंट को एक लाइन में ले जाकर इस कंपोनेंट को ठीक कर सकते हैं: @@ -291,7 +291,7 @@ img { -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +या लौटाए गए JSX मार्कअप को कोष्ठक में लपेटकर जो `return` के ठीक बाद खुलता है: From 1ffa8460a685ae58bd7a8764e8b897c36576e1ec Mon Sep 17 00:00:00 2001 From: Akshit Date: Sat, 16 Apr 2022 15:39:59 +0530 Subject: [PATCH 04/18] Translation Finished --- beta/src/pages/learn/your-first-component.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index ed30eb1c1..58038e277 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -273,7 +273,7 @@ img { -आप रिटर्न स्टेटमेंट को एक लाइन में ले जाकर इस कंपोनेंट को ठीक कर सकते हैं: +आप रिटर्न स्टेटमेंट को एक लाइन में ले जाकर इस कौम्पोनॅन्ट को ठीक कर सकते हैं: @@ -311,9 +311,9 @@ img { -### Spot the mistake {/* spot-the-mistake */} +### गलती का पता लगाएं {/* spot-the-mistake */} -Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!) +'Profile' कौम्पोनॅन्ट को कैसे घोषित और उपयोग किया जाता है, इसमें कुछ गड़बड़ है। क्या आप गलती का पता लगा सकते हैं? (याद रखने की कोशिश करें कि कैसे React नियमित HTML टैग से कौम्पोनॅन्ट को अलग करता है!) @@ -345,9 +345,9 @@ img { -React component names must start with a capital letter. +React कौम्पोनॅन्ट नाम बड़े अक्षर से शुरू होने चाहिए। -Change `function profile()` to `function Profile()`, and then change every `` to ``: +`function profile ()` को `function Profile ()` में बदलें, और फिर प्रत्येक `` को `` में बदलें: @@ -378,9 +378,9 @@ img { -### Your own component {/* your-own-component */} +### आपका अपना कौम्पोनॅन्ट {/* your-own-component */} -Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component thats shows `

        Good job!

        `. Don't forget to export it! +Scratch से एक कौम्पोनॅन्ट लिखें। आप इसे कोई भी मान्य नाम दे सकते हैं और कोई मार्कअप वापस कर सकते हैं। यदि आपके पास विचार नहीं हैं, तो आप एक `Congratulations` कौम्पोनॅन्ट लिख सकते हैं जो `

        Good job!

        ` दिखाता है। इसे निर्यात करना न भूलें! From b2cede9c95b4e1b4783cb45131cf3c6f4771077f Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:17:53 +0530 Subject: [PATCH 05/18] fix typo 1 --- beta/src/pages/learn/your-first-component.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 58038e277..edf9fdcc5 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -10,9 +10,9 @@ title: आपका पहला कौम्पोनॅन्ट -- एक कौम्पोनॅन्ट क्या है -- React एप्लिकेशन में कौम्पोनॅन्ट क्या भूमिका निभाते हैं -- अपना पहला React कौम्पोनॅन्ट कैसे लिखें +* एक कौम्पोनॅन्ट क्या है +* React एप्लिकेशन में कौम्पोनॅन्ट क्या भूमिका निभाते हैं +* अपना पहला React कौम्पोनॅन्ट कैसे लिखें From bb961c9f29df2a3173d523f503daef3bc574a47b Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:19:07 +0530 Subject: [PATCH 06/18] fix typo 2 --- beta/src/pages/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index edf9fdcc5..be14e4233 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -16,7 +16,7 @@ title: आपका पहला कौम्पोनॅन्ट -## कौम्पोनॅन्ट: UI बिल्डिंग ब्लॉक्स {/* components-ui-building-blocks */} +## कौम्पोनॅन्ट: UI बिल्डिंग ब्लॉक्स {/*components-ui-building-blocks*/} Web पर, HTML हमें `

        ` और `
      1. ` जैसे टैग के अंतर्निहित सेट के साथ समृद्ध संरचित दस्तावेज़ बनाने देता है: From 47c8a001d0fafabe37e714d7adefb6080005335c Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:20:25 +0530 Subject: [PATCH 07/18] fix typo 3 --- beta/src/pages/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index be14e4233..90fe2a1b4 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -18,7 +18,7 @@ title: आपका पहला कौम्पोनॅन्ट ## कौम्पोनॅन्ट: UI बिल्डिंग ब्लॉक्स {/*components-ui-building-blocks*/} -Web पर, HTML हमें `

        ` और `
      2. ` जैसे टैग के अंतर्निहित सेट के साथ समृद्ध संरचित दस्तावेज़ बनाने देता है: +Web पर, HTML हमें `

        ` और `
      3. ` जैसे टैग के अंतर्निहित सेट के साथ रिच स्ट्रक्चर्ड डाक्यूमेंट्स बनाने देता है: ```html
        From 4cfd9926a32067e9644efe2d0163e8569d531311 Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:24:42 +0530 Subject: [PATCH 08/18] fix typo 4 --- beta/src/pages/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 90fe2a1b4..0f1d0553c 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -31,7 +31,7 @@ Web पर, HTML हमें `

        ` और `
      4. ` जैसे टैग के

        5. ``` -यह मार्कअप इस लेख `
        `, इसके शीर्षक `

        `, और एक (संक्षिप्त) सामग्री तालिका को एक क्रमबद्ध सूची `
          ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ संयुक्त, और जावास्क्रिप्ट अन्तरक्रियाशीलता के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे निहित है — UI का हर टुकड़ा जो आप Web पर देखते हैं। +यह मार्कअप इस आर्टिकल `
          `, इसके शीर्षक `

          `, और एक (संक्षिप्त) सटेबल ऑफ़ कंटेंट्सा को एक क्ऑर्डर्ड लिस्टी `
            ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं। React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए पुन: प्रयोज्य `UI` तत्वों में संयोजित करने देता है। ** ऊपर देखी गई सामग्री कोड की तालिका को `` कौम्पोनॅन्ट में बदल दिया जा सकता है आप हर पेज पर रेंडर कर सकते हैं। हुड के तहत, यह अभी भी उसी HTML टैग का उपयोग करता है जैसे `
            `, `

            `, आदि। From 6007eaddc8aa82f61b36c930569b4b71df45f8ac Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:27:58 +0530 Subject: [PATCH 09/18] fix typo 5 --- beta/src/pages/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 0f1d0553c..e021aa174 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -33,7 +33,7 @@ Web पर, HTML हमें `

            ` और `
          1. ` जैसे टैग के यह मार्कअप इस आर्टिकल `
            `, इसके शीर्षक `

            `, और एक (संक्षिप्त) सटेबल ऑफ़ कंटेंट्सा को एक क्ऑर्डर्ड लिस्टी `
              ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं। -React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए पुन: प्रयोज्य `UI` तत्वों में संयोजित करने देता है। ** ऊपर देखी गई सामग्री कोड की तालिका को `` कौम्पोनॅन्ट में बदल दिया जा सकता है आप हर पेज पर रेंडर कर सकते हैं। हुड के तहत, यह अभी भी उसी HTML टैग का उपयोग करता है जैसे `
              `, `

              `, आदि। +React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स** में संयोजित करने देता है। ऊपर देखी गई सटेबल ऑफ़ कंटेंट्स कोडा को `` कौम्पोनॅन्ट में बदल दिया जा सकता है आप हर पेज पर रेंडर कर सकते हैं। हुड के तहत, यह अभी भी उसी HTML टैग का उपयोग करता है जैसे `
              `, `

              `, आदि। HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस दस्तावेज़ पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है: From 5f555f5df732938b504d15ede20f5a93d3ee4550 Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 12 May 2022 18:39:32 +0530 Subject: [PATCH 10/18] fix typo finished --- beta/src/pages/learn/your-first-component.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index e021aa174..9d5f8cf11 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -33,9 +33,9 @@ Web पर, HTML हमें `

              ` और `
            1. ` जैसे टैग के यह मार्कअप इस आर्टिकल `
              `, इसके शीर्षक `

              `, और एक (संक्षिप्त) सटेबल ऑफ़ कंटेंट्सा को एक क्ऑर्डर्ड लिस्टी `
                ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं। -React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स** में संयोजित करने देता है। ऊपर देखी गई सटेबल ऑफ़ कंटेंट्स कोडा को `` कौम्पोनॅन्ट में बदल दिया जा सकता है आप हर पेज पर रेंडर कर सकते हैं। हुड के तहत, यह अभी भी उसी HTML टैग का उपयोग करता है जैसे `
                `, `

                `, आदि। +React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स** में संयोजित करने देता है। ऊपर देखी गई सटेबल ऑफ़ कंटेंट्स कोडा को `` कौम्पोनॅन्ट में बदल दिया जा सकता है जो आप हर पेज पर रेंडर कर सकते हैं। अंडर हुड, यह अभी भी HTML टैग जैसे `
                `, `

                `, आदि का उपयोग करता है। -HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस दस्तावेज़ पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है: +HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस डॉक्यूमेंटेशन पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है: ```js @@ -51,7 +51,7 @@ HTML टैग्स की तरह ही, आप संपूर्ण प ``` -जैसे-जैसे आपकी परियोजना बढ़ती है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके विकास को गति देकर बनाए जा सकते हैं। ऊपर दी गई हमारी सामग्री तालिका `` के साथ किसी भी स्क्रीन पर जोड़ी जा सकती है! आप React ओपन सोर्स समुदाय जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा साझा किए गए हजारों कौम्पोनॅन्ट के साथ अपनी परियोजना को शुरू भी कर सकते हैं। +जैसे-जैसे आपका प्रोजेक्ट बढ़ताी है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके डेवलपमेंट की गति को बढ़ाते हैं। ऊपर ददिए गए हमारे टेबल ऑफ़ कंटेंट्सा `` के साथ किसी भी स्क्रीन पर ऐड किया जा सकता है! आप React ओपन सोर्स कम्युनिटी जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा शेयर किए गए हजारों कौम्पोनॅन्ट के साथ अपने प्रोजेक्टा को एक शुरुआत दे सकते हैं। ## एक कौम्पोनॅन्ट को परिभाषित करना {/* defining-a-component */} From 1c254a691c949517b3c0c0ac3de1ce4de5b6cac8 Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Sat, 9 Jul 2022 15:15:14 +0530 Subject: [PATCH 11/18] fix typos --- beta/src/pages/learn/your-first-component.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 9cc41781c..436252a3a 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -31,9 +31,9 @@ Web पर, HTML हमें `

                ` और `
              1. ` जैसे टैग के

                2. ``` -यह मार्कअप इस आर्टिकल `
                `, इसके शीर्षक `

                `, और एक (संक्षिप्त) सटेबल ऑफ़ कंटेंट्सा को एक क्ऑर्डर्ड लिस्टी `
                  ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं। +यह मार्कअप इस आर्टिकल `
                  `, इसके शीर्षक `

                  `, और एक (संक्षिप्त) टेबल ऑफ़ कंटेंट्सा को एक ऑर्डर्ड लिस्टी `
                    ` के रूप में दर्शाता है। इस तरह का मार्कअप, स्टाइल के लिए CSS के साथ मिला के, और जावास्क्रिप्ट इंटरएक्टिविटी के लिए, प्रत्येक साइडबार, अवतार, मोडल, ड्रॉपडाउन के पीछे रहता है — UI का हर टुकड़ा जो आप Web पर देखते हैं। -React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स** में संयोजित करने देता है। ऊपर देखी गई सटेबल ऑफ़ कंटेंट्स कोडा को `` कौम्पोनॅन्ट में बदल दिया जा सकता है जो आप हर पेज पर रेंडर कर सकते हैं। अंडर हुड, यह अभी भी HTML टैग जैसे `
                    `, `

                    `, आदि का उपयोग करता है। +React आपको अपने मार्कअप, CSS और जावास्क्रिप्ट को कस्टम "कौम्पोनॅन्ट," **आपके एप्प के लिए री-यूज़ब्ले UI एलिमेंट्स** में संयोजित करने देता है। ऊपर देखी गई टेबल ऑफ़ कंटेंट्स कोड को `` कौम्पोनॅन्ट में बदल दिया जा सकता है जो आप हर पेज पर रेंडर कर सकते हैं। अंडर हुड, यह अभी भी HTML टैग जैसे `
                    `, `

                    `, आदि का उपयोग करता है। HTML टैग्स की तरह ही, आप संपूर्ण पेज को डिज़ाइन करने के लिए कौम्पोनॅन्ट को कंपोज़, ऑर्डर और नेस्ट कर सकते हैं। उदाहरण के लिए, आप जिस डॉक्यूमेंटेशन पेज को पढ़ रहे हैं वह React कौम्पोनॅन्ट से बना है: @@ -51,7 +51,7 @@ HTML टैग्स की तरह ही, आप संपूर्ण प ``` -जैसे-जैसे आपका प्रोजेक्ट बढ़ताी है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके डेवलपमेंट की गति को बढ़ाते हैं। ऊपर ददिए गए हमारे टेबल ऑफ़ कंटेंट्सा `` के साथ किसी भी स्क्रीन पर ऐड किया जा सकता है! आप React ओपन सोर्स कम्युनिटी जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा शेयर किए गए हजारों कौम्पोनॅन्ट के साथ अपने प्रोजेक्टा को एक शुरुआत दे सकते हैं। +जैसे-जैसे आपका प्रोजेक्ट बढ़ताी है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके डेवलपमेंट की गति को बढ़ाते हैं। ऊपर दिए गए हमारे टेबल ऑफ़ कंटेंट्स `` के साथ किसी भी स्क्रीन पर ऐड किया जा सकता है! आप React ओपन सोर्स कम्युनिटी जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा शेयर किए गए हजारों कौम्पोनॅन्ट के साथ अपने प्रोजेक्टा को एक शुरुआत दे सकते हैं। ## एक कौम्पोनॅन्ट को परिभाषित करना {/* defining-a-component */} From 8229e5930bf914557083758cd29fddfe9404780d Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Sat, 13 Aug 2022 17:19:13 +0530 Subject: [PATCH 12/18] fixed typos --- beta/src/pages/learn/your-first-component.md | 25 +++++++++++--------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 436252a3a..c16536551 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -53,33 +53,36 @@ HTML टैग्स की तरह ही, आप संपूर्ण प जैसे-जैसे आपका प्रोजेक्ट बढ़ताी है, आप देखेंगे कि आपके कई डिज़ाइन आपके द्वारा पहले से लिखे गए कौम्पोनॅन्ट का पुन: उपयोग करके, आपके डेवलपमेंट की गति को बढ़ाते हैं। ऊपर दिए गए हमारे टेबल ऑफ़ कंटेंट्स `` के साथ किसी भी स्क्रीन पर ऐड किया जा सकता है! आप React ओपन सोर्स कम्युनिटी जैसे [Chakra UI](https://chakra-ui.com/) और [Material UI](https://material-ui.com/) द्वारा शेयर किए गए हजारों कौम्पोनॅन्ट के साथ अपने प्रोजेक्टा को एक शुरुआत दे सकते हैं। -## एक कौम्पोनॅन्ट को परिभाषित करना {/* defining-a-component */} +## एक कौम्पोनॅन्ट को डिफाइन करना {/*defining-a-component*/} -परंपरागत रूप से वेब पेज बनाते समय, वेब डेवलपर्स ने अपनी सामग्री को चिह्नित किया और फिर कुछ जावास्क्रिप्ट पर छिड़क कर बातचीत को जोड़ा। यह तब बहुत अच्छा काम करता था जब वेब पर बातचीत एक अच्छी सुविधा थी। अब यह कई साइटों और सभी ऐप्स के लिए अपेक्षित है। एक ही तकनीक का उपयोग करते हुए React पहले अन्तरक्रियाशीलता रखता है: **एक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसे आप _मार्कअप के साथ छिड़क सकते हैं_**। यह कैसा दिखता है (आप नीचे दिए गए उदाहरण को संपादित कर सकते हैं): +परंपरागत रूप से वेब पेज बनाते समय, वेब डेवलपर्स अपने कंटेंट को मार्कअप करते हैंा और फिर कुछ जावास्क्रिप्ट पर ऐड करके इंटरेक्शन ऐड करते हैं। यह तब बहुत अच्छा काम करता था जब वेब पर इंटरेक्शन एक अच्छी सुविधा थी। अब यह कई साइटों और सभी ऐप्स के लिए एक्सपेक्टेड है। React एक ही टेक्नोलॉजी का इस्तेमाल करते हुए इंटरएक्टिविटी को पहले रखता है: **एक React कौम्पोनॅन्ट एक जावास्क्रिप्ट फ़ंक्शन है जिसे आप _मार्कअप के साथ स्प्रिंकल सकते हैं_**। यह ऐसा दिखता है (आप नीचे दिए गए उदाहरण को एडिट कर सकते हैं): ```js export default function Profile() { - return Katherine Johnson; + return ( + Katherine Johnson + ); } ``` ```css -img { - height: 200px; -} +img { height: 200px; } ``` -यहाँ एक कौम्पोनॅन्ट बनाने का तरीका बताया गया है: + और यहाँ एक कौम्पोनॅन्ट बनाने का तरीका बताया गया है: -### Step 1: कौम्पोनॅन्ट निर्यात करें {/* step-1-export-the-component */} +### Step 1: कौम्पोनॅन्ट एक्सपोर्ट करें {/*step-1-export-the-component*/} -`export default` उपसर्ग एक [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) है (React के लिए विशिष्ट नहीं)। यह आपको फ़ाइल में मुख्य फ़ंक्शन को चिह्नित करने देता है ताकि आप बाद में इसे अन्य फ़ाइलों से आयात कर सकें। ([Importing and Exporting Components](/learn/importing-and-exporting-components) में आयात करने पर अधिक!) +`export default` प्रीफिक्स एक [स्टैण्डर्ड जावास्क्रिप्ट सिंटेक्स](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) है (React के लिए स्पेसिफिक नहीं)। यह आपको फ़ाइल में मैन फ़ंक्शन को मार्क करने देता है ताकि आप बाद में इसे अन्य फ़ाइलों से इम्पोर्ट कर सकें। ([इम्पॉर्टिंग एंड एक्सपोर्टिंग कौम्पोनॅन्टस](/learn/importing-and-exporting-components) में इम्पॉर्टिंग के बारे में और अधिक जानें!) -### Step 2: फ़ंक्शन को परिभाषित करें {/* step-2-define-the-function */} +### Step 2: फ़ंक्शन को परिभाषित करें {/*step-2-define-the-function*/} `function Profile() { }` के साथ आप `Profile` नाम से एक जावास्क्रिप्ट फ़ंक्शन को परिभाषित करते हैं। @@ -89,7 +92,7 @@ React कौम्पोनॅन्ट नियमित जावास्क -### Step 3: मार्कअप जोड़ें {/* step-3-add-markup */} +### Step 3: मार्कअप जोड़ें {/*step-3-add-markup*/} कौम्पोनॅन्ट `src` और `alt` विशेषताओं के साथ एक `` टैग देता है। `` HTML की तरह लिखा गया है, लेकिन वास्तव में यह जावास्क्रिप्ट है! इस सिंटैक्स को [JSX](/learn/writing-markup-with-jsx) कहा जाता है, और यह आपको जावास्क्रिप्ट के अंदर मार्कअप एम्बेड करने देता है। From 1a03ebc0ad2364a6eb45f9844c1f4873e2bb592d Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Fri, 9 Sep 2022 10:15:05 +0530 Subject: [PATCH 13/18] fixed typos --- beta/src/pages/learn/your-first-component.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index c16536551..c90871ecb 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -82,19 +82,19 @@ img { height: 200px; } `export default` प्रीफिक्स एक [स्टैण्डर्ड जावास्क्रिप्ट सिंटेक्स](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) है (React के लिए स्पेसिफिक नहीं)। यह आपको फ़ाइल में मैन फ़ंक्शन को मार्क करने देता है ताकि आप बाद में इसे अन्य फ़ाइलों से इम्पोर्ट कर सकें। ([इम्पॉर्टिंग एंड एक्सपोर्टिंग कौम्पोनॅन्टस](/learn/importing-and-exporting-components) में इम्पॉर्टिंग के बारे में और अधिक जानें!) -### Step 2: फ़ंक्शन को परिभाषित करें {/*step-2-define-the-function*/} +### Step 2: फ़ंक्शन को डिफाइन करें {/*step-2-define-the-function*/} -`function Profile() { }` के साथ आप `Profile` नाम से एक जावास्क्रिप्ट फ़ंक्शन को परिभाषित करते हैं। +`function Profile() { }` के साथ आप `Profile` नाम से एक जावास्क्रिप्ट फ़ंक्शन को डिफाइन करते हैं। -React कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, लेकिन **उनके नाम बड़े अक्षर से शुरू होने चाहिए** या वे काम नहीं करेंगे! +React कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, लेकिन **उनके नाम बड़े अक्षर से शुरू होने चाहिए** नहीं तो वे काम नहीं करेंगे! -### Step 3: मार्कअप जोड़ें {/*step-3-add-markup*/} +### Step 3: मार्कअप ऐड करें {/*step-3-add-markup*/} -कौम्पोनॅन्ट `src` और `alt` विशेषताओं के साथ एक `` टैग देता है। `` HTML की तरह लिखा गया है, लेकिन वास्तव में यह जावास्क्रिप्ट है! इस सिंटैक्स को [JSX](/learn/writing-markup-with-jsx) कहा जाता है, और यह आपको जावास्क्रिप्ट के अंदर मार्कअप एम्बेड करने देता है। +कौम्पोनॅन्ट `src` और `alt` ऐट्रिब्यूट्स के साथ एक `` रिटर्न करता है। `` HTML की तरह लिखा गया है, लेकिन वास्तव में यह जावास्क्रिप्ट है! इस सिंटैक्स को [JSX](/learn/writing-markup-with-jsx) कहा जाता है, और यह आपको जावास्क्रिप्ट के अंदर मार्कअप एम्बेड करने देता है। रिटर्न स्टेटमेंट सभी को एक लाइन पर लिखा जा सकता है, जैसा कि इस कौम्पोनॅन्ट में है: @@ -102,7 +102,7 @@ React कौम्पोनॅन्ट नियमित जावास्क return Katherine Johnson; ``` -लेकिन अगर आपका मार्कअप `return` कीवर्ड की तरह एक ही लाइन पर नहीं है, तो आपको इसे इस तरह के कोष्ठकों की एक जोड़ी में लपेटना होगा: +लेकिन अगर आपका मार्कअप `return` कीवर्ड की तरह एक ही लाइन पर नहीं है, तो आपको इसे इस तरह के ब्रैकेट्स की एक जोड़ी में लपेटना होगा: ```js return ( @@ -114,7 +114,7 @@ return ( -कोष्ठक के बिना, `return` के बाद लाइनों पर कोई भी कोड [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! +ब्रैकेट के बिना, `return` के बाद लाइनों पर लिखा कोई भी कोड [इग्नोर हो जाएगा](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! From e953d9fa749ebbc5e12ca9b98ff9805069dabb96 Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Sun, 4 Dec 2022 15:22:26 +0530 Subject: [PATCH 14/18] typos fixed --- beta/src/pages/learn/your-first-component.md | 32 +++++++++++--------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index c90871ecb..f9035d075 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -118,15 +118,20 @@ return ( -## एक कौम्पोनॅन्ट का उपयोग करना {/* using-a-component */} +## एक कौम्पोनॅन्ट का उपयोग करना {/*using-a-component*/} -अब जब आपने अपना `Profile` कौम्पोनॅन्ट परिभाषित कर लिया है, तो आप इसे अन्य कौम्पोनॅन्ट के अंदर घोंसला बना सकते हैं। उदाहरण के लिए, आप एक `Gallery` कौम्पोनॅन्ट निर्यात कर सकते हैं जो एकाधिक `Profile` कौम्पोनॅन्ट का उपयोग करता है: +अब जब आपने अपना `Profile` कौम्पोनॅन्ट डिफाइन कर लिया है, तो आप इसे अन्य कौम्पोनॅन्ट के अंदर इस्तेमाला सकते हैं। उदाहरण के लिए, आप एक `Gallery` कौम्पोनॅन्ट एक्सपोर्ट कर सकते हैं जो एक से ज़्यादा `Profile` कौम्पोनॅन्ट का उपयोग करता है: ```js function Profile() { - return Katherine Johnson; + return ( + Katherine Johnson; + ) } export default function Gallery() { @@ -143,19 +148,18 @@ export default function Gallery() { ```css img { - margin: 0 10px 10px 0; - height: 90px; + margin: 0 10px 10px 0; height: 90px; } ``` -### ब्राउज़र क्या देखता है {/* what-the-browser-sees */} +### ब्राउज़र क्या देखता है {/*what-the-browser-sees*/} -आवरण में अंतर पर ध्यान दें: +केसिंग में अंतर पर ध्यान दें: -- `
                    ` लोअरकेस है, इसलिए React जानता है कि हम एक HTML टैग को संदर्भित करते हैं। -- `` पूंजी `P` से शुरू होता है, इसलिए React जानता है कि हम `Profile` नामक हमारे कौम्पोनॅन्ट का उपयोग करना चाहते हैं। +* `
                    ` लोअरकेस है, इसलिए React जानता है कि हम एक HTML टैग को रेफेर कर रहे हैं। +* `` कैपिटल `P` से शुरू होता है, इसलिए React जानता है कि हम `Profile` नामक हमारे कौम्पोनॅन्ट का उपयोग करना चाहते हैं। और `Profile` में और भी अधिक HTML शामिल हैं: ``। अंत में, ब्राउज़र यही देखता है: @@ -168,7 +172,7 @@ img {
                    ``` -### कौम्पोनॅन्ट को घोंसला बनाना और व्यवस्थित करना {/* nesting-and-organizing-components */} +### कौम्पोनॅन्ट को घोंसला बनाना और व्यवस्थित करना {/*nesting-and-organizing-components*/} कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, इसलिए आप एक ही फ़ाइल में कई कौम्पोनॅन्ट को रख सकते हैं। यह तब सुविधाजनक होता है जब कौम्पोनॅन्ट अपेक्षाकृत छोटे होते हैं या एक दूसरे से कसकर जुड़े होते हैं। यदि इस फ़ाइल में भीड़ हो जाती है, तो आप हमेशा `Profile` को एक अलग फ़ाइल में ले जा सकते हैं। आप इसे जल्दी ही [page about imports](/learn/importing-and-exporting-components) पर सीखेंगे। @@ -201,7 +205,7 @@ Next.js जैसे फ्रेमवर्क इसे एक कदम आ -### कौम्पोनॅन्ट निर्यात करें {/* export-the-component */} +### कौम्पोनॅन्ट निर्यात करें {/*export-the-component*/} यह sandbox काम नहीं करता क्योंकि मूल कौम्पोनॅन्ट निर्यात नहीं किया जाता है: @@ -247,7 +251,7 @@ img { -### रिटर्न स्टेटमेंट को ठीक करें {/* fix-the-return-statement */} +### रिटर्न स्टेटमेंट को ठीक करें {/*fix-the-return-statement*/} इस `return` स्टेटमेंट में कुछ गलत है। क्या तुम इसे ठीक कर सकते हो? @@ -314,7 +318,7 @@ img { -### गलती का पता लगाएं {/* spot-the-mistake */} +### गलती का पता लगाएं {/*spot-the-mistake*/} 'Profile' कौम्पोनॅन्ट को कैसे घोषित और उपयोग किया जाता है, इसमें कुछ गड़बड़ है। क्या आप गलती का पता लगा सकते हैं? (याद रखने की कोशिश करें कि कैसे React नियमित HTML टैग से कौम्पोनॅन्ट को अलग करता है!) @@ -381,7 +385,7 @@ img { -### आपका अपना कौम्पोनॅन्ट {/* your-own-component */} +### आपका अपना कौम्पोनॅन्ट {/*your-own-component*/} Scratch से एक कौम्पोनॅन्ट लिखें। आप इसे कोई भी मान्य नाम दे सकते हैं और कोई मार्कअप वापस कर सकते हैं। यदि आपके पास विचार नहीं हैं, तो आप एक `Congratulations` कौम्पोनॅन्ट लिख सकते हैं जो `

                    Good job!

                    ` दिखाता है। इसे निर्यात करना न भूलें! From 428d1948b5fb89cc06541928466155ca478e4b2a Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Sun, 4 Dec 2022 18:21:12 +0530 Subject: [PATCH 15/18] typo fixed --- beta/src/pages/learn/your-first-component.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index f9035d075..2537d41bd 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -128,8 +128,8 @@ return ( function Profile() { return ( Katherine Johnson; ) } @@ -147,9 +147,7 @@ export default function Gallery() { ``` ```css -img { - margin: 0 10px 10px 0; height: 90px; -} +img { margin: 0 10px 10px 0; height: 90px; } ``` From 80c734f8a34a728dd7fac1f62d7e9a010d1969eb Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Tue, 6 Dec 2022 19:30:17 +0530 Subject: [PATCH 16/18] typo fixed --- beta/src/pages/learn/your-first-component.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 2537d41bd..953336471 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -130,8 +130,8 @@ function Profile() { Katherine Johnson; - ) + /> + ); } export default function Gallery() { From 3a968cafab647075eddd0b676b322310058e3b9a Mon Sep 17 00:00:00 2001 From: Akshit <76731022+Akshit1025@users.noreply.github.com> Date: Thu, 8 Dec 2022 14:11:40 +0530 Subject: [PATCH 17/18] All the typos have been fixed --- beta/src/pages/learn/your-first-component.md | 118 ++++++++++--------- 1 file changed, 65 insertions(+), 53 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 953336471..36e241042 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -170,77 +170,83 @@ img { margin: 0 10px 10px 0; height: 90px; }
                    ``` -### कौम्पोनॅन्ट को घोंसला बनाना और व्यवस्थित करना {/*nesting-and-organizing-components*/} +### कौम्पोनॅन्टस को नेस्टेड और व्यवस्थित बनाना {/*nesting-and-organizing-components*/} -कौम्पोनॅन्ट नियमित जावास्क्रिप्ट फ़ंक्शन हैं, इसलिए आप एक ही फ़ाइल में कई कौम्पोनॅन्ट को रख सकते हैं। यह तब सुविधाजनक होता है जब कौम्पोनॅन्ट अपेक्षाकृत छोटे होते हैं या एक दूसरे से कसकर जुड़े होते हैं। यदि इस फ़ाइल में भीड़ हो जाती है, तो आप हमेशा `Profile` को एक अलग फ़ाइल में ले जा सकते हैं। आप इसे जल्दी ही [page about imports](/learn/importing-and-exporting-components) पर सीखेंगे। +कौम्पोनॅन्ट नार्मल जावास्क्रिप्ट फ़ंक्शन हैं, इसलिए आप एक ही फ़ाइल में कई कौम्पोनॅन्टस को रख सकते हैं। यह तब सुविधाजनक होता है जब कौम्पोनॅन्टस रिलेटिव्ली छोटे होते हैं या एक दूसरे से टाइटली जुड़े होते हैं। यदि यह फ़ाइल क्राउडेड हो जाती है, तो आप हमेशा `Profile` को एक अलग फ़ाइल में ले जा सकते हैं। आप इसे जल्दी ही [इम्पोर्ट्स के बारे में पेज](/learn/importing-and-exporting-components) पर सीखेंगे। -चूंकि `Profile` कौम्पोनॅन्ट `Gallery` के अंदर प्रस्तुत किए जाते हैं—यहां तक कि कई बार!—हम कह सकते हैं कि `Gallery` एक **मूल कौम्पोनॅन्ट है,** प्रत्येक `Profile` को "बच्चे" के रूप में प्रस्तुत करता है। यह React के जादू का हिस्सा है: आप एक कौम्पोनॅन्ट को एक बार परिभाषित कर सकते हैं, और फिर इसे कई जगहों पर और जितनी बार चाहें उपयोग कर सकते हैं। +चूंकि `Profile` कौम्पोनॅन्टस `Gallery` के अंदर रेंडर किए जाते हैं—यहां तक कि कई बार!—हम कह सकते हैं कि `Gallery` एक **पैरेंट कौम्पोनॅन्ट है,** प्रत्येक `Profile` को "चाइल्ड" के रूप में रेंडर करता है। यह React के जादू का हिस्सा है: आप एक कौम्पोनॅन्ट को एक बार डिफाइन कर सकते हैं, और फिर इसे कई जगहों पर और जितनी बार चाहें उपयोग कर सकते हैं। -आपका React एप्लिकेशन "रूट" कौम्पोनॅन्ट से शुरू होता है। आमतौर पर, जब आप कोई नया प्रोजेक्ट शुरू करते हैं तो यह अपने आप बन जाता है। उदाहरण के लिए, अगर आप [CodeSandbox](https://codesandbox.io/) या [Create React App](https://create-react-app.dev/) का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट को `src/App.js` में परिभाषित किया गया है। अगर आप [Next.js](https://nextjs.org/) फ्रेमवर्क का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट `page/index.js` में परिभाषित होता है। इन उदाहरणों में, आप मूल कौम्पोनॅन्ट का निर्यात कर रहे हैं। +आपकी React एप्लिकेशन "रूट" कौम्पोनॅन्ट से शुरू होती है। आमतौर पर, जब आप कोई नया प्रोजेक्ट शुरू करते हैं तो यह अपने आप बन जाता है। उदाहरण के लिए, अगर आप [CodeSandbox](https://codesandbox.io/) या [Create React App](https://create-react-app.dev/) का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट को `src/App.js` में डिफाइन होगा। अगर आप [Next.js](https://nextjs.org/) फ्रेमवर्क का इस्तेमाल करते हैं, तो रूट कौम्पोनॅन्ट `page/index.js` में डिफाइन होता है। इन उदाहरणों में, आप रुट कौम्पोनॅन्टस का एक्सपोर्ट कर रहे हैं। -अधिकांश React ऐप्स सभी तरह से कौम्पोनॅन्ट का उपयोग करते हैं। इसका मतलब है कि आप न केवल बटन जैसे पुन: प्रयोज्य टुकड़ों के लिए कौम्पोनॅन्ट का उपयोग करेंगे, बल्कि साइडबार, सूचियों और अंततः पूर्ण पृष्ठों जैसे बड़े टुकड़ों के लिए भी! कौम्पोनॅन्ट UI कोड और मार्कअप को व्यवस्थित करने का एक आसान तरीका है, भले ही उनमें से कुछ का उपयोग केवल एक बार किया गया हो। +अधिकांश React ऐप्स सभी तरह से कौम्पोनॅन्ट का उपयोग करते हैं। इसका मतलब है कि आप न केवल बटन जैसे रीयुज़बल कौम्पोनॅन्टस का उपयोग करेंगे, बल्कि साइडबार, लिस्ट्स और अंततः पूरे पेजेज़ जैसे बड़े पीसेज का भी! कौम्पोनॅन्टस UI कोड और मार्कअप को व्यवस्थित करने का एक आसान तरीका है, भले ही उनमें से कुछ का उपयोग केवल एक बार किया गया हो। -Next.js जैसे फ्रेमवर्क इसे एक कदम आगे ले जाते हैं। एक खाली HTML फ़ाइल का उपयोग करने और जावास्क्रिप्ट के साथ पेज को प्रबंधित करने के लिए React को "टेक ओवर" करने देने के बजाय, वे आपके React कौम्पोनॅन्ट से स्वचालित रूप से HTML उत्पन्न करते हैं। यह आपके ऐप को जावास्क्रिप्ट कोड लोड होने से पहले कुछ सामग्री दिखाने की अनुमति देता है। +Next.js जैसे फ्रेमवर्क इससे एक कदम आगे ले जाते हैं। एक खाली HTML फ़ाइल का उपयोग करने और जावास्क्रिप्ट के साथ पेज को मैनेज करने के लिए React को "टेक ओवर" करने देने के बजाय, वे आपके React कौम्पोनॅन्ट से ऑटोमेटिकली HTML उत्पन्न करता हैं। यह आपके ऐप को जावास्क्रिप्ट कोड लोड होने से पहले कुछ कंटेंट दिखाने देता है। -फिर भी, कई वेबसाइटें केवल React का उपयोग करती हैं [add "sprinkles of interactivity"](/learn/add-react-to-a-website)। उनके पास पूरे पृष्ठ के लिए एक के बजाय कई मूल कौम्पोनॅन्ट हैं। आप जितना चाहें उतना उपयोग कर सकते हैं - या जितना कम - React दें। +फिर भी, कई वेबसाइटें ["स्प्रिंकल्स ऑफ़ इंटरएक्टिविटी" डालने के लिए](/learn/add-react-to-a-website) केवल React का उपयोग करती हैं। उनके पास पूरे पेज के लिए एक के बजाय कई रुट कौम्पोनॅन्टस हैं। आप जितना चाहें उतना - ज़्यादा या कम React - उपयोग कर सकते हैं। -आपने अभी-अभी React का अपना पहला स्वाद प्राप्त किया है! आइए कुछ प्रमुख बिंदुओं का पुनर्कथन करें। +आपने अभी-अभी React का अपना पहला स्वाद प्राप्त किया है! आइए कुछ प्रमुख बिंदुओं का रिकैप करें। -- React आपको कौम्पोनॅन्ट बनाने देता है, **आपके ऐप के लिए पुन: प्रयोज्य UI तत्व।** +- React आपको कौम्पोनॅन्ट बनाने देता है, **आपके ऐप के लिए री-यूज़ब्ले UI एलिमेंट्स।** - React ऐप में, UI का हर टुकड़ा एक कौम्पोनॅन्ट है। -- React कौम्पोनॅन्ट नियमित जावास्क्रिप्ट कार्य हैं सिवाय: +- React कौम्पोनॅन्ट रेगुलर जावास्क्रिप्ट फंक्शन्स हैं सिवाय: - 1. उनके नाम हमेशा बड़े अक्षर से शुरू होते हैं। - 2. वे JSX मार्कअप लौटाते हैं। + 1. उनके नाम हमेशा कैपिटल अक्षर से शुरू होते हैं। + 2. वे JSX मार्कअप रिटर्न करते हैं। -### कौम्पोनॅन्ट निर्यात करें {/*export-the-component*/} +### कौम्पोनॅन्ट एक्सपोर्ट करें {/*export-the-component*/} -यह sandbox काम नहीं करता क्योंकि मूल कौम्पोनॅन्ट निर्यात नहीं किया जाता है: +यह सैंडबॉक्स काम नहीं करता क्योंकि रुट कौम्पोनॅन्ट एक्सपोर्ट नहीं किया जाता है: ```js function Profile() { - return Aklilu Lemma; + return ( + Aklilu Lemma + ); } ``` ```css -img { - height: 181px; -} +img { height: 181px; } ``` -समाधान देखने से पहले इसे स्वयं ठीक करने का प्रयास करें! +सलूशन देखने से पहले इसे स्वयं ठीक करने का प्रयास करें! -फ़ंक्शन परिभाषा से पहले `export default` जोड़ें जैसे: +फ़ंक्शन डेफिनिशन से पहले `export default` ऐड करें जैसे: ```js export default function Profile() { - return Aklilu Lemma; + return ( + Aklilu Lemma + ); } ``` ```css -img { - height: 181px; -} +img { height: 181px; } ``` @@ -251,11 +257,11 @@ img { ### रिटर्न स्टेटमेंट को ठीक करें {/*fix-the-return-statement*/} -इस `return` स्टेटमेंट में कुछ गलत है। क्या तुम इसे ठीक कर सकते हो? +इस `return` स्टेटमेंट में कुछ गलत है। क्या आप इसे ठीक कर सकते हैं? -इसे ठीक करने का प्रयास करते समय आपको "Unexpected token" त्रुटि मिल सकती है। उस स्थिति में, जांचें कि अर्धविराम _after_ समापन कोष्ठक प्रकट होता है। `return ( )` के अंदर अर्धविराम छोड़ने से एक त्रुटि होगी। +इसे ठीक करने का प्रयास करते समय आपको "Unexpected token" एरर मिल सकता है। उस स्थिति में, जांचें कि सेमीकोलन क्लोजिंग परन्थेसिस *के बाद* दीखता है। `return ( )` के अंदर सेमीकोलन छोड़ने से एक एरर आएगा। @@ -263,22 +269,20 @@ img { ```js export default function Profile() { - return; + return Katsuko Saruhashi; } ``` ```css -img { - height: 180px; -} +img { height: 180px; } ``` -आप रिटर्न स्टेटमेंट को एक लाइन में ले जाकर इस कौम्पोनॅन्ट को ठीक कर सकते हैं: +आप रिटर्न स्टेटमेंट को एक लाइन में ले कर-कर इस कौम्पोनॅन्ट को ठीक कर सकते हैं: @@ -289,27 +293,28 @@ export default function Profile() { ``` ```css -img { - height: 180px; -} +img { height: 180px; } ``` -या लौटाए गए JSX मार्कअप को कोष्ठक में लपेटकर जो `return` के ठीक बाद खुलता है: +या रेतुर्न किये गए JSX मार्कअप को परन्थेसिस में लपेटकर जो `return` के ठीक बाद खुलता है: ```js export default function Profile() { - return Katsuko Saruhashi; + return ( + Katsuko Saruhashi + ); } ``` ```css -img { - height: 180px; -} +img { height: 180px; } ``` @@ -318,13 +323,18 @@ img { ### गलती का पता लगाएं {/*spot-the-mistake*/} -'Profile' कौम्पोनॅन्ट को कैसे घोषित और उपयोग किया जाता है, इसमें कुछ गड़बड़ है। क्या आप गलती का पता लगा सकते हैं? (याद रखने की कोशिश करें कि कैसे React नियमित HTML टैग से कौम्पोनॅन्ट को अलग करता है!) +`Profile` कौम्पोनॅन्ट को कैसे डिक्लेअर और उपयोग किया जाता है, इसमें कुछ गड़बड़ है। क्या आप गलती का पता लगा सकते हैं? (याद रखने की कोशिश करें कि कैसे React रेगुलर HTML टैग से कौम्पोनॅन्टस को अलग करता है!) ```js function profile() { - return Alan L. Hart; + return ( + Alan L. Hart + ); } export default function Gallery() { @@ -340,25 +350,27 @@ export default function Gallery() { ``` ```css -img { - margin: 0 10px 10px 0; - height: 90px; -} +img { margin: 0 10px 10px 0; height: 90px; } ``` -React कौम्पोनॅन्ट नाम बड़े अक्षर से शुरू होने चाहिए। +React कौम्पोनॅन्ट नाम कैपिटल अक्षर से शुरू होने चाहिए। -`function profile ()` को `function Profile ()` में बदलें, और फिर प्रत्येक `` को `` में बदलें: +`function profile()` को `function Profile()` में बदलें, और फिर हर `` को `` में बदलें: ```js function Profile() { - return Alan L. Hart; + return ( + Alan L. Hart + ); } export default function Gallery() { @@ -374,9 +386,7 @@ export default function Gallery() { ``` ```css -img { - margin: 0 10px 10px 0; -} +img { margin: 0 10px 10px 0; } ``` @@ -385,7 +395,7 @@ img { ### आपका अपना कौम्पोनॅन्ट {/*your-own-component*/} -Scratch से एक कौम्पोनॅन्ट लिखें। आप इसे कोई भी मान्य नाम दे सकते हैं और कोई मार्कअप वापस कर सकते हैं। यदि आपके पास विचार नहीं हैं, तो आप एक `Congratulations` कौम्पोनॅन्ट लिख सकते हैं जो `

                    Good job!

                    ` दिखाता है। इसे निर्यात करना न भूलें! +बिलकुल शुरू से एक कौम्पोनॅन्ट लिखें। आप इसे कोई भी वैलिड नाम दे सकते हैं और कोई मार्कअप रिटर्न कर सकते हैं। यदि आपके पास कोई आईडिया नहीं हैं, तो आप एक `Congratulations` कौम्पोनॅन्ट लिख सकते हैं जो `

                    Good job!

                    ` दिखाता है। इसे एक्सपोर्ट करना न भूलें! @@ -401,7 +411,9 @@ Scratch से एक कौम्पोनॅन्ट लिखें। आ ```js export default function Congratulations() { - return

                    Good job!

                    ; + return ( +

                    Good job!

                    + ); } ``` From 40d0f94ff5a739da028aa406d1b8af54f851cfc6 Mon Sep 17 00:00:00 2001 From: Arshad Kazmi Date: Thu, 8 Dec 2022 21:07:21 +0100 Subject: [PATCH 18/18] Typo fix --- beta/src/pages/learn/your-first-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 36e241042..9acf8b1e8 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -270,7 +270,7 @@ img { height: 181px; } ```js export default function Profile() { return - Katsuko Saruhashi; + Katsuko Saruhashi; } ```