Add React to an Existing Project

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

Note

Local ডেভেলপমেন্ট জন্য আপনাকে Node.js ইনস্টল করতে হবে। যদিও আপনি একটি সহজ HTML পৃষ্ঠায় বা অনলাইনে try React করতে পারেন, কিন্তু বাস্তবতানুযায়ী বেশিরভাগ জাভাস্ক্রিপ্ট টুলিং আপনি যেটিই ডেভেলপমেন্ট জন্য ব্যবহার করতে চান তার জন্য Node.js এর প্রয়োজন।

আপনার existing ওয়েবসাইটের একটি সম্পূর্ণ subroute এর জন্য রিয়েক্ট ব্যবহার করা

চলুন ধরা যাক আপনার কিছু ইতিমধ্যে example.com নামে existing ওয়েব অ্যাপ রয়েছে এবং এটি একটি অন্য সার্ভার প্রযুক্তি (যেমন Rails) দ্বারা নির্মিত হয়েছে এবং আপনি চান যে example.com/some-app/ দিয়ে শুরু হওয়া সমস্ত routes পুরোপুরি React দিয়ে ব্যবহার করতে।

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

১. আপনার অ্যাপ এর রিয়েক্ট অংশটি রিয়েক্ট-ভিত্তিক ফ্রেমওয়ার্ক এর দিয়ে বিল্ড করুন।

২. ফ্রেমওয়ার্কের কনফিগারেশন অংশে /some-app base path হিসেবে সেট করুন (এখানে কিভাবে করবেন তা দেখুন: Next.js, Gatsby)।

৩. আপনার সার্ভার বা প্রক্সি কনফিগার করুন যাতে /some-app/ এর সমস্ত request আপনার React অ্যাপ দ্বারা হ্যান্ডেল করা হয়।

এটি নিশ্চিত করে যে আপনার অ্যাপের রিয়েক্ট অংশ এই ফ্রেমওয়ার্কগুলির উন্নয়নগুলির উপর ভিত্তি করে

অনেক React ভিত্তিক ফ্রেমওয়ার্ক full-stack এবং আপনার React অ্যাপটিকে সার্ভারের সুবিধা নিতে দিন। তবে আপনি যদি সার্ভারে জাভাস্ক্রিপ্ট রান করার সুযোগ না পান অথবা চান না, তবুও একই পদক্ষেপটি নিতে পারেন। সে ক্ষেত্রে, HTML/CSS/JS এক্সপোর্ট করুন (Next.js এর জন্য next export output, Gatsby জন্য ডিফল্ট ) /some-app/ এর পরিবর্তে।

Using React for a part of your existing page

আবার ধরা যাক, আপনার একটি বিদ্যমান পেজ আছে যা অন্য টেকনোলজি দিয়ে তৈরি করা হয়েছে (যেমন Rails এর মতো একটি সার্ভার টেকনোলজি বা Backbone এর মতো একটি ক্লায়েন্ট টেকনোলজি), এবং আপনি ঐ পৃষ্ঠায় ইন্টারেক্টিভ রিয়েক্ট কম্পোনেন্টগুলি রেন্ডার করতে চান। এটি রিয়েক্ট সংমিশ্রণ করার একটি সাধারণ উপায় । বাস্তবে, এটি মেটা এর জন্য বহু বছর ধরে রিয়েক্ট ব্যবহারের মধ্যে সবচেয়ে সাধারণ উপায় হিসাবে দেখা হচ্ছে!

আপনি এটি দুইটি ধাপে করতে পারেন:

১. আপনাকে JSX সিনট্যাক্স ব্যবহার করার জন্য একটি জাভাস্ক্রিপ্ট এনভায়রনমেন্ট সেট আপ করতে হবে, import / export সিনট্যাক্স দিয়ে আপনার কোডকে মডিউলে ভাগ করতে হবে এবং npm (উদাহরণস্বরূপ, React) এর মতো প্যাকেজগুলি [npm] (https://www.npmjs.com/) প্যাকেজ রেজিস্ট্রি থেকে ব্যবহার করতে হবে।

২. আপনার রিয়েক্ট কম্পোনেন্টগুলি পেজে যেখানে দেখতে চান সেখানে রেন্ডার করতে হবে।

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

ধাপ ১: একটি মডিউলার জাভাস্ক্রিপ্ট ইনভায়রনমেন্ট সেট আপ করুন”

একটি মডিউলার জাভাস্ক্রিপ্ট ইনভায়রনমেন্ট আপনাকে একটি ফাইলে আপনার সমস্ত কোড লেখার বিপরীতে পৃথক ফাইলগুলিতে আপনার রিয়েক্ট উপাদানগুলি লিখতে দেয়। এটি আপনাকে রিয়েক্ট সহ অন্যান্য ডেভেলপারদের npm রেজিস্ট্রির উপর প্রকাশিত সমস্ত আশ্চর্যজনক প্যাকেজগুলি ব্যবহার করতে দেয়। এখন এটি আপনি কিভাবে করতে চান তা আপনার বর্তমান সেটআপ এর উপর নির্ভর করে।

যদি আপনার অ্যাপ ইতিমধ্যে import স্টেটমেন্ট ব্যবহার করে ফাইলে ভাগ করা থাকেন, তাহলে সেই সেটআপটি ব্যবহার করা চেষ্টা করুন। আপনার জাভাস্ক্রিপ্ট কোডে <div /> লিখলে কি সিনট্যাক্স ত্রুটি হয় তা চেক করুন। যদি এটি সিনট্যাক্স ত্রুটি দেখায়, তবে আপনাকে Babel দিয়ে আপনার জাভাস্ক্রিপ্ট কোড রূপান্তর করতে হতে পারে এবং JSX ব্যবহার করতে Babel React preset সক্ষম করতে হতে পারে।
যদি আপনার অ্যাপে জাভাস্ক্রিপ্ট মডিউল কম্পাইল করার জন্য ইতিমধ্যে কোনও সেটআপ না থাকে, তবে Vite দিয়ে সেটআপ করুন। Vite সম্প্রদায় রেল, জ্যাঙ্গো এবং লারাভেল সহ ব্যাকএন্ড ফ্রেমওয়ার্ক সহ অনেক ইন্টিগ্রেশন বজায় রাখে। যদি আপনার ব্যাকএন্ড ফ্রেমওয়ার্ক তালিকাভুক্ত না থাকে তবে এই গাইড অনুসরণ করে ব্যাকএন্ডের সাথে Vite বিল্ড ইন্টিগ্রেট করতে পারেন।

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

Terminal

npm install react react-dom

তারপর আপনার মূল JavaScript ফাইলের শীর্ষে এই লাইনগুলি যোগ করুন (এটি হতে পারে index.js বা main.js নামের ফাইল):

ফর্ক

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

যদি আপনার পৃষ্ঠার সম্পূর্ণ বিষয়বস্তুটি “Hello, world!” দ্বারা প্রতিস্থাপিত হয়ে যায়, তবে সবকিছু কাজ করতেছে! পড়া চালিয়ে যান।

Note

একটি বিদ্যমান প্রজেক্টে একটি মডুলার জাভাস্ক্রিপ্ট পরিবেশকে সংযোজন করা প্রথমবারের মতো ভীতিজনক বোধ হতে পারে। কিন্তু সেটা করা অবশ্যই প্রয়োজনীয় এবং উপকারী! আপনি আটকে গেলে, আমাদের কমিউনিটি রিসোর্স অথবা Vite Chat ব্যবহার করে দেখুন।।

ধাপ ২: পৃষ্ঠার যেকোনো জায়গায় রিয়েক্ট কম্পোনেন্ট রেন্ডার করুন।

আগের পদক্ষেপে, আপনি আপনার মূল ফাইলের শীর্ষে এই কোডটি রাখেনঃ

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

অবশ্যই আপনি সত্যিই বিদ্যমান HTML কন্টেন্টটি মুছতে চান না!

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

বরং, আপনি সম্ভবত আপনার রিয়েক্ট কম্পোনেন্টগুলি নির্দিষ্ট জায়গাগুলিতে আপনার HTML এ রেন্ডার করতে চান। এখন আপনার HTML পৃষ্ঠাটি খুলুন (অথবা সার্ভার টেমপ্লেটগুলি যা এটি তৈরি করে)

এবং কোনও ট্যাগে একটি অনন্য id এট্রিবিউট যুক্ত করুন, যেমন:

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

এটি আপনাকে document.getElementById ব্যবহার করে ঐ HTML উপাদানটি খুঁজে বের করতে দেয়। এরপর createRoot এ তা পাঠাতে হবেন, যাতে আপনি আপনার নিজের রিয়েক্ট কম্পোনেন্টটি রেন্ডার করতে পারেন:

ফর্ক

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

দেখতে হলে যে index.html ফাইলের মূল HTML কন্টেন্টটি সংরক্ষিত আছে এবং আপনার নিজের NavigationBar রিয়েক্ট কম্পোনেন্টটি এখন আপনার HTML এর মধ্যে প্রদর্শিত হয় যেটি <nav id="navigation"> এর ভিতরে অবস্থিত। রিয়েক্ট কম্পোনেন্টগুলি অবশ্যই বিদ্যমান HTML পৃষ্ঠার ভিতরে রেন্ডার করা সম্ভব হবে। বিস্তারিত জানতে, createRoot ব্যবহারের নথিপত্র পড়ুন।

যখন আপনি একটি বিদ্যমান প্রকল্পে রিয়েক্ট অনুমোদন করবেন, তখন ছোট ইন্টারঅ্যাকটিভ কম্পোনেন্টগুলি দিয়ে শুরু করা সাধারণ (যেমন বাটন), এবং পরে ধীরে ধীরে বাকী পৃষ্ঠাগুলি রিয়েক্ট দিয়ে তৈরি করা হয়। আপনি যদি ঐ নির্দিষ্ট সীমানা পাশাপাশি অবজ্ঞার পর্যন্ত এসে যান তখন আমরা রিয়েক্টের সর্বাধিক সুবিধা পেতে হলে একটি রিয়েক্ট ফ্রেমওয়ার্কে মাইগ্রেট করার সুপারিশ করি।

একটি বিদ্যমান নেটিভ মোবাইল অ্যাপ এ React Native ব্যবহার করা

React Native বিদ্যমান নেটিভ অ্যাপগুলির সাথে একত্রিত করা যেতে পারে। আপনার যদি Android (Java বা Kotlin) বা iOS (Objective-C বা Swift) জন্য একটি বিদ্যমান নেটিভ অ্যাপ থাকে, তবে এই গাইডটি অনুসরণ করে সেখানে একটি React Native স্ক্রিন যুক্ত করতে পারেন।

Previousএকটি নতুন React প্রোজেক্ট শুরু করুন Nextএডিটর সেটাপ