আরডুইনো এবং প্রতিক্রিয়া দিয়ে আপনার গ্রিলের জন্য কীভাবে ড্যাশবোর্ড তৈরি করবেন

"কখন আমার প্রতিক্রিয়া ব্যবহার করা উচিত?" ডিজিটালক্র্যাফ্টের আমার ছাত্ররা ইদানীং আমাকে অনেক কিছু জিজ্ঞাসা করেছে।

আমরা তিন মাসের জন্য বুট শিবিরে এবং দু'দিন প্রতিক্রিয়াতে থাকি। বেশ কয়েকটি শিক্ষার্থী মন্তব্য করেছেন যে প্রতিক্রিয়ার একটি অদ্ভুত মিশ্রণ রয়েছে যা বিদেশীদের সাথে পরিচিতদের সংযুক্ত করে।

এবং অবশ্যই। এক্সপ্রেস এবং লেনকারের দিকনির্দেশনা রেন্ডারিং বৈশিষ্ট্যগুলি সরবরাহ করার সময় এটি জাভাস্ক্রিপ্ট এবং এইচটিএমএল এর উদ্ভট মিশ্রণের মতো দেখায়।

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

তখন তারা জিজ্ঞাসা করে, "ঠিক আছে, কেমন?"

এবং তারপরে আমি তাদের দেখাব ... পিটমাস্টার।

প্রথম স্বীকারোক্তি: বারবিকিউয়ের প্রতি আমার অপ্রাকৃত ভালবাসা রয়েছে। আমি যদি গ্রিল না খাই তবে আমি একটি গ্রিল তৈরি করি। (গ্রিলিং দক্ষিণ আমেরিকার একটি বিশেষ্য, ক্রিয়া নয়, এটি কয়েক ঘন্টা তাপমাত্রার ধোঁয়ায় মাংস প্রকাশের প্রক্রিয়া।)

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

নিম্নলিখিতটি কল্পনা করুন: আপনার 18 ঘন্টা ধূমপান করতে 12 ঘন্টা রয়েছে এবং আপনি আবার তাপমাত্রা পরীক্ষা করতে পালঙ্ক থেকে উঠবেন না। উপরন্তু, রান্না করার সময় আপনার ধূমপায়ীটি খোলার দরকার নেই কারণ এটি তাপমাত্রার ব্যাপক ওঠানামার কারণ হতে পারে।

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

ধূমপায়ীকে রাখার আগে খাবারে নিরাপদ, উচ্চ-তাপমাত্রার তাপ প্রতিরোধক (থার্মিস্টর) Inোকান। থার্মিস্টর হ'ল হার্ডওয়ারের একটি অংশ যা তাপমাত্রা পরিবর্তনের সাথে সাথে তার বৈদ্যুতিক চালকতা পরিবর্তন করে। একটি দীর্ঘ তারে থার্মিস্টর থেকে একটি আরডুইনো পর্যন্ত চলে।

আরডুইনো এমন একটি প্রোগ্রাম চালায় যা থার্মিস্টর থেকে এনালগ পরিমাপ করা মানকে ডিজিটাল মানে রূপান্তর করে। একটি রাস্পবেরি পাই প্রতি 100 100 মিলিয়ন সেকেন্ডে এই মানটির জন্য আরডুইনোকে জিজ্ঞাসা করে, কোনও ফাইলে এটি লগ করে এবং তারপরে এটি ওয়েবস্কটের মাধ্যমে সংযুক্ত প্রতিটি ক্লায়েন্টকে প্রেরণ করে।

এটি অদ্ভুত লাগতে পারে তবে ডিভাইসটি আসলে দেখতে দেখতে এটিই পছন্দ করে।

মূলত, বর্তমান তাপমাত্রা প্রদর্শনের জন্য ব্যবহারকারীর ইন্টারফেসটি খুব কুরুচিপূর্ণ ছিল, সহজভাবে বললে। টাইমস নিউ রোমান হিসাবে সমস্ত গৌরবময় একক, স্টাইলহীন এইচ 1 সমন্বিত একটি "হ্যালো ওয়ার্ল্ড" টিউটোরিয়ালে আপনি যা দেখতে পেয়েছিলেন ঠিক এটিই ছিল।

সুতরাং আমি পিটমাস্টার তৈরি করেছি, একটি ড্যাশবোর্ড যা ধূমপায়ীদের অগ্রগতি পর্যবেক্ষণ করে। আপনি কোডের একটি অনুলিপি এখানে ডাউনলোড করতে পারেন।

এই পোস্টে, আমি কিছু মূল ধারণাটি সম্বোধন করেছি যা আমি যখন প্রতিক্রিয়া শিখছিলাম তখন আমি মিস করেছি।

ওভারভিউ

"কার্যকরী, ঘোষিত ব্যবহারকারী ইন্টারফেস" এবং "ভার্চুয়াল ডোমে পার্থক্য" সম্পর্কে হাইপ সত্ত্বেও, প্রতিক্রিয়াটি তৈরি করার সময় আমি এই তিনটি নির্দেশিকাতে মনোনিবেশ করি:

  • ডেটা ইনপুট, ইউআই আউটপুট
  • নীচে থেকে উপরে আপনার উপাদানগুলি তৈরি করুন এবং উপরে থেকে নীচে ডেটা পাস করুন
  • আপনার উপাদানগুলি যথাসম্ভব বোকা বানান, তবে বোকা নয়

এটি মাথায় রেখে, আসুন ব্যবহারকারীর ইন্টারফেসটি দেখুন।

আউটলাইন পিটমাস্টার

পিটমাস্টার ইউজার ইন্টারফেসের এখানে একটি বেসিক ওয়্যারফ্রেম রয়েছে:

দুর্দান্ত "প্রতিক্রিয়া চিন্তাভাবনা" পৃষ্ঠাতে প্রস্তাবিত অনুসারে, আপনার প্রথমে আপনার ব্যবহারকারী ইন্টারফেসটি দৃশ্যতভাবে ভেঙে ফেলা উচিত।

পিটমাস্টার হ'ল একটি অ্যাপ্লিকেশন যা দুটি ভাগে বিভক্ত: একটি ফর্ম যা আপনাকে অর্ডার যুক্ত করতে দেয় এবং এমন একটি ক্ষেত্র যা প্রতিটি আদেশের বর্তমান অবস্থা দেখায়।

ফর্মটি তিন ভাগে ভাগ করা যায়:

  • বিভিন্ন ধরণের খাবারের সাথে ড্রপডাউন
  • খাবার অর্ডার করা ব্যক্তির নাম লিখতে পাঠ্য এন্ট্রি
  • ফর্মটি জমা দিতে বোতাম জমা দিন

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

ব্যবহারকারীর ইন্টারফেস উপাদানগুলিতে ডেটা রূপান্তর করতে ফাংশন ব্যবহার করুন

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

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

রিডআউট উপাদান তৈরি করুন

প্রতিক্রিয়াযুক্ত একটি উপাদান ডেটা গ্রহণ করে এবং সেই ইউজার ইন্টারফেসের একটি বিবরণ প্রদান করে যেখানে সেই ডেটা প্রদর্শিত হয়। কার্যকারিতা হ'ল কাজের জন্য সঠিক উপায়। রিডআউট উপাদানটি কেবল একটি ফাংশন যা পাঠ্য এবং সংখ্যাগুলি আর্গুমেন্ট হিসাবে গ্রহণ করে এবং সেই মানগুলির সাথে একটি প্রদান করে।

এটির সহজতম সংস্করণটি এখানে:

এখানে দুটি বিষয় বিবেচনা করতে হবে।

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

দ্বিতীয়ত, আপনি ডোম উপাদান তৈরি করেন না, আপনি প্রতিক্রিয়া উপাদান তৈরি করেন যা ডোম উপাদানগুলির বর্ণনা উপস্থাপন করে। আপনি jQuery ব্যবহারকারীর ইন্টারফেস তৈরি করতে অভ্যস্ত যদি আপনি DOM উপাদান তৈরি করেন বা বিদ্যমান DOM উপাদানগুলি উল্লেখ করেন তবে এটি খুব আলাদা অনুভূত হবে। এর কারণগুলি শীঘ্রই স্পষ্ট হয়ে উঠবে।

React.createElement এর বর্ণনা ('স্প্যান', নাল, প্রপস.লাবেল, প্রপস.ভ্যালু) এর অর্থ হ'ল ডিওএম উপাদানটির ধরণ একটি স্প্যান।

আমরা এটিতে কোনও প্রপস পাস করি না, এবং পরিসরের মধ্যে প্রপস.লবেল এবং প্রপস.মূল্যের মানগুলি নেস্ট করা হয়।

প্রতিক্রিয়া উপাদানগুলিতে বাসা বাঁধার মানগুলিকে শিশু উপাদান বলা হয়।

তীর ফাংশন এবং পুনর্গঠন

ফাংশনগুলির জন্য একটি বিকল্প সিনট্যাক্স রয়েছে যা অনেকগুলি প্রতিক্রিয়া কোড বেসগুলিতে ঘন ঘন ব্যবহৃত হয়। ES6 তীর ফাংশনগুলি বেনামে ফাংশনগুলির সমান, তবে একটি সংক্ষিপ্ত বাক্য গঠন সহ। (কারণ প্রোগ্রামাররা প্রয়োজনের চেয়ে বেশি বোতাম টিপতে ঘৃণা করে!)

কোডের পরবর্তী বিভাগে, ভেরিয়েবল রিডআউটকে একটি তীর ফাংশন মান বরাদ্দ করা হয়, যা কনট দিয়ে ঘোষিত হয় এবং ভেরিয়ে নয়।

একটি ধ্রুবক একটি পরিবর্তনশীল যা পুনরায় সাইন করা যায় না।

তবে অপেক্ষা করুন, আরও আছে!

প্রপস আর্গুমেন্ট থেকে নির্দিষ্ট মানগুলি টানতে এবং এক ধাপে তাদের স্থানীয় ভেরিয়েবলগুলিতে নিয়োগের জন্য আমরা ES6 ডেস্ট্রস্ট্রাক্ট সিনট্যাক্স ব্যবহার করতে পারি।

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

যেহেতু রিটার্নের মানটি দীর্ঘায়িত হতে পারে, তাই নিম্নলিখিত কোডটি অন্তর্ভুক্ত প্রত্যাবর্তনের মানের চারপাশে বন্ধনীগুলি সহ প্রদর্শিত হয়:

এটি একই জিনিস, তবে প্রোগ্রামার স্পেস দিয়ে যা করতে পারে তা করতে পারে।

জেএসএক্স বা "আমার জাভাস্ক্রিপ্টে এইচটিএমএল কেন?"

আরও একটি বিমূর্ততা আছে। স্টাইলিংয়ের উদ্দেশ্যে আমাদের একটি ডিভের মধ্যে স্প্যান সেট করতে হতে পারে:

এটি করার জন্য, আমাদের জাভাস্ক্রিপ্টে নিম্নলিখিত কোডটি লিখতে হবে:

আপনি যেমন কল্পনা করতে পারেন, আরও জটিল ডিওএম কাঠামো বর্ণনা করার চেষ্টা করলে খুব দ্রুত নেস্টেড React.createElement কলগুলি নিয়ন্ত্রণের বাইরে চলে যেতে পারে। ভাগ্যক্রমে, আপনি এইচটিএমএল এর সাথে খুব মিল দেখায় এমন একটি alচ্ছিক React.createElement সিনট্যাক্স ব্যবহার করতে পারেন। এই উপাদানটি এখানে এই সিনট্যাক্সটি ব্যবহার করে আবার লেখা হয়েছিল:

এই বাক্য গঠনটি জেএসএক্স, এক্সএমএল, যা আমাদের জাভাস্ক্রিপ্টে এমবেড করা আছে। ব্রাউজারটি জাভাস্ক্রিপ্ট কার্যকর করার আগে, এক্সএমএল নেস্টেড React.createElement ফাংশন কলগুলিতে রূপান্তরিত হয়। এছাড়াও, ধনুর্বন্ধনীগুলিতে ব্র্যাকগুলির পাশাপাশি সমস্ত জাভাস্ক্রিপ্ট ভেরিয়েবল বা এক্সপ্রেশন মূল্যায়ন করা হয় এবং ফলস্বরূপ মানগুলি প্রতিস্থাপন করা হয়।

এর সুবিধাটি হ'ল এইচটিএমএল এর সাথে পরিচিত যে কেউ জেএসএক্সের দিকে নজর দিতে পারে এবং কোন ডিওএম উপাদান উত্পন্ন তা জানতে পারে।

কাস্টম উপাদান

React.createElement সম্পর্কে ব্যবহারিক জিনিস হ'ল আপনি কেবল HTML উপাদানগুলি বর্ণনা করতে পারবেন না describe আপনি একবার রিডআউটের মতো উপাদান তৈরি করার পরে আপনি এটিকে React.createElement বা JSX এর সাথে ব্যবহার করতে পারেন।

উপাদানটির সম্পূর্ণ কোড তালিকা এখানে তিনটি ভিন্ন সময়ের ব্যবধান (1 মিনিট, 5 মিনিট এবং 10 মিনিট) থেকে তিনটি বর্তমান তাপমাত্রা দেখায়।

আপনি আপনার কাস্টম উপাদানগুলি দেশীয় HTML উপাদানগুলির সাথে মিশ্রিত করতে পারেন। মনে রাখবেন যে আপনার রিডআউট উপাদানগুলি এমন উপাদান তৈরি করে যা একটি ডিভের মধ্যে একটি অঞ্চলকে উপস্থাপন করে।

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

আপনি যদি মনিটর.জেএস-তে সন্ধান করেন তবে দেখতে পাবেন এটি রিডআউট, টেম্পারেচার হিস্টরি, নেম লেবেল এবং এইচটিএমএল উপাদানগুলির সংমিশ্রণ:

এখনই এটি স্পষ্ট হওয়া উচিত যে উপাদানগুলি React.createElement এ নেস্টেড কলগুলির সংক্ষেপণ ছাড়া আর কিছু নয়। প্রতিটি উপাদান তার পিতামাতার কাছ থেকে ডেটা (প্রপস) গ্রহণ করে এবং এটি তার বাচ্চাদের কাছে ডেটা দেয়। একটি প্রতিক্রিয়া অ্যাপে প্রদর্শিত সমস্ত ডেটা মূলত শীর্ষের মূল উপাদানকে দেওয়া হয়েছিল।

তারপরে প্রশ্ন ওঠে, এই সমস্ত ফাংশন কলগুলির ফলাফল কী।

ভার্চুয়াল ডিওএমকে অপমানিত করা

উত্তরটি হ'ল এই সমস্ত নেস্টেড React.createElement কলগুলির ফলস্বরূপ একটি বৃহত জাভাস্ক্রিপ্ট অবজেক্টের ফলস্বরূপ, এটি একটি উপাদান গাছ হিসাবেও পরিচিত। এই যে উপাদান গাছ বাইরে আছে তৈরি করা হয়েছে:

প্রতিক্রিয়া প্রকৃত DOM উপাদান তৈরি করতে এবং পৃষ্ঠায় রেন্ডার করতে এলিমেন্ট ট্রি ব্যবহার করে। এটি ভার্চুয়াল ডিওএম শব্দটির অধীনে বুঝতে হবে। উপাদান গাছটি ডিওএমের একটি নীলনকশা হিসাবে কাজ করে এবং পৃষ্ঠাটি আপডেট করার প্রয়োজন হলে প্রতিক্রিয়া এটিকে উল্লেখ করতে পারে।

ডিওএম আপডেট করুন

ঠিক আছে, কিছু সময় যায় এবং গ্রিলটি সুস্বাদু মঙ্গলতার দিকে যায়। যখন তাপমাত্রার মান পরিবর্তিত হয়, তখন ব্যবহারকারী ইন্টারফেসও পরিবর্তিত হয়। আসুন আমরা ধরে নিই যে কেবলমাত্র তাপমাত্রা প্রোফাইলের প্রথম মানটি পরিবর্তিত হয়েছে (154 থেকে 156):

যদি ডেটা পরিবর্তন হয় তবে নতুন মানগুলি বেস উপাদানটিতে স্থানান্তরিত হয় এবং উপাদান উপাদানটিতে ডেটা ক্যাসকেড করা হয়। এটি একটি নতুন উপাদান গাছ বাড়ে।

এটি ফলস্বরূপ উপাদান গাছ:

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

পরবর্তী প্রশ্নটি হ'ল উপাদান গাছের সমস্ত কি স্থির মান। কীভাবে এবং কোথায় আমরা অ্যাপ্লিকেশন ডেটা দিয়ে আপডেট রাখি?

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

শ্রেণীর উপাদান যুক্ত করুন

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

এখানে রয়েছে FoodChooserForm, এটি তৈরি করা উপাদান গাছ বাদে সবকিছু দেখায়।

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

এটি রিঅ্যাক্ট.কম্পোনেন্টের কাছ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত এবং এর কনস্ট্রাক্টরে সুপার (প্রপস) কল করে। এছাড়াও নোট করুন যে ইনস্ট্যান্ট ভেরিয়েবল এই.স্টেটটি আরম্ভ করা হয়েছে। একটি শ্রেণীর উপাদান তার প্রয়োগের ডেটা স্থিতি পরিবর্তনশীলগুলিতে সঞ্চয় করে। অন্য দুটি পদ্ধতি রয়েছে: _আপডেটআর্ডারনেম এবং _আপডেটফুডচয়েস। এই পদ্ধতির প্রত্যেকটি এটাকে সেট করে calls শ্রেণীর উপাদানগুলি অবশ্যই এই স্টেটের মান পরিবর্তন করতে ব্যবহার করতে পারে। আপনি তাকে কী / মান যুগল আপডেট করার জন্য একটি বস্তুটি পাস করেন। প্রতিক্রিয়া বাকি যত্ন নেয়।

এখানে সম্পূর্ণ উপাদান কোড। এটিতে রেন্ডারিং পদ্ধতির সংজ্ঞা রয়েছে যা একটি স্টেটলেস ফাংশন উপাদানটির রিটার্ন মানের সাথে সম্পর্কিত।

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

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

FoodChooserForm এছাড়াও একটি ফাংশন কল যা প্রপস হিসাবে পাস করা হয়েছিল। কনস্ট্রাক্টারে (যেখানে এটি তার সমস্ত প্রপস গ্রহণ করে), এটি প্রপস.সুমিত হ্যান্ডলারকে উদাহরণ হিসাবে পরিবর্তনশীল এটি.সবিমিট হ্যান্ডলারের হিসাবে সংরক্ষণ করে stores রেন্ডারিং পদ্ধতির সাথে, _ হ্যান্ডল সাবমিট পদ্ধতির একটি রেফারেন্স ফর্ম উপাদানটিতে প্রেরণ করা হয়।

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

এবং নতুন ফুড অর্ডারিংয়ের তথ্য কোথায় যাচ্ছে? একেবারে শীর্ষে।

পিটমাস্টার উপাদান

পিটমাস্টার তার অবস্থার অংশ হিসাবে সমস্ত মুদি আদেশের একটি তালিকা বজায় রাখে যা মনিটরপ্যানেলে জমা দেওয়া হয়। এটি FoodChooserForm কে পছন্দের তালিকা এবং একটি কল ব্যাক ফাংশন সরবরাহ করে যা কোনও নতুন অর্ডার দেওয়ার পরে ব্যবহার করা যেতে পারে। রেন্ডারিং পদ্ধতিটি রিফ্রেশিং সংক্ষিপ্ত:

অর্ডার যুক্ত এবং অপসারণ এবং তাপমাত্রা তালিকা আপডেট করার জন্য ব্যক্তিগত পদ্ধতি রয়েছে। অন্যান্য সমস্ত আচরণ অন্যান্য উপাদানগুলিতে গোপন করা হয়েছে।

উপসংহার

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

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

এখন আমি ভাবছি যে পরের সপ্তাহে আমরা রেডক্সের বিপক্ষে উঠলে তারা আমাকে কী জিজ্ঞাসা করবে ...