From 41ba74cc1ac3687215277c1d1695d1dff3bf2936 Mon Sep 17 00:00:00 2001 From: nafistiham Date: Sun, 7 Sep 2025 03:55:58 +0600 Subject: [PATCH 01/89] Fix previous translations in tic-tac-toe --- src/content/learn/tutorial-tic-tac-toe.md | 56 +++++++++++------------ 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 56e0cbbf1..8f96d5919 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -10,15 +10,15 @@ title: 'টিউটোরিয়াল: টিক-ট্যাক-টো' -এই টিউটোরিয়ালটি এমন লোকদের জন্য ডিজাইন করা হয়েছে যারা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করার চেষ্টা করতে চান। আপনি যদি প্রতিটি ধারণা ধাপে ধাপে শিখতে পছন্দ করেন, তাহলে [Describing the UI.](/learn/describing-the-ui) দিয়ে শুরু করুন। +এই টিউটোরিয়ালটি এমন লোকদের জন্য ডিজাইন করা হয়েছে যারা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করার চেষ্টা করতে চান। আপনি যদি প্রতিটি ধারণা ধাপে ধাপে শিখতে পছন্দ করেন, তাহলে [Describing the UI](/learn/describing-the-ui) দিয়ে শুরু করুন। টিউটোরিয়ালটি কয়েকটি বিভাগে বিভক্ত: -- [টিউটোরিয়ালের জন্য সেটআপ](#setup-for-the-tutorial) আপনাকে টিউটোরিয়ালটি অনুসরণ করার জন্য **একটি শুরুর ধাপ** দেবে। -- [সংক্ষিপ্ত বিবরণ](#overview) আপনাকে React-এর **মৌলিক বিষয়গুলি** যথা: components, props এবং state সম্পর্কে শেখাবে| -- [গেমটি সম্পূর্ণ করা](#completing-the-game) আপনাকে React Development-এর **সবচেয়ে সাধারণ কৌশলগুলি** শেখাবে। +- [টিউটোরিয়ালের জন্য সেটাপ](#setup-for-the-tutorial) আপনাকে টিউটোরিয়ালটি অনুসরণ করার জন্য **একটি শুরুর ধাপ** দেবে। +- [সংক্ষিপ্ত বিবরণ](#overview) আপনাকে React-এর **মৌলিক বিষয়গুলি** যথা: components, props এবং state সম্পর্কে শেখাবে। +- [গেমটি সম্পূর্ণ করা](#completing-the-game) আপনাকে React ডেভেলপমেন্ট-এর **সবচেয়ে সাধারণ কৌশলগুলি** শেখাবে। - [সময়ে ভ্রমন্ করা](#adding-time-travel) আপনাকে React-এর অনন্য শক্তিসমূহ সম্পর্কে **গভীর দৃষ্টি** দেবে । ### আপনি কি বানাবেন? {/*what-are-you-building*/} @@ -194,15 +194,15 @@ body { -যদি কোডটি এখনও আপনার কাছে বোধগম্য না হয়, বা আপনি যদি কোডের syntax সাথে অপরিচিত হন তবে চিন্তা করবেন না! এই টিউটোরিয়ালের লক্ষ্য হল আপনাকে React এবং এর syntax বুঝতে সাহায্য করা। +যদি কোডটি এখনও আপনার কাছে বোধগম্য না হয়, বা আপনি যদি কোডের সিনট্যাক্স সাথে অপরিচিত হন তবে চিন্তা করবেন না! এই টিউটোরিয়ালের লক্ষ্য হল আপনাকে React এবং এর সিনট্যাক্স বুঝতে সাহায্য করা। -আমরা সুপারিশ করছি যে আপনি টিউটোরিয়ালটি শুরু করার আগে উপরের টিক-ট্যাক-টো গেমটি দেখুন। আপনি যে বৈশিষ্ট্যগুলি লক্ষ্য করবেন তাদের মধ্যে একটি হল গেমের বোর্ডের ডানদিকে একটি সংখ্যাযুক্ত তালিকা রয়েছে। এই তালিকাটি আপনাকে গেমটিতে ঘটে যাওয়া সমস্ত পদক্ষেপের একটি ইতিহাস দেয় এবং গেমটি অগ্রসর হওয়ার সাথে সাথে এটি update হয়। +আমরা চাইব যে আপনি টিউটোরিয়ালটি শুরু করার আগে উপরের টিক-ট্যাক-টো গেমটি দেখুন। আপনি যে বৈশিষ্ট্যগুলি লক্ষ্য করবেন তাদের মধ্যে একটি হল গেমের বোর্ডের ডানদিকে একটি সংখ্যাযুক্ত তালিকা রয়েছে। এই তালিকাটি আপনাকে গেমটিতে ঘটে যাওয়া সমস্ত পদক্ষেপের একটি ইতিহাস দেয় এবং গেমটি অগ্রসর হওয়ার সাথে সাথে এটি আপডেট হয়। -আপনার একবার টিকে-টাক-টো গেমটি খেলা হয় গেলে আপনি পরবর্তী পর্যায়ে স্ক্রল করুন । আপনি এই টিউটোরিয়াল একটি সহজ টেমপ্লেট দিয়ে শুরু করবেন। আমাদের পরবর্তী পদক্ষেপ হল আপনাকে সেট আপ করা যাতে আপনি গেমটি তৈরি করা শুরু করতে পারেন। +আপনার একবার টিকে-টাক-টো গেমটি খেলা হয় গেলে আপনি পরবর্তী পর্যায়ে স্ক্রল করুন। আপনি এই টিউটোরিয়াল একটি সহজ টেমপ্লেট দিয়ে শুরু করবেন। আমাদের পরবর্তী পদক্ষেপ হল আপনাকে সেট আপ করা যাতে আপনি গেমটি তৈরি করা শুরু করতে পারেন। -## টিউটোরিয়ালের জন্য সেটআপ {/*setup-for-the-tutorial*/} +## টিউটোরিয়ালের জন্য সেটাপ {/*setup-for-the-tutorial*/} -নীচের লাইভ কোড এডিটরে, CodeSandbox ওয়েবসাইট ব্যবহার করে সম্পাদকটিকে একটি নতুন ট্যাবে খুলতে উপরের-ডানদিকের কোণায় **Fork**-এ ক্লিক করুন। CodeSandbox আপনাকে আপনার Browser-এ কোড লিখতে দেয় এবং আপনার তৈরি করা অ্যাপটি কীভাবে দেখাবে তার preview দেখতে দেয়। নতুন ট্যাবে এই টিউটোরিয়ালের জন্য একটি খালি বর্গক্ষেত্র এবং starter code প্রদর্শন করা উচিত। +নীচের লাইভ কোড এডিটরে, CodeSandbox ওয়েবসাইট ব্যবহার করে সম্পাদকটিকে একটি নতুন ট্যাবে খুলতে উপরের-ডানদিকের কোণায় **Fork**-এ ক্লিক করুন। CodeSandbox আপনাকে আপনার ব্রাউজারে কোড লিখতে দেয় এবং আপনার তৈরি করা অ্যাপটি কীভাবে দেখাবে তার প্রিভিউ দেখতে দেয়। নতুন ট্যাবে এই টিউটোরিয়ালের জন্য একটি খালি বর্গক্ষেত্র এবং স্টার্টার কোড প্রদর্শন করা উচিত। @@ -263,31 +263,31 @@ body { আপনি এই টিউটোরিয়ালটি নিজের local development environment ব্যবহার করে ও follow করতে পারেন। এর জন্য আপনাকে নিচের steps-গুলো follow করতে হবে: -1. Install [Node.js](https://nodejs.org/en/) -1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **Download Sandbox** in that menu to download an archive of the files locally -1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped -1. Install the dependencies with `npm install` -1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser +1. [Node.js](https://nodejs.org/en/) ইন্সটল করুন। +2. আগে যে CodeSandbox ট্যাবটি খুলেছিলেন, বামে সর্বোচ্চ কোণার বাটনটি চাপ দিয়ে মেনু খুলুন, এবং এর পর সেই মেনুতে **Download Sandbox** নির্বাচন করুন। এতে আপনার কম্পিউটারে ফাইলগুলো ডাউনলোড হবে। +3. আর্কাইভটি আনজিপ করুন, এর পর একটি টার্মিনাল খুলুন এবং যেই ডিরেক্টরি আনজিপ করেছেন সেখানে `cd` করুন। +4. `npm install` দিয়ে ডিপেন্ডেন্সিগুলো ইন্সটল করুন। +5. `npm start` রান করার মধ্য দিয়ে একটি লোকাল সার্ভার চালু করুন এবং প্রম্পট গুলো অনুসরণ করে ব্রাউজারে দেখুন কীভাবে কোডটা কাজ করছে। -আপনি আটকে গেলে, এটি আপনাকে থামাতে দেবেন না! পরিবর্তে online follow করুন এবং পরে আবার একটি local setup চেষ্টা করুন। +আপনি আটকে গেলে, এটি আপনাকে থামাতে দেবেন না! পরিবর্তে online follow করুন এবং পরে আবার একটি লোকাল সেটাপ চেষ্টা করুন। ## Overview {/*overview*/} -আপনার সেটআপ সম্পূর্ণ হয়েছে, চলুন react সম্পর্কে ধারণা লাভ করি! +আপনার সেটাপ সম্পূর্ণ হয়েছে, চলুন React সম্পর্কে ধারণা লাভ করি! ### Starter Code পরিদর্শন {/*inspecting-the-starter-code*/} -CodeSandbox-এ আপনি তিনটি প্রধান section দেখতে পাবেন: +CodeSandbox-এ আপনি তিনটি প্রধান সেকশন দেখতে পাবেন: ![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) -1. _Files_ section যেখানে আপনি files-এর list যেমন, `App.js`, `index.js`, `styles.css` এবং `Piblic` নাম একটি folder দেখতে পাবেন -2. _Code Editor_ যেখানে আপনি যে file-টি select করেছেন সেটির source code দেখতে পাবেন -3. _Browser_ section যেখানে আপনি যে code-টি লিখেছেন সেটি browser-এ কেমন দেখাবে তা দেখতে পাবেন +1. _Files_ section যেখানে আপনি ফাইলের তালিকা যেমন, `App.js`, `index.js`, `styles.css` এবং `Piblic` নাম একটি ফোল্ডার দেখতে পাবেন +2. _Code Editor_ যেখানে আপনি যে ফাইলটি নির্বাচন করেছেন সেটির সোর্স কোড দেখতে পাবেন +3. _Browser_ সেকশন যেখানে আপনি যে কোডটি লিখেছেন সেটি ব্রাউজারে কেমন দেখাবে তা দেখতে পাবেন -Files section-এ `App.js` file-টি selected থাকা উচিত | _Code editor_-এ এই ফাইলটির content হলো: +Files সেকশনে `App.js` ফাইলটি নির্বাচিত থাকা উচিত | _Code editor_-এ এই ফাইলটির কন্টেন্ট হলো: ```jsx export default function Square() { @@ -295,15 +295,15 @@ export default function Square() { } ``` -The _browser_ section should be displaying a square with an X in it like this: +_browser_ সেকশনে নিচের মত X সহ একটি বর্গ দেখানোর কথা: ![x-filled square](../images/tutorial/x-filled-square.png) -এখন starter code-এ উপস্থিত file-গুলোকে দেখে নেওয়া যাক। +এখন starter code-এ উপস্থিত ফাইলগুলোকে দেখে নেওয়া যাক। #### `App.js` {/*appjs*/} -`App.js` file-এ উপস্থিত code একটি _component_ তৈরী করে| React-এ component হলো পুনরায় ব্যবহারযোগ্য code যা user interface-এর একটি অংশকে নির্দেশ করে| আপনার Application-এর UI elements-গুলোকে render, manage, এবং update করতে components ব্যবহার করা হয়| Component-টির মধ্যে কি হচ্ছে বুঝতে component-টির এক এক করে প্রতিটি লাইন দেখে নেওয়া যাক: +`App.js` ফাইলে উপস্থিত কোড একটি _component_ তৈরী করে। React-এ কম্পোনেন্ট হলো পুনরায় ব্যবহারযোগ্য কোড যা ইউজার ইন্টারফেসের একটি অংশকে নির্দেশ করে. আপনার এপ্লিকেশনের UI এলিমেন্ট গুলোকে রেন্ডার, ম্যানেজ, এবং আপডেট করতে কম্পোনেন্ট ব্যবহার করা হয়। কম্পোনেন্ট-টির মধ্যে কী হচ্ছে বুঝতে কম্পোনেন্ট-টির এক এক করে প্রতিটি লাইন দেখে নেওয়া যাক: ```js {1} export default function Square() { @@ -311,7 +311,7 @@ export default function Square() { } ``` -প্রথম লাইনটি `Square` নামক function define করছে| JavaScript-এর `export` keyword-টি এই function-টিকে এই file-এর বাইরে অর্থাৎ অন্য file-এ accessible করে| default কীওয়ার্ডটি অন্যান্য ফাইলগুলিকে আপনার কোডে বলে দেয় যে এটি আপনার ফাইলের main function। +প্রথম লাইনটি `Square` নামক ফাংশন ডিফাইন করছে। জাভাস্ক্রিপ্ট `export` কীওয়ার্ড-টি এই ফাংশনটিকে এই ফাইলের বাইরে অর্থাৎ অন্য ফাইলে accessible করে। ডিফল্ট কীওয়ার্ডটি অন্যান্য ফাইলগুলিকে আপনার কোডে বলে দেয় যে এটি আপনার ফাইলের main ফাংশন। ```js {2} export default function Square() { @@ -319,15 +319,15 @@ export default function Square() { } ``` -দ্বিতীয় লাইনটি একটি button return করে। JavaScript-এর `return` কীওয়ার্ডটি বোঝায় যে এর পরে যা আসবে, তা function caller-এর value হিসাবে return করা হয়। `` JSX element-টিকে বন্ধ করে, এবং এর থেকে বোঝা যায় যে পরবর্তী কোনো component button-এর ভিতরে রাখা হবে না। +দ্বিতীয় লাইনটি একটি বাটন রিটার্ন করে। জাভাস্ক্রিপ্টের `return` কীওয়ার্ডটি বোঝায় যে এর পরে যা আসবে, তা function caller-এর মান হিসাবে রিটার্ন করা হয়। `` JSX এলিমেন্টটিকে বন্ধ করে, এবং এর থেকে বোঝা যায় যে পরবর্তী কোনো কম্পোনেন্ট বাটন এর ভিতরে রাখা হবে না। #### `styles.css` {/*stylescss*/} -CodeSandbox-এর _Files_ section-এ চিহ্নিত `styles.css` নামক ফাইলটিতে ক্লিক করুন। এই ফাইলটি আপনার React app-এর জন্য styles বর্ণনা করে। প্রথম দুটি _CSS selectors_ (`*` এবং `body`) আপনার অ্যাপের বড় অংশের স্টাইল বর্ণনা করে, যেখানে যেকোনো component-এ যেখানে যেখানে `className` property-টি সেট করা হয়েছে `square`, সেখানকার style `.square` selector দ্বারা বর্ণনা করা হয়। আপনার কোডে, এটি `App.js` file-এর আপনার Square component-এর button-এর style-এর সাথে মিলে যাবে। +CodeSandbox-এর _Files_ সেকশনে চিহ্নিত `styles.css` নামক ফাইলটিতে ক্লিক করুন। এই ফাইলটি আপনার React app-এর জন্য styles বর্ণনা করে। প্রথম দুটি _CSS selectors_ (`*` এবং `body`) আপনার অ্যাপের বড় অংশের স্টাইল বর্ণনা করে, যেখানে যেকোনো কম্পোনেন্টে যেখানে যেখানে `className` property-টি সেট করা হয়েছে `square`, সেখানকার style `.square` selector দ্বারা বর্ণনা করা হয়। আপনার কোডে, এটি `App.js` file-এর আপনার Square কম্পোনেন্টের বাটনের style-এর সাথে মিলে যাবে। #### `index.js` {/*indexjs*/} -CodeSandbox-এর _Files_ section-এ চিহ্নিত `index.js` নামক ফাইলটিতে ক্লিক করুন। টিউটোরিয়ালের সময়ে আপনি এই ফাইলটি edit করবেন না, কিন্তু এটি আপনার `App.js` ফাইলে তৈরি করা component এবং web browser-এর মধ্যে মধ্যস্থতা করে। +CodeSandbox-এর _Files_ section-এ চিহ্নিত `index.js` নামক ফাইলটিতে ক্লিক করুন। টিউটোরিয়ালের সময়ে আপনি এই ফাইলটি এডিট করবেন না, কিন্তু এটি আপনার `App.js` ফাইলে তৈরি করা কম্পোনেন্ট এবং ওয়েব ব্রাউজারের মধ্যে মধ্যস্থতা করে। ```jsx import { StrictMode } from 'react'; From 1ebfe88cc2ffd2b01f34b31a921f6687458001cc Mon Sep 17 00:00:00 2001 From: nafistiham Date: Thu, 11 Sep 2025 12:55:46 +0600 Subject: [PATCH 02/89] translate tic-tact-toe tutorial till 393 --- src/content/learn/tutorial-tic-tac-toe.md | 30 +++++++++++------------ 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 8f96d5919..3051b4402 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -337,20 +337,20 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 bring all the necessary pieces together: +লাইন ১-৫ প্রয়োজনীয় সবকিছু একত্রিত করে: * React -* React's library to talk to web browsers (React DOM) -* the styles for your components -* the component you created in `App.js`. +* ওয়েব ব্রাউজারের সাথে কথা বলার জন্য React-এর লাইব্রেরি (React DOM) +* আপনার কম্পোনেন্টগুলির জন্য স্টাইলস +* আপনি `App.js`-এ যে কম্পোনেন্ট তৈরি করেছেন। -The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder. +ফাইলের বাকি অংশ সবকিছু একত্রিত করে এবং `public` ফোল্ডারের `index.html`-এ ফাইনাল প্রোডাক্ট ইনজেক্ট করে। -### Building the board {/*building-the-board*/} +### বোর্ড তৈরি করা {/*building-the-board*/} -Let's get back to `App.js`. This is where you'll spend the rest of the tutorial. +চলুন আবার `App.js`-এ ফিরে যাই। এখানেই আপনি টিউটোরিয়ালের বাকি অংশ কাটাবেন। -Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this: +বর্তমানে বোর্ডটি কেবল একটি স্কোয়ার, কিন্তু আপনার নয়টি দরকার! যদি আপনি শুধু আপনার স্কোয়ারটি কপি-পেস্ট করে দুটি স্কোয়ার তৈরি করার চেষ্টা করেন, যেমন: ```js {2} export default function Square() { @@ -358,15 +358,15 @@ export default function Square() { } ``` -You'll get this error: +আপনি এই এররটি পাবেন: -/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX Fragment `<>...`? +/src/App.js: Adjacent JSX এলিমেন্ট অবশ্যই enclosing ট্যাগ এ wrap করা থাকতে হবে। আপনি কি একটি JSX Fragment `<>...` চান? -React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *Fragments* (`<>` and ``) to wrap multiple adjacent JSX elements like this: +React কম্পোনেন্টগুলিকে অবশ্যই একটি একক JSX এলিমেন্ট ফেরত দিতে হবে, একাধিক পাশাপাশি JSX এলিমেন্ট (যেমন দুটি বাটন) নয়। এটি ঠিক করতে আপনি *Fragments* (`<>` এবং ``) ব্যবহার করতে পারেন একাধিক পাশাপাশি JSX এলিমেন্ট মোড়ানোর জন্য, যেমন: ```js {3-6} export default function Square() { @@ -379,17 +379,17 @@ export default function Square() { } ``` -Now you should see: +এখন আপনি দেখবেন: ![two x-filled squares](../images/tutorial/two-x-filled-squares.png) -Great! Now you just need to copy-paste a few times to add nine squares and... +দারুণ! এখন আপনাকে শুধু কয়েকবার কপি-পেস্ট করতে হবে নয়টি স্কোয়ার যোগ করার জন্য এবং... ![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) -Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed. +ওহ না! সব স্কোয়ার এক লাইনে রয়েছে, আমাদের বোর্ডের মতো গ্রিড আকারে নয়। এটি ঠিক করতে হলে আপনাকে আপনার স্কোয়ারগুলোকে `div` দিয়ে রো-তে গ্রুপ করতে হবে এবং কিছু CSS ক্লাস যোগ করতে হবে। এই সময়ে, আপনি প্রতিটি স্কোয়ারকে একটি নাম্বার দেবেন যাতে আপনি নিশ্চিত হতে পারেন প্রতিটি স্কোয়ার কোথায় প্রদর্শিত হচ্ছে। -In the `App.js` file, update the `Square` component to look like this: +`App.js` ফাইলে, `Square` কম্পোনেন্ট আপডেট করুন এভাবে দেখানোর জন্য: ```js {3-19} export default function Square() { From a925addc93b1c8c9cb898885abccb5cfd3cae898 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:33 +0600 Subject: [PATCH 03/89] Translate tic-tac-toe tutorial paragraphs 1-2 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 3051b4402..435cbeba5 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -4,13 +4,13 @@ title: 'টিউটোরিয়াল: টিক-ট্যাক-টো' -এই টিউটোরিয়ালের সময় আপনি একটি ছোট টিক-ট্যাক-টো গেম তৈরি করবেন। এই টিউটোরিয়ালটি কোন পূর্বের React জ্ঞান অনুমান করে না। টিউটোরিয়ালে আপনি যে কৌশলগুলি শিখবেন তা যেকোন React অ্যাপ তৈরির জন্য অপরিহার্য, এবং এটি সম্পূর্ণরূপে বোঝা আপনাকে React সম্পর্কে গভীর ধারণা দেবে। +এই টিউটোরিয়ালে একটি ছোট টিক-ট্যাক-টো গেম তৈরি করবেন। আগে থেকে React জানা প্রয়োজন নেই। এখানে শেখা কৌশলগুলো যেকোনো React অ্যাপ তৈরির জন্য গুরুত্বপূর্ণ, আর সেগুলো ভালোভাবে বুঝলে React সম্পর্কে গভীর ধারণা পাবেন। -এই টিউটোরিয়ালটি এমন লোকদের জন্য ডিজাইন করা হয়েছে যারা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করার চেষ্টা করতে চান। আপনি যদি প্রতিটি ধারণা ধাপে ধাপে শিখতে পছন্দ করেন, তাহলে [Describing the UI](/learn/describing-the-ui) দিয়ে শুরু করুন। +এই টিউটোরিয়াল তাঁদের জন্য, যাঁরা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করতে চান। প্রতিটি ধারণা ধাপে ধাপে শিখতে চাইলে [UI-এর বর্ণনা](/learn/describing-the-ui) দিয়ে শুরু করুন। From 96c2601b530a2f3e5b362cd5624ea8ce39a5c090 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:33 +0600 Subject: [PATCH 04/89] Translate tic-tac-toe tutorial paragraphs 3-4 --- src/content/learn/tutorial-tic-tac-toe.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 435cbeba5..4715c3af7 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -16,12 +16,12 @@ title: 'টিউটোরিয়াল: টিক-ট্যাক-টো' টিউটোরিয়ালটি কয়েকটি বিভাগে বিভক্ত: -- [টিউটোরিয়ালের জন্য সেটাপ](#setup-for-the-tutorial) আপনাকে টিউটোরিয়ালটি অনুসরণ করার জন্য **একটি শুরুর ধাপ** দেবে। -- [সংক্ষিপ্ত বিবরণ](#overview) আপনাকে React-এর **মৌলিক বিষয়গুলি** যথা: components, props এবং state সম্পর্কে শেখাবে। -- [গেমটি সম্পূর্ণ করা](#completing-the-game) আপনাকে React ডেভেলপমেন্ট-এর **সবচেয়ে সাধারণ কৌশলগুলি** শেখাবে। -- [সময়ে ভ্রমন্ করা](#adding-time-travel) আপনাকে React-এর অনন্য শক্তিসমূহ সম্পর্কে **গভীর দৃষ্টি** দেবে । +- [টিউটোরিয়ালের জন্য সেটআপ](#setup-for-the-tutorial) অনুসরণ করার **প্রস্তুতি নিতে** সাহায্য করবে। +- [সংক্ষিপ্ত বিবরণ](#overview) React-এর **মৌলিক বিষয়গুলো**—কম্পোনেন্ট, props এবং state—শেখাবে। +- [গেমটি সম্পূর্ণ করা](#completing-the-game) React ডেভেলপমেন্টের **সবচেয়ে প্রচলিত কৌশলগুলো** শেখাবে। +- [সময় ভ্রমণ যোগ করা](#adding-time-travel) React-এর বিশেষ ক্ষমতাগুলো সম্পর্কে **আরও গভীর ধারণা** দেবে। -### আপনি কি বানাবেন? {/*what-are-you-building*/} +### আপনি কী বানাবেন? {/*what-are-you-building*/} এই টিউটোরিয়ালে, আপনি React-এর সাহায্যে একটি ইন্টারেক্টিভ টিক-ট্যাক-টো গেম তৈরি করবেন। @@ -194,7 +194,7 @@ body { -যদি কোডটি এখনও আপনার কাছে বোধগম্য না হয়, বা আপনি যদি কোডের সিনট্যাক্স সাথে অপরিচিত হন তবে চিন্তা করবেন না! এই টিউটোরিয়ালের লক্ষ্য হল আপনাকে React এবং এর সিনট্যাক্স বুঝতে সাহায্য করা। +কোড এখনও না বুঝলে বা সিনট্যাক্স অপরিচিত মনে হলে চিন্তার কিছু নেই! এই টিউটোরিয়ালের উদ্দেশ্যই হলো React ও এর সিনট্যাক্স বুঝতে সাহায্য করা। আমরা চাইব যে আপনি টিউটোরিয়ালটি শুরু করার আগে উপরের টিক-ট্যাক-টো গেমটি দেখুন। আপনি যে বৈশিষ্ট্যগুলি লক্ষ্য করবেন তাদের মধ্যে একটি হল গেমের বোর্ডের ডানদিকে একটি সংখ্যাযুক্ত তালিকা রয়েছে। এই তালিকাটি আপনাকে গেমটিতে ঘটে যাওয়া সমস্ত পদক্ষেপের একটি ইতিহাস দেয় এবং গেমটি অগ্রসর হওয়ার সাথে সাথে এটি আপডেট হয়। From 25ebf77f153b865d45907d0541f5b7f963a684d9 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:34 +0600 Subject: [PATCH 05/89] Translate tic-tac-toe tutorial paragraphs 5-6 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 4715c3af7..e8aa714b2 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -196,9 +196,9 @@ body { কোড এখনও না বুঝলে বা সিনট্যাক্স অপরিচিত মনে হলে চিন্তার কিছু নেই! এই টিউটোরিয়ালের উদ্দেশ্যই হলো React ও এর সিনট্যাক্স বুঝতে সাহায্য করা। -আমরা চাইব যে আপনি টিউটোরিয়ালটি শুরু করার আগে উপরের টিক-ট্যাক-টো গেমটি দেখুন। আপনি যে বৈশিষ্ট্যগুলি লক্ষ্য করবেন তাদের মধ্যে একটি হল গেমের বোর্ডের ডানদিকে একটি সংখ্যাযুক্ত তালিকা রয়েছে। এই তালিকাটি আপনাকে গেমটিতে ঘটে যাওয়া সমস্ত পদক্ষেপের একটি ইতিহাস দেয় এবং গেমটি অগ্রসর হওয়ার সাথে সাথে এটি আপডেট হয়। +শুরু করার আগে উপরের টিক-ট্যাক-টো গেমটি একটু দেখে নিন। বোর্ডের ডান দিকে একটি সংখ্যাযুক্ত তালিকা দেখতে পাবেন। এতে গেমের সব চালের ইতিহাস থাকে এবং খেলার অগ্রগতির সাথে তালিকাটি আপডেট হয়। -আপনার একবার টিকে-টাক-টো গেমটি খেলা হয় গেলে আপনি পরবর্তী পর্যায়ে স্ক্রল করুন। আপনি এই টিউটোরিয়াল একটি সহজ টেমপ্লেট দিয়ে শুরু করবেন। আমাদের পরবর্তী পদক্ষেপ হল আপনাকে সেট আপ করা যাতে আপনি গেমটি তৈরি করা শুরু করতে পারেন। +গেমটি দেখে ও খেলে নেওয়া হলে নিচে স্ক্রল করুন। টিউটোরিয়ালটি সহজ একটি টেমপ্লেট দিয়ে শুরু করবেন। পরের ধাপে গেম তৈরির জন্য প্রয়োজনীয় সেটআপ করবেন। ## টিউটোরিয়ালের জন্য সেটাপ {/*setup-for-the-tutorial*/} From e73148f9e72734f0aa699e79ac8d784d723c8b86 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:34 +0600 Subject: [PATCH 06/89] Translate tic-tac-toe tutorial paragraphs 7-8 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index e8aa714b2..0b1b9b989 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -200,7 +200,7 @@ body { গেমটি দেখে ও খেলে নেওয়া হলে নিচে স্ক্রল করুন। টিউটোরিয়ালটি সহজ একটি টেমপ্লেট দিয়ে শুরু করবেন। পরের ধাপে গেম তৈরির জন্য প্রয়োজনীয় সেটআপ করবেন। -## টিউটোরিয়ালের জন্য সেটাপ {/*setup-for-the-tutorial*/} +## টিউটোরিয়ালের জন্য সেটআপ {/*setup-for-the-tutorial*/} নীচের লাইভ কোড এডিটরে, CodeSandbox ওয়েবসাইট ব্যবহার করে সম্পাদকটিকে একটি নতুন ট্যাবে খুলতে উপরের-ডানদিকের কোণায় **Fork**-এ ক্লিক করুন। CodeSandbox আপনাকে আপনার ব্রাউজারে কোড লিখতে দেয় এবং আপনার তৈরি করা অ্যাপটি কীভাবে দেখাবে তার প্রিভিউ দেখতে দেয়। নতুন ট্যাবে এই টিউটোরিয়ালের জন্য একটি খালি বর্গক্ষেত্র এবং স্টার্টার কোড প্রদর্শন করা উচিত। @@ -261,7 +261,7 @@ body { -আপনি এই টিউটোরিয়ালটি নিজের local development environment ব্যবহার করে ও follow করতে পারেন। এর জন্য আপনাকে নিচের steps-গুলো follow করতে হবে: +নিজের লোকাল ডেভেলপমেন্ট পরিবেশেও এই টিউটোরিয়াল অনুসরণ করতে পারেন। এজন্য নিচের ধাপগুলো অনুসরণ করুন: 1. [Node.js](https://nodejs.org/en/) ইন্সটল করুন। 2. আগে যে CodeSandbox ট্যাবটি খুলেছিলেন, বামে সর্বোচ্চ কোণার বাটনটি চাপ দিয়ে মেনু খুলুন, এবং এর পর সেই মেনুতে **Download Sandbox** নির্বাচন করুন। এতে আপনার কম্পিউটারে ফাইলগুলো ডাউনলোড হবে। @@ -269,7 +269,7 @@ body { 4. `npm install` দিয়ে ডিপেন্ডেন্সিগুলো ইন্সটল করুন। 5. `npm start` রান করার মধ্য দিয়ে একটি লোকাল সার্ভার চালু করুন এবং প্রম্পট গুলো অনুসরণ করে ব্রাউজারে দেখুন কীভাবে কোডটা কাজ করছে। -আপনি আটকে গেলে, এটি আপনাকে থামাতে দেবেন না! পরিবর্তে online follow করুন এবং পরে আবার একটি লোকাল সেটাপ চেষ্টা করুন। +কোথাও আটকে গেলে থেমে যাবেন না! আপাতত অনলাইনে অনুসরণ করুন, পরে আবার লোকাল সেটআপ চেষ্টা করতে পারেন। From 5d0c6ca64704cfaf84f3dc89af177ce320da2474 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:34 +0600 Subject: [PATCH 07/89] Translate tic-tac-toe tutorial paragraphs 9-10 --- src/content/learn/tutorial-tic-tac-toe.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 0b1b9b989..24f93f4cd 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -273,21 +273,21 @@ body { -## Overview {/*overview*/} +## সংক্ষিপ্ত বিবরণ {/*overview*/} আপনার সেটাপ সম্পূর্ণ হয়েছে, চলুন React সম্পর্কে ধারণা লাভ করি! -### Starter Code পরিদর্শন {/*inspecting-the-starter-code*/} +### প্রাথমিক কোড দেখা {/*inspecting-the-starter-code*/} CodeSandbox-এ আপনি তিনটি প্রধান সেকশন দেখতে পাবেন: -![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) +![প্রাথমিক কোডসহ CodeSandbox](../images/tutorial/react-starter-code-codesandbox.png) -1. _Files_ section যেখানে আপনি ফাইলের তালিকা যেমন, `App.js`, `index.js`, `styles.css` এবং `Piblic` নাম একটি ফোল্ডার দেখতে পাবেন -2. _Code Editor_ যেখানে আপনি যে ফাইলটি নির্বাচন করেছেন সেটির সোর্স কোড দেখতে পাবেন -3. _Browser_ সেকশন যেখানে আপনি যে কোডটি লিখেছেন সেটি ব্রাউজারে কেমন দেখাবে তা দেখতে পাবেন +1. _Files_ সেকশনে `App.js`, `index.js`, `styles.css`-এর মতো ফাইল এবং `public` নামের ফোল্ডার দেখতে পাবেন। +2. _Code Editor_-এ নির্বাচিত ফাইলের সোর্স কোড দেখতে পাবেন। +3. _Browser_ সেকশনে আপনার লেখা কোড ব্রাউজারে কেমন দেখায় তা দেখতে পাবেন। -Files সেকশনে `App.js` ফাইলটি নির্বাচিত থাকা উচিত | _Code editor_-এ এই ফাইলটির কন্টেন্ট হলো: +Files সেকশনে `App.js` ফাইলটি নির্বাচিত থাকার কথা। _Code Editor_-এ এর কনটেন্ট হলো: ```jsx export default function Square() { From 72a58b6d1c1319b7009a60b6f7c443d8274d92aa Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:35 +0600 Subject: [PATCH 08/89] Translate tic-tac-toe tutorial paragraphs 11-12 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 24f93f4cd..724798eb4 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -297,13 +297,13 @@ export default function Square() { _browser_ সেকশনে নিচের মত X সহ একটি বর্গ দেখানোর কথা: -![x-filled square](../images/tutorial/x-filled-square.png) +![X লেখা একটি ঘর](../images/tutorial/x-filled-square.png) -এখন starter code-এ উপস্থিত ফাইলগুলোকে দেখে নেওয়া যাক। +এবার প্রাথমিক কোডের ফাইলগুলো দেখে নেওয়া যাক। #### `App.js` {/*appjs*/} -`App.js` ফাইলে উপস্থিত কোড একটি _component_ তৈরী করে। React-এ কম্পোনেন্ট হলো পুনরায় ব্যবহারযোগ্য কোড যা ইউজার ইন্টারফেসের একটি অংশকে নির্দেশ করে. আপনার এপ্লিকেশনের UI এলিমেন্ট গুলোকে রেন্ডার, ম্যানেজ, এবং আপডেট করতে কম্পোনেন্ট ব্যবহার করা হয়। কম্পোনেন্ট-টির মধ্যে কী হচ্ছে বুঝতে কম্পোনেন্ট-টির এক এক করে প্রতিটি লাইন দেখে নেওয়া যাক: +`App.js`-এর কোড একটি *কম্পোনেন্ট* তৈরি করে। React-এ কম্পোনেন্ট হলো পুনর্ব্যবহারযোগ্য কোড, যা ইউজার ইন্টারফেসের কোনো অংশ নির্দেশ করে। কম্পোনেন্ট দিয়ে অ্যাপের UI এলিমেন্ট রেন্ডার, পরিচালনা ও আপডেট করা হয়। কী ঘটছে বুঝতে প্রতিটি লাইন আলাদা করে দেখা যাক: ```js {1} export default function Square() { From 3254f75a19d091b049637bb1812e678eec2abe91 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:35 +0600 Subject: [PATCH 09/89] Translate tic-tac-toe tutorial paragraphs 13-14 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 724798eb4..7d13411f9 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -311,7 +311,7 @@ export default function Square() { } ``` -প্রথম লাইনটি `Square` নামক ফাংশন ডিফাইন করছে। জাভাস্ক্রিপ্ট `export` কীওয়ার্ড-টি এই ফাংশনটিকে এই ফাইলের বাইরে অর্থাৎ অন্য ফাইলে accessible করে। ডিফল্ট কীওয়ার্ডটি অন্যান্য ফাইলগুলিকে আপনার কোডে বলে দেয় যে এটি আপনার ফাইলের main ফাংশন। +প্রথম লাইনটি `Square` নামের একটি ফাংশন সংজ্ঞায়িত করে। জাভাস্ক্রিপ্টের `export` কীওয়ার্ড ফাংশনটি অন্য ফাইলে ব্যবহার করতে দেয়। `default` কীওয়ার্ড অন্য ফাইলগুলোকে জানায়, এটি এই ফাইলের প্রধান ফাংশন। ```js {2} export default function Square() { @@ -323,7 +323,7 @@ export default function Square() { #### `styles.css` {/*stylescss*/} -CodeSandbox-এর _Files_ সেকশনে চিহ্নিত `styles.css` নামক ফাইলটিতে ক্লিক করুন। এই ফাইলটি আপনার React app-এর জন্য styles বর্ণনা করে। প্রথম দুটি _CSS selectors_ (`*` এবং `body`) আপনার অ্যাপের বড় অংশের স্টাইল বর্ণনা করে, যেখানে যেকোনো কম্পোনেন্টে যেখানে যেখানে `className` property-টি সেট করা হয়েছে `square`, সেখানকার style `.square` selector দ্বারা বর্ণনা করা হয়। আপনার কোডে, এটি `App.js` file-এর আপনার Square কম্পোনেন্টের বাটনের style-এর সাথে মিলে যাবে। +CodeSandbox-এর _Files_ সেকশনে `styles.css` ফাইলে ক্লিক করুন। এতে React অ্যাপের স্টাইল লেখা আছে। প্রথম দুটি *CSS selector* (`*` ও `body`) অ্যাপের বড় অংশের স্টাইল নির্ধারণ করে। `.square` selector যেসব কম্পোনেন্টে `className` prop-এর মান `square`, তাদের স্টাইল নির্ধারণ করে। আপনার কোডে এটি `App.js`-এর `Square` কম্পোনেন্টের বাটনে প্রযোজ্য। #### `index.js` {/*indexjs*/} From 5c766ac324857079cc22cfbaa76d9f266b36ddce Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:35 +0600 Subject: [PATCH 10/89] Translate tic-tac-toe tutorial paragraphs 15-16 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 7d13411f9..004f3087d 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -327,7 +327,7 @@ CodeSandbox-এর _Files_ সেকশনে `styles.css` ফাইলে ক #### `index.js` {/*indexjs*/} -CodeSandbox-এর _Files_ section-এ চিহ্নিত `index.js` নামক ফাইলটিতে ক্লিক করুন। টিউটোরিয়ালের সময়ে আপনি এই ফাইলটি এডিট করবেন না, কিন্তু এটি আপনার `App.js` ফাইলে তৈরি করা কম্পোনেন্ট এবং ওয়েব ব্রাউজারের মধ্যে মধ্যস্থতা করে। +CodeSandbox-এর _Files_ সেকশনে `index.js` ফাইলে ক্লিক করুন। টিউটোরিয়ালে এই ফাইল সম্পাদনা করবেন না, তবে এটি `App.js`-এ তৈরি কম্পোনেন্ট ও ওয়েব ব্রাউজারের মধ্যে সংযোগ তৈরি করে। ```jsx import { StrictMode } from 'react'; @@ -337,7 +337,7 @@ import './styles.css'; import App from './App'; ``` -লাইন ১-৫ প্রয়োজনীয় সবকিছু একত্রিত করে: +১–৫ নম্বর লাইন প্রয়োজনীয় অংশগুলো নিয়ে আসে: * React * ওয়েব ব্রাউজারের সাথে কথা বলার জন্য React-এর লাইব্রেরি (React DOM) From 8dc6f087a984c608272303d983210673e91bc223 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:36 +0600 Subject: [PATCH 11/89] Translate tic-tac-toe tutorial paragraphs 17-18 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 004f3087d..3bf8caae5 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -340,8 +340,8 @@ import App from './App'; ১–৫ নম্বর লাইন প্রয়োজনীয় অংশগুলো নিয়ে আসে: * React -* ওয়েব ব্রাউজারের সাথে কথা বলার জন্য React-এর লাইব্রেরি (React DOM) -* আপনার কম্পোনেন্টগুলির জন্য স্টাইলস +* ওয়েব ব্রাউজারের সাথে কাজ করার জন্য React-এর লাইব্রেরি (React DOM) +* আপনার কম্পোনেন্টগুলোর স্টাইল * আপনি `App.js`-এ যে কম্পোনেন্ট তৈরি করেছেন। ফাইলের বাকি অংশ সবকিছু একত্রিত করে এবং `public` ফোল্ডারের `index.html`-এ ফাইনাল প্রোডাক্ট ইনজেক্ট করে। From 12e145392fbe6929beada14f5be8bff94e791179 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:36 +0600 Subject: [PATCH 12/89] Translate tic-tac-toe tutorial paragraphs 19-20 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 3bf8caae5..4f747649b 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -342,9 +342,9 @@ import App from './App'; * React * ওয়েব ব্রাউজারের সাথে কাজ করার জন্য React-এর লাইব্রেরি (React DOM) * আপনার কম্পোনেন্টগুলোর স্টাইল -* আপনি `App.js`-এ যে কম্পোনেন্ট তৈরি করেছেন। +* `App.js`-এ তৈরি করা কম্পোনেন্ট। -ফাইলের বাকি অংশ সবকিছু একত্রিত করে এবং `public` ফোল্ডারের `index.html`-এ ফাইনাল প্রোডাক্ট ইনজেক্ট করে। +ফাইলের বাকি অংশ সবকিছু একত্রিত করে এবং `public` ফোল্ডারের `index.html`-এ চূড়ান্ত ফলাফল যুক্ত করে। ### বোর্ড তৈরি করা {/*building-the-board*/} From 00b8648f413c0069151a1f67177037222a92cdcc Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:37 +0600 Subject: [PATCH 13/89] Translate tic-tac-toe tutorial paragraphs 21-22 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 4f747649b..b3b9dad57 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -348,9 +348,9 @@ import App from './App'; ### বোর্ড তৈরি করা {/*building-the-board*/} -চলুন আবার `App.js`-এ ফিরে যাই। এখানেই আপনি টিউটোরিয়ালের বাকি অংশ কাটাবেন। +আবার `App.js`-এ ফিরে যাওয়া যাক। টিউটোরিয়ালের বাকি কাজ এখানেই করবেন। -বর্তমানে বোর্ডটি কেবল একটি স্কোয়ার, কিন্তু আপনার নয়টি দরকার! যদি আপনি শুধু আপনার স্কোয়ারটি কপি-পেস্ট করে দুটি স্কোয়ার তৈরি করার চেষ্টা করেন, যেমন: +এখন বোর্ডে শুধু একটি ঘর আছে, কিন্তু প্রয়োজন নয়টি! যদি ঘরটি কপি-পেস্ট করে দুটি ঘর বানানোর চেষ্টা করেন, যেমন: ```js {2} export default function Square() { From 2302d0ee0bd5d7dff738489762df254f79a86c55 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:37 +0600 Subject: [PATCH 14/89] Translate tic-tac-toe tutorial paragraphs 23-24 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index b3b9dad57..af2e45f5b 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -366,7 +366,7 @@ export default function Square() { -React কম্পোনেন্টগুলিকে অবশ্যই একটি একক JSX এলিমেন্ট ফেরত দিতে হবে, একাধিক পাশাপাশি JSX এলিমেন্ট (যেমন দুটি বাটন) নয়। এটি ঠিক করতে আপনি *Fragments* (`<>` এবং ``) ব্যবহার করতে পারেন একাধিক পাশাপাশি JSX এলিমেন্ট মোড়ানোর জন্য, যেমন: +React কম্পোনেন্ট থেকে পাশাপাশি একাধিক JSX এলিমেন্টের (যেমন দুটি বাটন) বদলে একটি JSX এলিমেন্ট রিটার্ন করতে হয়। এটি ঠিক করতে *Fragment* (`<>` ও ``) দিয়ে একাধিক এলিমেন্ট একসাথে ঘিরে রাখতে পারেন: ```js {3-6} export default function Square() { @@ -381,9 +381,9 @@ export default function Square() { এখন আপনি দেখবেন: -![two x-filled squares](../images/tutorial/two-x-filled-squares.png) +![X লেখা দুটি ঘর](../images/tutorial/two-x-filled-squares.png) -দারুণ! এখন আপনাকে শুধু কয়েকবার কপি-পেস্ট করতে হবে নয়টি স্কোয়ার যোগ করার জন্য এবং... +ভালো! এবার আরও কয়েকবার কপি-পেস্ট করে নয়টি ঘর যোগ করুন, তারপর... ![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) From 48d67e957b1a9ebfe02fe49208ac17a235b24e1e Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:37 +0600 Subject: [PATCH 15/89] Translate tic-tac-toe tutorial paragraphs 25-26 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index af2e45f5b..69f42dc4e 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -385,11 +385,11 @@ export default function Square() { ভালো! এবার আরও কয়েকবার কপি-পেস্ট করে নয়টি ঘর যোগ করুন, তারপর... -![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) +![এক সারিতে X লেখা নয়টি ঘর](../images/tutorial/nine-x-filled-squares.png) -ওহ না! সব স্কোয়ার এক লাইনে রয়েছে, আমাদের বোর্ডের মতো গ্রিড আকারে নয়। এটি ঠিক করতে হলে আপনাকে আপনার স্কোয়ারগুলোকে `div` দিয়ে রো-তে গ্রুপ করতে হবে এবং কিছু CSS ক্লাস যোগ করতে হবে। এই সময়ে, আপনি প্রতিটি স্কোয়ারকে একটি নাম্বার দেবেন যাতে আপনি নিশ্চিত হতে পারেন প্রতিটি স্কোয়ার কোথায় প্রদর্শিত হচ্ছে। +ওহ! বোর্ডের মতো গ্রিডে না থেকে সব ঘর এক সারিতে আছে। এটি ঠিক করতে `div` দিয়ে ঘরগুলোকে সারিতে সাজিয়ে কিছু CSS class যোগ করতে হবে। এবার প্রতিটি ঘরে একটি সংখ্যা দেবেন, যাতে কোন ঘর কোথায় দেখা যাচ্ছে বোঝা যায়। -`App.js` ফাইলে, `Square` কম্পোনেন্ট আপডেট করুন এভাবে দেখানোর জন্য: +`App.js`-এ `Square` কম্পোনেন্টটি এভাবে আপডেট করুন: ```js {3-19} export default function Square() { From afcb361bda97d24ac3deb3adac281ca84a1c256c Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:38 +0600 Subject: [PATCH 16/89] Translate tic-tac-toe tutorial paragraphs 27-28 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 69f42dc4e..9df4db8b6 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -415,11 +415,11 @@ export default function Square() { } ``` -The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board: +`styles.css`-এ সংজ্ঞায়িত CSS, `board-row` `className`-যুক্ত div-গুলোতে স্টাইল প্রয়োগ করে। স্টাইল করা `div` দিয়ে কম্পোনেন্টগুলোকে সারিতে সাজানোর ফলে এখন আপনার টিক-ট্যাক-টো বোর্ড তৈরি হয়েছে: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![১ থেকে ৯ পর্যন্ত সংখ্যা লেখা টিক-ট্যাক-টো বোর্ড](../images/tutorial/number-filled-board.png) -But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`: +তবে এখন একটি সমস্যা হয়েছে। আপনার `Square` নামের কম্পোনেন্টটি আসলে আর একটি ঘর নয়। নামটি `Board` করে সমস্যাটি ঠিক করা যাক: ```js {1} export default function Board() { From 9dadf64d39a7b8821abc0c88e0519b9f707e9b5c Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:38 +0600 Subject: [PATCH 17/89] Translate tic-tac-toe tutorial paragraphs 29-30 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 9df4db8b6..aae75545a 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -427,7 +427,7 @@ export default function Board() { } ``` -At this point your code should look something like this: +এ পর্যায়ে আপনার কোড অনেকটা এমন হওয়ার কথা: @@ -504,7 +504,7 @@ body { -Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself. +এত কোড টাইপ করতে হবে! চাইলে এই পেইজ থেকে কোড কপি-পেস্ট করতে পারেন। তবে একটু চ্যালেঞ্জ নিতে চাইলে, আগে অন্তত একবার নিজে হাতে টাইপ করেছেন এমন কোডই শুধু কপি করার পরামর্শ দিচ্ছি। From bb610634c51e2c9c23da4a12f7ed09dc4aef7955 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:38 +0600 Subject: [PATCH 18/89] Translate tic-tac-toe tutorial paragraphs 31-32 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index aae75545a..fcd2cec23 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -508,11 +508,11 @@ body { -### Passing data through props {/*passing-data-through-props*/} +### props দিয়ে ডেটা পাঠানো {/*passing-data-through-props*/} -Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code. +এরপর আপনি চাইবেন, ব্যবহারকারী কোনো ঘরে ক্লিক করলে সেটির মান ফাঁকা থেকে "X" হয়ে যাক। বোর্ডটি এখন যেভাবে তৈরি করেছেন, তাতে ঘর আপডেটের কোড নয়বার কপি-পেস্ট করতে হবে—প্রতিটি ঘরের জন্য একবার! React-এর কম্পোনেন্ট কাঠামো আপনাকে পুনর্ব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে দেয়, যাতে এমন অগোছালো ও পুনরাবৃত্ত কোড এড়ানো যায়। -First, you are going to copy the line defining your first square (``) from your `Board` component into a new `Square` component: +প্রথমে, `Board` কম্পোনেন্ট থেকে প্রথম ঘরটি সংজ্ঞায়িত করা লাইনটি (``) কপি করে নতুন একটি `Square` কম্পোনেন্টে রাখুন: ```js {1-3} function Square() { From e428851ef5e406df035f50413b2fdcdf00ca42ea Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:39 +0600 Subject: [PATCH 19/89] Translate tic-tac-toe tutorial paragraphs 33-34 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index fcd2cec23..9fa888bcb 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -524,7 +524,7 @@ export default function Board() { } ``` -Then you'll update the Board component to render that `Square` component using JSX syntax: +তারপর JSX সিনট্যাক্স দিয়ে সেই `Square` কম্পোনেন্ট রেন্ডার করার জন্য `Board` কম্পোনেন্টটি আপডেট করুন: ```js {5-19} // ... @@ -551,7 +551,7 @@ export default function Board() { } ``` -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +খেয়াল করুন, ব্রাউজারের `div`-এর বিপরীতে আপনার নিজস্ব `Board` এবং `Square` কম্পোনেন্টের নাম বড় হাতের অক্ষর দিয়ে শুরু হতে হবে। Let's take a look: From 0d7945e1af29cfc6385bb00c1c1626271e2aa934 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:39 +0600 Subject: [PATCH 20/89] Translate tic-tac-toe tutorial paragraphs 35-36 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 9fa888bcb..7dce5965b 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -553,11 +553,11 @@ export default function Board() { খেয়াল করুন, ব্রাউজারের `div`-এর বিপরীতে আপনার নিজস্ব `Board` এবং `Square` কম্পোনেন্টের নাম বড় হাতের অক্ষর দিয়ে শুরু হতে হবে। -Let's take a look: +এবার ফলাফল দেখা যাক: -![one-filled board](../images/tutorial/board-filled-with-ones.png) +![প্রতিটি ঘরে ১ লেখা বোর্ড](../images/tutorial/board-filled-with-ones.png) -Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`). +ওহ! আগের সংখ্যাযুক্ত ঘরগুলো আর নেই। এখন প্রতিটি ঘরেই "1" দেখা যাচ্ছে। এটি ঠিক করতে *props* ব্যবহার করে প্যারেন্ট কম্পোনেন্ট (`Board`) থেকে তার চাইল্ড (`Square`)-এ প্রতিটি ঘরের জন্য নির্ধারিত মান পাঠাবেন। Update the `Square` component to read the `value` prop that you'll pass from the `Board`: From e0cbdcb7ee310bc2145c5701e0ce2ba9b5f02464 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:39 +0600 Subject: [PATCH 21/89] Translate tic-tac-toe tutorial paragraphs 37-38 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 7dce5965b..9183babf5 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -559,7 +559,7 @@ export default function Board() { ওহ! আগের সংখ্যাযুক্ত ঘরগুলো আর নেই। এখন প্রতিটি ঘরেই "1" দেখা যাচ্ছে। এটি ঠিক করতে *props* ব্যবহার করে প্যারেন্ট কম্পোনেন্ট (`Board`) থেকে তার চাইল্ড (`Square`)-এ প্রতিটি ঘরের জন্য নির্ধারিত মান পাঠাবেন। -Update the `Square` component to read the `value` prop that you'll pass from the `Board`: +`Board` থেকে পাঠানো `value` prop পড়ার জন্য `Square` কম্পোনেন্টটি আপডেট করুন: ```js {1} function Square({ value }) { @@ -567,7 +567,7 @@ function Square({ value }) { } ``` -`function Square({ value })` indicates the Square component can be passed a prop called `value`. +`function Square({ value })` নির্দেশ করে যে `Square` কম্পোনেন্টে `value` নামের একটি prop পাস করা যায়। Now you want to display that `value` instead of `1` inside every square. Try doing it like this: From a64931dd980499c44e2219e2aeded904ef4c768a Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:40 +0600 Subject: [PATCH 22/89] Translate tic-tac-toe tutorial paragraphs 39-40 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 9183babf5..ca185939f 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -569,7 +569,7 @@ function Square({ value }) { `function Square({ value })` নির্দেশ করে যে `Square` কম্পোনেন্টে `value` নামের একটি prop পাস করা যায়। -Now you want to display that `value` instead of `1` inside every square. Try doing it like this: +এখন প্রতিটি ঘরের ভেতরে `1`-এর বদলে সেই `value` দেখাতে চান। এভাবে চেষ্টা করুন: ```js {2} function Square({ value }) { @@ -577,7 +577,7 @@ function Square({ value }) { } ``` -Oops, this is not what you wanted: +ওহ, আপনি তো এটি চাননি: ![value-filled board](../images/tutorial/board-filled-with-value.png) From 4a47635210f6634b06bf37e923704a332674c01c Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:40 +0600 Subject: [PATCH 23/89] Translate tic-tac-toe tutorial paragraphs 41-42 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index ca185939f..6f85809ab 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -579,9 +579,9 @@ function Square({ value }) { ওহ, আপনি তো এটি চাননি: -![value-filled board](../images/tutorial/board-filled-with-value.png) +![প্রতিটি ঘরে value লেখা বোর্ড](../images/tutorial/board-filled-with-value.png) -You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so: +আপনি কম্পোনেন্টের `value` নামের জাভাস্ক্রিপ্ট ভ্যারিয়েবলটি রেন্ডার করতে চেয়েছিলেন, "value" শব্দটি নয়। JSX থেকে জাভাস্ক্রিপ্ট ব্যবহার করতে কার্লি ব্রেস লাগে। JSX-এ `value`-এর চারপাশে এভাবে কার্লি ব্রেস যোগ করুন: ```js {2} function Square({ value }) { @@ -589,7 +589,7 @@ function Square({ value }) { } ``` -For now, you should see an empty board: +আপাতত একটি ফাঁকা বোর্ড দেখার কথা: ![empty board](../images/tutorial/empty-board.png) From d0ce92eb818d7b1ca0778166379c671fda24ae20 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:40 +0600 Subject: [PATCH 24/89] Translate tic-tac-toe tutorial paragraphs 43-44 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 6f85809ab..4e63392e6 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -591,9 +591,9 @@ function Square({ value }) { আপাতত একটি ফাঁকা বোর্ড দেখার কথা: -![empty board](../images/tutorial/empty-board.png) +![ফাঁকা বোর্ড](../images/tutorial/empty-board.png) -This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component: +এর কারণ, `Board` কম্পোনেন্ট এখনও তার রেন্ডার করা প্রতিটি `Square` কম্পোনেন্টে `value` prop পাস করেনি। এটি ঠিক করতে `Board`-এর রেন্ডার করা প্রতিটি `Square` কম্পোনেন্টে `value` prop যোগ করুন: ```js {5-7,10-12,15-17} export default function Board() { @@ -619,7 +619,7 @@ export default function Board() { } ``` -Now you should see a grid of numbers again: +এখন আবার সংখ্যার একটি গ্রিড দেখতে পাবেন: ![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) From c7dcb85396ed801789ee12a39df52a2acd4d2359 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:41 +0600 Subject: [PATCH 25/89] Translate tic-tac-toe tutorial paragraphs 45-46 --- src/content/learn/tutorial-tic-tac-toe.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 4e63392e6..67f2a9007 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -621,9 +621,9 @@ export default function Board() { এখন আবার সংখ্যার একটি গ্রিড দেখতে পাবেন: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![১ থেকে ৯ পর্যন্ত সংখ্যা লেখা টিক-ট্যাক-টো বোর্ড](../images/tutorial/number-filled-board.png) -Your updated code should look like this: +আপনার আপডেট করা কোড এমন হওয়ার কথা: @@ -702,9 +702,9 @@ body { -### Making an interactive component {/*making-an-interactive-component*/} +### একটি ইন্টারঅ্যাক্টিভ কম্পোনেন্ট তৈরি করা {/*making-an-interactive-component*/} -Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`: +ক্লিক করলে `Square` কম্পোনেন্টটিতে একটি `X` বসানো যাক। `Square`-এর ভেতরে `handleClick` নামের একটি ফাংশন ডিক্লেয়ার করুন। তারপর `Square` থেকে রিটার্ন করা বাটনের JSX এলিমেন্টের props-এ `onClick` যোগ করুন: ```js {2-4,9} function Square({ value }) { From f9b9ace56dc2183e910a7ed245eebb094cc240b9 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:41 +0600 Subject: [PATCH 26/89] Translate tic-tac-toe tutorial paragraphs 47-48 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 67f2a9007..64652f3ea 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -723,11 +723,11 @@ function Square({ value }) { } ``` -If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log. +এখন কোনো ঘরে ক্লিক করলে CodeSandbox-এর _Browser_ সেকশনের নিচে _Console_ ট্যাবে `"clicked!"` লেখা একটি লগ দেখার কথা। একাধিকবার ক্লিক করলে আবার `"clicked!"` লগ হবে। একই বার্তার পুনরাবৃত্ত লগ কনসোলে নতুন লাইন তৈরি করে না। তার বদলে প্রথম `"clicked!"` লগের পাশে একটি সংখ্যা বাড়তে দেখবেন। -If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS). +নিজের লোকাল ডেভেলপমেন্ট পরিবেশে এই টিউটোরিয়াল অনুসরণ করলে ব্রাউজারের Console খুলতে হবে। যেমন, Chrome-এ **Shift + Ctrl + J** (Windows/Linux) বা **Option + ⌘ + J** (macOS) কিবোর্ড শর্টকাট দিয়ে Console দেখতে পারেন। From b28e62c51d1a781536fc7e910e3427dd07f26866 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:41 +0600 Subject: [PATCH 27/89] Translate tic-tac-toe tutorial paragraphs 49-50 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 64652f3ea..12ab8a533 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -731,9 +731,9 @@ function Square({ value }) { -As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*. +পরের ধাপে আপনি চান, `Square` কম্পোনেন্টটি মনে রাখুক যে এতে ক্লিক করা হয়েছে এবং একটি "X" চিহ্ন দেখাক। কোনো কিছু মনে রাখতে কম্পোনেন্ট *state* ব্যবহার করে। -React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked. +React-এর `useState` নামের একটি বিশেষ ফাংশন আছে, যা কম্পোনেন্ট থেকে কল করে কোনো কিছু মনে রাখা যায়। `Square`-এর বর্তমান মান state-এ রাখা যাক এবং `Square`-এ ক্লিক করলে সেটি বদলানো যাক। Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`: From d7e8afb12bb9c8ec10f7c3bc9c8f7ec75689ccad Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:42 +0600 Subject: [PATCH 28/89] Translate tic-tac-toe tutorial paragraphs 51-52 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 12ab8a533..d72a487af 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -735,7 +735,7 @@ function Square({ value }) { React-এর `useState` নামের একটি বিশেষ ফাংশন আছে, যা কম্পোনেন্ট থেকে কল করে কোনো কিছু মনে রাখা যায়। `Square`-এর বর্তমান মান state-এ রাখা যাক এবং `Square`-এ ক্লিক করলে সেটি বদলানো যাক। -Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`: +ফাইলের শুরুতে `useState` ইমপোর্ট করুন। `Square` কম্পোনেন্ট থেকে `value` prop সরিয়ে দিন। তার বদলে `Square`-এর শুরুতে নতুন একটি লাইনে `useState` কল করুন। এর রিটার্ন করা state ভ্যারিয়েবলের নাম দিন `value`: ```js {1,3,4} import { useState } from 'react'; @@ -747,7 +747,7 @@ function Square() { //... ``` -`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`. +`value` মানটি ধরে রাখে এবং `setValue` হলো সেই মান পরিবর্তনের ফাংশন। `useState`-এ পাস করা `null` এই state ভ্যারিয়েবলের প্রাথমিক মান হিসেবে ব্যবহৃত হয়। তাই এখানে `value` শুরুতে `null` থাকে। Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component: From 4744446bc60eb07a99510e75ff1c1abde76d10a7 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:42 +0600 Subject: [PATCH 29/89] Translate tic-tac-toe tutorial paragraphs 53-54 --- src/content/learn/tutorial-tic-tac-toe.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index d72a487af..38bc5ffe1 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -749,7 +749,7 @@ function Square() { `value` মানটি ধরে রাখে এবং `setValue` হলো সেই মান পরিবর্তনের ফাংশন। `useState`-এ পাস করা `null` এই state ভ্যারিয়েবলের প্রাথমিক মান হিসেবে ব্যবহৃত হয়। তাই এখানে `value` শুরুতে `null` থাকে। -Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component: +`Square` কম্পোনেন্ট আর props গ্রহণ করে না। তাই `Board` কম্পোনেন্টের তৈরি নয়টি `Square` কম্পোনেন্ট থেকেই `value` prop সরিয়ে দিন: ```js {6-8,11-13,16-18} // ... @@ -776,7 +776,7 @@ export default function Board() { } ``` -Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this: +এবার ক্লিক করলে "X" দেখানোর জন্য `Square` বদলাবেন। event handler-এর `console.log("clicked!");`-এর বদলে `setValue('X');` লিখুন। এখন `Square` কম্পোনেন্টটি এমন হবে: ```js {5} function Square() { From 82c9b5d795b4e9e1b3cec51c4be35b1342a6e5c0 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Tue, 27 Oct 2026 17:18:43 +0600 Subject: [PATCH 30/89] Translate tic-tac-toe tutorial paragraphs 55-56 --- src/content/learn/tutorial-tic-tac-toe.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 38bc5ffe1..3d5e0009f 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -797,11 +797,11 @@ function Square() { } ``` -By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `