diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 56e0cbbf1..484775356 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -4,24 +4,24 @@ title: 'টিউটোরিয়াল: টিক-ট্যাক-টো' -এই টিউটোরিয়ালের সময় আপনি একটি ছোট টিক-ট্যাক-টো গেম তৈরি করবেন। এই টিউটোরিয়ালটি কোন পূর্বের React জ্ঞান অনুমান করে না। টিউটোরিয়ালে আপনি যে কৌশলগুলি শিখবেন তা যেকোন React অ্যাপ তৈরির জন্য অপরিহার্য, এবং এটি সম্পূর্ণরূপে বোঝা আপনাকে React সম্পর্কে গভীর ধারণা দেবে। +এই টিউটোরিয়ালে একটি ছোট টিক-ট্যাক-টো গেম তৈরি করবেন। আগে থেকে React জানা প্রয়োজন নেই। এখানে শেখা কৌশলগুলো যেকোনো React অ্যাপ তৈরির জন্য গুরুত্বপূর্ণ, আর সেগুলো ভালোভাবে বুঝলে React সম্পর্কে গভীর ধারণা পাবেন। -এই টিউটোরিয়ালটি এমন লোকদের জন্য ডিজাইন করা হয়েছে যারা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করার চেষ্টা করতে চান। আপনি যদি প্রতিটি ধারণা ধাপে ধাপে শিখতে পছন্দ করেন, তাহলে [Describing the UI.](/learn/describing-the-ui) দিয়ে শুরু করুন। +এই টিউটোরিয়াল তাঁদের জন্য, যাঁরা **কাজ করে শিখতে** পছন্দ করেন এবং দ্রুত কিছু তৈরি করতে চান। প্রতিটি ধারণা ধাপে ধাপে শিখতে চাইলে [UI-এর বর্ণনা](/learn/describing-the-ui) দিয়ে শুরু করুন। টিউটোরিয়ালটি কয়েকটি বিভাগে বিভক্ত: -- [টিউটোরিয়ালের জন্য সেটআপ](#setup-for-the-tutorial) আপনাকে টিউটোরিয়ালটি অনুসরণ করার জন্য **একটি শুরুর ধাপ** দেবে। -- [সংক্ষিপ্ত বিবরণ](#overview) আপনাকে React-এর **মৌলিক বিষয়গুলি** যথা: components, props এবং state সম্পর্কে শেখাবে| -- [গেমটি সম্পূর্ণ করা](#completing-the-game) আপনাকে React Development-এর **সবচেয়ে সাধারণ কৌশলগুলি** শেখাবে। -- [সময়ে ভ্রমন্ করা](#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,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 আপনাকে আপনার ব্রাউজারে কোড লিখতে দেয় এবং আপনার তৈরি করা অ্যাপটি কীভাবে দেখাবে তার প্রিভিউ দেখতে দেয়। নতুন ট্যাবে এই টিউটোরিয়ালের জন্য একটি খালি বর্গক্ষেত্র এবং স্টার্টার কোড প্রদর্শন করা উচিত। @@ -261,33 +261,33 @@ 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 চেষ্টা করুন। +কোথাও আটকে গেলে থেমে যাবেন না! আপাতত অনলাইনে অনুসরণ করুন, পরে আবার লোকাল সেটআপ চেষ্টা করতে পারেন। -## Overview {/*overview*/} +## সংক্ষিপ্ত বিবরণ {/*overview*/} -আপনার সেটআপ সম্পূর্ণ হয়েছে, চলুন react সম্পর্কে ধারণা লাভ করি! +আপনার সেটাপ সম্পূর্ণ হয়েছে, চলুন React সম্পর্কে ধারণা লাভ করি! -### Starter Code পরিদর্শন {/*inspecting-the-starter-code*/} +### প্রাথমিক কোড দেখা {/*inspecting-the-starter-code*/} -CodeSandbox-এ আপনি তিনটি প্রধান section দেখতে পাবেন: +CodeSandbox-এ আপনি তিনটি প্রধান সেকশন দেখতে পাবেন: -![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) +![প্রাথমিক কোডসহ CodeSandbox](../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_ সেকশনে `App.js`, `index.js`, `styles.css`-এর মতো ফাইল এবং `public` নামের ফোল্ডার দেখতে পাবেন। +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) +![X লেখা একটি ঘর](../images/tutorial/x-filled-square.png) -এখন starter code-এ উপস্থিত file-গুলোকে দেখে নেওয়া যাক। +এবার প্রাথমিক কোডের ফাইলগুলো দেখে নেওয়া যাক। #### `App.js` {/*appjs*/} -`App.js` file-এ উপস্থিত code একটি _component_ তৈরী করে| React-এ component হলো পুনরায় ব্যবহারযোগ্য code যা user interface-এর একটি অংশকে নির্দেশ করে| আপনার Application-এর UI elements-গুলোকে render, manage, এবং update করতে components ব্যবহার করা হয়| Component-টির মধ্যে কি হচ্ছে বুঝতে component-টির এক এক করে প্রতিটি লাইন দেখে নেওয়া যাক: +`App.js`-এর কোড একটি *কম্পোনেন্ট* তৈরি করে। 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` কীওয়ার্ড ফাংশনটি অন্য ফাইলে ব্যবহার করতে দেয়। `default` কীওয়ার্ড অন্য ফাইলগুলোকে জানায়, এটি এই ফাইলের প্রধান ফাংশন। ```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 অ্যাপের স্টাইল লেখা আছে। প্রথম দুটি *CSS selector* (`*` ও `body`) অ্যাপের বড় অংশের স্টাইল নির্ধারণ করে। `.square` selector যেসব কম্পোনেন্টে `className` prop-এর মান `square`, তাদের স্টাইল নির্ধারণ করে। আপনার কোডে এটি `App.js`-এর `Square` কম্পোনেন্টের বাটনে প্রযোজ্য। #### `index.js` {/*indexjs*/} -CodeSandbox-এর _Files_ section-এ চিহ্নিত `index.js` নামক ফাইলটিতে ক্লিক করুন। টিউটোরিয়ালের সময়ে আপনি এই ফাইলটি edit করবেন না, কিন্তু এটি আপনার `App.js` ফাইলে তৈরি করা component এবং web browser-এর মধ্যে মধ্যস্থতা করে। +CodeSandbox-এর _Files_ সেকশনে `index.js` ফাইলে ক্লিক করুন। টিউটোরিয়ালে এই ফাইল সম্পাদনা করবেন না, তবে এটি `App.js`-এ তৈরি কম্পোনেন্ট ও ওয়েব ব্রাউজারের মধ্যে সংযোগ তৈরি করে। ```jsx import { StrictMode } from 'react'; @@ -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 এলিমেন্ট রিটার্ন করতে হয়। এটি ঠিক করতে *Fragment* (`<>` ও ``) দিয়ে একাধিক এলিমেন্ট একসাথে ঘিরে রাখতে পারেন: ```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) +![X লেখা দুটি ঘর](../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) +![এক সারিতে X লেখা নয়টি ঘর](../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 class যোগ করতে হবে। এবার প্রতিটি ঘরে একটি সংখ্যা দেবেন, যাতে কোন ঘর কোথায় দেখা যাচ্ছে বোঝা যায়। -In the `App.js` file, update the `Square` component to look like this: +`App.js`-এ `Square` কম্পোনেন্টটি এভাবে আপডেট করুন: ```js {3-19} export default function Square() { @@ -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() { @@ -427,7 +427,7 @@ export default function Board() { } ``` -At this point your code should look something like this: +এ পর্যায়ে আপনার কোড অনেকটা এমন হওয়ার কথা: @@ -504,15 +504,15 @@ 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. +এত কোড টাইপ করতে হবে! চাইলে এই পেইজ থেকে কোড কপি-পেস্ট করতে পারেন। তবে একটু চ্যালেঞ্জ নিতে চাইলে, আগে অন্তত একবার নিজে হাতে টাইপ করেছেন এমন কোডই শুধু কপি করার পরামর্শ দিচ্ছি। -### 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() { @@ -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,15 +551,15 @@ 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: +এবার ফলাফল দেখা যাক: -![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`: +`Board` থেকে পাঠানো `value` prop পড়ার জন্য `Square` কম্পোনেন্টটি আপডেট করুন: ```js {1} function Square({ value }) { @@ -567,9 +567,9 @@ 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: +এখন প্রতিটি ঘরের ভেতরে `1`-এর বদলে সেই `value` দেখাতে চান। এভাবে চেষ্টা করুন: ```js {2} function Square({ value }) { @@ -577,11 +577,11 @@ function Square({ value }) { } ``` -Oops, this is not what you wanted: +ওহ, আপনি তো এটি চাননি: -![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,11 +589,11 @@ function Square({ value }) { } ``` -For now, you should see an empty board: +আপাতত একটি ফাঁকা বোর্ড দেখার কথা: -![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,11 +619,11 @@ 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) +![১ থেকে ৯ পর্যন্ত সংখ্যা লেখা টিক-ট্যাক-টো বোর্ড](../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 }) { @@ -723,19 +723,19 @@ 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 দেখতে পারেন। -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`: +ফাইলের শুরুতে `useState` ইমপোর্ট করুন। `Square` কম্পোনেন্ট থেকে `value` prop সরিয়ে দিন। তার বদলে `Square`-এর শুরুতে নতুন একটি লাইনে `useState` কল করুন। এর রিটার্ন করা state ভ্যারিয়েবলের নাম দিন `value`: ```js {1,3,4} import { useState } from 'react'; @@ -747,9 +747,9 @@ 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: +`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() { @@ -797,13 +797,13 @@ function Square() { } ``` -By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `