Learn React intro translation #10

anwarhossain1 · 2023-05-01T13:00:00Z

No description provided.

github-actions · 2023-05-01T13:02:01Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

src/content/learn/index.md

moshfiqrony · 2023-05-01T13:49:02Z

@anwarhossain1 let's make the pr a draft until it's done fully.

anwarhossain1 · 2023-05-01T13:51:07Z

@moshfiqrony Okay but I wanted to do as per comments and suggestions. What will be the best approach?

moshfiqrony · 2023-05-01T13:52:50Z

@anwarhossain1 think it's better to do a single pr for a single page. Unless the page is too long. You can push new commits and ask for a review.

moshfiqrony · 2023-05-01T13:55:31Z

@anwarhossain1 assume a page is a feature. You started it as a draft once the feature is complete it will get merged.

anwarhossain1 · 2023-05-01T14:00:33Z

@moshfiqrony Thanks good advise. I will keep that in mind.

moshfiqrony · 2023-05-01T14:01:42Z

@anwarhossain1 let's convert this a draft for now.

moshfiqrony · 2023-05-01T13:33:02Z

src/content/learn/index.md

+- কিভাবে কম্পোনেন্টস create এবং nest করবেন 
+- কিভাবে markup এবং styles সংযুক্ত করবেন 
+- কিভাবে ডাটা display করবেন
+- কিভাবে conditions এবং lists গুলো render করবেন
+- কিভাবে event গুলো respond করবেন এবং সেই অনুযায়ী screen update করবেন
+- কিভাবে ডাটা, কম্পোনেন্টস এর মধ্যে share করবেন


Please give it a second thought if we could remove those English words. It don't need to be the exact wording as in English. To explain if you need to write more you can. and start he PR as a draft

nafistiham

LGTM

moshfiqrony

Changes are looking good

moshfiqrony

In the future, would it be possible for you to have a pull request ready for review once the entire page is completed? It would be greatly appreciated.

anwarhossain1 · 2023-05-16T03:26:37Z

okay, vai. Should I turn it into a draft again or keep it as it is?

moshfiqrony · 2023-05-16T03:28:45Z

Yes please.

anwarhossain1 · 2023-05-16T03:30:10Z

Okay. I will do that. Give the pr after completing the full page.

…pdate sections translation added

nafistiham

অনেক ধন্যবাদ। বিশাল একটি পেইজের কাজ শেষ করবার জন্য। দুই একতা ক্ষেত্রে মনে হয়েছে টেকনিকাল শব্দ রেখে দিলেই ভাল হবে। কোডের মধ্যে আমরা কমেন্ট ব্যতীত কিছু বাংলা করছি না। আর লাইনগুলো একদম মিলিয়ে অনুবাদ করছি। কোন নিউ লাইন কাটছি না বা যোগ করছি না। যতটুকু ইংরেজিতে আছে ঠিক ততটুকু রাখছি। দ্বিমত থাকলে নিঃসংকোচে জানাতে পারেন। আবারও ধন্যবাদ।

nafistiham · 2023-06-03T05:28:23Z

src/content/learn/index.md

+- কিভাবে কম্পোনেন্টস তৈরী করবেন এবং নেস্ট করবেন 
+- কিভাবে মার্কআপ এবং স্টাইলস সংযুক্ত করবেন 
+- কিভাবে ডেটা প্রদর্শন করবেন
+- কিভাবে কন্ডিশনস এবং লিস্টস গুলো রেন্ডার করবেন


Suggested change

- কিভাবে কন্ডিশনস এবং লিস্টস গুলো রেন্ডার করবেন

- কিভাবে কন্ডিশন এবং লিস্ট গুলো রেন্ডার করবেন

nafistiham · 2023-06-03T05:30:00Z

src/content/learn/index.md


-React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
+React অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল ইউএই (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং এপিয়ারেন্স রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে।


Suggested change

React অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল ইউএই (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং এপিয়ারেন্স রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে।

React অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল UI (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং চেহারা রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে।

nafistiham · 2023-06-03T05:31:02Z

src/content/learn/index.md

@@ -33,22 +33,23 @@ function MyButton() {
 }
 ```

-Now that you've declared `MyButton`, you can nest it into another component:
+এখন আপনি `MyButton` ডিক্লেয়ার করেছেন, এটিকে অন্য কম্পোনেন্টে নেস্ট করতে পারেন:
+


অতিরিক্ত লাইন আছে। বাদ দিতে হবে।

Suggested change

nafistiham · 2023-06-03T05:32:19Z

src/content/learn/index.md


 ```js {5}
 export default function MyApp() {
  return (
    <div>
-      <h1>Welcome to my app</h1>
+      <h1>আমার অ্যাপে স্বাগতম</h1>


আমরা শেষমেশ কমেন্ট বাদে অন্য কিছু আপাতত বাংলা না করার সিদ্ধান্ত নিয়েছি। যেহেতু মূল কোডের সাথে মিলবার বিষয় থাকে, এবং কিছু ক্ষেত্রে স্ক্রিনশট ব্যবহার করা হয়।

Suggested change

<h1>আমার অ্যাপে স্বাগতম</h1>

<h1>Welcome to my app</h1>

nafistiham · 2023-06-03T05:33:56Z

src/content/learn/index.md


-JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
+JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে মোড়াতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` মোড়ক:


Suggested change

JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে মোড়াতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` মোড়ক:

JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে wrap করতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` wrapper:

nafistiham · 2023-06-03T08:46:52Z

src/content/learn/index.md


 ```js
 import { useState } from 'react';
 ```

-Now you can declare a *state variable* inside your component:
+এখন আপনি আপনার উপাদানের ভিতরে একটি *state variable* ঘোষণা করতে পারেন:
+


লাইন অতিরিক্ত আছে।

nafistiham · 2023-06-03T08:47:31Z

src/content/learn/index.md

    </button>
  );
 }
 ```

-When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components.
+যখন আপনি button টি ক্লিক করেন, তখন 'onClick' হ্যান্ডলারটি ফায়ার হয়। প্রতিটি button এর `onClick` প্রপ `MyApp`-এর ভিতরে `handleClick` ফাংশনে সেট করা হয়েছিল, তাই এর ভিতরের কোডটি চলে। সেই কোডটিকে `setCount(count + 1)` বলে, `count` স্টেট ভেরিয়েবলকে বৃদ্ধি করে। নতুন `count` মান প্রতিটি buuton এ একটি প্রপ হিসাবে পাস করা হয়, তাই তারা সব নতুন মান দেখায়। একে বলা হয় "lifting state up"। State up করার মাধ্যমে, আপনি এটিকে component গুলির মধ্যে শেয়ার করেছেন৷


button/buuton গুলো বাটন হবে।

nafistiham · 2023-06-03T08:47:57Z

src/content/learn/index.md

@@ -443,20 +445,20 @@ export default function MyApp() {

  return (
    <div>
-      <h1>Counters that update separately</h1>
+      <h1>যে কাউন্টারগুলো আলাদাভাবে আপডেট হয়</h1>


ইংরেজি থাকবে।

nafistiham · 2023-06-03T08:48:21Z

src/content/learn/index.md


 </Diagram>

 </DiagramGroup>

-Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code.
+এখন যখন আপনি যেকোনো একটি button এ ক্লিক করবেন, তখন `MyApp`-এ `count` পরিবর্তিত হবে, যা `MyButton`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল। 


Suggested change

এখন যখন আপনি যেকোনো একটি button এ ক্লিক করবেন, তখন `MyApp`-এ `count` পরিবর্তিত হবে, যা `MyButton`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল।

এখন যখন আপনি যেকোনো একটি বাটনে ক্লিক করবেন, তখন `MyApp`-এ `count` পরিবর্তিত হবে, যা `MyButton`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল।

nafistiham · 2023-06-03T08:49:11Z

src/content/learn/index.md


 </Diagram>

-<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="The same diagram as the previous, with the count of the parent MyApp component highlighted indicating a click with the value incremented to one. The flow to both of the children MyButton components is also highlighted, and the count value in each child is set to one indicating the value was passed down." >
+<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="আগেরটির মতো একই ডায়াগ্রাম, প্যারেন্ট MyApp কম্পোনেন্টের গণনা সহ হাইলাইট করা একটি ক্লিকের সাথে মান বৃদ্ধি করে। উভয় সন্তানের MyButton উপাদানগুলির প্রবাহও হাইলাইট করা হয়েছে, এবং প্রতিটি children এর গণনার মান একটিতে সেট করা হয়েছে যা নির্দেশ করে যে মানটি পাস হয়েছে।" >


Suggested change

<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="আগেরটির মতো একই ডায়াগ্রাম, প্যারেন্ট MyApp কম্পোনেন্টের গণনা সহ হাইলাইট করা একটি ক্লিকের সাথে মান বৃদ্ধি করে। উভয় সন্তানের MyButton উপাদানগুলির প্রবাহও হাইলাইট করা হয়েছে, এবং প্রতিটি children এর গণনার মান একটিতে সেট করা হয়েছে যা নির্দেশ করে যে মানটি পাস হয়েছে।" >

<Diagram name="sharing_data_parent_clicked" height={385} width={410} alt="আগেরটির মতো একই ডায়াগ্রাম, প্যারেন্ট MyApp কম্পোনেন্টের গণনা সহ হাইলাইট করা একটি ক্লিকের সাথে মান বৃদ্ধি করে। উভয় চাইল্ডের MyButton উপাদানগুলির প্রবাহও হাইলাইট করা হয়েছে, এবং প্রতিটি চাইল্ড এর গণনার মান একটিতে সেট করা হয়েছে যা নির্দেশ করে যে মানটি পাস হয়েছে।" >

dimot nei, vaiya. I will add the changes as soon as possible. Thanks for your review and suggestions. You are doing great to make it awesome.

Thanks a lot for your kind words vai. We are all doing our parts.

Changes gulo add kore disi vai.

nafistiham

LGTM

nafistiham · 2023-06-16T18:28:52Z

@moshfiqrony vai, please approve the change request when convenient.

moshfiqrony

LGTM

translation added

9ec0478

vercel bot deployed to Preview May 1, 2023 13:00 View deployment

anwarhossain1 changed the title ~~translation added~~ Learn React intro translation May 1, 2023

nafistiham requested changes May 1, 2023

View reviewed changes

src/content/learn/index.md Outdated Show resolved Hide resolved

src/content/learn/index.md Outdated Show resolved Hide resolved

src/content/learn/index.md Outdated Show resolved Hide resolved

moshfiqrony mentioned this pull request May 1, 2023

Bengali Translation Progress #1

Open

moshfiqrony requested changes May 1, 2023

View reviewed changes

anwarhossain1 marked this pull request as draft May 1, 2023 14:26

moshfiqrony mentioned this pull request May 4, 2023

Learn React intro translation #7

Merged

translation for components creating and nesting added

aabee45

vercel bot deployed to Preview May 12, 2023 14:24 View deployment

writing markup with jsx section translated

5499aae

vercel bot deployed to Preview May 15, 2023 17:10 View deployment

anwarhossain1 requested review from nafistiham and moshfiqrony May 15, 2023 17:14

anwarhossain1 marked this pull request as ready for review May 15, 2023 17:18

nafistiham approved these changes May 15, 2023

View reviewed changes

moshfiqrony approved these changes May 16, 2023

View reviewed changes

moshfiqrony requested changes May 16, 2023

View reviewed changes

anwarhossain1 marked this pull request as draft May 16, 2023 03:30

adding styles and data displaying sections translation added

24bc77b

vercel bot deployed to Preview May 26, 2023 07:16 View deployment

conditional rendering,rendering lists, responding to events, screen u…

a77f374

…pdate sections translation added

vercel bot deployed to Preview June 2, 2023 04:19 View deployment

anwarhossain1 added 2 commits June 3, 2023 00:01

translation added for using hook section

e035132

all sections translation added

d961c55

vercel bot deployed to Preview June 2, 2023 19:46 View deployment

anwarhossain1 marked this pull request as ready for review June 2, 2023 20:06

nafistiham requested changes Jun 3, 2023

View reviewed changes

changes added

7419681

vercel bot deployed to Preview June 16, 2023 05:08 View deployment

nafistiham approved these changes Jun 16, 2023

View reviewed changes

moshfiqrony approved these changes Jun 17, 2023

View reviewed changes

moshfiqrony added this pull request to the merge queue Jun 17, 2023

Merged via the queue into reactjs:main with commit 5180b4d Jun 17, 2023
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Learn React intro translation #10

Learn React intro translation #10

anwarhossain1 commented May 1, 2023

github-actions bot commented May 1, 2023 •

edited

Loading

📦 Next.js Bundle Analysis for react-dev

moshfiqrony commented May 1, 2023 •

edited

Loading

anwarhossain1 commented May 1, 2023

moshfiqrony commented May 1, 2023 •

edited

Loading

moshfiqrony commented May 1, 2023

anwarhossain1 commented May 1, 2023

moshfiqrony commented May 1, 2023

moshfiqrony May 1, 2023

nafistiham left a comment

moshfiqrony left a comment •

edited

Loading

moshfiqrony left a comment •

edited

Loading

anwarhossain1 commented May 16, 2023

moshfiqrony commented May 16, 2023

anwarhossain1 commented May 16, 2023

nafistiham left a comment

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

nafistiham Jun 3, 2023

anwarhossain1 Jun 4, 2023

nafistiham Jun 4, 2023

anwarhossain1 Jun 16, 2023

nafistiham left a comment

nafistiham commented Jun 16, 2023

moshfiqrony left a comment

	- কিভাবে কন্ডিশনস এবং লিস্টস গুলো রেন্ডার করবেন
	- কিভাবে কন্ডিশন এবং লিস্ট গুলো রেন্ডার করবেন


		React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
		React অ্যাপগুলি কম্পোনেন্টস দিয়ে তৈরি। একটি কম্পোনেন্ট হল ইউএই (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং এপিয়ারেন্স রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে।

	<h1>আমার অ্যাপে স্বাগতম</h1>
	<h1>Welcome to my app</h1>


		JSX is stricter than HTML. You have to close tags like `<br />`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `<div>...</div>` or an empty `<>...</>` wrapper:
		JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে মোড়াতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` মোড়ক:

Learn React intro translation #10

Learn React intro translation #10

Conversation

anwarhossain1 commented May 1, 2023

github-actions bot commented May 1, 2023 • edited Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

moshfiqrony commented May 1, 2023 • edited Loading

anwarhossain1 commented May 1, 2023

moshfiqrony commented May 1, 2023 • edited Loading

moshfiqrony commented May 1, 2023

anwarhossain1 commented May 1, 2023

moshfiqrony commented May 1, 2023

Choose a reason for hiding this comment

nafistiham left a comment

Choose a reason for hiding this comment

moshfiqrony left a comment • edited Loading

Choose a reason for hiding this comment

moshfiqrony left a comment • edited Loading

Choose a reason for hiding this comment

anwarhossain1 commented May 16, 2023

moshfiqrony commented May 16, 2023

anwarhossain1 commented May 16, 2023

nafistiham left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nafistiham left a comment

Choose a reason for hiding this comment

nafistiham commented Jun 16, 2023

moshfiqrony left a comment

Choose a reason for hiding this comment

github-actions bot commented May 1, 2023 •

edited

Loading

moshfiqrony commented May 1, 2023 •

edited

Loading

moshfiqrony commented May 1, 2023 •

edited

Loading

moshfiqrony left a comment •

edited

Loading

moshfiqrony left a comment •

edited

Loading