বিট দিয়ে একটি মডিউলার রিঅ্যাক্ট ইউআই লাইব্রেরি তৈরি করুন

স্কেল করে এমন একটি প্রতিক্রিয়া উপাদান লাইব্রেরি তৈরির জন্য গাইড

ডিজাইন সিস্টেম / ইউআই লাইব্রেরিগুলি বিলাসবহুল হিসাবে ব্যবহৃত হত বড় উদ্যোগগুলি দ্বারা একচেটিয়া উপভোগ করা, তবে সাম্প্রতিক বছরগুলিতে, নতুন প্রযুক্তির আবির্ভাবের কারণে আমরা দেখেছি এটি বেশ মারাত্মকভাবে পরিবর্তিত হয়েছে। ডিজাইন সিস্টেমগুলি এখন একক ফ্রিল্যান্স বিকাশকারী এবং ছোট দেব দল থেকে শুরু করে বড় এবং পরিপক্ক উদ্যোগগুলিতে সমস্ত স্কেলের সংস্থাগুলির দ্বারা ব্যবহৃত একটি সরঞ্জাম হয়ে উঠেছে।

ইউআই লাইব্রে / ডিজাইন সিস্টেম কেন তৈরি করবেন?

ইউআই লাইব্রেরিগুলি বিকাশ প্রক্রিয়ার উভয় প্রান্তকেই প্রভাবিত করে: কোডিং এবং চূড়ান্ত পণ্য।

ইউআই লাইব্রেরিগুলি উন্নয়নের গতি বাড়ায়

  • ইউআই লাইব্রেরিগুলি কোড পুনরায় ব্যবহার এবং বিকাশের গতি বাড়িয়ে তোলে। তারা সংগ্রহস্থলগুলিতে এবং তার জুড়ে সমস্ত প্রকল্পের জন্য উপাদানগুলি উপলব্ধ করে এটি করে। তারা উপাদানগুলি সন্ধান এবং বুঝতে সহজ করে তোলে (যেহেতু তারা একটি কেন্দ্রীয় স্থানে নথিভুক্ত এবং সূচিযুক্ত) - সর্বোপরি, পুনরায় ব্যবহারযোগ্য কোড সম্পর্কে কেউ জানে না যে এটি কার্যকর নয়।
  • ইউআই লাইব্রেরিগুলি কোডবেসগুলিকে স্কেল এবং বজায় রাখা সহজ করে তোলে। একটি ডিআরওয়াই কোডবেসের অর্থ অল্প লাইন এবং ফাইলগুলি যেতে হবে। কম ডুপ্লিকেশনগুলি কোডের পরিবর্তনের আরও ভাল ভবিষ্যদ্বাণীকে বোঝায় (এটি যুক্তিযুক্ত হতে পারে যে প্রকল্পগুলি জুড়ে কোড ভাগ করে নেওয়া ফলাফলগুলি ভবিষ্যদ্বাণী করা আরও চ্যালেঞ্জিং করে, তবে আপনি এই পোস্টে দেখবেন, এটি কেবল সঠিক সরঞ্জামগুলি ব্যবহার করার বিষয়)।
  • শেষ অবধি, যে কোডটি পুনরায় ব্যবহারের জন্য রচিত তা হ'ল আরও ভাল কোড। এটি নথিভুক্ত, পরীক্ষামূলক এবং খাঁটি (প্রতিটি যুক্তির জন্য ফেরত মানগুলি তাদের পরিবেশে শূন্য পরিবর্তনের সাথে সামঞ্জস্যপূর্ণ থাকে)। আরও ভাল রক্ষণাবেক্ষণযোগ্য কোড।

ইউআই লাইব্রেরিগুলি আরও ভাল ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করতে সহায়তা করে

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

একটি মডুলার লাইব্রেরি কি? কেন তারা গুরুত্বপূর্ণ?

একটি স্ট্যান্ডার্ড লাইব্রেরি একটি মনোলিথ। এটি একটি একক বস্তু হিসাবে নির্মিত এবং রক্ষণাবেক্ষণ করে - একটি একক সংগ্রহস্থল, একটি একক বিল্ড সেটআপ এবং, সাধারণত, একক প্যাকেজ।

উপাদানগুলি মালিকানা বা ব্যবসায়ের কার্যকারিতা দ্বারা সংগঠিত হয়

একটি মডুলার লাইব্রেরি বা একটি সংগ্রহ হ'ল এমন একটি সুযোগ যা কেবল মালিকানা বা ব্যবসায়িক কার্যকারিতা দ্বারা উপাদানগুলি সংগঠিত করার উপায় হিসাবে কাজ করে (বর্তমানে বিড.দেব ছাড়া আমি সচেতন এমন কোনও মডুলার লাইব্রেরিগুলির আর কোনও বাস্তবায়ন নেই, তবে আমি ' আমি অবশ্যই থাকব)।

প্রতিটি উপাদান সংস্করণযুক্ত এবং স্বাধীন কোড হিসাবে নির্মিত হয়

কোনও সংগ্রহে প্রকাশিত উপাদানগুলি সংস্করণযুক্ত এবং স্বতন্ত্রভাবে নির্মিত হয়, যার অর্থ এগুলি যে কোনও কোডবেস / সংগ্রহশালা থেকে সংগ্রহ করা যেতে পারে। এটি আমাদের যখনই আমরা পছন্দ করি এবং আমরা যে কোনও প্রকল্প বেছে নিই উপাদানগুলি প্রকাশের স্বাধীনতা দেয়। এটি একটি পূর্ণ অন উপাদান-লাইব্রেরি প্রকল্প হতে হবে না।

অর্থহীন আপডেট নেই

ভাগ করা উপাদানগুলির গ্রাহকরা কেবল সংস্করণ আপডেটগুলিই মোকাবেলা করতে পারেন যা তারা প্রকৃত ব্যবহারের সাথে প্রাসঙ্গিক যেহেতু তারা প্রতিটি উপাদান সরাসরি গ্রহণ করে এবং কোনও বৃহত প্রকল্পের অংশ হিসাবে নয় (যেমন, একটি গ্রন্থাগার)।

বিট এবং বিট.দেব দিয়ে একটি ইউআই লাইব্রেরি তৈরি করা

বিট / বিট.দেব কী?

বিট.দেব একটি উপাদান হাব (একটি ব্যক্তিগত রেজিস্ট্রি এবং একটি ডকুমেন্টেশন সাইট)। আপনি যেখানে বিভিন্ন প্রকল্প থেকে পুনরায় ব্যবহারযোগ্য উপাদানগুলি হোস্ট, ডকুমেন্ট এবং পরিচালনা করেন সেখানে এটি। এটি বিট-এর সাথে পুরোপুরি কাজ করে যা একটি মুক্ত-উত্স সরঞ্জাম যা উপাদান বিচ্ছিন্নকরণ এবং প্রকাশনা পরিচালনা করে (বিট.দেব ব্যবহার করার সময়, উপাদানগুলি বিটের রেজিস্ট্রিতে প্রকাশিত হয়)।

উদাহরণ: বিট.দেব মধ্যে উপাদান সংগ্রহের মাধ্যমে ব্রাউজিং

পূর্বে উল্লিখিত হিসাবে, উপাদানগুলি যে কোনও প্রকল্পের সংগ্রহ থেকে প্রকাশিত হতে পারে। এটি প্রদর্শনের জন্য, আমি টিএস অ্যাপের সাথে প্রতিক্রিয়া ডেমো থেকে সংগ্রহ এবং প্রকাশ করব।

https://github.com/giteden/react-ts-demo-app

1. বিট.দেভে একটি উপাদান সংগ্রহ তৈরি করুন।

২. বিশ্বব্যাপী বিট ইনস্টল করুন (এনপিএম / সুতা)।

arn সুতা গ্লোবাল অ্যাড বিট-বিন

3. আপনার অ্যাকাউন্টে লগ ইন করুন।

$ বিট লগইন

৪) প্রকল্পের ডিরেক্টরিতে একটি কর্মক্ষেত্র শুরু করুন।

// আমার ডেমো অ্যাপ্লিকেশনটি অনুসরণ করতে এটি ক্লোন করুন এবং ইনস্টল করুন
it গিট ক্লোন https://github.com/giteden/react-ts-demo-app.git $ সিডি প্রতিক্রিয়া- টিএস-ডেমো-অ্যাপ্লিকেশন $ সুতা
// একটি কর্মক্ষেত্র আরম্ভ করুন (আপনার প্রকল্পের ডিরেক্টরিতে)
init বিট ইশ - প্যাকেজ-ম্যানেজার সুতা

দ্রষ্টব্য: লক্ষ্য করুন যে কীভাবে আপনার ডিরেক্টরিতে একটি নতুন .বিটম্যাপ ফাইল যুক্ত করা হয়েছে এবং আপনার প্যাকেজ.জসনে একটি সামান্য বিভাগ যুক্ত করা হয়েছে।

5. সমস্ত উপাদান ট্র্যাক। আমার ক্ষেত্রে, উপাদানগুলি উপাদান ডিরেক্টরিতে অবস্থিত (উদাহরণস্বরূপ, src / घटक / বোতাম / সূচি.জ):

$ বিট যোগ করুন এসসিআর / উপাদানগুলি / *

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

Different. বিভিন্ন সেটআপ সহ অন্যান্য পরিবেশে উপাদানগুলি ব্যবহারযোগ্য করে তুলতে একটি সংকলক কনফিগার করুন:

$ বিট আমদানি বিট.এনভিএস / সংকলক / প্রতিক্রিয়া-টাইপসক্রিপ্ট - কম্পিউটার

দ্রষ্টব্য: অন্যান্য সংকলকগুলির জন্য, বিটের ENVs সংগ্রহটি দেখুন বা কীভাবে নিজের তৈরি করবেন তা শিখুন।

7. উপাদানগুলি বিচ্ছিন্নভাবে তৈরি করতে ট্যাগ করুন (এবং লক পরিবর্তনগুলি):

$ বিট ট্যাগ - সমস্ত 1.0.0

দ্রষ্টব্য: বিট নিজেই আপনার উপাদান নির্ভরতাগুলি ট্র্যাক করে এবং ম্যানুয়াল কনফিগারেশন প্রয়োজন হয় না। এটি বলার পরে, বিট স্ট্যাটাস ব্যবহার করে অমীমাংসিত নির্ভরতা সম্পর্কিত সমস্যাগুলি পরীক্ষা করা ভাল অনুশীলন।

৮. সমস্ত ট্র্যাক করা উপাদান রফতানি করুন (তাদের ভাগ করে নেওয়া সংগ্রহের দিকে চাপ দিন):

বিট রফতানি ।

উপাদানগুলি এখন ভাগ করা এবং সর্বজনীনভাবে উপলব্ধ

আপনি যদি অনুসরণ করে যান তবে বিট.দেবতে যান / / বিটের খেলার মাঠে তাদের রেন্ডার করা দেখতে। অন্যথায়, আপনি আমার সংগ্রহ এখানে চেক করতে পারেন:

টিএস সংগ্রহের সাথে একটি ডেমো প্রতিক্রিয়া জানায়

ডকুমেন্টিং উপাদান

ডকুমেন্টেশন প্রক্রিয়াটি আপনার স্থানীয় দেব পরিবেশে উপাদানগুলি লেখার সময় শুরু হয় এবং বিট.দেব অংশের পৃষ্ঠাতে উদাহরণ লেখার পরে শেষ হয়।

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

উপাদান পৃষ্ঠায় ডকুমেন্টেশন

দ্রষ্টব্য: আপনার পুনরায় ব্যবহারযোগ্য উপাদানগুলির জন্য ডকগুলি স্বয়ংক্রিয়ভাবে তৈরি করতে বিক্রিয়া-ডকজেন / বিট.দেব ব্যবহার করার সময়, প্রপের প্রকার / ইন্টারফেসটিকে উভয়ই রিঅ্যাক্টের জেনেরিক হিসাবে সংজ্ঞায়িত করা উচিত এবং (সরাসরি) ফাংশনটির আর্গুমেন্টগুলির টাইপ হিসাবে (অন্যথায়, আপনার প্রপস উত্পন্ন ডক্সে প্রদর্শিত হবে না)।

বিটের খেলার মাঠে উদাহরণ রচনা

উপাদানগুলি রফতানি করার পরে, উদাহরণ সরবরাহের মাধ্যমে ডকুমেন্টেশন প্রক্রিয়াটি সম্পূর্ণ করা ভাল (উপাদান পৃষ্ঠায়)।

উদাহরণগুলি বিটের খেলার মাঠে উপাদানগুলি রেন্ডার করতে সক্ষম করে (এমন উপাদান যা তার প্রয়োজনীয় প্রপসগুলি গ্রহণ করে না তারা সরবরাহ করতে সক্ষম হবে না) এবং কীভাবে / কীভাবে সেরা ব্যবহার করা যায় সে সম্পর্কে উপাদানগুলির গ্রাহকদের গাইড করে।

বিটের খেলার মাঠে একটি উপাদান রেন্ডার হয়েছে

উপসংহার

সঠিক সরঞ্জামগুলির সাহায্যে সঠিক সরঞ্জামগুলির সাহায্যে কোনও উপাদান লাইব্রেরি সুসংগত নকশা নিশ্চিতকরণ, বিকাশের সময় গতি বাড়ানো, রক্ষণাবেক্ষণকে সহজীকরণ এবং আপনার কোডবেসকে আরও পরিমাপযোগ্য করে তোলার জন্য একটি ব্যয়বহুল উপায় হয়ে উঠতে পারে।