From d128e9208b8e23e99458647745daf009a6baa74d Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:44 +0600 Subject: [PATCH 01/11] Translate first component paragraphs 1-4 --- src/content/learn/your-first-component.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 81744322e..45a3c7b1e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/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-এর মূল ধারণাগুলোর একটি। কম্পোনেন্ট দিয়েই user interface (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 `
  • `: +ওয়েবে HTML-এর `

    `, `
  • `-এর মতো বিল্ট-ইন ট্যাগ দিয়ে সাজানো-গোছানো document তৈরি করা যায়: ```html
    @@ -31,7 +31,7 @@ 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 আর ব্যবহারকারীর কাজের প্রতিক্রিয়া দেখানোর জন্য জাভাস্ক্রিপ্ট যোগ হয়। ওয়েবে দেখা প্রতিটি sidebar, avatar, modal, dropdown—UI-এর প্রতিটি অংশের পেছনেই এগুলো থাকে। 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. From ab97ce759466a57d0de887eb8d7b32d3a69f45a7 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:44 +0600 Subject: [PATCH 02/11] Translate first component paragraphs 5-8 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 45a3c7b1e..0a8abe2c3 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -33,9 +33,9 @@ title: আপনার প্রথম কম্পোনেন্ট এই মার্কআপে লেখাটিকে `
        `, শিরোনামকে `

        ` এবং সংক্ষিপ্ত সূচিপত্রকে একটি ক্রমিক তালিকা `
          ` দিয়ে দেখানো হয়েছে। এমন মার্কআপের সাথে ডিজাইনের জন্য CSS আর ব্যবহারকারীর কাজের প্রতিক্রিয়া দেখানোর জন্য জাভাস্ক্রিপ্ট যোগ হয়। ওয়েবে দেখা প্রতিটি sidebar, avatar, modal, dropdown—UI-এর প্রতিটি অংশের পেছনেই এগুলো থাকে। -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,11 +51,11 @@ 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*/} -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 কম্পোনেন্ট হলো জাভাস্ক্রিপ্ট ফাংশন, যার মধ্যে _মার্কআপ যোগ করতে পারেন_।** দেখতে কেমন হয় নিচে দেখুন (উদাহরণটি বদলেও দেখতে পারেন): From 807d1bf7e1d05b79e3565e1496adf067ed2354ff Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:45 +0600 Subject: [PATCH 03/11] Translate first component paragraphs 9-12 --- src/content/learn/your-first-component.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 0a8abe2c3..d14fd81ae 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -76,19 +76,19 @@ 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*/} -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` জাভাস্ক্রিপ্টের [সাধারণ সিনট্যাক্স](https://developer.mozilla.org/docs/web/javascript/reference/statements/export), শুধু React-এর কিছু নয়। এটি দিয়ে ফাইলের প্রধান ফাংশন চিহ্নিত করা হয়, যাতে পরে অন্য ফাইল থেকে ইম্পোর্ট করতে পারেন। ইম্পোর্ট নিয়ে [কম্পোনেন্ট ইম্পোর্ট এবং এক্সপোর্ট করা](/learn/importing-and-exporting-components) পেইজে আরও জানবেন। -### 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`. +`function Profile() { }` দিয়ে `Profile` নামের একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করছেন। -React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work! +React কম্পোনেন্ট সাধারণ জাভাস্ক্রিপ্ট ফাংশন হলেও **নামের প্রথম অক্ষর অবশ্যই বড় হাতের হতে হবে**। নইলে কাজ করবে না! From 68e4535e2e871a13517ad29a61686bb16e44b1ff Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:45 +0600 Subject: [PATCH 04/11] Translate first component paragraphs 13-16 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index d14fd81ae..218b93e9e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -92,17 +92,17 @@ React কম্পোনেন্ট সাধারণ জাভাস্ক্ -### 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. +কম্পোনেন্টটি `src` ও `alt` attribute-সহ একটি `` ট্যাগ রিটার্ন করে। `` দেখতে HTML-এর মতো হলেও ভেতরে এটি আসলে জাভাস্ক্রিপ্ট! এই সিনট্যাক্সের নাম [JSX](/learn/writing-markup-with-jsx)। এর সাহায্যে জাভাস্ক্রিপ্টের ভেতর মার্কআপ লেখা যায়। -Return statements can be written all on one line, as in this component: +এই কম্পোনেন্টের মতো পুরো `return` statement এক লাইনেও লিখতে পারেন: ```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: +তবে মার্কআপ যদি `return` কীওয়ার্ডের একই লাইনে না থাকে, তাহলে সেটিকে এক জোড়া বন্ধনীর মধ্যে রাখতে হবে: ```js return ( @@ -114,7 +114,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`-এর পরের লাইনগুলোর কোড [উপেক্ষা করা হবে](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)! From 8ab16e06860bb44c57ed4fcede3b4a914439359d Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:45 +0600 Subject: [PATCH 05/11] Translate first component paragraphs 17-20 --- src/content/learn/your-first-component.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 218b93e9e..bdda96d8d 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -118,9 +118,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` কম্পোনেন্ট লেখা হয়েছে। এখন অন্য কম্পোনেন্টের ভেতরে এটি রাখতে পারেন। যেমন, একাধিক `Profile` ব্যবহার করে একটি `Gallery` কম্পোনেন্ট এক্সপোর্ট করতে পারেন: @@ -152,14 +152,14 @@ img { margin: 0 10px 10px 0; height: 90px; } -### 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
          From 2a0cca68ff7bba4a4f3c870fffc9f6b173c9ab6c Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:45 +0600 Subject: [PATCH 06/11] Translate first component paragraphs 21-24 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index bdda96d8d..ca6180c69 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -170,15 +170,15 @@ img { margin: 0 10px 10px 0; height: 90px; }
          ``` -### 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` আলাদা ফাইলে সরিয়ে নিতে পারেন। কীভাবে করবেন তা শিগগিরই [ইম্পোর্টের পেইজে](/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-এর মজার বিষয়ই এটি: একবার কম্পোনেন্ট লিখে যত জায়গায়, যতবার খুশি ব্যবহার করতে পারেন। -Components can render other components, but **you must never nest their definitions:** +কম্পোনেন্ট অন্য কম্পোনেন্ট রেন্ডার করতে পারে, কিন্তু **একটি কম্পোনেন্টের ফাংশনের ভেতরে আরেকটি কম্পোনেন্টের ফাংশন কখনো লিখবেন না:** ```js {2-5} export default function Gallery() { @@ -190,7 +190,7 @@ export default function Gallery() { } ``` -The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level: +উপরের কোড [খুব ধীর এবং বাগ তৈরি করে।](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) তার বদলে প্রতিটি কম্পোনেন্ট টপ লেভেলে লিখুন: ```js {5-8} export default function Gallery() { From 43961bea7ad030399248e07469de256581d6692f Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:46 +0600 Subject: [PATCH 07/11] Translate first component paragraphs 25-28 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index ca6180c69..d7009aa0e 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -203,19 +203,19 @@ function Profile() { } ``` -When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions. +চাইল্ড কম্পোনেন্টের প্যারেন্ট থেকে ডেটা লাগলে, ফাংশনের ভেতরে ফাংশন না লিখে [props দিয়ে ডেটা পাঠান।](/learn/passing-props-to-a-component) -#### Components all the way down {/*components-all-the-way-down*/} +#### সব স্তরেই কম্পোনেন্ট {/*components-all-the-way-down*/} -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 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/) বা [Next.js](https://nextjs.org/) ফ্রেমওয়ার্ক ব্যবহার করলে রুট কম্পোনেন্ট `pages/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 অ্যাপে সব স্তরেই কম্পোনেন্ট থাকে। অর্থাৎ শুধু বাটনের মতো বারবার ব্যবহার করা অংশ নয়, sidebar, তালিকা, এমনকি পুরো পেইজও কম্পোনেন্ট দিয়ে তৈরি করবেন! UI-এর কোড ও মার্কআপ গুছিয়ে রাখতে কম্পোনেন্ট কাজে দেয়, যদিও কোনো কোনোটি মাত্র একবার ব্যবহার করা হয়। -[React-based frameworks](/learn/creating-a-react-app) 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. +[React-ভিত্তিক ফ্রেমওয়ার্কগুলো](/learn/creating-a-react-app) আরও এক ধাপ এগিয়ে যায়। ফাঁকা HTML ফাইল দিয়ে শুরু করে শুধু জাভাস্ক্রিপ্টের মাধ্যমে পেইজ পরিচালনার দায়িত্ব React-কে দেওয়ার বদলে, তারা আপনার React কম্পোনেন্ট থেকে HTML-ও তৈরি করে দেয়। ফলে জাভাস্ক্রিপ্ট লোড হওয়ার আগেই অ্যাপে কিছু কনটেন্ট দেখা যায়। Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) 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. From 6d8959b9d16177ee1cd085a3b4df5817f0c19e36 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:46 +0600 Subject: [PATCH 08/11] Translate first component paragraphs 29-32 --- src/content/learn/your-first-component.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index d7009aa0e..da259ab22 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -217,20 +217,20 @@ function Profile() { [React-ভিত্তিক ফ্রেমওয়ার্কগুলো](/learn/creating-a-react-app) আরও এক ধাপ এগিয়ে যায়। ফাঁকা HTML ফাইল দিয়ে শুরু করে শুধু জাভাস্ক্রিপ্টের মাধ্যমে পেইজ পরিচালনার দায়িত্ব React-কে দেওয়ার বদলে, তারা আপনার React কম্পোনেন্ট থেকে HTML-ও তৈরি করে দেয়। ফলে জাভাস্ক্রিপ্ট লোড হওয়ার আগেই অ্যাপে কিছু কনটেন্ট দেখা যায়। -Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) 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. +তবে অনেক ওয়েবসাইট শুধু [বিদ্যমান HTML পেইজে ইন্টারঅ্যাক্টিভিটি যোগ করতে](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) React ব্যবহার করে। পুরো পেইজের জন্য একটির বদলে সেখানে একাধিক রুট কম্পোনেন্ট থাকে। প্রয়োজনমতো অল্প বা বেশি 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 মার্কআপ রিটার্ন করে। From 231c3242d3b8d6d595a2611388188ab0827f453a Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:47 +0600 Subject: [PATCH 09/11] Translate first component paragraphs 33-36 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index da259ab22..eb4fe3e52 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -238,9 +238,9 @@ React-এর সাথে প্রথম পরিচয় হলো! গুর -#### Export the component {/*export-the-component*/} +#### কম্পোনেন্ট এক্সপোর্ট করুন {/*export-the-component*/} -This sandbox doesn't work because the root component is not exported: +রুট কম্পোনেন্ট এক্সপোর্ট করা হয়নি বলে এই sandbox কাজ করছে না: @@ -261,11 +261,11 @@ img { height: 181px; } -Try to fix it yourself before looking at the solution! +সমাধান দেখার আগে নিজে ঠিক করার চেষ্টা করুন! -Add `export default` before the function definition like so: +ফাংশনের আগে এভাবে `export default` যোগ করুন: @@ -286,7 +286,7 @@ img { height: 181px; } -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` লিখলে উদাহরণটি ঠিক হয় না কেন। `export` ও `export default`-এর পার্থক্য [কম্পোনেন্ট ইম্পোর্ট এবং এক্সপোর্ট করা](/learn/importing-and-exporting-components) পেইজে জানতে পারবেন। From 2b33532587b8c6944efb3b725226f4cf8af1899b Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:47 +0600 Subject: [PATCH 10/11] Translate first component paragraphs 37-40 --- src/content/learn/your-first-component.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index eb4fe3e52..ad3c7d058 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -290,13 +290,13 @@ img { height: 181px; } -#### Fix the return statement {/*fix-the-return-statement*/} +#### return statement ঠিক করুন {/*fix-the-return-statement*/} -Something isn't right about this `return` statement. Can you fix it? +এই `return` statement-এ কিছু একটা ভুল আছে। ঠিক করতে পারবেন? -You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error. +ঠিক করতে গিয়ে "Unexpected token" error পেতে পারেন। সেক্ষেত্রে সেমিকোলনটি বন্ধনী শেষ হওয়ার *পরে* আছে কি না দেখুন। `return ( )`-এর ভেতরে সেমিকোলন রাখলে error হবে। @@ -318,7 +318,7 @@ img { height: 180px; } -You can fix this component by moving the return statement to one line like so: +`return` statement এক লাইনে এনে এভাবে কম্পোনেন্টটি ঠিক করতে পারেন: @@ -334,7 +334,7 @@ img { height: 180px; } -Or by wrapping the returned JSX markup in parentheses that open right after `return`: +অথবা রিটার্ন করা JSX মার্কআপ বন্ধনী দিয়ে ঘিরে দিন। বন্ধনী শুরু হবে `return`-এর ঠিক পরে: From 8a03d55dea18db3e925d8160bc3afb4fc9fab4f1 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 19:39:47 +0600 Subject: [PATCH 11/11] Translate first component paragraphs 41-44 --- src/content/learn/your-first-component.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index ad3c7d058..55d499fd1 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -357,9 +357,9 @@ img { height: 180px; } -#### 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 ট্যাগ থেকে কম্পোনেন্ট আলাদা করে, তা মনে করার চেষ্টা করুন! @@ -393,9 +393,9 @@ img { margin: 0 10px 10px 0; height: 90px; } -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()` করুন। তারপর প্রতিটি `` বদলে `` করুন: @@ -429,9 +429,9 @@ img { margin: 0 10px 10px 0; } -#### 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 that shows `

          Good job!

          `. Don't forget to export it! +শুরু থেকে নিজে একটি কম্পোনেন্ট লিখুন। যেকোনো বৈধ নাম দিতে পারেন এবং যেকোনো মার্কআপ রিটার্ন করতে পারেন। কী লিখবেন ভেবে না পেলে, `

          Good job!

          ` দেখায় এমন একটি `Congratulations` কম্পোনেন্ট লিখতে পারেন। এক্সপোর্ট করতে ভুলবেন না!