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/add-react-to-an-existing-project.md
+16-34Lines changed: 16 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
4
4
5
5
<Intro>
6
6
7
-
আপনি যদি আপনার Existing প্রজেক্ট কিছু ইন্টারেক্টিভিটি যুক্ত করতে চান তবে আপনাকে তা React-এ নতুনভাবে লেখার প্রয়োজন নেই। আপনার Existing স্ট্যাকে React যোগ করুন এবং যে কোনো জায়গায় ইন্টারেক্টিভ React কম্পোনেন্ট রেন্ডার করুন।
7
+
আপনি যদি আপনার Existing প্রজেক্ট কিছু ইন্টারেক্টিভিটি যুক্ত করতে চান তবে আপনাকে তা React-এ নতুনভাবে লেখার প্রয়োজন নেই। আপনার Existing স্ট্যাকে React যোগ করুন এবং যে কোনো জায়গায় ইন্টারেক্টিভ React কম্পোনেন্ট রেন্ডার করুন।
8
8
9
9
</Intro>
10
10
@@ -20,19 +20,13 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
20
20
21
21
এখানে আমরা যে ভাবে এটি সেট আপ করতে পরামর্শ দিচ্ছিঃ
22
22
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/))।
26
25
৩. **আপনার সার্ভার বা প্রক্সি কনফিগার করুন** যাতে `/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
32
26
33
27
এটি নিশ্চিত করে যে আপনার অ্যাপের React অংশ [এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)
34
28
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 এর জন্য ডিফল্ট )।
36
30
37
31
## আগে থেকে বিদ্যমান একটি পেইজে React ব্যবহার {/*using-react-for-a-part-of-your-existing-page*/}
38
32
@@ -45,17 +39,13 @@ title: ইতোমধ্যে বানানো প্রজেক্টে R
45
39
46
40
সঠিক পদক্ষেপটি আপনার বর্তমান পেইজ সেটআপের উপর নির্ভর করে, তাই আসুন কিছু বিস্তারিত দেখে নেই।
একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে আলাদা আলাদা ফাইলগুলিতে আপনার React উপাদানগুলি লিখতে দেয়। এটি আপনাকে React সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত অসাধারণ প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপের উপর নির্ভর করে।
44
+
একটি মডিউলার জাভাস্ক্রিপ্ট এনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে আলাদা আলাদা ফাইলগুলিতে আপনার React উপাদানগুলি লিখতে দেয়। এটি আপনাকে React সহ অন্যান্য ডেভেলপারদের [npm](https://www.npmjs.com/) রেজিস্ট্রির উপর প্রকাশিত সমস্ত অসাধারণ প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপের উপর নির্ভর করে।
51
45
52
46
***যদি আপনার অ্যাপ ইতোমধ্যে import স্টেটমেন্ট ব্যবহার করে ফাইলে ভাগ করা থাকে**, তাহলে সেই সেটআপটি ব্যবহার করা চেষ্টা করুন। আপনার জাভাস্ক্রিপ্ট কোডে `<div />` লিখলে কী সিনট্যাক্স এরর হয় তা চেক করুন। যদি এটি সিনট্যাক্স এরর দেখায়, তবে আপনাকে [Babel দিয়ে আপনার জাভাস্ক্রিপ্ট কোড রূপান্তর করতে হতে পারে](<(https://babeljs.io/setup)>) এবং JSX ব্যবহার করতে [Babel React preset](https://babeljs.io/docs/babel-preset-react) সক্ষম করতে হতে পারে।
53
47
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 বিল্ড ইন্টিগ্রেট করতে পারেন।
59
49
60
50
আপনার সেটআপ কাজ করছে কি না তা চেক করতে, আপনার প্রজেক্ট ফোল্ডারে এই কমান্ডটি চালানঃ
61
51
@@ -72,38 +62,30 @@ npm install react react-dom
72
62
<html>
73
63
<head><title>My app</title></head>
74
64
<body>
75
-
<<<<<<< HEAD
76
-
<!-- ইতোমধ্যে আপনার পেইজে থাকা কনটেন্ট (এই উদাহরণে, এটি রিপ্লেস হয়ে যাবে) -->
77
-
=======
78
65
<!-- Your existing page content (in this example, it gets replaced) -->
79
66
<divid="root"></div>
80
-
>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
81
67
</body>
82
68
</html>
83
69
```
84
70
85
71
```js src/index.js active
86
72
import { createRoot } from'react-dom/client';
87
73
88
-
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
74
+
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
89
75
document.body.innerHTML='<div id="app"></div>';
90
76
91
-
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
77
+
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
যদি আপনার পেইজের সম্পূর্ণ কনটেন্ট "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করছে! পড়তে থাকুন।
84
+
যদি আপনার পেইজের সম্পূর্ণ কনটেন্ট "Hello, world!" দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করছে! পড়তে থাকুন।
99
85
100
86
<Note>
101
87
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/) ব্যবহার করে দেখুন।
107
89
108
90
</Note>
109
91
@@ -113,10 +95,10 @@ Integrating a modular JavaScript environment into an existing project for the fi
113
95
```js
114
96
import { createRoot } from'react-dom/client';
115
97
116
-
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
98
+
// আগে থেকে বিদ্যমান HTML কনটেন্ট সরিয়ে ফেলুন
117
99
document.body.innerHTML='<div id="app"></div>';
118
100
119
-
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
101
+
// এর জায়গায় আপনার React কম্পোনেন্ট রেন্ডার করুন
বরং, আপনি সম্ভবত আপনার HTML এ React কম্পোনেন্টগুলি নির্দিষ্ট জায়গায় রেন্ডার করতে চান। এখন আপনার HTML পেইজটি খুলুন
111
+
বরং, আপনি সম্ভবত আপনার HTML এ React কম্পোনেন্টগুলি নির্দিষ্ট জায়গায় রেন্ডার করতে চান। এখন আপনার HTML পেইজটি খুলুন
130
112
(অথবা সার্ভার টেমপ্লেটগুলি যা একে তৈরি করে) এবং কোনও ট্যাগে একটি ইউনিক [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) এট্রিবিউট যুক্ত করুন, যেমনঃ
লক্ষ্য করুন যে 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) পড়ুন।
169
151
170
-
যখন আপনি একটি বিদ্যমান প্রকল্পে React অনুমোদন করবেন, তখন সাধারণত ছোট ইন্টারেক্টিভ কম্পোনেন্টগুলি দিয়ে শুরু করা হয় (যেমন বাটন), এবং পরে ধীরে ধীরে "উপরের দিকে" যাওয়া হয় এবং আপনার পুরো পেইজ এক সময় React দিয়ে বিল্ড হয়। আপনি যদি ঐ পর্যায়ে চলে আসেন, আমাদের উপদেশ থাকবে এর ঠিক পরই একটি [React ফ্রেমওয়ার্কে](/learn/start-a-new-react-project) মাইগ্রেট করবেন যেন React এর সুবিধাদি পূর্ণরূপে ব্যবহার করতে পারেন।
152
+
যখন আপনি একটি বিদ্যমান প্রকল্পে React অনুমোদন করবেন, তখন সাধারণত ছোট ইন্টারেক্টিভ কম্পোনেন্টগুলি দিয়ে শুরু করা হয় (যেমন বাটন), এবং পরে ধীরে ধীরে "উপরের দিকে" যাওয়া হয় এবং আপনার পুরো পেইজ এক সময় React দিয়ে বিল্ড হয়। আপনি যদি ঐ পর্যায়ে চলে আসেন, আমাদের উপদেশ থাকবে এর ঠিক পরই একটি [React ফ্রেমওয়ার্কে](/learn/start-a-new-react-project) মাইগ্রেট করবেন যেন React এর সুবিধাদি পূর্ণরূপে ব্যবহার করতে পারেন।
171
153
172
154
## একটি বিদ্যমান নেটিভ মোবাইল অ্যাপ এ React Native ব্যবহার করা {/*using-react-native-in-an-existing-native-mobile-app*/}
0 commit comments