diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index d9141a1ce..956f1baef 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -1,12 +1,11 @@ --- -title: Add React to an Existing Project +title: ইতোমধ্যে বানানো প্রজেক্টে React যুক্ত করুন --- আপনি যদি আপনার Existing প্রজেক্ট কিছু ইন্টারেক্টিভিটি যুক্ত করতে চান তবে আপনাকে তা React-এ নতুনভাবে লেখার প্রয়োজন নেই। আপনার Existing স্ট্যাকে React যোগ করুন এবং যে কোনো জায়গায় ইন্টারেক্টিভ React কম্পোনেন্ট রেন্ডার করুন। - @@ -15,51 +14,47 @@ title: Add React to an Existing Project -## আপনার existing ওয়েবসাইটের একটি সম্পূর্ণ subroute এর জন্য রিয়েক্ট ব্যবহার করা {/*using-react-for-an-entire-subroute-of-your-existing-website*/} - -চলুন ধরা যাক আপনার কিছু ইতিমধ্যে `example.com` নামে existing ওয়েব অ্যাপ রয়েছে এবং এটি একটি অন্য সার্ভার প্রযুক্তি (যেমন Rails) দ্বারা নির্মিত হয়েছে এবং আপনি চান যে `example.com/some-app/` দিয়ে শুরু হওয়া সমস্ত routes পুরোপুরি React দিয়ে ব্যবহার করতে। - -এখানে আমরা যে ভাবে এটি সেট আপ করতে পরামর্শ দিচ্ছি : +## আপনার existing ওয়েবসাইটের একটি সম্পূর্ণ subroute এর জন্য React ব্যবহার করা {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -১. **আপনার অ্যাপ এর রিয়েক্ট অংশটি** [রিয়েক্ট-ভিত্তিক ফ্রেমওয়ার্ক](/learn/start-a-new-react-project) এর দিয়ে বিল্ড করুন। +চলুন ধরা যাক আপনার কিছু ইতিমধ্যে `example.com` নামে existing ওয়েব অ্যাপ রয়েছে এবং এটি একটি অন্য সার্ভার প্রযুক্তি (যেমন Rails) দ্বারা বানানো হয়েছে এবং আপনি চান `example.com/some-app/` দিয়ে শুরু হওয়া সমস্ত routes পুরোপুরি React দিয়ে ব্যবহার করতে। -২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/some-app` _base path_ হিসেবে সেট করুন** (এখানে কিভাবে করবেন তা দেখুন: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))। +এখানে আমরা যে ভাবে এটি সেট আপ করতে পরামর্শ দিচ্ছিঃ +১. **আপনার অ্যাপ এর React অংশটি** [React-ভিত্তিক ফ্রেমওয়ার্ক](/learn/start-a-new-react-project) দিয়ে বিল্ড করুন। +২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/some-app` _base path_ হিসেবে সেট করুন** (এখানে কিভাবে করবেন তা দেখুনঃ [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))। ৩. **আপনার সার্ভার বা প্রক্সি কনফিগার করুন** যাতে `/some-app/` এর সমস্ত request আপনার React অ্যাপ দ্বারা হ্যান্ডেল করা হয়। -এটি নিশ্চিত করে যে আপনার অ্যাপের রিয়েক্ট অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) - - - -অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দিন। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা চান না, তবুও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby জন্য ডিফল্ট ) `/some-app/` এর পরিবর্তে। +এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) +অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দেয়। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা না চান, সে ক্ষেত্রেও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, `/some-app/` এর পরিবর্তে HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby এর জন্য ডিফল্ট )। -## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/} +## আগে থেকে বিদ্যমান একটি পেইজে React ব্যবহার {/*using-react-for-a-part-of-your-existing-page*/} -আবার ধরা যাক, আপনার একটি বিদ্যমান পেজ আছে যা অন্য টেকনোলজি দিয়ে তৈরি করা হয়েছে (যেমন Rails এর মতো একটি সার্ভার টেকনোলজি বা Backbone এর মতো একটি ক্লায়েন্ট টেকনোলজি), এবং আপনি ঐ পৃষ্ঠায় ইন্টারেক্টিভ রিয়েক্ট কম্পোনেন্টগুলি রেন্ডার করতে চান। এটি রিয়েক্ট সংমিশ্রণ করার একটি সাধারণ উপায় । বাস্তবে, এটি মেটা এর জন্য বহু বছর ধরে রিয়েক্ট ব্যবহারের মধ্যে সবচেয়ে সাধারণ উপায় হিসাবে দেখা হচ্ছে! +আবার ধরা যাক, আপনার একটি পেইজ আগে থেকে আছে যা অন্য টেকনোলজি দিয়ে তৈরি করা হয়েছে (যেমন Rails এর মতো একটি সার্ভার টেকনোলজি বা Backbone এর মতো একটি ক্লায়েন্ট টেকনোলজি), এবং আপনি ঐ পেইজে ইন্টারেক্টিভ React কম্পোনেন্টগুলি রেন্ডার করতে চান। এটি React সংমিশ্রণ করার একটি সাধারণ উপায় । বাস্তবে, এটি মেটা এর জন্য বহু বছর ধরে React ব্যবহারের মধ্যে সবচেয়ে সাধারণ উপায় হিসাবে দেখা হচ্ছে! -আপনি এটি দুইটি ধাপে করতে পারেন: +আপনি এটি দুইটি ধাপে করতে পারেনঃ ১. **আপনাকে [JSX সিনট্যাক্স](/learn/writing-markup-with-jsx) ব্যবহার করার জন্য একটি জাভাস্ক্রিপ্ট এনভায়রনমেন্ট সেট আপ করতে হবে**, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) সিনট্যাক্স দিয়ে আপনার কোডকে মডিউলে ভাগ করতে হবে এবং npm (উদাহরণস্বরূপ, React) এর মতো প্যাকেজগুলি [npm] (https://www.npmjs.com/) প্যাকেজ রেজিস্ট্রি থেকে ব্যবহার করতে হবে। +২. আপনার React কম্পোনেন্টগুলি পেজে যেখানে দেখতে চান সেখানে **রেন্ডার করতে হবে**। -২. আপনার রিয়েক্ট কম্পোনেন্টগুলি পেজে যেখানে দেখতে চান সেখানে **রেন্ডার করতে হবে**। +সঠিক পদক্ষেপটি আপনার বর্তমান পেইজ সেটআপের উপর নির্ভর করে, তাই আসুন কিছু বিস্তারিত দেখে নেই। -সঠিক পদক্ষেপটি আপনার বর্তমান পৃষ্ঠা সেটআপের উপর নির্ভর করে, তাই আসুন কিছু বিস্তারিত দেখে নেই। -### ধাপ ১: একটি মডিউলার জাভাস্ক্রিপ্ট ইনভায়রনমেন্ট সেট আপ করুন" {/*step-1-set-up-a-modular-javascript-environment*/} +### ধাপ ১: একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট সেট আপ করুন" {/*step-1-set-up-a-modular-javascript-environment*/} -একটি মডিউলার জাভাস্ক্রিপ্ট ইনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে পৃথক ফাইলগুলিতে আপনার রিয়েক্ট উপাদানগুলি লিখতে দেয়। এটি আপনাকে রিয়েক্ট সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত আশ্চর্যজনক প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপ এর উপর নির্ভর করে। +একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে আলাদা আলাদা ফাইলগুলিতে আপনার React উপাদানগুলি লিখতে দেয়। এটি আপনাকে React সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত অসাধারণ প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপের উপর নির্ভর করে। +* **যদি আপনার অ্যাপ ইতোমধ্যে import স্টেটমেন্ট ব্যবহার করে ফাইলে ভাগ করা থাকে**, তাহলে সেই সেটআপটি ব্যবহার করা চেষ্টা করুন। আপনার জাভাস্ক্রিপ্ট কোডে `
` লিখলে কী সিনট্যাক্স এরর হয় তা চেক করুন। যদি এটি সিনট্যাক্স এরর দেখায়, তবে আপনাকে [Babel দিয়ে আপনার জাভাস্ক্রিপ্ট কোড রূপান্তর করতে হতে পারে](<(https://babeljs.io/setup)>) এবং JSX ব্যবহার করতে [Babel React preset](https://babeljs.io/docs/babel-preset-react) সক্ষম করতে হতে পারে। -* **যদি আপনার অ্যাপ ইতিমধ্যে import স্টেটমেন্ট ব্যবহার করে ফাইলে ভাগ করা থাকেন**, তাহলে সেই সেটআপটি ব্যবহার করা চেষ্টা করুন। আপনার জাভাস্ক্রিপ্ট কোডে `
` লিখলে কি সিনট্যাক্স ত্রুটি হয় তা চেক করুন। যদি এটি সিনট্যাক্স ত্রুটি দেখায়, তবে আপনাকে [Babel দিয়ে আপনার জাভাস্ক্রিপ্ট কোড রূপান্তর করতে হতে পারে](<(https://babeljs.io/setup)>) এবং JSX ব্যবহার করতে [Babel React preset](https://babeljs.io/docs/babel-preset-react) সক্ষম করতে হতে পারে। +* **যদি আপনার অ্যাপে জাভাস্ক্রিপ্ট মডিউল কম্পাইল করার জন্য ইতিমধ্যে কোনও সেটআপ না থাকে**, তবে [Vite](https://vitejs.dev/) দিয়ে সেটআপ করুন। Vite সম্প্রদায় রেল, জ্যাঙ্গো এবং লারাভেল সহ [ব্যাকেন্ড ফ্রেমওয়ার্ক সহ অনেক ইন্টিগ্রেশন](https://github.com/vitejs/awesome-vite#integrations-with-backends) বজায় রাখে। যদি আপনার ব্যাকেন্ড ফ্রেমওয়ার্ক তালিকাভুক্ত না থাকে তবে [এই গাইড](https://vitejs.dev/guide/backend-integration.html) অনুসরণ করে ব্যাকেন্ডের সাথে Vite বিল্ড ইন্টিগ্রেট করতে পারেন। -* **যদি আপনার অ্যাপে জাভাস্ক্রিপ্ট মডিউল কম্পাইল করার জন্য ইতিমধ্যে কোনও সেটআপ না থাকে**, তবে [Vite](https://vitejs.dev/) দিয়ে সেটআপ করুন। Vite সম্প্রদায় রেল, জ্যাঙ্গো এবং লারাভেল সহ [ব্যাকএন্ড ফ্রেমওয়ার্ক সহ অনেক ইন্টিগ্রেশন](https://github.com/vitejs/awesome-vite#integrations-with-backends) বজায় রাখে। যদি আপনার ব্যাকএন্ড ফ্রেমওয়ার্ক তালিকাভুক্ত না থাকে তবে [এই গাইড](https://vitejs.dev/guide/backend-integration.html) অনুসরণ করে ব্যাকএন্ডের সাথে Vite বিল্ড ইন্টিগ্রেট করতে পারেন। +আপনার সেটআপ কাজ করছে কি না তা চেক করতে, আপনার প্রজেক্ট ফোল্ডারে এই কমান্ডটি চালানঃ -আপনার সেটআপ কাজ করছে কি না তা চেক করতে, আপনার প্রজেক্ট ফোল্ডারে এই কমান্ডটি চালান: npm install react react-dom তারপর আপনার মূল JavaScript ফাইলের শীর্ষে এই লাইনগুলি যোগ করুন (এটি হতে পারে `index.js` বা `main.js` নামের ফাইল): + ```html index.html hidden @@ -67,7 +62,7 @@ npm install react react-dom My app - + ``` @@ -75,56 +70,52 @@ npm install react react-dom ```js src/index.js active import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন document.body.innerHTML = '
'; -// Render your React component instead +// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` -যদি আপনার পৃষ্ঠার সম্পূর্ণ বিষয়বস্তুটি "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করতেছে! পড়া চালিয়ে যান। +যদি আপনার পেইজের সম্পূর্ণ কনটেন্ট "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করছে! পড়তে থাকুন। -একটি বিদ্যমান প্রজেক্টে একটি মডুলার জাভাস্ক্রিপ্ট পরিবেশকে সংযোজন করা প্রথমবারের মতো ভীতিজনক বোধ হতে পারে। কিন্তু সেটা করা অবশ্যই প্রয়োজনীয় এবং উপকারী! -আপনি আটকে গেলে, আমাদের [কমিউনিটি রিসোর্স](/community) অথবা [Vite Chat](https://chat.vitejs.dev/) ব্যবহার করে দেখুন।। +একটি বিদ্যমান প্রজেক্টে একটি মডুলার জাভাস্ক্রিপ্ট এনভায়রনমেন্টকে যুক্ত করা প্রথমবার ভীতিজনক বোধ হতে পারে, কিন্তু এই পরিশ্রমটুকু এর প্রাপ্য! আপনি আটকে গেলে, আমাদের [কমিউনিটি রিসোর্স](/community) অথবা [Vite Chat](https://chat.vitejs.dev/) ব্যবহার করে দেখুন। -### ধাপ ২: পৃষ্ঠার যেকোনো জায়গায় রিয়েক্ট কম্পোনেন্ট রেন্ডার করুন। {/*step-2-render-react-components-anywhere-on-the-page*/} +### ধাপ ২: পেইজে যেকোনো জায়গায় React কম্পোনেন্ট রেন্ডার করুন। {/*step-2-render-react-components-anywhere-on-the-page*/} -আগের পদক্ষেপে, আপনি আপনার মূল ফাইলের শীর্ষে এই কোডটি রাখেনঃ +আগের ধাপে, আপনি আপনার মূল ফাইলের শীর্ষে এই কোডটি রাখুনঃ ```js import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন document.body.innerHTML = '
'; -// Render your React component instead +// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন const root = createRoot(document.getElementById('app')); root.render(

Hello, world

); ``` -অবশ্যই আপনি সত্যিই বিদ্যমান HTML কন্টেন্টটি মুছতে চান না! -এই কোডটি মুছে ফেলুন। +নিঃসন্দেহে আপনি সত্যি সত্যি বিদ্যমান HTML কন্টেন্ট মুছতে চান না! -বরং, আপনি সম্ভবত আপনার রিয়েক্ট কম্পোনেন্টগুলি নির্দিষ্ট জায়গাগুলিতে আপনার HTML এ রেন্ডার করতে চান। এখন আপনার HTML পৃষ্ঠাটি খুলুন -(অথবা সার্ভার টেমপ্লেটগুলি যা এটি তৈরি করে) +এই কোডটি মুছে ফেলুন। -এবং কোনও ট্যাগে একটি অনন্য [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) এট্রিবিউট যুক্ত করুন, যেমন: +বরং, আপনি সম্ভবত আপনার HTML এ React কম্পোনেন্টগুলি নির্দিষ্ট জায়গায় রেন্ডার করতে চান। এখন আপনার HTML পেইজটি খুলুন +(অথবা সার্ভার টেমপ্লেটগুলি যা একে তৈরি করে) এবং কোনও ট্যাগে একটি ইউনিক [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) এট্রিবিউট যুক্ত করুন, যেমনঃ ```html - + - + ``` -এটি আপনাকে [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) ব্যবহার করে ঐ HTML উপাদানটি খুঁজে বের করতে দেয়। এরপর [`createRoot`](/reference/react-dom/client/createRoot) এ তা পাঠাতে হবেন, যাতে আপনি আপনার নিজের রিয়েক্ট কম্পোনেন্টটি রেন্ডার করতে পারেন: - - +এটি আপনাকে [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) ব্যবহার করে ঐ HTML উপাদানটি খুঁজে বের করতে দেয়। এরপর [`createRoot`](/reference/react-dom/client/createRoot) এ তা পাঠাতে হবে, যাতে আপনি আপনার নিজের React কম্পোনেন্টটি রেন্ডার করতে পারেনঃ @@ -144,7 +135,7 @@ root.render(

Hello, world

); import { createRoot } from 'react-dom/client'; function NavigationBar() { - // TODO: Actually implement a navigation bar + // TODO: প্রকৃতপক্ষে একটি ন্যাভিগেশন বার তৈরি করা return

Hello from React!

; } @@ -155,10 +146,10 @@ root.render(); -দেখতে হলে যে index.html ফাইলের মূল HTML কন্টেন্টটি সংরক্ষিত আছে এবং আপনার নিজের NavigationBar রিয়েক্ট কম্পোনেন্টটি এখন আপনার HTML এর মধ্যে প্রদর্শিত হয় যেটি `