You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/writing-markup-with-jsx.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ title: JSX দিয়ে মার্কআপ লেখা
18
18
19
19
## JSX: জাভাস্ক্রিপ্টে মার্কআপ করা {/*jsx-putting-markup-into-javascript*/}
20
20
21
-
ওয়েবটি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে তৈরি করা হয়েছে। বহু বছর ধরে, ওয়েব ডেভেলপাররা HTML-এ কন্টেন্ট, সিএসএস-এ ডিজাইন এবং জাভাস্ক্রিপ্টে লজিক রাখে—প্রায়ই আলাদা ফাইলে! পেইজের লজিক জাভাস্ক্রিপ্টে আলাদাভাবে থাকলেও বিষয়বস্তু HTML-এর মধ্যে চিহ্নিত করা হয়েছিল:
21
+
ওয়েব HTML, CSS এবং জাভাস্ক্রিপ্টে তৈরি করা হয়েছে। বহু বছর ধরে, ওয়েব ডেভেলপাররা HTML-এ কন্টেন্ট, CSS-এ ডিজাইন এবং জাভাস্ক্রিপ্টে লজিক রাখে—প্রায়ই আলাদা ফাইলে! পেইজের লজিক জাভাস্ক্রিপ্টে আলাদাভাবে থাকলেও বিষয়বস্তু HTML-এর মধ্যে চিহ্নিত করা হত:
22
22
23
23
<DiagramGroup>
24
24
@@ -36,7 +36,7 @@ HTML
36
36
37
37
</DiagramGroup>
38
38
39
-
কিন্তু ওয়েব যত বেশি ইন্টারেক্টিভ হয়ে ওঠে, যুক্তি ক্রমবর্ধমান বিষয়বস্তু নির্ধারণ করে। এইচটিএমএল এর দায়িত্বে ছিল জাভাস্ক্রিপ্ট! **এই কারণেই React-এ, রেন্ডারিং লজিক এবং মার্কআপ একই জায়গায় একসাথে থাকে—কম্পোনেন্ট।**
39
+
কিন্তু ওয়েব যত বেশি ইন্টারেক্টিভ হয়ে ওঠে, কনটেন্ট কী হবে সেটার দায়ভার ক্রমশ লজিকের উপর পড়তে শুরু করল। HTML এর দায়িত্বে ছিল জাভাস্ক্রিপ্ট! **এই কারণেই React-এ, রেন্ডারিং লজিক এবং মার্কআপ একই জায়গায় একসাথে থাকে—কম্পোনেন্টে।**
40
40
41
41
<DiagramGroup>
42
42
@@ -60,7 +60,7 @@ HTML
60
60
61
61
<Note>
62
62
63
-
জেএসএক্স এবং React দুটি পৃথক জিনিস। এগুলি প্রায়শই একসাথে ব্যবহার করা হয়, তবে আপনি একে অপরের থেকে স্বাধীনভাবে [ব্যবহার করতে পারেন](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) ।JSX হল একটি সিনট্যাক্স এক্সটেনশন, যখন React হল একটি JavaScript লাইব্রেরি।
63
+
JSX এবং React দুটি পৃথক জিনিস। এগুলি প্রায়শই একসাথে ব্যবহার করা হয়, তবে আপনি একে অপরের থেকে স্বাধীনভাবে [ব্যবহার করতে পারেন](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) ।JSX হল একটি সিনট্যাক্স এক্সটেনশন, যখন React হল একটি JavaScript লাইব্রেরি।
64
64
65
65
</Note>
66
66
@@ -82,7 +82,7 @@ HTML
82
82
</ul>
83
83
```
84
84
85
-
এবং আপনি এটি আপনার কম্পোনেন্ট- এ রাখতে চান:
85
+
এবং আপনি এটি আপনার কম্পোনেন্টে রাখতে চান:
86
86
87
87
```js
88
88
exportdefaultfunctionTodoList() {
@@ -122,7 +122,7 @@ img { height: 90px }
122
122
123
123
</Sandpack>
124
124
125
-
এর কারণ হল JSX জটিল এবং এইচটিএমএল থেকে আরও কিছু নিয়ম রয়েছে! আপনি যদি উপরের error messages পড়ে থাকেন, তাহলে তারা আপনাকে মার্কআপ ঠিক করার জন্য গাইড করবে, অথবা আপনি নীচের নির্দেশিকা অনুসরণ করতে পারেন।
125
+
এর কারণ হল JSX জটিল এবং HTML থেকে আরও কিছু নিয়ম রয়েছে! আপনি যদি উপরের error messages পড়ে থাকেন, তাহলে তারা আপনাকে মার্কআপ ঠিক করার জন্য গাইড করবে, অথবা আপনি নীচের নির্দেশিকা অনুসরণ করতে পারেন।
126
126
127
127
<Note>
128
128
@@ -175,15 +175,15 @@ img { height: 90px }
175
175
176
176
#### কেন একাধিক JSX ট্যাগ মোড়ানো প্রয়োজন? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
177
177
178
-
JSX দেখতে HTML এর মতো, কিন্তু আসলে এটি প্লেইন জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত হয়। আপনি একটি অ্যারের মধ্যে মোড়ানো ছাড়া একটি ফাংশন থেকে দুটি অবজেক্ট ফেরত দিতে পারবেন না। এটি ব্যাখ্যা করে যে আপনি কেন দুটি JSX ট্যাগকে অন্য ট্যাগ বা একটি ফ্র্যাগমেন্টে মোড়ানো ছাড়াই ফেরত দিতে পারবেন না।
178
+
JSX দেখতে HTML এর মতো, কিন্তু আসলে এটি প্লেইন জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত হয়। আপনি একটি অ্যারের মধ্যে wrap করা ছাড়া একটি ফাংশন থেকে দুটি অবজেক্ট ফেরত দিতে পারবেন না। এটি ব্যাখ্যা করে যে আপনি কেন দুটি JSX ট্যাগকে অন্য ট্যাগ বা একটি ফ্র্যাগমেন্টে মোড়ানো ছাড়াই ফেরত দিতে পারবেন না।
JSX-এর জন্য ট্যাগগুলি স্পষ্টভাবে ক্লোজ করতে হবে: `<img>`-এর মতো স্ব-বন্ধ হওয়া ট্যাগগুলিকে অবশ্যই `<img />` হতে হবে, এবং `<li>oranges` মতো মোড়ানো ট্যাগগুলিকে `<li>oranges</li>` হিসাবে লিখতে হবে।
184
+
JSX-এর জন্য ট্যাগগুলি স্পষ্টভাবে ক্লোজ করতে হবে: `<img>`-এর মতো নিজে নিজে বন্ধ হওয়া ট্যাগগুলিকে অবশ্যই `<img />` হতে হবে, এবং `<li>oranges` মতো wrap করা ট্যাগগুলিকে `<li>oranges</li>` হিসাবে লিখতে হবে।
185
185
186
-
হেডি লামারের ইমেইজ এবং লিস্টআইটেমগুলি ক্লোজ হলে এমন দেখায়:
186
+
Hedy Lamarr এর ছবি এবং লিস্ট আইটেমগুলি ক্লোজ হলে এমন দেখায়:
187
187
188
188
```js {2-6,8-10}
189
189
<>
@@ -260,7 +260,7 @@ img { height: 90px }
260
260
261
261
এখন আপনি জানেন JSX কেন রয়েছে এবং কীভাবে এটি কম্পনেন্টে ব্যবহার করবেন:
262
262
263
-
*রিঅ্যাক্ট কম্পোনেন্ট গ্রুপ রেন্ডারিং লজিক মার্কআপের সাথে একসাথে থাকে কারণ তারা সম্পর্কিত।
263
+
*React কম্পোনেন্ট গ্রুপ রেন্ডারিং লজিক মার্কআপের সাথে একসাথে থাকে কারণ তারা সম্পর্কিত।
264
264
*JSX কিছু পার্থক্য সহ HTML এর অনুরূপ। আপনার প্রয়োজন হলে আপনি একটি [কনভার্টার](https://transform.tools/html-to-jsx) ব্যবহার করতে পারেন।
265
265
*Error messages প্রায়ই আপনার মার্কআপ ঠিক করার জন্য সঠিক দিক নির্দেশ করবে.
0 commit comments