Copy Component Code একটি ওয়েবপেজের যেকোনো এলিমেন্টকে আপনার পছন্দের ফ্রেমওয়ার্কের জন্য একটি পরিষ্কার, প্রোডাকশন-রেডি কম্পোনেন্ট ফাইলে রূপান্তরিত করে। এলিমেন্টে ক্লিক করুন এবং একটি সম্পূর্ণ React JSX কম্পোনেন্ট, Vue Single File Component (SFC), অথবা Svelte কম্পোনেন্ট পান — যার মধ্যে HTML স্ট্রাকচার, স্কোপড স্টাইল এবং যথাযথ ফরম্যাটিং আগে থেকেই থাকে।
একটি ওয়েবপেজে একটি সুন্দরভাবে ডিজাইন করা UI এলিমেন্ট দেখা এবং সেটিকে আপনার প্রোজেক্টে ব্যবহারযোগ্য কম্পোনেন্ট হিসেবে পাওয়ার মধ্যে অনেক বড় তফাৎ রয়েছে। সাধারণত আপনাকে এলিমেন্টটি ইনস্পেক্ট করতে হয়, ম্যানুয়ালি HTML কপি করতে হয়, প্রাসঙ্গিক CSS আলাদা করতে হয়, আপনার ফ্রেমওয়ার্কের কম্পোনেন্ট ফরম্যাটে সেটিকে পুনর্গঠন করতে হয়, বয়লারপ্লেট (export default, template ট্যাগ, style ব্লক) যোগ করতে হয় এবং নামকরণ ঠিক করতে হয়। Copy Component Code এই সব কিছু এক ক্লিকেই করে দেয়। এটি এলিমেন্টের DOM স্ট্রাকচার এবং কম্পিউটেড স্টাইলগুলো পড়ে, তারপর React (JSX + CSS-in-JS বা className সহ ফাংশনাল কম্পোনেন্ট), Vue (template, script এবং scoped style ব্লক সহ SFC), অথবা Svelte (স্কোপড স্টাইল সহ মার্কআপ)-এর জন্য ফ্রেমওয়ার্ক-নির্দিষ্ট কম্পোনেন্ট কোড জেনারেট করে। আউটপুটটি যথাযথভাবে ফরম্যাটেড ও ইনডেন্টেড থাকে এবং সরাসরি .jsx, .vue বা .svelte ফাইলে পেস্ট করার জন্য প্রস্তুত থাকে।
export default function UserCard() {
return (
<div className="card">
<div className="header">
<img className="avatar" />
<div>
<h3>Jane Cooper</h3>
<span>Frontend Dev</span>
</div>
</div>
);
}
তাৎক্ষণিকভাবে তিনটি আউটপুট ফরম্যাটের মধ্যে স্যুইচ করুন: React (JSX এবং className-ভিত্তিক স্টাইল সহ ফাংশনাল কম্পোনেন্ট), Vue (template, script setup এবং scoped style ব্লক সহ Single File Component), অথবা Svelte (style ব্লক সহ মার্কআপ)। প্রতিটি আউটপুট ফ্রেমওয়ার্কের নিয়মাবলী এবং সেরা অনুশীলনগুলো অনুসরণ করে।
জেনারেট করা কোডটি কেবল কাঁচা কোড নয় — এটি সঠিক ইনডেন্টেশন সহ যথাযথভাবে স্ট্রাকচার করা, এলিমেন্টের কনটেক্সট থেকে নেওয়া অর্থবহ কম্পোনেন্ট এবং ক্লাস নেম এবং props interfaces (React), defineProps (Vue) ও export let (Svelte)-এর মতো ফ্রেমওয়ার্ক-নির্দিষ্ট প্যাটার্ন ব্যবহার করে তৈরি।
এলিমেন্ট থেকে কম্পিউটেড CSS স্টাইলগুলো এক্সট্রাক্ট করা হয় এবং কম্পোনেন্টের মধ্যে স্কোপড স্টাইল হিসেবে অন্তর্ভুক্ত করা হয়। React-এর জন্য একটি styles অবজেক্ট বা className রেফারেন্স, Vue-এর জন্য একটি scoped style ব্লক এবং Svelte-এর জন্য কম্পোনেন্ট-স্কোপড স্টাইল জেনারেট করা হয় — যা গ্লোবাল CSS পলিউশন রোধ করে।
এই এক্সপোর্ট প্রতিটি চাইল্ড এলিমেন্টকে রিকার্সিভলি (পুনরাবৃত্তিমূলকভাবে) অন্তর্ভুক্ত করে। একটি কার্ড কম্পোনেন্ট যাতে হেডার, ইমেজ, টাইটেল, ডেসক্রিপশন এবং বাটন আছে, সেটি একটি সম্পূর্ণ কম্পোনেন্ট হিসেবে এক্সপোর্ট করা হয় — কেবল বাইরের র্যাপার নয়। সম্পূর্ণ অভ্যন্তরীণ স্ট্রাকচার সংরক্ষিত থাকে।
আপনার ক্লিপবোর্ডে সম্পূর্ণ কম্পোনেন্ট কোডটি রাখতে Copy বাটনে ক্লিক করুন। সরাসরি আপনার প্রোজেক্টের একটি নতুন ফাইলে এটি পেস্ট করুন — এটি ইমপোর্ট এবং ব্যবহার করার জন্য প্রস্তুত। কোনো ম্যানুয়াল পুনর্গঠনের দরকার নেই।
জেনারেট করা কোডটি প্রিভিউ প্যানেলে সম্পূর্ণ সিনট্যাক্স হাইলাইটিং সহ প্রদর্শিত হয়। কপি করার আগে সহজে পড়ার জন্য JSX ট্যাগ, props, স্টাইল প্রপার্টি এবং ভ্যালুগুলো রঙিন করে দেখানো হয়।
যেকোনো ওয়েবসাইটে আপনার প্রোজেক্টের প্রয়োজনীয় কোনো UI প্যাটার্ন দেখেছেন? সেটিতে ক্লিক করুন, আপনার ফ্রেমওয়ার্কের জন্য কম্পোনেন্ট কোড পান, আপনার কোডবেসে পেস্ট করুন এবং সেখান থেকে কাস্টমাইজ করুন। ঘণ্টার পর ঘণ্টা ম্যানুয়ালি তৈরির কাজকে মিনিটে নামিয়ে আনুন।
আপনার প্রোজেক্ট Vue থেকে React-এ (অথবা এর বিপরীতে) সরিয়ে নিচ্ছেন? লাইভ সাইটে বিদ্যমান কম্পোনেন্টগুলোতে ক্লিক করুন এবং টার্গেট ফ্রেমওয়ার্কে কোড জেনারেট করুন। স্ট্রাকচার এবং স্টাইল সংরক্ষিত থাকে, যা প্রতিটি মাইগ্রেটেড কম্পোনেন্টের জন্য আপনাকে একটি মজবুত ভিত্তি দেয়।
কোনো মকআপ বা রেফারেন্স সাইট থেকে ডিজাইন প্যাটার্নগুলোকে একটি পুনঃব্যবহারযোগ্য কম্পোনেন্ট লাইব্রেরিতে এক্সট্রাক্ট করুন। প্রতিটি UI এলিমেন্টে ক্লিক করুন, আপনার ফ্রেমওয়ার্কের কম্পোনেন্ট ফরম্যাটে এক্সপোর্ট করুন এবং ব্যবহারের জন্য প্রস্তুত কম্পোনেন্টের একটি লাইব্রেরি তৈরি করুন।
প্রোডাকশন ওয়েবসাইটগুলো কীভাবে তাদের কম্পোনেন্ট স্ট্রাকচার করে তা স্টাডি করুন। একটি জটিল ন্যাভিগেশন মেনু, ডেটা টেবিল অথবা মোডাল ডায়ালগে ক্লিক করুন এবং দেখুন কীভাবে HTML স্ট্রাকচারটি একটি সঠিক React/Vue/Svelte কম্পোনেন্টে রূপান্তরিত হয়।
ডিজাইনাররা প্রায়শই স্ট্যাটিক HTML-এ রেফারেন্স ইমপ্লিমেন্টেশন তৈরি করেন। তাদের এলিমেন্টগুলোতে ক্লিক করুন এবং ফ্রেমওয়ার্ক-নির্দিষ্ট কম্পোনেন্ট জেনারেট করুন যা ডেভেলপাররা তাৎক্ষণিকভাবে ব্যবহার করতে পারবেন, যা ডিজাইন মকআপ এবং প্রোডাকশন কোডের মধ্যে ব্যবধান কমিয়ে দেয়।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Copy Component Code আইকনে ক্লিক করুন। একটি ট্যাবড প্যানেল ওপেন হবে যেখানে React, Vue এবং Svelte ট্যাব থাকবে, যা এলিমেন্ট সিলেকশন গ্রহণ করার জন্য প্রস্তুত।
যেকোনো এলিমেন্টে ক্লিক করুন — একটি কার্ড, বাটন গ্রুপ, ন্যাভিগেশন বার অথবা ফর্ম সেকশন। এলিমেন্টটি একটি বেগুনী বর্ডার দিয়ে হাইলাইট হবে এবং প্যানেলটি এর HTML স্ট্রাকচার ও কম্পিউটেড স্টাইল থেকে কম্পোনেন্ট কোড জেনারেট করবে।
সেই ফ্রেমওয়ার্কে এলিমেন্টটি কম্পোনেন্ট হিসেবে কেমন দেখাবে তা দেখতে React, Vue অথবা Svelte ট্যাবে ক্লিক করুন। প্রতিটি ট্যাব ফ্রেমওয়ার্কের নিয়মাবলী এবং কম্পোনেন্ট প্যাটার্ন অনুসরণ করে কোড জেনারেট করে।
সিনট্যাক্স-হাইলাইটেড প্রিভিউতে সম্পূর্ণ কম্পোনেন্ট ফাইল — ইম্পোর্ট, কম্পোনেন্ট ফাংশন/টেমপ্লেট, স্টাইল এবং এক্সপোর্ট দেখা যাবে। এটি আপনার প্রয়োজনীয় স্ট্রাকচার এবং স্টাইলিং ক্যাপচার করেছে কি না তা যাচাই করুন।
সম্পূর্ণ কম্পোনেন্টটি নিতে "Copy Code"-এ ক্লিক করুন। আপনার প্রোজেক্টের একটি নতুন .jsx, .vue অথবা .svelte ফাইলে এটি পেস্ট করুন। তাৎক্ষণিকভাবে ইমপোর্ট এবং রেন্ডার করুন — কম্পোনেন্টটি সম্পূর্ণ এবং স্বয়ংসম্পূর্ণ।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।