আপনার রিঅ্যাকটজেএস কোডটি কোনও প্রো এর মতো ডিজাইন করার জন্য টিপস

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

কেন? এটি সহজ - আপনার দলে যদি 5 জন লোক থাকে তবে এটি কীভাবে কাজ করে তা জিজ্ঞাসা করা সহজ। তবে আপনার দলটি যদি খুব বড় হয় বা প্রচুর গতিশীল পরিবর্তন ঘটে থাকে তবে এই উচ্চ মানের কোড এবং অন্যান্য বিকাশকারীরা এটি বুঝতে আমাদের সহায়তা করবে এবং অবশ্যই আপনি একজন সমর্থকের মতো অনুভব করতে পারবেন

আমি 10 সেরা অনুশীলন ব্যবহার করেছি যা আমাদের এবং আমার দলটিকে আমাদের প্রতিক্রিয়া প্রকল্পগুলিতে কোডের মান উন্নত করতে সহায়তা করে। এই টিপসগুলি সাধারণত ES6 কার্যকারিতার উপর ভিত্তি করে তৈরি হয় তবে সর্বদা ব্যবহৃত হয় না। সেগুলি সন্ধান করুন এবং সেগুলিও ব্যবহার করুন !!

1. ক্লাস উপাদান ভিএস কার্যকরী উপাদান

আমরা সবাই খুব খুশি যে ES6 এ শ্রেণি সমর্থন কার্যকর করা হয়েছে - আমি এটি পছন্দ করি! প্রতিক্রিয়া হিসাবে আমরা সাধারণ শ্রেণি "React.Comp घटक" প্রসারিত করে একটি উপাদান তৈরি করতে পারি। সেখানে আমাদের সরল রাষ্ট্র পরিচালনার পদ্ধতি রয়েছে, উপাদানগুলির ইভেন্টগুলির জন্য সমর্থন ইত্যাদি Sometimes

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট nder রেন্ডার () {রিটার্ন প্রসারিত করে হ্যালো {this.prop.text }}

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

'প্রতিক্রিয়া' থেকে আমদানি প্রতিক্রিয়া
কনড মাই কম্পোমোনেন্ট = (প্রপস) => হ্যালো {প্রপস.সেক্সট}

তবে এই দুটি উপাদান ব্যবহার একই দেখতে!

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

ঠিক আছে - আমরা কখন বর্গ উপাদান ব্যবহার করতে পারি এবং কখন কার্যকরী উপাদান? নিয়মগুলি খুব সহজ - যদি আপনি কিছু ব্যবহার করতে চান যে কোনও কার্যনির্বাহী উপাদান নেই - ক্লাসের সংযোগগুলি ব্যবহার করুন!

খুব সহজ? হ্যাঁ! স্কেচি ফাংশনাল উপাদানগুলি থেকে উপাদানগুলি লিখে শুরু করুন। যদি আপনি দেখতে পান যে আপনি কোনও স্ট্যাটাসের মতো কিছু ব্যবহার করছেন বা আপনার উপাদানগুলির পরিবর্তন যেমন বিজ্ঞপ্তিওয়ালমাউন্ট () ইত্যাদির দিকে লক্ষ্য করা দরকার, আপনি এটি ক্লাস কম্পোনেন্টে রূপান্তর করতে পারেন।

আপনি কী ধরণের উপাদান ব্যবহার করছেন সে সম্পর্কে যদি আপনি চিন্তা করেন তবে আপনি প্রো হিসাবে থাকবেন!

২. যদি উপাদান টেমপ্লেটে বিবৃতি

নীচের দিকে তাকান ... আপনি কি জানেন যে বিবৃতিটির এই পদ্ধতিতে কী দোষ আছে?

{ক> খ? : নাল}

শর্তটি যদি বেমানান হয় তবে "প্রতিক্রিয়া" শূন্যতে সেট করা আছে। হুম ... ঠিক আছে - আমি বুঝতে পারি না, তাই সমস্যা নেই ... !!!

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

সমাধান?

{এ> বি ও& }

এত সহজ, এত মার্জিত। প্রো হিসাবে!

3. কার্যকরী বাঁধাই

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

আমি ক্রিয়ামূলক সম্পর্কের জন্য এই রেফারেন্স সম্পর্কে কেন কথা বলছি? কারণ আপনার কোডটি পরিষ্কার করার জন্য খুব সহজ কৌশল আছে। কোনও ইভেন্টের সাথে বাধ্যতামূলক মানক ক্রিয়াকলাপটি এরকম দেখাচ্ছে:

মাইকম্পোন্টেন্ট বর্গটি কম্পোনেন্ট {কনস্ট্রাক্টর (প্রপস) {সুপার (প্রপস) প্রসারিত করে
এই ক্লিকহ্যান্ডার = এইক্লিকহ্যান্ডার.বাইন্ড (এটি)}
ক্লিকহ্যান্ডার (ই) {ই.প্রিভেন্টডিফল্ট (); সতর্কতা ('হ্যালো' + এটি.প্রপস.টেক্সট)}
রেন্ডার () {রিটার্ন }}

আমরা ক্লিকহ্যান্ডলার ফাংশনটি ঘোষণা করি তবে তাদের মূল প্রসঙ্গটি (এটি) আমাদের বোতামটি ক্লিক করা হয়। সুতরাং আমরা যদি আমাদের ক্লাস হিসাবে এটি বাঁধতে চাই, আমাদের এটি নির্মাণকারীতে আবদ্ধ করতে হবে।

আমি কি এটি আরও সহজ করতে পারি? সুর ​​!!! তীর ফাংশন আপনাকে ঘোষণা করেছে যে আপনার সরাসরি পিতামাতার কাছ থেকে বৈধতার সুযোগ দেয় (উপরে থেকে অনুলিপি করে)।

মাইকম্পোন্টেন্ট শ্রেণিটি বিভাগকে প্রসারিত করে {ক্লিকহ্যান্ডার = (ই) => {সতর্কতা ('হ্যালো' + এটি.পড়গুলি.পেক্সট)}
রেন্ডার () {রিটার্ন }}

আরও সহজ, দ্রুত এবং প্রবাদের মতো দেখতে!

** গুরুত্বপূর্ণ **

আপনি যদি এই কাঠামোটি ব্যবহার করতে চান তবে মনে রাখবেন এটি এই মুহুর্তে একটি পরীক্ষামূলক কাঠামো। সুতরাং ট্রান্সফর্ম-শ্রেণীর সম্পত্তি ব্যবহার করে আমাদের বাবেলের সাথে তাদের অনুবাদ করতে হবে, যা তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনে মানক। এখানে রেফারেন্স

4. সংক্ষিপ্ত প্রপস এবং রাজ্য

আর একটি জিনিস যা আমরা ES6 থেকে ব্যবহার করতে পারি, তবে আমরা ভুলে গেছি - পুনর্গঠন। অনেকগুলি কোড পর্যালোচনায় আমরা দেখতে পাই যে ছোট অংশগুলির জন্য বৃহত অবজেক্টগুলি ধ্বংস হয়ে গেছে।

... var প্রস্থ = এটি.পড়গুলি.মিঅবজেক্ট.উইউথ, উচ্চতা = এই.পড়গুলি.আমি অবজেক্ট.হাইট, রঙ = এই.পড়গুলি.মিঅবজেক্ট.ক্লোর; ...

এটি খুব দীর্ঘ এবং নমনীয় সমাধান নয়। এই স্মার্ট সিস্টেমটি ধ্বংস করার একটি খুব সহজ উপায় রয়েছে।

... var {প্রস্থ, উচ্চতা, রঙ this = this.prop.myObject; ...

বেশ সহজভাবে যদি আমরা অবজেক্টের কী হিসাবে একই নামের সাথে একটি ভেরিয়েবল রাখতে চাই।

কীভাবে আমরা এর সাথে প্রতিক্রিয়া জানাতে পারি?

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
মাই কম্পোনেন্ট শ্রেণিটি ভাগ করে onent রেন্ডার () {ছেড়ে দিন {নাম, বয়স} = এই p আমার নাম {নাম}} আমার বয়স {বয়স} }}

বা কার্যকরী উপাদান সহ

'প্রতিক্রিয়া' থেকে আমদানি প্রতিক্রিয়া
কনড মাই কম্পোম্পোনেন্ট = ({নাম, বয়স}) => আমার নাম {নাম}} আমার বয়স {বয়স}

আর একটি উদাহরণ? যদি আপনি প্রপস বা রাজ্যের একটি বৃহত কাঠামো ব্যবহার করেন।

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
মাই কমপোয়েন্টিটি ক্লাসটি উপাদানকে প্রসারিত করে {রাষ্ট্র = {দল: [on ব্যক্তি: {প্রাথমিক তথ্য: {নাম: 'মিশাল', বয়স: 27}}}]}
রেন্ডার () {ছেড়ে দিন {নাম, বয়স} = this.prop.team [0] .প্রেস.ব্যাসিকআইএনফো ফিরুন আমার নাম {নাম}} আমার বয়স {বয়স} }}

সহজ? সহজ! এবং একটি প্রো এর মত দেখাচ্ছে;)

5. শৈলী বিচ্ছেদ

খুব দ্রুত পরামর্শ - স্টাইল পৃথক করুন !!! : ডি

তবে আমাদের দুটি পরিস্থিতি রয়েছে:

  1. আমরা ফাইল (.css, .scss) থেকে বাহ্যিক শৈলী ব্যবহার করতে পারি
  2. আমরা কিছু উপাদান ব্যবহার করি যা তাদের স্থাপত্য শৈলী ব্যবহার করে তবে তারা কেবল উপাদান-ইউআইয়ের মতো ইনলাইন ব্যবহার করে

প্রথম পরিস্থিতি খুব সহজ, এবং এটাই!

তবে দ্বিতীয় পরিস্থিতিটি কিছুটা কঠিন এবং আমি আপনাকে কিছু সমাধান দেখাতে চাই:

# 1. শৈলীর সাথে কনস্টেট

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
কনস্টাইল স্টাইলস = {অনুচ্ছেদ: font 'ফন্টসাইজ': '10px', 'রঙ': '# ff0000'}
মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন প্রসারিত করে ( এটি আমার প্রথম পাঠ্য এটি আমার দ্বিতীয় পাঠ্য )}}

# ২ সিএসএস মডিউল

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

আমদানি প্রতিক্রিয়া, './style.css' আমদানি থেকে 'প্রতিক্রিয়া' ক্লাস থেকে {উপাদান
মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন প্রসারিত করে ( এটি আমার প্রথম পাঠ্য এটি আমার দ্বিতীয় পাঠ্য )}}

সিএসএসের জন্য আপনার ওয়েবপ্যাকটি প্রস্তুত করার জন্য একটি ছোট ভিডিও

এবং মনে রাখবেন: আপনি যদি নিজের ফাইলগুলি পৃথক করে সম্পাদনা সহজ করতে পারেন তবে প্রো হিসাবে কাজ করুন!

6. পরিবেশ নির্ভরতা

আমরা কিছু প্রোটোটাইপিং পছন্দ করি তবে আমরা উত্পাদন সংস্করণে কিছু করতে চাইনি। আমি কীভাবে আমার টুকরো বা এমন কিছু গোপন করব যা কেবলমাত্র বিকাশকারীদের জন্য বা বিকাশ মোডে উপলব্ধ?

এনভায়রনমেন্টস ভেরিয়েবলগুলি ব্যবহার করুন - একটি অতিরিক্ত ভেরিয়েবল যা আপনার প্রকল্প শুরু করার সময় বা তৈরি করার সময় আপনি নির্ধারিত করতে পারেন। আপনি যদি টার্মিনাল থেকে কোনও ক্রিয়া শুরু করেন, আপনি নড থেকে অ্যাপস থেকে প্রসেস.এনভিতে স্থানান্তরিত হওয়া অতিরিক্ত ভেরিয়েবলগুলি যুক্ত করতে পারেন। তারপরে আপনি সবকিছু স্থানান্তর করতে পারেন।

প্রাক্তন MY_VARIABLE = "হ্যালো ওয়ার্ল্ড!" এনপিএম রান শুরু

তারপরে আমাদের process.env.MY_VARIABLE এ আমাদের মান দেখতে হবে।

আপনি যখন তৈরি-প্রতিক্রিয়া অ্যাপ্লিকেশনটি ব্যবহার করেন, আপনার কাছে NODE_ENV এর মতো বিল্ড ভেরিয়েবল থাকে যা আপনার বিল্ডের মোডকে বিকাশ, উত্পাদন বা পরীক্ষার মতো করে দেয় returns এবং সমস্ত বেসিক ব্যবহারের জন্য।

কনস্টেডডিগগ = প্রসেস.ইন.ও.এন.ড.এনভি === 'ডেভলপমেন্ট'

অনুশীলনে আপনি এটি কীভাবে ব্যবহার করবেন?

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
কনস্টেডডিগগ = প্রসেস.ইন.ও.এন.ড.এনভি === 'ডেভলপমেন্ট'
মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন প্রসারিত করে ( এটি আমার প্রকাশ্য পাঠ্য D ইজ ডেবেগ অ্যান্ড অ্যান্ড& এটি আমার বিকাশের পাঠ্য } )}}

আমি নিশ্চিত নই যে এটি কোনও প্রো, তবে আপনি এনআইভি ভারিয়েল কিছু পরিবেশগত সংবেদনশীল তথ্য যেমন API এর মূল URL বা আপনার প্রকল্পের ঠিকানা ইত্যাদি দিতে পারেন

** গুরুত্বপূর্ণ **

ভুলে যাবেন না যে কেউ আপনার উত্স কোডটি ডিক্রিপ্ট করতে চায় সে আপনার নির্ভরতাগুলি সনাক্ত করতে পারে।

7. উপাদানগুলি পরীক্ষা করার উপায়গুলি মনে রাখবেন

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

আপনি কীভাবে আপনার উপাদানগুলি পরীক্ষার জন্য প্রস্তুত করেন?

আপনার যদি এইচওসি না থাকে তবে রফতানিটি নিম্নরূপ করুন:

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
মাই কম্পোনেন্ট শ্রেণিটি ভাগ করে onent রেন্ডার () {ছেড়ে দিন {নাম, বয়স} = এই p আমার নাম {নাম}} আমার বয়স {বয়স} }}
রপ্তানি মান মাইকম্পোনেন্ট

তবে, আপনি যদি এইচওসি ব্যবহার করতে চান তবে এই প্যাটার্নটি ব্যবহার করুন:

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে {উপাদান}
মাই কম্পোনেন্ট রফতানি শ্রেণি উপাদান component রেন্ডার () {ছেড়ে দিন {নাম, বয়স} = প্রসারণ করে আমার নাম {নাম}} আমার বয়স {বয়স} }}
রপ্তানি মানক MyHocFunction (MyComp घटक)

কেন? কারণ আপনি যদি এইচওসি ব্যবহার করে অন্য কোনও দস্তাবেজে কোনও উপাদান আমদানি করতে চান তবে ব্যবহার করুন:

'। / কম্পোনেন্টস / মাইকম্পোনমেন্ট' থেকে মাই কমপোঞ্জেন্ট আমদানি করুন

তবে পরীক্ষায় আপনি ব্যবহার করতে পারেন

'। / কম্পোনেন্টস / মাই কম্পোম্পোনেন্ট' থেকে 'মাই কম্পোম্পোন্ট' আমদানি করুন

সাধারণ কোড, সহজ সমাধান, তবে অনেকগুলি ব্যবহার - অবশ্যই আমরা পেশাদার;)

8. সাহায্যকারী Inোকান

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

পাবলিক এসসিআর হেল্পার গ্লোবালস.জেএসএস মডিউলগুলি ব্যবহারকারী সহায়ক সূচক

** গুরুত্বপূর্ণ ** আপনি যদি নিজের কোডটি সদৃশ করেন তবে আপনার এটি উন্নত করা উচিত!

পেশাদার হয়ে ওঠার সর্বোত্তম উপায় হল ফাইল বিচ্ছেদ!

9. টুকরা প্রতিক্রিয়া

আপনি আপনার সেরা লেআউটটি প্রস্তুত করেছেন, এইচটিএমএল মার্কআপ সেরা, সবাই মনে করে এটি দুর্দান্ত দেখাচ্ছে ... দুর্দান্ত, কেবল বাস্তবায়নের প্রতিক্রিয়া দেখান ... শিরোনাম ... নিখুঁত দেখাচ্ছে ... জুমব্রটন ... দুর্দান্ত ... অপেক্ষা করুন ... আমার একটি বিভাগ রয়েছে যা ভাঙা হয়নি ... ওহ না ... প্রতিক্রিয়া ... ছিট!

আপনি যখন কোনও মোড়ক ছাড়াই কোনও উপাদান তৈরি করতে চেয়েছিলেন তখন এটি একটি সমস্যা হয়েছিল। দীর্ঘ সময়ের জন্য আমাদের সবকিছু প্যাক করতে হবে:

মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন প্রসারিত করে ( এটি আমার প্রথম পাঠ্য এটি আমার দ্বিতীয় পাঠ্য )}}

কারণ প্রতিক্রিয়া আমাদের একা এটি করতে দেয়নি। কেন - যদি প্রতিটি উপাদানটির নিজস্ব অনন্য কী থাকে যা ডিওএম এর কোন অংশটি এর উপাদান এটি সনাক্ত করতে পারে তা ব্যবহার করা হয়নি।

বুট রিঅ্যাক্টে "রিএ্যাক্ট টুকরো" নামে একটি নতুন বৈশিষ্ট্য যুক্ত হয়েছে যা আপনাকে এমন একটি উপাদান তৈরি করতে দেয় যা ডিওএম মোড়ানো না করে অনেক উপাদানকে গ্রুপ করে দেয়। এটি ঠিক ডিভগুলি মোড়ানোর মতো কাজ করে, তবে আমরা পরিবর্তে সেগুলি ব্যবহার করব -ইনস্ট্রাকশন বা সংক্ষিপ্ত সংস্করণ <>

যাত্রা।

মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন প্রসারিত করে ( এটি আমার প্রথম পাঠ্য এটি আমার দ্বিতীয় পাঠ্য )}}

অথবা

মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার () {রিটার্ন (<> প্রসারিত করে এটি আমার প্রথম পাঠ্য এটি আমার দ্বিতীয় পাঠ্য )}}

আশ্চর্যজনক - আপনি একজন পেশাদারের মতো ডকুমেন্টেশন থেকে পুরো নিবন্ধটি পড়ুন

10. পেশাদাররা প্রপ এবং প্রমিত ব্যবহার করে

আপনি যদি প্রো হন তবে আপনার প্রয়োজনীয় উপাদানগুলির বিষয়ে চিন্তা করুন। আমার প্রোপটাইপগুলি কেন ব্যবহার করা উচিত?

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

আমদানি প্রতিক্রিয়া, 'প্রতিক্রিয়া' থেকে 'প্রোপ-প্রকার' থেকে প্রোপাইপগুলি আমদানি করুন
মাইকম্পোন্টেন্ট ক্লাসটি কম্পোনেন্ট {রেন্ডার ()) রিটার্ন প্রসারিত করে হ্যালো {this.prop.text.toLocaleUpperCase ()} }}
মাইকমম্পোনেন্ট.প্রপ টাইপস = {পাঠ্য: প্রোপটাইপস স্ট্রিং}
মাইকমম্পোনেন্ট.ডিফল্টপ্রোপস = {পাঠ্য: 'ওয়েল্ট'}

এবং আপনি প্রোপটাইপস সম্পর্কে আরও জানতে চান - সম্পূর্ণ ডকুমেন্টেশন

সংক্ষিপ্তসার

আপনি দেখতে পাচ্ছেন যে এই 10 টি টিপস আপনার কোডে প্রয়োগ করা খুব সহজ। এটি আবার পড়ুন, আপনার ভাল লাগলে একটি প্রতিক্রিয়া যুক্ত করুন এবং কিছু অস্পষ্ট হলে বা আপনি আরও নির্দিষ্ট কিছু পড়তে চাইলে মন্তব্যগুলি ছেড়ে দিন! শুভকামনা!