diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..b9b2a01c8 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,111 +1,111 @@ -- title: Tutorial +- title: ट्यूटोरियल items: - id: before-we-start-the-tutorial - title: Before We Start the Tutorial + title: ट्यूटोरियल शुरू करने से पहले href: /tutorial/tutorial.html#before-we-start-the-tutorial forceInternal: true subitems: - id: what-are-we-building - title: What Are We Building? + title: हम क्या बना रहे हैं? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: आवश्यक शर्तें href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: ट्यूटोरियल के लिए सेटअप href: /tutorial/tutorial.html#setup-for-the-tutorial forceInternal: true subitems: - id: setup-option-1-write-code-in-the-browser - title: "Option 1: Write Code in the Browser" + title: "सेटअप विकल्प 1: ब्राउज़र में कोड लिखें" href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser forceInternal: true - id: setup-option-2-local-development-environment - title: "Option 2: Local Development Environment" + title: "सेटअप विकल्प 2: स्थानीय विकास पर्यावरण" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: मदद, मैं अटक गया हूँ! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: ओवरव्यू href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: React क्या है? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: Inspecting the Starter Code + title: स्टार्टर कोड का निरीक्षण href: /tutorial/tutorial.html#inspecting-the-starter-code forceInternal: true - id: passing-data-through-props - title: Passing Data Through Props + title: Props के माध्यम से डेटा पास करना href: /tutorial/tutorial.html#passing-data-through-props forceInternal: true - id: making-an-interactive-component - title: Making an Interactive Component + title: इंटरएक्टिव कौम्पोनॅन्ट बनाना href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools - title: Developer Tools + title: डेवलपर टूल्स href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: खेल को पूरा करना href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: लिफ्टिंग स्टेट अप href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: Why Immutability Is Important + title: अचल स्थिति होना क्यों महत्वपूर्ण है href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Function Components + title: फंक्शन कौम्पोनॅन्टस href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: बारी लेना href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: विजेता घोषित करना href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: टाइम ट्रेवल गेम में डालना href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: Storing a History of Moves + title: मूव्स की हिस्ट्री स्टोर करना href: /tutorial/tutorial.html#storing-a-history-of-moves forceInternal: true - id: lifting-state-up-again - title: Lifting State Up, Again + title: लिफ्टिंग स्टेट अप, फिर से href: /tutorial/tutorial.html#lifting-state-up-again forceInternal: true - id: showing-the-past-moves - title: Showing the Past Moves + title: पिछली चाल दिखाना href: /tutorial/tutorial.html#showing-the-past-moves forceInternal: true - id: picking-a-key - title: Picking a Key + title: एक Key चुनना href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: टाइम ट्रेवल लागू करना href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: समेटना href: /tutorial/tutorial.html#wrapping-up forceInternal: true diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index e90f8ae8f..5ab3971b3 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "ट्यूटोरियल: React से परिचय" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,97 +12,101 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +इस ट्यूटोरियल के लिए React के मौजूदा ज्ञान की कोई आवश्यकता नहीं है। -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## ट्यूटोरियल शुरू करने से पहले {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React. +हम इस ट्यूटोरियल के दौरान एक छोटा गेम बनाएंगे। **आप इसे छोड़ने के लिए उत्सुक होंगे क्यूंकि आप गेम नहीं बना रहे हैं -- लेकिन इसे एक मौका दें।** ट्यूटोरियल में आपके द्वारा सीखी जाने वाली तकनीकें किसी भी React ऐप्स के निर्माण के लिए मौलिक हैं, और इसमें महारत हासिल करने से आपको React की गहरी समझ मिलेगी। ->Tip +>ध्यान दें > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>यह ट्यूटोरियल उन लोगों के लिए बनाया गया है, जो **चीज़ें करके सीखना** पसंद करते हैं। यदि आप बिलकुल बुनियादी कॉन्सेप्ट्स से सीखना पसंद करते हैं, तो हमारे [स्टेप-बाय-स्टेप गाइड](/docs/hello-world.html) देखें। आपको यह ट्यूटोरियल और गाइड एक-दूसरे के संपूरक लग सकते हैं। -The tutorial is divided into several sections: +ट्यूटोरियल को कई खंडों में विभाजित किया गया है: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [ट्यूटोरियल के लिए सेटअप](#setup-for-the-tutorial) आपको ट्यूटोरियल का पालन करने के लिए **शुरुआत** देगा। +* [ओवरव्यू](#overview) आपको React की **बुनियादी बातें**: कौम्पोनॅन्ट्स, props और स्टेट सिखाएगा। +* [गेम को पूरा करना](#completing-the-game) आपको React विकास में **सबसे आम तकनीकें** सिखाएगा। +* [टाइम ट्रैवल को गेम में डालना](#adding-time-travel) से आपको React की अद्वितीय शक्तियों के बारे में गहराई से जानकारी मिलेगी। -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +इस ट्यूटोरियल से मूल्य प्राप्त करने के लिए आपको एक बार में सभी स्क्वायरस को पूरा करने की आवश्यकता नहीं है। +जहां तक ​​हो सके जाने की कोशिश करें -- भले ही यह एक या दो सेक्शन हो। -### What Are We Building? {#what-are-we-building} +ट्यूटोरियल के साथ कोड को कॉपी और पेस्ट करना ठीक है, लेकिन हम इसे हाथ से टाइप करने की सलाह देते हैं। यह आपको मांसपेशियों की स्मृति और एक मजबूत समझ विकसित करने में मदद करेगा। -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +### हम क्या बना रहे हैं? {#what-are-we-building} -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +इस ट्यूटोरियल में, हम बताएंगे कि किस प्रकार React का उपयोग कर के एक इंटरैक्टिव टिक-टैक-टो गेम का निर्माण किया जा सकता है। -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +आप यहाँ देख सकते हैं कि हम क्या बनाने जा रहे हैं: **[अंतिम परिणाम](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**। यदि कोड आपके लिए मायने नहीं रखता है, या यदि आप कोड के सिंटैक्स से अपरिचित हैं, चिंता मत करें! इस ट्यूटोरियल का लक्ष्य React और इसके सिंटैक्स को समझने में आपकी मदद करना है। -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +हम अनुग्रह करते हैं कि आप ट्यूटोरियल को जारी रखने से पहले टिक-टैक-टो खेल के देखें। आप देख सकते हैं की गेम बोर्ड की दाईं ओर एक क्रमांकित सूची है, ये गेम की कई सुविधाओं में से एक है। यह सूची आपको खेल में होने वाली सभी चालों का इतिहास देती है, और गेम के चलते चलते इसे अपडेट किया जाता है। -### Prerequisites {#prerequisites} +इससे परिचित होने के बाद आप टिक-टैक-टो खेल को बंद कर सकते हैं। हम इस ट्यूटोरियल में एक सरल टेम्पलेट से शुरू करेंगे। हमारा अगला कदम आपको तैयार करना है ताकि आप खेल का निर्माण शुरू कर सकें। -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +### आवश्यक शर्तें {#prerequisites} -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +हम मान लेंगे कि आप HTML और जावास्क्रिप्ट से थोड़े परिचित हैं, लेकिन अगर आप एक अलग प्रोग्रामिंग भाषा से आ रहे हैं तब भी आपको साथ चलने में सक्षम होना चाहिए। हम यह भी मान लेंगे कि आप फ़ंक्शंस, ऑब्जेक्ट्स, अरेस और कुछ हद तक, क्लास जैसी प्रोग्रामिंग कॉन्सेप्ट्स से परिचित हैं। -## Setup for the Tutorial {#setup-for-the-tutorial} +यदि आपको जावास्क्रिप्ट की समीक्षा करने की आवश्यकता है, तो हम [इस मार्गदर्शिका](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) को पढ़ने की सलाह देते हैं। ध्यान दें कि हम ईएस 6 से कुछ सुविधाओं का उपयोग कर रहे हैं - जो की जावास्क्रिप्ट का एक हालिया संस्करण है। इस ट्यूटोरियल में, हम [एरो फ़ंक्शंस](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [क्लासेस](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) और [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) स्टेटमेंट्स का उपयोग कर रहे हैं। ईएस 6 कोड क्या संकलित करता है यह जांचने के लिए आप [Babel REPL](babel://es5-syntax-example) का उपयोग कर सकते हैं। -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +## ट्यूटोरियल के लिए सेटअप {#setup-for-the-tutorial} -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +इस ट्यूटोरियल को पूरा करने के दो तरीके हैं: आप या तो अपने ब्राउज़र में कोड लिख सकते हैं, या आप अपने कंप्यूटर पर स्थानीय विकास वातावरण सेट कर सकते हैं। -This is the quickest way to get started! +### सेटअप विकल्प 1: ब्राउज़र में कोड लिखें {#setup-option-1-write-code-in-the-browser} -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +यह आरंभ करने का सबसे तेज़ तरीका है! -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +सबसे पहले, इस **[प्रारंभक कोड](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** को एक नए टैब में खोलें। +नए टैब में एक खाली टिक-टैक-टो गेम Board और React कोड प्रदर्शित होना चाहिए। हम इस ट्यूटोरियल में React कोड का संपादन करेंगे। -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +अब आप दूसरे सेटअप विकल्प को छोड़ सकते हैं, और React का ओवरव्यू प्राप्त करने के लिए [ओवरव्यू](#overview) अनुभाग पर जाएं। -This is completely optional and not required for this tutorial! +### सेटअप विकल्प 2: स्थानीय विकास पर्यावरण {#setup-option-2-local-development-environment} + +यह पूरी तरह से ऐच्छिक है और इस टुटोरिअल के लिए आवशयक नहीं है!
-Optional: Instructions for following along locally using your preferred text editor +ऐच्छिक: अपने पसंदीदा टेक्स्ट एडिटर का उपयोग करके अपने लोकल पर्यावरण पर निर्देशों का पालन करें -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +इस सेटअप में और अधिक काम करने की आवश्यकता है लेकिन आप अपनी पसंद के एडिटर का उपयोग करके ट्यूटोरियल को पूरा कर सकते हैं। इन चरणों का पालन करें: -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. सुनिश्चित करें कि आपके पास हाल ही में स्थापित [Node.js](https://nodejs.org/en/) का संस्करण है। +2. एक नई प्रोजेक्ट बनाने के लिए [Create React App के इंस्टॉलेशन निर्देशों](/docs/create-a-new-react-app.html#create-react-app) का पालन करें। ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +3. नई प्रोजेक्ट के `src/` फ़ोल्डर में सभी फ़ाइलों को हटा दें -> Note: +>ध्यान दें > ->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step. +>**संपूर्ण `src` फ़ोल्डर को न हटाएं, केवल इसके अंदर की मूल स्रोत फ़ाइलों को हटाएं।** हम अगले चरण में इस प्रोजेक्ट के लिए डिफ़ॉल्ट स्रोत फ़ाइलों को उदाहरणों के साथ बदल देंगे। ```bash cd my-app cd src -# If you're using a Mac or Linux: +# यदि आप एक मैक या लिनक्स का उपयोग कर रहे हैं: rm -f * -# Or, if you're on Windows: +# या, यदि आप विंडोज पर हैं: del * -# Then, switch back to the project folder +# उसके बाद, प्रोजेक्ट फ़ोल्डर पर वापस जाएँ cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. [इस CSS कोड](https://codepen.io/gaearon/pen/oWWQNa?editors=0100) के साथ `src/` फ़ोल्डर में `index.css` नामक फ़ाइल बनायें। -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +5. [इस JS कोड](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) के साथ `src/` फ़ोल्डर में `index.js` नामक एक फ़ाइल बनायें। -6. Add these three lines to the top of `index.js` in the `src/` folder: +6. `src/` फ़ोल्डर में `index.js` के शीर्ष पर इन तीन पंक्तियों को जोड़ें: ```js import React from 'react'; @@ -110,87 +114,88 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +अब अगर आप प्रोजेक्ट फोल्डर में `npm start` चलाते हैं और ब्राउज़र में `http://localhost:3000` ओपन करते हैं, तो आपको एक खाली टिक-टैक-टो फ़ील्ड दिखना चाहिए। -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +हम आपके एडिटर के लिए सिंटेक्स हाइलाइटिंग को कॉन्फ़िगर करने के लिए [इन निर्देशों](https://babeljs.io/docs/editors/) का पालन करने की सलाह देते हैं।
-### Help, I'm Stuck! {#help-im-stuck} +### मदद, मैं अटक गया हूँ! {#help-im-stuck} -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/reactiflux) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +यदि आप अटक जाते हैं, तो [सामुदायिक सहायता संसाधनों](/community/support.html) की जांच करें। विशेष रूप से, [Reactiflux चैट](https://discord.gg/0ZcbPKXt5bZjGY5n) जल्दी से सहायता प्राप्त करने का एक शानदार तरीका है। यदि आपको कोई उत्तर नहीं मिलता है, या यदि आप अटके रहते हैं, तो कृपया एक इशू दर्ज करें, और हम आपकी मदद करेंगे। -## Overview {#overview} +## ओवरव्यू {#overview} -Now that you're set up, let's get an overview of React! +अब जब आपका सेटअप हो गया है, आइए हम React का ओवरव्यू लेते हैं! -### What Is React? {#what-is-react} +### React क्या है? {#what-is-react} -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +उपयोगकर्ता इंटरफेस के निर्माण के लिए React एक वर्णनात्मक, कुशल और फ्लेक्सिबल जावास्क्रिप्ट लाइब्रेरी है। यह आपको "कौम्पोनॅन्ट्स" नामक कोड के छोटे और पृथक टुकड़ों से जटिल UI की रचना करने देती है। -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React में कुछ अलग-अलग प्रकार के कौम्पोनॅन्ट होते हैं, लेकिन हम `React.Component` उपवर्गों के साथ शुरुआत करेंगे: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

{this.props.name} के लिए खरीदारी की सूची

); } } -// Example usage: +// उपयोग उदाहरण: ``` -We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components. +हमें जल्दी ही अजीब XML जैसे टैग्स मिलेंगे. हम स्क्रीन पर जो देखना चाहते हैं उसे React को बताने के लिए हम कौम्पोनॅन्ट्स का उपयोग करते हैं। जब हमारा डेटा बदलता है, तो React कुशलतापूर्वक हमारे कौम्पोनॅन्ट्स को अपडेट और प्रस्तुत करेगा। -Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method. +यहाँ, ShoppingList एक **React कौम्पोनॅन्ट क्लास** या **React कौम्पोनॅन्ट टाइप** है। एक कौम्पोनॅन्ट पैरामीटर्स लेता है, जिसे `props` ("properties" के लिए छोटा) कहा जाता है, और `render` मेथड के माध्यम से प्रदर्शित करने के लिए व्यूज की हायरार्की देता है। -The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `
` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to: +`render` मेथड स्क्रीन पर जो आप देखना चाहते हैं उसका *वर्णन* देती है। React वर्णन लेती है और परिणाम प्रदर्शित करती है। विशेष रूप से, रेंडर एक **React एलिमेंट** पास करता है, जो की क्या रेंडर करना है उसका सामान्य विवरण है। अधिकांश React डेवलपर्स "JSX" नामक एक विशेष सिंटेक्स का उपयोग करते हैं जो इन इस्ट्रक्टर्स को लिखना आसान बनाता है। `
` सिंटैक्स को बिल्ड समय में `React.createElement ('div')` में बदल दिया जाता है। ऊपर दिया गया उदाहरण इसके बराबर है: ```javascript return React.createElement('div', {className: 'shopping-list'}, - React.createElement('h1', /* ... h1 children ... */), - React.createElement('ul', /* ... ul children ... */) + React.createElement('h1', /* ... h1 चिल्ड्रन ... */), + React.createElement('ul', /* ... ul चिल्ड्रन ... */) ); ``` -[See full expanded version.](babel://tutorial-expanded-version) +[पूर्ण विस्तारित संस्करण देखें।](babel://tutorial-expanded-version) -If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX. +यदि आप उत्सुक हैं, तो [API संदर्भ](/docs/react-api.html#createelement) में `createElement()` को अधिक वर्णन के साथ बताया गया है, लेकिन हम इस ट्यूटोरियल में इसका उपयोग नहीं करेंगे। इसके बजाय, हम JSX का उपयोग करते रहेंगे। -JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program. +JSX जावास्क्रिप्ट की पूरी शक्ति के साथ आता है। आप JSX के अंदर ब्रेसिज़ के भीतर *कोई* जावास्क्रिप्ट एक्सप्रेशन रख सकते हैं। प्रत्येक React एलिमेंट एक जावास्क्रिप्ट ऑब्जेक्ट है जिसे आप एक वैरिएबल् में स्टोर कर सकते हैं या अपने प्रोग्राम में कहीं भी पास कर सकते हैं। -The `ShoppingList` component above only renders built-in DOM components like `
` and `
  • `. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components. +`ShoppingList` कौम्पोनॅन्ट ऊपर केवल बिल्ट-इन DOM जैसे `
    ` और `
  • ` को रेंडर करता है। लेकिन आप कस्टम React कौम्पोनॅन्ट्स को भी कम्पोज़ और रेंडर कर सकते हैं। उदाहरण के लिए, हम अब पूरी खरीदारी सूची को `` लिखकर संदर्भित कर सकते हैं। प्रत्येक React कौम्पोनॅन्ट संकुचित है और स्वतंत्र रूप से काम कर सकता है; यह आपको सरल कौम्पोनॅन्टस से कॉम्प्लेक्स UI बनाने की अनुमति देता है। -## Inspecting the Starter Code {#inspecting-the-starter-code} +## स्टार्टर कोड का निरीक्षण {#inspecting-the-starter-code} -If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)). +यदि आप **अपने ब्राउज़र में** ट्यूटोरियल पर काम करने जा रहे हैं, इस कोड को एक नए टैब में खोलें: **[स्टार्टर कोड।](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. यदि आप **लोकली** रूप से ट्यूटोरियल पर काम करने जा रहे हैं, तो अपने प्रोजेक्ट फ़ोल्डर में `src/index.js` खोलें ([सेटअप](#setup-option-2-local-development-environment) के दौरान आप इस फ़ाइल को पहले ही देख चुके हैं)। -This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game. +यह स्टार्टर कोड हम जो निर्माण कर रहे हैं उसका आधार है। CSS स्टाइलिंग पपहले से ही प्रदान की हुई है ताकि आपको केवल React सीखने और +टिक-टैक-टो गेम की प्रोग्रामिंग पर ध्यान देने की आवश्यकता हो। -By inspecting the code, you'll notice that we have three React components: +कोड का निरीक्षण करने पर, आप देखेंगे कि हमारे पास तीन React कौम्पोनॅन्ट हैं: * Square * Board * Game -The Square component renders a single `