Learn React intro translation by anwarhossain1 · Pull Request #10 · reactjs/bn.react.dev
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
অনেক ধন্যবাদ। বিশাল একটি পেইজের কাজ শেষ করবার জন্য। দুই একতা ক্ষেত্রে মনে হয়েছে টেকনিকাল শব্দ রেখে দিলেই ভাল হবে। কোডের মধ্যে আমরা কমেন্ট ব্যতীত কিছু বাংলা করছি না। আর লাইনগুলো একদম মিলিয়ে অনুবাদ করছি। কোন নিউ লাইন কাটছি না বা যোগ করছি না। যতটুকু ইংরেজিতে আছে ঠিক ততটুকু রাখছি। দ্বিমত থাকলে নিঃসংকোচে জানাতে পারেন। আবারও ধন্যবাদ।
| - কিভাবে কম্পোনেন্টস তৈরী করবেন এবং নেস্ট করবেন | ||
| - কিভাবে মার্কআপ এবং স্টাইলস সংযুক্ত করবেন | ||
| - কিভাবে ডেটা প্রদর্শন করবেন | ||
| - কিভাবে কন্ডিশনস এবং লিস্টস গুলো রেন্ডার করবেন |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| - কিভাবে কন্ডিশনস এবং লিস্টস গুলো রেন্ডার করবেন | |
| - কিভাবে কন্ডিশন এবং লিস্ট গুলো রেন্ডার করবেন |
| ## কম্পোনেন্টস তৈরী এন্ড নেস্টিং {/*components*/} | ||
|
|
||
| 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 অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল ইউএই (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং এপিয়ারেন্স রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে। |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| React অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল ইউএই (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং এপিয়ারেন্স রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে। | |
| React অ্যাপগুলি *কম্পোনেন্টস* দিয়ে তৈরি। একটি কম্পোনেন্ট হল UI (ইউজার ইন্টারফেস) এর একটি অংশ যার নিজস্ব লজিক এবং চেহারা রয়েছে। একটি কম্পোনেন্ট একটি বাটনের মতো ছোট বা একটি সম্পূর্ণ পেজ এর মতো বড় হতে পারে। |
|
|
||
| Now that you've declared `MyButton`, you can nest it into another component: | ||
| এখন আপনি `MyButton` ডিক্লেয়ার করেছেন, এটিকে অন্য কম্পোনেন্টে নেস্ট করতে পারেন: | ||
|
|
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
অতিরিক্ত লাইন আছে। বাদ দিতে হবে।
| return ( | ||
| <div> | ||
| <h1>Welcome to my app</h1> | ||
| <h1>আমার অ্যাপে স্বাগতম</h1> |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
আমরা শেষমেশ কমেন্ট বাদে অন্য কিছু আপাতত বাংলা না করার সিদ্ধান্ত নিয়েছি। যেহেতু মূল কোডের সাথে মিলবার বিষয় থাকে, এবং কিছু ক্ষেত্রে স্ক্রিনশট ব্যবহার করা হয়।
| <h1>আমার অ্যাপে স্বাগতম</h1> | |
| <h1>Welcome to my app</h1> |
| আপনি উপরে যে মার্কআপ সিনট্যাক্সটি দেখেছেন তাকে বলা হয় *JSX*। এটি ঐচ্ছিক, তবে বেশিরভাগ React প্রজেক্ট গুলিতে সুবিধার জন্য JSX ব্যবহার করা হয়। [লোকাল ডেভেলপমেন্টের জন্য আমরা যে সমস্ত টুলের পরামর্শ দিই](/learn/installation) সেগুলির সবকটিই JSX সমর্থন করে। | ||
|
|
||
| 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>` বা একটি খালি `<>...</>` মোড়ক: |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে মোড়াতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` মোড়ক: | |
| JSX HTML এর চেয়ে বেশি স্ট্রিক্ট। আপনাকে `<br />` এর মত ট্যাগ বন্ধ করতে হবে। আপনার কম্পোনেন্ট একাধিক JSX ট্যাগ রিটার্ন করতে পারবে না। সেগুলিকে একটি parent div এর মধ্যে wrap করতে হবে, যেমন একটি `<div>...</div>` বা একটি খালি `<>...</>` wrapper: |
|
|
||
| Now you can declare a *state variable* inside your component: | ||
| এখন আপনি আপনার উপাদানের ভিতরে একটি *state variable* ঘোষণা করতে পারেন: | ||
|
|
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
লাইন অতিরিক্ত আছে।
| ``` | ||
|
|
||
| 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 গুলির মধ্যে শেয়ার করেছেন৷ |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
button/buuton গুলো বাটন হবে।
| return ( | ||
| <div> | ||
| <h1>Counters that update separately</h1> | ||
| <h1>যে কাউন্টারগুলো আলাদাভাবে আপডেট হয়</h1> |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ইংরেজি থাকবে।
| </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`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল। |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| এখন যখন আপনি যেকোনো একটি button এ ক্লিক করবেন, তখন `MyApp`-এ `count` পরিবর্তিত হবে, যা `MyButton`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল। | |
| এখন যখন আপনি যেকোনো একটি বাটনে ক্লিক করবেন, তখন `MyApp`-এ `count` পরিবর্তিত হবে, যা `MyButton`-এর উভয় সংখ্যাই পরিবর্তন করবে। এখানে আপনি কোডে এটি প্রকাশ করতে পারেন যেভাবে, সেটি দেখানো হল। |
| </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 এর গণনার মান একটিতে সেট করা হয়েছে যা নির্দেশ করে যে মানটি পাস হয়েছে।" > |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| <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 উপাদানগুলির প্রবাহও হাইলাইট করা হয়েছে, এবং প্রতিটি চাইল্ড এর গণনার মান একটিতে সেট করা হয়েছে যা নির্দেশ করে যে মানটি পাস হয়েছে।" > |
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks a lot for your kind words vai. We are all doing our parts.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes gulo add kore disi vai.