প্রতিক্রিয়া ইন্টারমিডিয়েট টিউটোরিয়াল: 3 ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:58

প্রতিক্রিয়া ইন্টারমিডিয়েট টিউটোরিয়াল

এখানে সমাপ্ত পণ্য দেখুন।

আপনি কি শিখবেন?

আপনি React.js এর সাহায্যে একটি সহজ করণীয় তালিকা তৈরি করবেন এবং প্রতিক্রিয়াটির আরো জটিল অংশ সম্পর্কে জানবেন। পূর্বশর্তগুলি (অত্যন্ত প্রস্তাবিত) react.js শুরু করার নির্দেশিকা সম্পূর্ণ করুন।

সরবরাহ

সমস্ত সফ্টওয়্যার টিউটোরিয়ালে অন্তর্ভুক্ত করা হবে।

আপনার নিম্নলিখিত সফ্টওয়্যার ইনস্টল করা একটি কম্পিউটারের প্রয়োজন হবে:

• npm/সুতা
• একটি IDE যা js সমর্থন করে
• একটি ওয়েব ব্রাউজার

ধাপ 1: ইন্টারমিডিয়েট টিউটোরিয়াল প্রতিক্রিয়া

শুরু হচ্ছে

React.js কেন?

React.js এর সাথে, পয়েন্ট হল কোডটি পুনরায় ব্যবহার করা। উদাহরণস্বরূপ, বলুন আপনার 100 পৃষ্ঠায় একটি নেভিগেশন বার আছে। যদি আপনার একটি নতুন পৃষ্ঠা যোগ করার প্রয়োজন হয়, তাহলে আপনাকে প্রতিটি পৃষ্ঠায় নেভিগেশন বার পরিবর্তন করতে হবে, অর্থাৎ 100 পৃষ্ঠার জন্য আপনাকে একই কাজ করতে হবে। এমনকি ম্যাক্রো সহ, এটি খুব ক্লান্তিকর হয়ে ওঠে।

প্রয়োজনীয় সফটওয়্যার/প্যাকেজ ইনস্টল করা

আপনার প্রয়োজন হবে:

npm/সুতা

কিভাবে ইনস্টল করতে হবে:

1. যান এবং Node.js এর সর্বশেষ LTS ইনস্টল করুন
2. :চ্ছিক: আপনি যদি আপনার প্যাকেজ ম্যানেজার হিসেবে সুতা পছন্দ করেন, তাহলে পাওয়ারশেল npm install -g yarn লিখে সুতা ইনস্টল করুন
3. পাওয়ারশেল/cmd.exe খুলুন
4. যে ডিরেক্টরিতে আপনি আপনার প্রোজেক্ট তৈরি করতে চান তাতে নেভিগেট করুন
5. টাইপ করুন npx create-react-app।

আপনি সেটআপ পর্ব শেষ করেছেন। এটি পরীক্ষা করার জন্য, পাওয়ারশেল খুলুন, আপনার প্রকল্প ডিরেক্টরিতে নেভিগেট করুন এবং npm start টাইপ করুন। আপনার ডিফল্ট ব্রাউজারে একটি ওয়েবপেজ লোড করা উচিত।

ধাপ 2: ধাপ 1: শুরু করা

শুরু করতে, আপনার /src ডিরেক্টরি থেকে নিম্নলিখিত ফাইলগুলি মুছুন:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

আমাদের এই ফাইলগুলির দরকার নেই।

আসুন আমাদের ফাইল সিস্টেমকেও সংগঠিত করি। /Src /এ এই ডিরেক্টরিগুলি তৈরি করুন:

• js
• CSS

App.js কে js dir এবং App.css কে css dir এ রাখুন।

পরবর্তী, আসুন নির্ভরতা পুনর্গঠন করি।

index.js এ, serviceWorker এবং index.css এর জন্য আমদানি সরান। ServiceWorker.register () মুছুন।

App.js এ, logo.svg এর জন্য আমদানি সরান, কারণ আমাদের আর এটির প্রয়োজন নেই। Reroute App.css। অ্যাপ () ফাংশন এবং অ্যাপের জন্য রপ্তানি মুছে দিন।

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

আপনার কোডে এটি যোগ করুন:

pastebin.com/nGXeCpaH

html 2 divs এর মধ্যে যাবে।

আসুন উপাদানটি সংজ্ঞায়িত করি।

pastebin.com/amjd0jnb

লক্ষ্য করুন কিভাবে আমরা রাজ্যে মান নির্ধারণ করেছি। আমাদের এটি পরে প্রয়োজন হবে।

রেন্ডার ফাংশনে, হাই এর পরিবর্তে {this.state.value}

আমরা যে সংজ্ঞা দিয়েছি সেই রাজ্য থেকে যে মান অতিক্রম করেছে তা আমরা রেন্ডার করছি।

তাই আসুন এটি পরীক্ষা করা যাক!

অ্যাপের রেন্ডার ফাংশনে, এটি দিয়ে এটি প্রতিস্থাপন করুন:

pastebin.com/aGLX4jVE

এটি একটি মান প্রদর্শন করা উচিত: "পরীক্ষা"।

দেখা যাক আমরা একাধিক টাস্ক রেন্ডার করতে পারি কিনা!

শুধুমাত্র একটি উপাদান রেন্ডার করার জন্য প্রতিক্রিয়া পাওয়ার পরিবর্তে, আমরা একটি অ্যারে তৈরি করতে পারি এবং এর পরিবর্তে অ্যারে রেন্ডার করতে প্রতিক্রিয়া বলতে পারি।

এর রেন্ডার ফাংশন পরিবর্তন করুন:

pastebin.com/05nqsw71

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

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

আসুন আমাদের সাথে একটি কনস্ট্রাক্টর যুক্ত করি।

pastebin.com/9jHAz2AS

এই কনস্ট্রাক্টারে, আমরা টাস্ক অ্যারেকে রেন্ডার ফাংশন থেকে দূরে সরিয়ে দিয়েছি। টাস্কআরে এবং রেন্ডার ফাংশনে লুপের জন্য মুছুন। div. এ টাস্কআরে পরিবর্তন করুন।

এখন পর্যন্ত, আপনার App.js কোড এই মত হওয়া উচিত:

pastebin.com/1iNtUnE6

ধাপ 3: অবজেক্ট যোগ এবং অপসারণের একটি উপায় যোগ করা

বস্তু যোগ এবং অপসারণের একটি উপায় যোগ করা যাক। এর পরিকল্পনা করা যাক।

আমাদের কি চাই?

• ব্যবহারকারীর বস্তু যুক্ত করার একটি উপায়
• বস্তু রাখার জায়গা
• বস্তু পুনরুদ্ধার করার একটি উপায়

আমরা কি ব্যবহার করতে যাচ্ছি?

• একটি উপাদান
• লোকাল স্টোরেজ API w/ JSON

ইনপুট এলিমেন্ট দিয়ে শুরু করা যাক।

{this.state.taskArray} এর নিচে, আপনার কোডে একটি ইনপুট এবং বোতাম যুক্ত করুন

যোগ করুন

এখন একটি পাঠ্য ইনপুট এবং যোগ বোতাম থাকা উচিত।

এটি এখন কিছুই করে না, তাই আসুন আমাদের অ্যাপ পদ্ধতিতে 6 টি পদ্ধতি যুক্ত করি।

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

আসুন এই 6 টি পদ্ধতি যুক্ত করি:

বাটন ক্লিক ()

ইনপুট টাইপ (evt)

geneTaskArray ()

saveTasks (কাজ)

getTasks ()

RemoveTask (আইডি)

আসুন আমাদের রাজ্যে এই পরিবর্তনশীল যোগ করি:

ইনপুট

আমাদেরও এর সাথে আমাদের ফাংশনগুলিকে আবদ্ধ করতে হবে।

pastebin.com/syx465hD

আসুন কার্যকারিতা যোগ করা শুরু করি।

এর মতো 2 টি বৈশিষ্ট্য যুক্ত করুন:

এটি এমন করে তোলে যাতে ব্যবহারকারী যখন ইনপুটে কিছু টাইপ করে, এটি ফাংশনটি চালায়।

একটি onClick অ্যাট্রিবিউট যোগ করুন যেমন যুক্ত করুন:

যোগ করুন

যখন ব্যবহারকারী বোতামে ক্লিক করে, ফাংশনটি কার্যকর হয়।

এখন যে HTML অংশটি সম্পন্ন হয়েছে, আসুন কার্যকারিতা নিয়ে এগিয়ে আসি।

আমি ইতিমধ্যে লোকালস্টোরেজ এপিআই ইন্টারফেসটি আগে থেকে লিখে রেখেছি, তাই saveTasks, getTasks, এবং RemoveTask ফাংশনগুলি এর সাথে প্রতিস্থাপন করুন:

pastebin.com/G02cMPbi

ইনপুট টাইপড ফাংশন শুরু করা যাক।

যখন ব্যবহারকারী টাইপ করে, তখন আমাদের ইনপুটের অভ্যন্তরীণ মান পরিবর্তন করতে হবে।

আসুন প্রতিক্রিয়া সহ প্রদত্ত setState ফাংশন ব্যবহার করে এটি করি।

this.setState ({ইনপুট: evt.target.value});

এই ভাবে, আমরা ইনপুটের মান পেতে পারি।

একবার এটি হয়ে গেলে, আমরা বাটন ক্লিক ফাংশনে কাজ করতে পারি।

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

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

আমরা টাস্কগুলি পাই, ইনপুট ভ্যালুকে টাস্কের মধ্যে ধাক্কা দেই এবং তারপর সেভ করি। আমরা তারপর টাস্ক অ্যারে জেনারেট করি।

এখন, আসুন GenerateTaskArray () ফাংশনে কাজ করি।

আমাদের প্রয়োজন:

• কাজ পান
• টাস্ক উপাদানগুলির একটি অ্যারে তৈরি করুন
• রেন্ডার করার জন্য টাস্ক উপাদানগুলি পাস করুন

আমরা কাজগুলি পেতে পারি এবং getTasks () দিয়ে একটি পরিবর্তনশীল এ সংরক্ষণ করতে পারি

var কাজ = getTasks ()

আমরা তারপর একটি অ্যারে তৈরি এবং এটি পপুলেট করতে হবে।

pastebin.com/9gNXvNWe

এটা এখন কাজ করা উচিত.

সোর্স কোড:

github.com/bluninja1234/todo_list_instructables

অতিরিক্ত আইডিয়া:

অপসারণ ফাংশন (খুব সহজ, একটি অনক্লিক যোগ করুন এবং কী ইনডেক্স থেকে RemoveTask ব্যবহার করে মুছে দিন)

CSS (এছাড়াও সহজ, আপনার নিজের লিখুন বা বুটস্ট্র্যাপ ব্যবহার করুন)