Updated navigation and section changed english to bangla

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode"
+    ]
+}

content/tutorial/nav.yml

@@ -31,32 +31,32 @@
           href: /tutorial/tutorial.html#help-im-stuck
           forceInternal: true
     - id: overview
-      title: Overview
+      title: পরিদর্শন
       href: /tutorial/tutorial.html#overview
       forceInternal: true
       subitems:
         - id: what-is-react
-          title: What Is React?
+          title: React কি?
           href: /tutorial/tutorial.html#what-is-react
           forceInternal: true
         - id: inspecting-the-starter-code
-          title: Inspecting the Starter Code
+          title: প্রাথমিক কোড নিরীক্ষণ
           href: /tutorial/tutorial.html#inspecting-the-starter-code
           forceInternal: true
         - id: passing-data-through-props
-          title: Passing Data Through Props
+          title: Props এর মাধ্যমে ডটা পাস করা
           href: /tutorial/tutorial.html#passing-data-through-props
           forceInternal: true
         - id: making-an-interactive-component
-          title: Making an Interactive Component
+          title: একটি ইন্টারেক্টিভ কম্পোনেন্ট তৈরি করা
           href: /tutorial/tutorial.html#making-an-interactive-component
           forceInternal: true
         - id: developer-tools
-          title: Developer Tools
+          title: ডেভেলপার টুলস
           href: /tutorial/tutorial.html#developer-tools
           forceInternal: true
     - id: completing-the-game
-      title: Completing the Game
+      title: গেমটি সম্পূর্ণ করা হচ্ছে
       href: /tutorial/tutorial.html#completing-the-game
       forceInternal: true
       subitems:

content/tutorial/tutorial.md

@@ -184,13 +184,13 @@ JSX জাভাস্ক্রিপ্টের পরিপূর্ণ ব
 
 Square কম্পোনেন্টটি একটিমাত্র `<button>` রেন্ডার করে এবং Board রেন্ডার করে ৯টি স্কোয়ার। Game কম্পোনেন্টটি placeholder ভ্যালুসহ একটি বোর্ড রেন্ডার করে যেটা আমরা পরে পরিবর্তন করব। বর্তমানে এখানে কোনো ইন্টার‌্যাক্টিভ কম্পোনেন্ট নেই।
 
-### Passing Data Through Props {#passing-data-through-props}
+### Props এর মাধ্যমে ডটা পাস করা {#passing-data-through-props}
 
-To get our feet wet, let's try passing some data from our Board component to our Square component.
+প্রথমে আমাদের শুরু করার জন্য চলুন আমরা Board কম্পোনেন্ট থেকে Square কম্পোনেন্টে কিছু ডটা পাস করি।
 
-We strongly recommend typing code by hand as you're working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding.
+আমরা দৃঢ়ভাবে পরামর্শ দেই আপনি টিউটোরিয়ালের মাধ্যমে কাজ করছেন এবং শুধু কপি/পেস্ট করছেন না। এটি আপনার পেশী স্মৃতি এবং খুব ভালভাবে বোঝার বিকাশে সহায়তা করবে।
 
-In Board's `renderSquare` method, change the code to pass a prop called `value` to the Square:
+Board এর `renderSquare` মেথডটিতে Square `value` নামক Prop পাস করার জন্য কোড পরবর্তন করুনঃ
 
 ```js{3}
 class Board extends React.Component {
@@ -200,7 +200,7 @@ class Board extends React.Component {
 }
 ```
 
-Change Square's `render` method to show that value by replacing `{/* TODO */}` with `{this.props.value}`:
+ Square এর `render` method পরিবর্তন করে সেই value কে  `{/* TODO */}` এর পরিবর্তে  `{this.props.value}` দিয়ে দেখান:
 
 ```js{5}
 class Square extends React.Component {
@@ -214,22 +214,26 @@ class Square extends React.Component {
 }
 ```
 
-Before:
+আগে:
 
 ![React Devtools](../images/tutorial/tictac-empty.png)
 
-After: You should see a number in each square in the rendered output.
+পরে: Render করা আউটপুটের প্রতিটি Square এ আপনি একটি একটি সংখ্যা দেখতে পাবেন।
+
 
 ![React Devtools](../images/tutorial/tictac-numbers.png)
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
+**[এখন পর্যন্ত সম্পূর্ণ কোডটি এখানে দেখুন](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)**
+
+
+অভিনন্দন! অপনি পেরেন্ট Board কম্পোনেন্ট থেকে চাইল্ড Square কম্পোনেন্টে prop পাস করেছেন। Prop পাসিং এর মাধ্যেমে React অ্যাপ্লিকেশনে এভাবেই পেরেন্ট থেকে চাইল্ডে তথ্য প্রবাহিত হয়।
 
-Congratulations! You've just "passed a prop" from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.
 
-### Making an Interactive Component {#making-an-interactive-component}
+###  একটি ইন্টারেক্টিভ কম্পোনেন্ট তৈরি করা {#making-an-interactive-component}
+
+ক্লিক করার সময় আমরা Square কম্পোনেন্টটিকে "X" দ্বারা পূর্ণ করি।
+প্রথমে, Square কম্পোনেন্টের  `render()` ফাংশন থেকে return আসা button ট্যাগটি পরিবর্তন করুনঃ
 
-Let's fill the Square component with an "X" when we click it.
-First, change the button tag that is returned from the Square component's `render()` function to this:
 
 ```javascript{4}
 class Square extends React.Component {
@@ -243,11 +247,12 @@ class Square extends React.Component {
 }
 ```
 
-If you click on a Square now, you should see an alert in your browser.
+এখন আপনি Square ক্লিক করলে, আপনি আপনার ব্রাউজারে alert দেখতে পারবেন।
 
->Note
+
+>নোট
 >
->To save typing and avoid the [confusing behavior of `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), we will use the [arrow function syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) for event handlers here and further below:
+> টাইপিং কমানোর জন্য এবং [`this` এর বিভ্রান্তিকর আচরণ এড়াতে](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), আমরা এখানে এবং নীচে আরও ইভেন্ট হ্যান্ডলারদের জন্য  [arrow function সিনট্যাক্স ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ব্যবহার করব:
 >
 >```javascript{4}
 >class Square extends React.Component {
@@ -261,13 +266,14 @@ If you click on a Square now, you should see an alert in your browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>লক্ষ্য করুন কিভাবে `onClick={() => alert('click')}` দিয়ে, আমরা একটি ফাংশনকে `onClick` prop হিসেবে পাস করছি। React শুধুমাত্র ক্লিকের পর এই ফাংশন কল করবে। `() =>` ভুলে যাওয়া এবং `onClick={alert('click')}` লেখা একটি সাধারণ ভুল, এবং প্রতিবার কম্পোনেন্ট রি-রেন্ডার করার সময় alert কল করবে।
+
+পরবর্তী পদক্ষেপ হিসাবে, আমরা চাই  Square কম্পোনেন্টি "মনে রাখুক" যে এটি ক্লিক করা হয়েছে, এবং এটি একটি "X" চিহ্ন দিয়ে পূরণ করুন। জিনিসগুলি "মনে রাখার" জন্য, কম্পোনেন্টগুলি **state** ব্যবহার করে।
 
-As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**.
+React কম্পোনেন্ট তাদের কনস্ট্রাক্টরগুলিতে `this.state` সেট করার মধ্যামে sate থাকতে পারে। `this.state` React কম্পোনেন্টে ব্যক্তিগত হিসাবে বিবেচনা করা হয়েছে যেখানে এটি সংজ্ঞায়িত করা হয়েছে। চলুন Square এর বর্তমান মান `this.state` এ সংরক্ষণ করি এবং Square এ ক্লিক করা হলে তা পরিবর্তন করি।
 
-React components can have state by setting `this.state` in their constructors. `this.state` should be considered as private to a React component that it's defined in. Let's store the current value of the Square in `this.state`, and change it when the Square is clicked.
+প্রথমে, আমাদের state শুরু করার জন্য ক্লাসে এ একটি constructor যুক্ত করতে হবেঃ
 
-First, we'll add a constructor to the class to initialize the state:
 
 ```javascript{2-7}
 class Square extends React.Component {
@@ -288,17 +294,18 @@ class Square extends React.Component {
 }
 ```
 
->Note
+>নোট
 >
->In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to always call `super` when defining the constructor of a subclass. All React component classes that have a `constructor` should start with a `super(props)` call.
+>[JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) এ, সাবক্লাসের কনস্ট্রাক্টর সংজ্ঞায়িত করার সময় আপনাকে সর্বদা `super` কল করতে হবে। সকল React কম্পোনেন্ট 'কনস্ট্রাক্টর' আছে এমন ক্লাসগুলি `super(props)` দিয়ে কল শুরু করা উচিত।
+
+এখন আমরা ক্লিক করার সময় বর্তমান state এর মান প্রদর্শন করতে Square এর `render` পদ্ধতিটি পরিবর্তন করবঃ
 
-Now we'll change the Square's `render` method to display the current state's value when clicked:
 
-* Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
-* Replace the `onClick={...}` event handler with `onClick={() => this.setState({value: 'X'})}`.
-* Put the `className` and `onClick` props on separate lines for better readability.
+* `<button>` ট্যাগের ভিতরে 'this.props.value'- এর পরিবর্তে 'this.state.value' লিখুন।
+* ইভেন্ট হ্যান্ডলারে `onClick={...}` এর পরিবর্তে `onClick={() => this.setState({value: 'X'})}`লিখুন।
+* আরও ভালভাবে পড়ার জন্য  `className` এবং `onClick` prop কে আলাদা লাইনে রাখুন।
 
-After these changes, the `<button>` tag that is returned by the Square's `render` method looks like this:
+এই পরিবর্তনগুলির পরে, Square এর `render` পদ্ধতি থেকে  return  আসা `<button>` ট্যাগটি এই রকম দেখায়:
 
 ```javascript{12-13,15}
 class Square extends React.Component {
@@ -322,32 +329,32 @@ class Square extends React.Component {
 }
 ```
 
-By calling `this.setState` from an `onClick` handler in the Square's `render` method, we tell React to re-render that Square whenever its `<button>` is clicked. After the update, the Square's `this.state.value` will be `'X'`, so we'll see the `X` on the game board. If you click on any Square, an `X` should show up.
+যখনই এর `<button>` ক্লিক করা হয় Square এর `render` পদ্ধতিতে একটি `onClick` হ্যান্ডলার থেকে 'this.setState' কল করে, আমরা React কে সেই Square কে নরায় রেন্ডার করতে বলি। আপডেটের পরে, Square এর this.state.value' হবে 'X', তাই আমরা গেম বোর্ডে 'X' দেখতে পাব।  আপনি যদি কোন Square এ ক্লিক করেন তাহলে একটি 'X' প্রদর্শিত হওয়া উচিত।
 
-When you call `setState` in a component, React automatically updates the child components inside of it too.
+যখন আপনি একটি কম্পোনেন্টে 'setState' কল করেন, React স্বয়ংক্রিয়ভাবে এর অভ্যন্তরের চাইল্ট কম্পোনেন্টগুলিও  আপডেট করে।
 
-**[View the full code at this point](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
+**[এখন পর্যন্ত সম্পূর্ণ কোডটি এখানে দেখুন](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)**
 
-### Developer Tools {#developer-tools}
+### ডেভেলপার টুলস {#developer-tools}
 
-The React Devtools extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) lets you inspect a React component tree with your browser's developer tools.
+[Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) এবং [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) এর জন্য React Devtools এক্সটেনশন আপনাকে আপনার ব্রাউজারের ডেভেলপার টুলগুলির সাথে একটি React কম্পোনেন্ট ট্রি পরিদর্শন করতে দেয়।
 
 <img src="../images/tutorial/devtools.png" alt="React Devtools" style="max-width: 100%">
 
-The React DevTools let you check the props and the state of your React components.
+React DevTools আপনাকে props আপনার React কম্পোনেন্টের state যাচাই করতে দেইয়।
 
-After installing React DevTools, you can right-click on any element on the page, click "Inspect" to open the developer tools, and the React tabs ("⚛️ Components" and "⚛️ Profiler") will appear as the last tabs to the right. Use "⚛️ Components" to inspect the component tree.
+ React DevTools ইনস্টল করার পরে, আপনি পৃষ্ঠার যে কোনও উপাদানে right-click করতে পারেন, Developer tools ওপেন করার জন্য "Inspect" এ ক্লিক করুন, এবং React ট্যাবগুলি  ("⚛️ Components" এবং  "⚛️ Profiler") ডানদিকের শেষ ট্যাব হিসাবে উপস্থিত হবে। কম্পোনেন্ট ট্রি পরিদর্শন করতে "⚛️ Components" ব্যবহার করুন।
 
-**However, note there are a few extra steps to get it working with CodePen:**
+**যাইহোক, মনে রাখবেন CodePen এ কাজ করার জন্য কয়েকটি অতিরিক্ত পদক্ষেপ রয়েছে:**
 
-1. Log in or register and confirm your email (required to prevent spam).
-2. Click the "Fork" button.
-3. Click "Change View" and then choose "Debug mode".
-4. In the new tab that opens, the devtools should now have a React tab.
+1. লগ ইন করুন বা নিবন্ধন করুন এবং আপনার ইমেলটি নিশ্চিত করুন (স্প্যাম প্রতিরোধের জন্য প্রয়োজনীয়)।
+2. "Fork" বাটনে ক্লিক করুন।
+3. "Change View" এ ক্লিক করুন  and then choose "Debug mode" নির্বাচন করুন।
+4. যে নতুন ট্যাবটি ওপেন হবে তাতে, Devtools এ এখন একটি React ট্যাব থাকা উচিত।
 
-## Completing the Game {#completing-the-game}
+## গেমটি সম্পূর্ণ করা হচ্ছে {#completing-the-game}
 
-We now have the basic building blocks for our tic-tac-toe game. To have a complete game, we now need to alternate placing "X"s and "O"s on the board, and we need a way to determine a winner.
+আমাদের কাছে এখন আমাদের টিক-ট্যাক-টো গেমের জন্য মৌলিক বিল্ডিং ব্লক রয়েছে। গেমটি সম্পূর্ণ করার জন্য আমাদের এখন বোর্ডে বিকল্পভাবে "X" এবং "O" বসাতে হবে এবং বিজয়ী নির্ধারণের জন্য আমাদের একটি উপায় প্রয়োজন।
 
 ### Lifting State Up {#lifting-state-up}