Skip to content

Commit f6e333a

Browse files
arshadkazmi42arshadkazmi42
authored
Merge pull request #169 from NegiAkash890/patch-1
Translated Page
2 parents 49dda3c + 2ca2343 commit f6e333a

File tree

1 file changed

+26
-38
lines changed

1 file changed

+26
-38
lines changed

‎beta/src/pages/learn/start-a-new-react-project.md

+26-38
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
11
---
2-
title: Start a New React Project
2+
title: एक नया React प्रोजेक्ट शुरू करें
33
---
44

55
<Intro>
66

7-
If you're starting a new project, we recommend to use a toolchain or a framework. These tools provide a comfortable development environment but require a local Node.js installation.
7+
यदि आप React सीख रहे हैं या इसे किसी मौजूदा प्रोजेक्ट में इस्तेमाल करने पर विचार कर रहे हैं, तो आप [स्क्रिप्ट टैग को किसी भी HTML पेज पर React इस्तेमाल करके](/learn/add-react-to-a-website) शुरू कर सकते हैं। यदि आपके प्रोजेक्ट को कई कौम्पोनॅन्ट और कई फाइलों की आवश्यकता होगी, तो यह नीचे दिए गए औपशंस पर विचार करने का समय हो सकता है!
88

99
</Intro>
1010

11-
<YouWillLearn>
11+
## अपना खुद का रोमांच चुनें {/*choose-your-own-adventure*/}
1212

13-
* How toolchains are different from frameworks
14-
* How to start a project with a minimal toolchain
15-
* How to start a project with a fully-featured framework
16-
* What's inside popular toolchains and frameworks
13+
React एक library है जो आपको UI कोड को कौम्पोनॅन्ट नामक टुकड़ों में तोड़कर व्यवस्थित करने देता है। React राउटिंग या डेटा मैनेजमेंट का ध्यान नहीं रखता है। इसका मतलब है कि एक नया React प्रोजेक्ट शुरू करने के कई तरीके हैं:
1714

18-
</YouWillLearn>
15+
* [एक **HTML फ़ाइल और एक स्क्रिप्ट टैग** से प्रारंभ करें।](/learn/add-react-to-a-website) इसके लिए Node.js सेटअप की आवश्यकता नहीं है, लेकिन यह सीमित फीचर्स देता है।
16+
* एक **कम से कम टूलचेन** के साथ शुरू करें, करते करते और फीचर्स ऐड करें। (सीखने के लिए बढ़िया!)
17+
* एक **ओपीनियेटेड फ्रेमवर्क** से शुरू करें जिसमें डेटा फेच करना और बिल्ट इन राउटिंग जैसी सामान्य फीचर्स हों।
1918

20-
## Choose your own adventure {/*choose-your-own-adventure*/}
19+
## कम से कम टूलचेन के साथ शुरुआत करना {/*getting-started-with-a-minimal-toolchain*/}
2120

22-
React is a library that lets you organize UI code by breaking it apart into pieces called components. React doesn't take care of routing or data management. This means there are several ways to start a new React project:
21+
यदि आप **React सीख रहे हैं,** तो हम रेकमेंड करते हैं [Create React App](https://create-react-app.dev/)। यह React को आज़माने और एक नया सिंगल-पेज, क्लाइंट-साइड एप्लिकेशन बनाने का सबसे लोकप्रिय तरीका है। यह React के लिए बनाया गया है, लेकिन राउटिंग या डेटा लाने के बारे में नहीं सोचा गया है।
2322

24-
* [Start with an **HTML file and a script tag**.](/learn/add-react-to-a-website) This doesn't require Node.js setup but offers limited features.
25-
* Start with a **minimal toolchain,** adding more features to your project as you go. (Great for learning!)
26-
* Start with an **opinionated framework** that has common features like data fetching and routing built-in.
27-
28-
## Getting started with a minimal toolchain {/*getting-started-with-a-minimal-toolchain*/}
29-
30-
If you're **learning React,** we recommend [Create React App](https://create-react-app.dev/). It is the most popular way to try out React and build a new single-page, client-side application. It's made for React but isn't opinionated about routing or data fetching.
31-
32-
First, install [Node.js](https://nodejs.org/en/). Then open your terminal and run this line to create a project:
23+
सबसे पहले, [Node.js] (https://nodejs.org/en/) इंस्टॉल करें। फिर अपना टर्मिनल खोलें और प्रोजेक्ट बनाने के लिए इस लाइन को रन करें:
3324

3425
<TerminalBlock>
3526

3627
npx create-react-app my-app
3728

3829
</TerminalBlock>
3930

40-
Now you can run your app with:
31+
अब आप अपना एप्प इसके साथ चला सकते हैं:
4132

4233
<TerminalBlock>
4334

@@ -46,38 +37,35 @@ npm start
4637

4738
</TerminalBlock>
4839

49-
For more information, [check out the official guide](https://create-react-app.dev/docs/getting-started).
40+
अधिक जानकारी के लिए, [ओफीशिअल गाइड देखें](https://create-react-app.dev/docs/getting-started)।
5041

51-
> Create React App doesn't handle backend logic or databases. You can use it with any backend. When you build a project, you'll get a folder with static HTML, CSS and JS. Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.
42+
> Create React App doesn't handle backend logic or databases. You can use it with any backend. जब आप कोई प्रोजेक्ट बनाते हैं, तो आपको स्टैटिक HTML, CSS और JS के साथ एक फ़ोल्डर मिलेगा। Because Create React App can't take advantage of the server, it doesn't provide the best performance. If you're looking for faster loading times and built-in features like routing and server-side logic, we recommend using a framework instead.
5243
53-
### Popular alternatives {/*popular-alternatives*/}
44+
### पॉपुलर अल्टरनेटिव्ज {/*popular-alternatives*/}
5445

5546
* [Vite](https://vitejs.dev/guide/)
5647
* [Parcel](https://parceljs.org/)
5748

58-
## Building with a full-featured framework {/*building-with-a-full-featured-framework*/}
49+
## पूर्ण विशेषताओं वाले फ्रेमवर्क के साथ बनाना {/*building-with-a-full-featured-framework*/}
5950

60-
If you're looking to **start a production-ready project,** [Next.js](https://nextjs.org/) is a great place to start. Next.js is a popular, lightweight framework for static and server‑rendered applications built with React. It comes pre-packaged with features like routing, styling, and server-side rendering, getting your project up and running quickly.
51+
अगर आप **प्रोडक्शन के लिए तैयार प्रोजेक्ट शुरू करना चाहते हैं,** तो [Next.js](https://nextjs.org/) शुरू करने के लिए एक बेहतरीन जगह है। Next.js React के साथ बना हुआ स्टैटिक और सर्वर-रेंडर ऍप्लिकेशन्स के लिए एक लोकप्रिय, हल्का फ्रेमवर्क है। यह राउटिंग, स्टाइलिंग और सर्वर-साइड रेंडरिंग जैसे फीचर्स के साथ प्री-पैकेज्ड आता है, जिससे आप प्रोजेक्ट को जल्दी से तैयार करकर शुरू कर सकते हैं।
6152

62-
The [Next.js Foundations](https://nextjs.org/learn/foundations/about-nextjs) tutorial is a great introduction to building with React and Next.js.
53+
[Next.js फ़ाउंडेशन](https://nextjs.org/learn/foundations/about-nextjs) ट्यूटोरियल React और Next.js के साथ बनाने के लिए एक बेहतरीन परिचय है।
6354

64-
### Popular alternatives {/*popular-alternatives*/}
55+
### पॉपुलर अल्टरनेटिव्ज {/*popular-alternatives*/}
6556

6657
* [Gatsby](https://www.gatsbyjs.org/)
6758
* [Remix](https://remix.run/)
6859
* [Razzle](https://razzlejs.org/)
6960

70-
## Custom toolchains {/*custom-toolchains*/}
71-
72-
You may prefer to create and configure your own toolchain. A toolchain typically consists of:
61+
## कस्टम टूलचेन {/*custom-toolchains*/}
7362

74-
* A **package manager** lets you install, update, and manage third-party packages. Popular package managers: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/).
75-
* A **compiler** lets you compile modern language features and additional syntax like JSX or type annotations for the browsers. Popular compilers: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/).
76-
* A **bundler** lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/).
77-
* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/).
78-
* A **server** handles server requests so that you can render components to HTML. Popular servers: [Express](https://expressjs.com/).
79-
* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/).
80-
* A **test runner** lets you run tests against your code. Popular test runners: [Jest](https://jestjs.io/).
63+
आप अपनी खुद की टूलचेन बनाना और कॉन्फ़िगर करना पसंद कर सकते हैं। एक टूलचेन में आमतौर पर निम्न शामिल होते हैं:
8164

82-
If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality. A framework will usually also provide a routing and a data fetching solution. In a larger project, you might also want to manage multiple packages in a single repository with a tool like [Nx](https://nx.dev/react).
65+
* एक **package manager**—आपको थर्ड-पार्टी पैकेज इनस्टॉल, अपडेटेड एंड मैनेज करने देता है। पॉपुलर पैकेज मैनेजर्स: [npm](https://www.npmjs.com/) (built into Node.js), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)।
66+
* एक **compiler** आपको मॉडर्न लैंग्वेजेज फीचर्स और JSX जैसे एडिशनल सिंटैक्स या ब्राउज़र के लिए एनोटेशन टाइप को कम्पाइल करने देता है। पॉपुलर कपिलर्स: [Babel](https://babeljs.io/), [TypeScript](http://typescript.org/), [swc](https://swc.rs/)।
67+
* एक **bundler** आपको मॉड्यूलर कोड लिखने और लोड टाइम को ऑप्टिमाइज़ करने के लिए इसे छोटे पैकेजों में एक साथ बंडल करने देता है। पॉपुलर बंडलर्स: [webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [esbuild](https://esbuild.github.io/), [swc](https://swc.rs/)।* A **minifier** makes your code more compact so that it loads faster. Popular minifiers: [Terser](https://terser.org/), [swc](https://swc.rs/).
68+
* एक **server** सर्वर रिक्वेस्ट्स को संभालता है ताकि आप HTML में कौम्पोनॅन्टस को प्रस्तुत कर सकें। पॉपुलर सर्वरस: [Express](https://expressjs.com/)।* A **linter** checks your code for common mistakes. Popular linters: [ESLint](https://eslint.org/).
69+
* एक **test runner** आपको अपने कोड के अगेंस्ट टेस्टस चलाने देता है। पॉपुलर टेस्ट रनर: [Jest](https://jestjs.io/)।
8370

71+
अगर आप शुरू से ही अपनी खुद की JavaScript टूलचैन सेटअप करना पसंद करते हैं, तो [इस गाइड को देखें](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) जो Create React App की कुछ एप्प फंक्शनलिटी को फिर से बनाता है। एक फ्रेमवर्क आमतौर पर एक राउटिंग और डेटा फेच करने का समाधान भी देता है। एक बड़े प्रोजेक्ट में, आप [Nx](https://nx.dev/react) जैसे टूल के साथ एक ही रिपॉजिटरी में कई पैकेज मैनेज करना चाह सकते हैं।

0 commit comments

Comments
 (0)