Skip to content

Commit e2b4e0e

Browse files
committed
fix: resolve merge conflict and update Bengali translation for adding React to an existing project documentation
1 parent 3d066cb commit e2b4e0e

1 file changed

Lines changed: 16 additions & 34 deletions

File tree

src/content/learn/add-react-to-an-existing-project.md

Lines changed: 16 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
44

55
<Intro>
66

7-
আপনি যদি আপনার Existing প্রজেক্ট কিছু ইন্টারেক্টিভিটি যুক্ত করতে চান তবে আপনাকে তা React-এ নতুনভাবে লেখার প্রয়োজন নেই। আপনার Existing স্ট্যাকে React যোগ করুন এবং যে কোনো জায়গায় ইন্টারেক্টিভ React কম্পোনেন্ট রেন্ডার করুন।
7+
আপনি যদি আপনার Existing প্রজেক্ট কিছু ইন্টারেক্টিভিটি যুক্ত করতে চান তবে আপনাকে তা React-এ নতুনভাবে লেখার প্রয়োজন নেই। আপনার Existing স্ট্যাকে React যোগ করুন এবং যে কোনো জায়গায় ইন্টারেক্টিভ React কম্পোনেন্ট রেন্ডার করুন।
88

99
</Intro>
1010

@@ -20,19 +20,13 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
2020

2121
এখানে আমরা যে ভাবে এটি সেট আপ করতে পরামর্শ দিচ্ছিঃ
2222

23-
<<<<<<< HEAD
24-
১. **আপনার অ্যাপ এর React অংশটি** [React-ভিত্তিক ফ্রেমওয়ার্ক](/learn/start-a-new-react-project) দিয়ে বিল্ড করুন।
25-
২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/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/))।
23+
১. **আপনার অ্যাপ এর React অংশটি** [React-ভিত্তিক ফ্রেমওয়ার্ক](/learn/start-a-new-react-project) দিয়ে বিল্ড করুন।
24+
২. **ফ্রেমওয়ার্কের কনফিগারেশন অংশে `/some-app` _base path_ হিসেবে সেট করুন** (এখানে কিভাবে করবেন তা দেখুনঃ [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/))।
2625
৩. **আপনার সার্ভার বা প্রক্সি কনফিগার করুন** যাতে `/some-app/` এর সমস্ত request আপনার React অ্যাপ দ্বারা হ্যান্ডেল করা হয়।
27-
=======
28-
1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
29-
2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
30-
3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
31-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
3226

3327
এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)
3428

35-
অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দেয়। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা না চান, সে ক্ষেত্রেও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, `/some-app/` এর পরিবর্তে HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby এর জন্য ডিফল্ট )।
29+
অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দেয়। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা না চান, সে ক্ষেত্রেও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, `/some-app/` এর পরিবর্তে HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য [`next export` output](https://nextjs.org/docs/advanced-features/static-html-export), Gatsby এর জন্য ডিফল্ট )।
3630

3731
## আগে থেকে বিদ্যমান একটি পেইজে React ব্যবহার {/*using-react-for-a-part-of-your-existing-page*/}
3832

@@ -45,17 +39,13 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
4539

4640
সঠিক পদক্ষেপটি আপনার বর্তমান পেইজ সেটআপের উপর নির্ভর করে, তাই আসুন কিছু বিস্তারিত দেখে নেই।
4741

48-
### ধাপ ১: একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট সেট আপ করুন" {/*step-1-set-up-a-modular-javascript-environment*/}
42+
### ধাপ ১: একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট সেট আপ করুন" {/*step-1-set-up-a-modular-javascript-environment*/}
4943

50-
একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে আলাদা আলাদা ফাইলগুলিতে আপনার React উপাদানগুলি লিখতে দেয়। এটি আপনাকে React সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত অসাধারণ প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপের উপর নির্ভর করে।
44+
একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে আলাদা আলাদা ফাইলগুলিতে আপনার React উপাদানগুলি লিখতে দেয়। এটি আপনাকে React সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত অসাধারণ প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপের উপর নির্ভর করে।
5145

5246
* **যদি আপনার অ্যাপ ইতোমধ্যে import স্টেটমেন্ট ব্যবহার করে ফাইলে ভাগ করা থাকে**, তাহলে সেই সেটআপটি ব্যবহার করা চেষ্টা করুন। আপনার জাভাস্ক্রিপ্ট কোডে `<div />` লিখলে কী সিনট্যাক্স এরর হয় তা চেক করুন। যদি এটি সিনট্যাক্স এরর দেখায়, তবে আপনাকে [Babel দিয়ে আপনার জাভাস্ক্রিপ্ট কোড রূপান্তর করতে হতে পারে](<(https://babeljs.io/setup)>) এবং JSX ব্যবহার করতে [Babel React preset](https://babeljs.io/docs/babel-preset-react) সক্ষম করতে হতে পারে।
5347

54-
<<<<<<< HEAD
55-
* **যদি আপনার অ্যাপে জাভাস্ক্রিপ্ট মডিউল কম্পাইল করার জন্য ইতিমধ্যে কোনও সেটআপ না থাকে**, তবে [Vite](https://vitejs.dev/) দিয়ে সেটআপ করুন। Vite কমিউনিটি Rails, Django এবং Laravel সহ [ব্যাকেন্ড ফ্রেমওয়ার্ক সহ অনেক ইন্টিগ্রেশন](https://github.com/vitejs/awesome-vite#integrations-with-backends) বজায় রাখে। যদি আপনার ব্যাকেন্ড ফ্রেমওয়ার্ক তালিকাভুক্ত না থাকে তবে [এই গাইড](https://vitejs.dev/guide/backend-integration.html) অনুসরণ করে ব্যাকেন্ডের সাথে Vite বিল্ড ইন্টিগ্রেট করতে পারেন।
56-
=======
57-
* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
58-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
48+
* **যদি আপনার অ্যাপে জাভাস্ক্রিপ্ট মডিউল কম্পাইল করার জন্য ইতিমধ্যে কোনও সেটআপ না থাকে**, তবে [Vite](https://vite.dev/) দিয়ে সেটআপ করুন। Vite কমিউনিটি Rails, Django এবং Laravel সহ [ব্যাকেন্ড ফ্রেমওয়ার্ক সহ অনেক ইন্টিগ্রেশন](https://github.com/vitejs/awesome-vite#integrations-with-backends) বজায় রাখে। যদি আপনার ব্যাকেন্ড ফ্রেমওয়ার্ক তালিকাভুক্ত না থাকে তবে [এই গাইড](https://vite.dev/guide/backend-integration.html) অনুসরণ করে ব্যাকেন্ডের সাথে Vite বিল্ড ইন্টিগ্রেট করতে পারেন।
5949

6050
আপনার সেটআপ কাজ করছে কি না তা চেক করতে, আপনার প্রজেক্ট ফোল্ডারে এই কমান্ডটি চালানঃ
6151

@@ -72,38 +62,30 @@ npm install react react-dom
7262
<html>
7363
<head><title>My app</title></head>
7464
<body>
75-
<<<<<<< HEAD
76-
<!-- ইতোমধ্যে আপনার পেইজে থাকা কনটেন্ট (এই উদাহরণে, এটি রিপ্লেস হয়ে যাবে) -->
77-
=======
7865
<!-- Your existing page content (in this example, it gets replaced) -->
7966
<div id="root"></div>
80-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
8167
</body>
8268
</html>
8369
```
8470

8571
```js src/index.js active
8672
import { createRoot } from 'react-dom/client';
8773

88-
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
74+
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
8975
document.body.innerHTML = '<div id="app"></div>';
9076

91-
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
77+
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
9278
const root = createRoot(document.getElementById('app'));
9379
root.render(<h1>Hello, world</h1>);
9480
```
9581

9682
</Sandpack>
9783

98-
যদি আপনার পেইজের সম্পূর্ণ কনটেন্ট "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করছে! পড়তে থাকুন।
84+
যদি আপনার পেইজের সম্পূর্ণ কনটেন্ট "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করছে! পড়তে থাকুন।
9985

10086
<Note>
10187

102-
<<<<<<< HEAD
103-
একটি বিদ্যমান প্রজেক্টে একটি মডুলার জাভাস্ক্রিপ্ট এনভায়রনমেন্টকে যুক্ত করা প্রথমবার ভীতিজনক বোধ হতে পারে, কিন্তু এই পরিশ্রমটুকু এর প্রাপ্য! আপনি আটকে গেলে, আমাদের [কমিউনিটি রিসোর্স](/community) অথবা [Vite Chat](https://chat.vitejs.dev/) ব্যবহার করে দেখুন।
104-
=======
105-
Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
106-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
88+
একটি বিদ্যমান প্রজেক্টে একটি মডুলার জাভাস্ক্রিপ্ট এনভায়রনমেন্টকে যুক্ত করা প্রথমবার ভীতিজনক বোধ হতে পারে, কিন্তু এই পরিশ্রমটুকু এর প্রাপ্য! আপনি আটকে গেলে, আমাদের [কমিউনিটি রিসোর্স](/community) অথবা [Vite Chat](https://chat.vite.dev/) ব্যবহার করে দেখুন।
10789

10890
</Note>
10991

@@ -113,10 +95,10 @@ Integrating a modular JavaScript environment into an existing project for the fi
11395
```js
11496
import { createRoot } from 'react-dom/client';
11597

116-
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
98+
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
11799
document.body.innerHTML = '<div id="app"></div>';
118100

119-
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
101+
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
120102
const root = createRoot(document.getElementById('app'));
121103
root.render(<h1>Hello, world</h1>);
122104
```
@@ -126,11 +108,11 @@ root.render(<h1>Hello, world</h1>);
126108

127109
এই কোডটি মুছে ফেলুন।
128110

129-
বরং, আপনি সম্ভবত আপনার HTML এ React কম্পোনেন্টগুলি নির্দিষ্ট জায়গায় রেন্ডার করতে চান। এখন আপনার HTML পেইজটি খুলুন
111+
বরং, আপনি সম্ভবত আপনার HTML এ React কম্পোনেন্টগুলি নির্দিষ্ট জায়গায় রেন্ডার করতে চান। এখন আপনার HTML পেইজটি খুলুন
130112
(অথবা সার্ভার টেমপ্লেটগুলি যা একে তৈরি করে) এবং কোনও ট্যাগে একটি ইউনিক [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) এট্রিবিউট যুক্ত করুন, যেমনঃ
131113

132114
```html
133-
<!-- ... আপনার HTML এর কোন এক জায়গায় ... -->
115+
<!-- ... আপনার HTML এর কোন এক জায়গায় ... -->
134116
<nav id="navigation"></nav>
135117
<!-- ... আরো HTML ... -->
136118
```
@@ -167,7 +149,7 @@ root.render(<NavigationBar />);
167149

168150
লক্ষ্য করুন যে index.html ফাইলের মূল HTML কন্টেন্টটি সংরক্ষিত আছে এবং আপনার নিজের NavigationBar React কম্পোনেন্টটি এখন আপনার HTML এর মধ্যে প্রদর্শিত হয় যেটি `<nav id="navigation">` এর ভিতরে অবস্থিত। React কম্পোনেন্টগুলি অবশ্যই বিদ্যমান HTML পৃষ্ঠার ভিতরে রেন্ডার করা সম্ভব হবে। বিস্তারিত জানতে, [createRoot usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) পড়ুন।
169151

170-
যখন আপনি একটি বিদ্যমান প্রকল্পে React অনুমোদন করবেন, তখন সাধারণত ছোট ইন্টারেক্টিভ কম্পোনেন্টগুলি দিয়ে শুরু করা হয় (যেমন বাটন), এবং পরে ধীরে ধীরে "উপরের দিকে" যাওয়া হয় এবং আপনার পুরো পেইজ এক সময় React দিয়ে বিল্ড হয়। আপনি যদি ঐ পর্যায়ে চলে আসেন, আমাদের উপদেশ থাকবে এর ঠিক পরই একটি [React ফ্রেমওয়ার্কে](/learn/start-a-new-react-project) মাইগ্রেট করবেন যেন React এর সুবিধাদি পূর্ণরূপে ব্যবহার করতে পারেন।
152+
যখন আপনি একটি বিদ্যমান প্রকল্পে React অনুমোদন করবেন, তখন সাধারণত ছোট ইন্টারেক্টিভ কম্পোনেন্টগুলি দিয়ে শুরু করা হয় (যেমন বাটন), এবং পরে ধীরে ধীরে "উপরের দিকে" যাওয়া হয় এবং আপনার পুরো পেইজ এক সময় React দিয়ে বিল্ড হয়। আপনি যদি ঐ পর্যায়ে চলে আসেন, আমাদের উপদেশ থাকবে এর ঠিক পরই একটি [React ফ্রেমওয়ার্কে](/learn/start-a-new-react-project) মাইগ্রেট করবেন যেন React এর সুবিধাদি পূর্ণরূপে ব্যবহার করতে পারেন।
171153

172154
## একটি বিদ্যমান নেটিভ মোবাইল অ্যাপ এ React Native ব্যবহার করা {/*using-react-native-in-an-existing-native-mobile-app*/}
173155

0 commit comments

Comments
 (0)