Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

Commit

Permalink
Translated docs page - Create a New React App (#34)
Browse files Browse the repository at this point in the history
* Translated the top section of the page.(Create a New React App)

* Translated section - You Might Not Need a Toolchain. (Create a New React App)

* Translated section - Recommended Toolchains. (Create a New React App)

* Section - Create React App. (Create a New React App)

* Section - Next.js . (Create a New React App)

* Section - Gatsby. (Create a New React App)

* Section - More Flexible Toolchains. (Create a New React App)

* Section - Creating a Toolchain from Scratch. (Create a New React App)

* PR #34, apply changes

* PR review - applied changes.

* PR review - applied changes

* minor changes
  • Loading branch information
fmabid authored and nutboltu committed Jun 26, 2019
1 parent b12437d commit 7b3ece5
Showing 1 changed file with 41 additions and 41 deletions.
82 changes: 41 additions & 41 deletions content/docs/create-a-new-react-app.md
@@ -1,94 +1,94 @@
---
id: create-a-new-react-app
title: Create a New React App
title: নতুন একটি React অ্যাপ তৈরী করুন
permalink: docs/create-a-new-react-app.html
redirect_from:
- "docs/add-react-to-a-new-app.html"
prev: add-react-to-a-website.html
next: cdn-links.html
---

Use an integrated toolchain for the best user and developer experience.
আরো ভালো ইউজার এবং ডেভেলপার এক্সপেরিয়েন্স পেতে কোনো একটি ইন্টিগ্রেটেড টুলচেইন ব্যবহার করুন।

This page describes a few popular React toolchains which help with tasks like:
এই পৃষ্ঠায় কিছু জনপ্রিয় React টুলচেইন নিয়ে আলোচনা করা হয়েছে যা নিম্নরূপ কাজগুলোর ক্ষেত্রে সাহায্য করবেঃ

* Scaling to many files and components.
* Using third-party libraries from npm.
* Detecting common mistakes early.
* Live-editing CSS and JS in development.
* Optimizing the output for production.
* ফাইল এবং কম্পোনেন্টসমূহ স্কেল করা।
* npm থেকে থার্ড-পার্টি লাইব্রেরীসমূহ ব্যবহার করা।
* সাধারণ ভুলগুলো দ্রুত সনাক্ত করা।
* ডেভেলপমেন্টের সময় CSS এবং JS লাইভ-এডিট করা।
* প্রোডাকশনের জন্য আউটপুট অপটিমাইজ করা।

The toolchains recommended on this page **don't require configuration to get started**.
এই পৃষ্ঠায় নির্দেশিত টুলচেইনসমূহ **প্রাথমিকক্ষেত্রে কনফিগারেশন করার প্রয়োজন নেই**

## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
## আপনার হয়তো টুলচেইনের প্রয়োজন নাও হতে পারে {#you-might-not-need-a-toolchain}

If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
আপনি যদি উপরে আলোচিত সমস্যাগুলির সম্মুখীন না হন অথবা জাভাস্ক্রিপ্ট টুলগুলো ব্যবহার করতে ভালো না লেগে থাকে, তবে [HTML পেইজে React- কে `<script>` ট্যাগে যুক্ত করুন](/docs/add-react-to-a-website.html), অন্যক্ষেত্রে [JSX এর সাথে](/docs/add-react-to-a-website.html#optional-try-react-with-jsx)

This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
এছাড়াও এটা **React- কে একটি বিদ্যমান ওয়েবসাইটের সাথে একীভূত করার সহজতম উপায়।** আপনি চাইলে যেকোন সময় আপনার সুবিধা অনুযায়ী বৃহত্তর টুলচেইন যুক্ত করতে পারেন।

## Recommended Toolchains {#recommended-toolchains}
## সুপারিশকৃত টুলচেইনসমূহ {#recommended-toolchains}

The React team primarily recommends these solutions:
React টিম প্রাথমিকভাবে এই সমাধানসমূহের পরামর্শ দেয়ঃ

- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).
- আপনি যদি **React শিক্ষানবিস** হন অথবা **নতুন একটি [সিঙ্গেল-পেইজ](/docs/glossary.html#single-page-application) অ্যাপ তৈরী করছেন**, তবে [Create React App](#create-react-app) ব্যবহার করুন ।
- আপনি যদি **Node.js দিয়ে একটি সার্ভার-রেন্ডার্ড ওয়েবসাইট** বানাতে চান, তবে [Next.js](#nextjs) ব্যবহার করে দেখুন।
- আপনি যদি একটি **স্ট্যাটিক কনটেন্ট-ওরিয়েন্টেড ওয়েবসাইট** বানাতে চান, তবে [Gatsby](#gatsby) ব্যবহার করে দেখুন।
- আপনি যদি একটি **কম্পোনেন্ট লাইব্রেরী** বানাতে চান অথবা **বিদ্যমান কোডবেজের সাথে একীভূত করতে চান, তবে [আরও সহজে ব্যবহারযোগ্য টুলচেইনসমূহ](#more-flexible-toolchains) ব্যবহার করে দেখুন।**

### Create React App {#create-react-app}

[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
[Create React App](https://github.com/facebookincubator/create-react-app) হচ্ছে **React শিখার** জন্য একটি সুবিধাজনক ইনভায়রনমেন্ট, এবং React এ **নতুন একটি [সিঙ্গেল-পেইজ](/docs/glossary.html#single-page-application) অ্যাপ্লিকেশন** বানানো শুরু করার জন্য সবচেয়ে ভালো পন্থা।

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
এটা আপনার ডেভেলপমেন্ট ইনভায়রনমেন্ট সেট-আপ করে দিবে যাতে করে আপনি জাভাস্ক্রিপ্টের সর্বশেষ ফিচারসমূহ ব্যবহার করতে পারেন, সুন্দর ডেভেলপার এক্সপেরিইয়েন্স উপভোগ করতে পারেন, এবং প্রোডাকশনের জন্য অ্যাপকে আরো নিখুঁত করতে পারেন। এর জন্য আপনার যন্ত্রে Node >= 6 এবং npm >= 5.2 থাকতে হবে। একটি প্রোজেক্ট তৈরী করতে, চালনা করুনঃ

```bash
npx create-react-app my-app
cd my-app
npm start
```

>Note
>বিঃদ্রঃ
>
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
>প্রথম লাইনে `npx` কোন আক্ষরিক ত্রুটি নয় -- এটি [package চালনা করার একটি টুল যা npm 5.2+ এর সাথে আসে](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
Create React App ব্যাকএন্ডের লজিক বা ডাটাবেইজ নিয়ন্ত্রণ করে না; এটা শুধু ফ্রন্টএন্ডে গঠিত পাইপলাইন তৈরী করে, যেন আপনি চাইলে যেকোনো ব্যাকএন্ডের সাথে ব্যবহার করতে পারেন। আড়ালে, এটি [Babel](https://babeljs.io/) এবং [webpack](https://webpack.js.org/) ব্যবহার করে, কিন্তু এগুলো সম্পর্কে আপনার কিছু না জানলেও চলবে।

When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/).
যখন আপনি প্রোডাকশনের এর জন্য ডিপ্লয় করতে প্রস্তুত, `npm run build` চালনা করলে আপনার অ্যাপের `build` ফোল্ডারে একটি সংক্ষেপিত কাঠামো তৈরী করবে। আপনি [এই README থেকে](https://github.com/facebookincubator/create-react-app#create-react-app--) এবং এই [ইউজার গাইডটি](https://facebook.github.io/create-react-app/) থেকে Create React App সম্পর্কে আরো জানতে পারেন।

### Next.js {#nextjs}

[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
[Next.js](https://nextjs.org/) **স্ট্যাটিক এবং সার্ভার-রেন্ডার্ড অ্যাপ্লিকেশনসমূহের** জন্য React দিয়ে গঠিত একটি জনপ্রিয় এবং ক্ষীণ ফ্রেমওয়ার্ক। প্রসঙ্গের বাইরে এটি **স্টাইলিং এবং রাউটিং বিষয়সমূহকে** অন্তর্গত করে, এবং ধরে নেয় যে আপনি [Node.js](https://nodejs.org/) কে সার্ভার ইনভায়রনমেন্ট হিসেবে ব্যবহার করছেন।

Learn Next.js from [its official guide](https://nextjs.org/learn/).
Next.js শিখুন [এর অফিশিয়াল গাইড](https://nextjs.org/learn/) থেকে।

### Gatsby {#gatsby}

[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
React দিয়ে **স্ট্যাটিক ওয়েবসাইট** তৈরী করার জন্য সেরা উপায় হচ্ছে [Gatsby](https://www.gatsbyjs.org/)। এটি আপনাকে React কম্পোনেন্ট ব্যবহার করতে দেয়, কিন্তু দ্রুততম লোড টাইম নিশ্চিত করার জন্য প্রি-রেন্ডার্ড HTML এবং CSS আউটপুট দেয়।

Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
Gatsby শিখুন [এর অফিশিয়াল গাইড](https://www.gatsbyjs.org/docs/) এবং একটি [স্টার্টার কিটগুলোর গ্যাল্যারি](https://www.gatsbyjs.org/docs/gatsby-starters/) থেকে।

### More Flexible Toolchains {#more-flexible-toolchains}
### আরও সহজবশ্য টুলচেইনসমূহ {#more-flexible-toolchains}

The following toolchains offer more flexibility and choice. We recommend them to more experienced users:
উল্লিখিত টুলচেইনসমূহ আরো বেশি সুবিধা ও অপশন দিয়ে থাকে। সেইগুলোকে আমরা আরো অভিজ্ঞ ব্যবহারকারীদের জন্য পরামর্শ করি।

- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
- **[Neutrino](https://neutrinojs.org/)** তার প্রিসেটগুলো ব্যবহার করে [webpack](https://webpack.js.org/) এর ক্ষমতাকে আরও তরান্বিত করে, এবং [React অ্যাপসমূহ](https://neutrinojs.org/packages/react/) [React কম্পোনেন্টসমূহ](https://neutrinojs.org/packages/react-components/) এর জন্য একটি প্রিসেট অন্তর্ভুক্ত করে।

- **[nwb](https://github.com/insin/nwb)** is particularly great for [publishing React components for npm](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb). It [can be used](https://github.com/insin/nwb/blob/master/docs/guides/ReactApps.md#developing-react-apps-with-nwb) for creating React apps, too.
- **[nwb](https://github.com/insin/nwb)** বিশেষত [React কম্পোনেন্টসমূহ npm এর জন্য পাবলিশ করার ক্ষেত্রে ](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb) খুবই ভালো। এটি React অ্যাপ তৈরি করার জন্যও **ব্যবহার করা যেতে পারে**

- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
- **[Parcel](https://parceljs.org/)** একটি দ্রুত, জিরো কনফিগার্ড ওয়েব অ্যাপ্লিকেশন বান্ডেলার যা [React এর সাথে কাজ করে](https://parceljs.org/recipes.html#react)

- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
- **[Razzle](https://github.com/jaredpalmer/razzle)** একটি সার্ভার-রেন্ডারিং ফ্রেমওয়ার্ক যাতে কোনো কনফিগারেশন দরকার হয় না, কিন্তু Next.js এর চেয়ে বেশি সুবিধা দেয়।

## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
## শুরু থেকে একটি টুলচেইন তৈরী করা {#creating-a-toolchain-from-scratch}

A JavaScript build toolchain typically consists of:
সাধারণত জাভাস্ক্রিপ্টের একটি বিল্ড টুলচেইন যা নিয়ে গঠিত হয়ঃ

* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
* একটি **প্যাকেজ ম্যানেজার**, যেমন [Yarn](https://yarnpkg.com/) অথবা [npm](https://www.npmjs.com/)। এর মাধ্যমে আপনি সুবিশাল ইকোসিস্টেমের থার্ড-পার্টি প্যাকেজগুলোর সুবিধা পাবেন, এবং সহজে সেগুলো ইন্সটল বা আপডেট করতে পারবেন।

* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
* একটি **বান্ডেলার**, যেমন [webpack](https://webpack.js.org/) অথবা [Parcel](https://parceljs.org/)। এটি আপনাকে মডুলার কোড লিখতে দেয় এবং একে ছোট প্যাকেজসমূহে একত্রিত করে লোড টাইম নিখুঁত করতে সাহায্য করে।

* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
* একটি **কম্পাইলার**, যেমন [Babel](https://babeljs.io/)। এটি আপনাকে আধুনিক জাভাস্ক্রিপ্ট কোড লিখতে দেয় যা পুরোনো ব্রাউজারগুলোতে কাজ করে।

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.
যদি আপনি শুরু থেকে নিজের জাভাস্ক্রিপ্ট টুলচেইন সেটআপ করার চিন্তা করে থাকেন, [এই গাইড দেখে নিন](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) যা কিছু Create React App এর কার্যকারিতা পুনরায় তৈরী করে।

Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
আপনার নিজের তৈরী টুলচেইন [সঠিকভাবে প্রোডাকশনের জন্য সেটআপ হয়েছে কি না](/docs/optimizing-performance.html#use-the-production-build), তা নিশ্চিত করতে ভুলবেন না।

0 comments on commit 7b3ece5

Please sign in to comment.