স্টোরিবুক ব্যবহার করে কীভাবে প্রতিক্রিয়া বিকাশের খেলার মাঠ তৈরি করা যায়

আনস্প্ল্যাশ-এ জোশুয়া আরাগন ছবি

ইদানীং আমি নতুন জিনিস চেষ্টা করতে এবং আমার প্রতিক্রিয়া উপাদানগুলিতে নতুন প্রযুক্তি বা নিদর্শনগুলি পরীক্ষা করতে চেয়েছি। আমার এমন একটি জায়গা প্রয়োজন ছিল যেখানে প্রতিবার নতুন অ্যাপ্লিকেশন না করে আমি এই জিনিসগুলি পরীক্ষা করে দেখতে পারি।

আমি ভবিষ্যতে প্রকল্পগুলির জন্য একটি নতুন ডিজাইনের ব্যবস্থা প্রতিষ্ঠার জন্য কাজের সময়ে প্রতিক্রিয়া স্টোরিবুক ব্যবহার শুরু করেছি। আমাদের টিমটি কাজ করছে এমন একটি নতুন বিষয়বস্তু রচয়িতা সরঞ্জামের বেশ কয়েকটি সংস্করণ প্রোটোটাইপ করার জন্যও এটি ব্যবহার করেছি। উপাদানটি তৈরি করতে এবং নতুন জিনিসগুলি নিয়ে খেলতে আমার ইচ্ছার সাথে এই সরঞ্জামটি একত্রিত করার জন্য এটি নিখুঁত বলে মনে হয়েছিল। এই নতুন "জিনিসের" কয়েকটি উদাহরণ হ'ল "প্রতিক্রিয়া প্রসঙ্গ", "স্লেটজে" এবং "প্রতিক্রিয়া হুকস"।

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

এই পোস্টটি প্রতিক্রিয়া পরিবেশের জন্য গল্পের বইটি তৈরি করার দিকে দৃষ্টি নিবদ্ধ করেছে এবং ভবিষ্যতে আমি কী তৈরি করব তা পোস্ট করার লক্ষ্য রাখব!

সুও ... গল্পের বইটি কী?

স্টোরিবুক ওয়েবসাইট থেকে সরাসরি নেওয়া হয়েছে কারণ আমি এটিকে আরও ভাল করে তুলতে পারি না:

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

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

আসুন এখন নির্মাণ!

একটি প্রাথমিক প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করুন

এনপিএক্স তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন আমার খেলার মাঠ

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

স্টোরিবুক যুক্ত করুন

প্রথমত, আপনার প্রকল্পের কমান্ড লাইনে আপনাকে নিম্নলিখিত কমান্ডটি ব্যবহার করে স্টোরিবুক যুক্ত করতে হবে:

এনপিএক্স-পি @ স্টোরিবুক / ক্লিপ এসবি ইনি

তারপরে আপনি স্টোরিবুকটি ব্যবহার করে চালাতে পারেন:

সুতা গল্পের বই

এখন আপনার ব্রাউজারে নীচের মত একটি স্ক্রিন যেতে এবং দেখতে প্রস্তুত হওয়া উচিত:

ছবির বইয়ের ব্রাউজার ভিউ

আপনি যদি আপনার প্রকল্পের ফোল্ডারে সন্ধান করেন তবে আপনি দেখতে পাবেন যে কিছু ফাইল যুক্ত হয়েছে এবং অন্যদের আপডেট করা হয়েছে:

ফোল্ডারে ./storybook এ আপনি আপনার স্টোরিবুকের জন্য অনেকগুলি সেটিংস তৈরি করবেন। আরও প্রকারের কার্যকারিতা যুক্ত করতে আপনি আপনার প্রকল্পে আবেদন করতে পারেন এমন সমস্ত ধরণের অ্যাড-অন রয়েছে। কনফিগারেশন.জেএস ফাইলে আপনি সাধারণত অ্যাড-অন প্রয়োগ করতে পারেন এবং আপনার গল্পগুলি কোথায় পাওয়া যায় স্টোরিবুকটি বলবেন। কনফিগারেশনটি ডিফল্টরূপে নিম্নরূপ:

'@ স্টোরিবুক / প্রতিক্রিয়া' থেকে আমদানি করুন ure
ফাংশন লোডস্টোরিজ () {প্রয়োজন ('../ src / গল্প'); }
কনফিগার (লোডস্টোরিজ, মডিউল);

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

আপনি নীচের উদাহরণে দেখতে পাচ্ছেন, আপনি একই উপাদানটির একাধিক সংস্করণ কেবল বিভিন্ন প্রপস দিয়ে রেন্ডার করে তৈরি করতে পারেন।

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

'@ স্টোরিবুক / প্রতিক্রিয়া' থেকে {কনফিগার Import আমদানি করুন
ফাংশন লোডস্টোরিজ () {কনট্রাক্ট রেক = প্রয়োজনীয় আবরণ ('../ src', সত্য, /\.stories\.js$/) req.keys ()। জন্য প্রতিটি (ফাইলের নাম => রেক (ফাইলের নাম))}
কনফিগার (লোডস্টোরিজ, মডিউল)

এটি অনেক পরিষ্কার ফাইল কাঠামোর জন্য অনুমতি দেয় এবং আপনি প্রকল্পগুলি বা এমনকি আপনার এসআরসি ফোল্ডারে উপাদান দ্বারা আপনার গল্পগুলি সংগঠিত করতে পারেন।

আপনার মিনি প্রকল্পগুলি তৈরি করুন

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

এখন যখন আমি আমার স্টোরবুকটি পরীক্ষা করি তখন দেখতে পাচ্ছি যে আমার প্রসঙ্গের API প্রকল্পের জন্য আমার কাছে একটি মেনু বিকল্প রয়েছে। তার নীচে, আমি তৈরি করা আমার বাড়ির উপাদানটি দেখতে ক্লিক করতে পারেন:

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

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

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

মজা কোডিং আছে!

তথ্যসূত্র:

আমার গিথুব রেপো: