From d15f764eb02f69dc5cf6e8b354b1df37f4332faa Mon Sep 17 00:00:00 2001 From: nafistiham Date: Sun, 7 Sep 2025 03:55:58 +0600 Subject: [PATCH 1/2] 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 1e7e2b778..2ebcabceb 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 @@ -296,15 +296,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() { @@ -312,7 +312,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() { @@ -320,15 +320,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 dcc1bf0eea911b9950c0d90024f28894ee9a3edd Mon Sep 17 00:00:00 2001 From: nafistiham Date: Thu, 11 Sep 2025 12:55:46 +0600 Subject: [PATCH 2/2] 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 2ebcabceb..c64182b67 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -338,20 +338,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() { @@ -359,15 +359,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() { @@ -380,17 +380,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() {