|
94 | 94 | ] |
95 | 95 | }, |
96 | 96 | { |
97 | | - "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)", |
98 | | - "items": [ |
99 | | - { |
100 | | - "definition": "একটি কন্ডিশন তৈরী করা যাতে রেন্ডারিং নির্ভর করবে", |
101 | | - "code": "const isLoggedIn = true;" |
102 | | - }, |
103 | | - { |
104 | | - "definition": "একটি কন্ডিশনাল এক্সপ্রেশন ব্যবহার করে ভিন্ন JSX রেন্ডার করা", |
105 | | - "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;" |
106 | | - }, |
107 | | - { |
108 | | - "definition": "logical && অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি true হবে তখনই JSX রেন্ডার হবে", |
109 | | - "code": "isLoggedIn && <h1>Welcome Back!</h1>" |
110 | | - }, |
111 | | - { |
112 | | - "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই JSX রেন্ডার হবে", |
113 | | - "code": "isLoggedIn || <h1>Welcome Back!</h1>" |
114 | | - } |
| 97 | + "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)", |
| 98 | + "items": [ |
| 99 | + { |
| 100 | + "definition": "একটি কন্ডিশন তৈরী করা যাতে রেন্ডারিং নির্ভর করবে", |
| 101 | + "code": "const isLoggedIn = true;" |
| 102 | + }, |
| 103 | + { |
| 104 | + "definition": "একটি কন্ডিশনাল এক্সপ্রেশন ব্যবহার করে ভিন্ন JSX রেন্ডার করা", |
| 105 | + "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;" |
| 106 | + }, |
| 107 | + { |
| 108 | + "definition": "logical && অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি true হবে তখনই JSX রেন্ডার হবে", |
| 109 | + "code": "isLoggedIn && <h1>Welcome Back!</h1>" |
| 110 | + }, |
| 111 | + { |
| 112 | + "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই JSX রেন্ডার হবে", |
| 113 | + "code": "isLoggedIn || <h1>Welcome Back!</h1>" |
| 114 | + } |
115 | 115 | ] |
116 | 116 | }, |
117 | 117 | { |
|
169 | 169 | "items": [ |
170 | 170 | { |
171 | 171 | "definition": "কন্ডিশনাল রেন্ডারিং - রিঅ্যাক্ট এ একটি কন্ডিশনের উপর নির্ভর করে ভিন্ন ভিন্ন JSX রেন্ডার করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরণের সিনট্যাক্সের সাহায্যে করা যায়, যেমন টার্নারি অপারেটর, logical && এবং || অপারেটর ব্যবহার করে।", |
172 | | - "code": "isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;", |
| 172 | + "code": "isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;" |
173 | 173 | }, |
174 | 174 | { |
175 | 175 | "definition": "টার্নারি অপারেটর - কন্ডিশনের উপর ভিত্তি করে দুটি মানের মধ্যে একটি রিটার্ন করে। এটি শুধুমাত্র একটি এক্সপ্রেশন হিসাবে ব্যবহৃত হয় এবং 'if-else' এর সংক্ষিপ্ত রূপ হিসেবে কাজ করে।", |
176 | | - "example": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;", |
| 176 | + "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;" |
177 | 177 | } |
178 | 178 | ] |
179 | 179 | }, |
|
293 | 293 | ] |
294 | 294 | }, |
295 | 295 | { |
296 | | - "title": "রিঅ্যাক্ট রাউটার v6", |
297 | | - "items": [ |
298 | | - { |
299 | | - "definition": "npm এর সাহায্যে রাউটার ইন্সটল", |
300 | | - "code": "npm install react-router-dom@6" |
301 | | - }, |
302 | | - { |
303 | | - "definition": "yarn এর সাহায্যে রাউটার ইন্সটল", |
304 | | - "code": "yarn add react-router-dom@6" |
305 | | - }, |
306 | | - { |
307 | | - "definition": "Router সেট করতে App.js এ যুক্ত করুন", |
308 | | - "code": "import { BrowserRouter } from 'react-router-dom'" |
309 | | - }, |
310 | | - { |
311 | | - "definition": "Router Render করতে App.js এ যুক্ত করুন", |
312 | | - "code": "import { Routes, Route } from 'react-router-dom'" |
313 | | - }, |
314 | | - { |
315 | | - "definition": "লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন", |
316 | | - "code": "import { Routes, Route, Link } from 'react-router-dom'" |
317 | | - }, |
318 | | - { |
319 | | - "definition": "যেভাবে রাউটার অবজেক্ট বানিয়ে রাউটার কম্পোনেন্ট সেটআপ করবেন" |
320 | | - }, |
321 | | - { |
322 | | - "code": "import { useRoutes } from 'react-router-dom'\n//inside the component\nconst routes = [\n children: [\n {\n element: <PageComponent />,\n path: '/path',\n }\n ]\n]\nconst routerRegister = useRoutes(routes)\nreturn routerRegister" |
323 | | - } |
324 | | - ] |
| 296 | + "title": "রিঅ্যাক্ট রাউটার v6", |
| 297 | + "items": [ |
| 298 | + { |
| 299 | + "definition": "npm এর সাহায্যে রাউটার ইন্সটল", |
| 300 | + "code": "npm install react-router-dom@6" |
| 301 | + }, |
| 302 | + { |
| 303 | + "definition": "yarn এর সাহায্যে রাউটার ইন্সটল", |
| 304 | + "code": "yarn add react-router-dom@6" |
| 305 | + }, |
| 306 | + { |
| 307 | + "definition": "Router সেট করতে App.js এ যুক্ত করুন", |
| 308 | + "code": "import { BrowserRouter } from 'react-router-dom'" |
| 309 | + }, |
| 310 | + { |
| 311 | + "definition": "Router Render করতে App.js এ যুক্ত করুন", |
| 312 | + "code": "import { Routes, Route } from 'react-router-dom'" |
| 313 | + }, |
| 314 | + { |
| 315 | + "definition": "লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন", |
| 316 | + "code": "import { Routes, Route, Link } from 'react-router-dom'" |
325 | 317 | }, |
| 318 | + { |
| 319 | + "definition": "যেভাবে রাউটার অবজেক্ট বানিয়ে রাউটার কম্পোনেন্ট সেটআপ করবেন", |
| 320 | + "code": "import { useRoutes } from 'react-router-dom'\n//inside the component\nconst routes = [\n children: [\n {\n element: <PageComponent />,\n path: '/path',\n }\n ]\n]\nconst routerRegister = useRoutes(routes)\nreturn routerRegister" |
| 321 | + } |
| 322 | + ] |
| 323 | + }, |
326 | 324 | { |
327 | 325 | "title": "রিঅ্যাক্ট হুকস", |
328 | 326 | "items": [ |
|
338 | 336 | }, |
339 | 337 | { |
340 | 338 | "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)", |
341 | | - "iitems": [ |
| 339 | + "items": [ |
342 | 340 | { |
343 | 341 | "definition": "একটি কন্ডিশন তৈরী করা যেই কন্ডিসনে রেন্ডারিং নির্ভর করবে", |
344 | 342 | "code": "const isLoggedIn = true;" |
|
354 | 352 | { |
355 | 353 | "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই অন্যটি রেন্ডার হবে", |
356 | 354 | "code": "const greeting = isLoggedIn || <h1>Please Sign In</h1>;" |
357 | | - }, |
358 | | - ], |
359 | | - }, |
360 | | - { |
361 | | - "title": "রিঅ্যাক্ট JS এ কন্ট্রোলড এবং আনকন্ট্রোলড কম্পোনেন্টের পার্থক্য", |
362 | | - "items": [ |
363 | | - { |
364 | | - "definition": "কন্ট্রোলড কম্পোনেন্ট: কন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু React এর স্টেট দ্বারা নিয়ন্ত্রিত হয়। ইউজারের ইনপুট পরিবর্তনের সময় স্টেট আপডেট হয়।", |
365 | | - "code": "const [value, setValue] = useState('');\n\n<input type=\"text\" value={value} onChange={(e) => setValue(e.target.value)} />" |
366 | | - }, |
367 | | - { |
368 | | - "definition": "আনকন্ট্রোলড কম্পোনেন্ট: আনকন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু সরাসরি DOM দ্বারা পরিচালিত হয়। React এর স্টেট ব্যবহারের প্রয়োজন নেই।", |
369 | | - "code": "const inputRef = useRef(null);\n\n<input type=\"text\" ref={inputRef} />" |
| 355 | + } |
| 356 | + ] |
370 | 357 | }, |
371 | 358 | { |
372 | | - "definition": "কন্ট্রোলড কম্পোনেন্টে ফর্ম ভ্যালিডেশন এবং ইনপুট ভ্যালুতে নির্দিষ্ট নিয়ন্ত্রণ রাখা সহজ। আনকন্ট্রোলড কম্পোনেন্টে নিয়ন্ত্রণ সীমিত থাকে এবং DOM থেকে সরাসরি ভ্যালু পেতে হয়।", |
373 | | - "code": "// কন্ট্রোলড কম্পোনেন্টে ভ্যালিডেশন উদাহরণ\nconst handleSubmit = (e) => {\n e.preventDefault();\n if (value.length > 5) {\n // ভ্যালিডেশন সফল\n }\n};" |
| 359 | + "title": "রিঅ্যাক্ট JS এ কন্ট্রোলড এবং আনকন্ট্রোলড কম্পোনেন্টের পার্থক্য", |
| 360 | + "items": [ |
| 361 | + { |
| 362 | + "definition": "কন্ট্রোলড কম্পোনেন্ট: কন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু React এর স্টেট দ্বারা নিয়ন্ত্রিত হয়। ইউজারের ইনপুট পরিবর্তনের সময় স্টেট আপডেট হয়।", |
| 363 | + "code": "const [value, setValue] = useState('');\n\n<input type=\"text\" value={value} onChange={(e) => setValue(e.target.value)} />" |
| 364 | + }, |
| 365 | + { |
| 366 | + "definition": "আনকন্ট্রোলড কম্পোনেন্ট: আনকন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু সরাসরি DOM দ্বারা পরিচালিত হয়। React এর স্টেট ব্যবহারের প্রয়োজন নেই।", |
| 367 | + "code": "const inputRef = useRef(null);\n\n<input type=\"text\" ref={inputRef} />" |
| 368 | + }, |
| 369 | + { |
| 370 | + "definition": "কন্ট্রোলড কম্পোনেন্টে ফর্ম ভ্যালিডেশন এবং ইনপুট ভ্যালুতে নির্দিষ্ট নিয়ন্ত্রণ রাখা সহজ। আনকন্ট্রোলড কম্পোনেন্টে নিয়ন্ত্রণ সীমিত থাকে এবং DOM থেকে সরাসরি ভ্যালু পেতে হয়।", |
| 371 | + "code": "// কন্ট্রোলড কম্পোনেন্টে ভ্যালিডেশন উদাহরণ\nconst handleSubmit = (e) => {\n e.preventDefault();\n if (value.length > 5) {\n // ভ্যালিডেশন সফল\n }\n};" |
| 372 | + } |
| 373 | + ] |
374 | 374 | } |
375 | 375 | ] |
376 | 376 | } |
377 | | - |
378 | | - ] |
379 | | -} |
0 commit comments