নতুনদের জন্য রিএক্ট জেএস

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

যা যা পূর্ব জিনিস জানা থাকতে হবে : আমরা অনুমান করি যে আপনি প্রতিক্রিয়া শেখার আগে এই বিষয়গুলির নীচের কিছু মৌলিক বিষয়গুলি পরিষ্কার করেছেন৷

• ১) HTML এর বেসিক এবং এর বহুল বেবহৃত টেগ সম্পর্কে
• ২) CSS এর বেসিক এবং লেআউটটিং
• ৩) জাভাস্ক্রিপ্টের বেসিক (ভেরিয়েবল, ডোমম্যানুপ্লেশন, ডেটাটাইপ, ইভেন্ট ইত্যাদি)

রিএক্ট ইন্স্টলেশন

• -> রিএক্ট উইন্ডোস কম্পিউটার এ ইনস্টল করার জন্য এই স্টেপগুলো ফলো করতে পারেন।
• -> রিএক্ট ম্যাক ওএস কম্পিউটার এ ইনস্টল করার জন্য এই স্টেপগুলো ফলো করতে পারেন।

রিএক্ট শেখার শুরুটা 

মৌলিক বিষয়গুলি: উপরের সমস্ত বিষয়গুলি আমরা আলোচনা করেছি রিএক্ট এর ​​পূর্বশর্ত। এখন একবার আপনি উপরের সমস্ত জিনিসগুলি শিখে গেলে এইবার  রিএক্ট এ ঝাঁপিয়ে পড়ার সময়। প্রথমে রিএক্ট এর মূল কনসেপ্ট গুলো বুঝতে হবে।

স্টেট : মূলত ‘স্টেট ‘ সিঙ্ক্রোনাস ভেরিয়েবল ধারণ করে। আপনি যদি একটি স্টেট ভেরিয়েবলের মান পরিবর্তন করেন তবে পরিবর্তনটি অবিলম্বে প্রতিফলিত হয় যে সমস্ত জায়গায় নির্দিষ্ট ভেরিয়েবল ব্যবহার করা হয়।

প্রপস: এটি একটি ফাংশন বা মেথড এ পাস করা আর্গুমেন্টের মতো। রিঅ্যাক্ট প্রপস (আর্গুমেন্ট) ইনপুট আর্গুমেন্ট হিসাবে একটি HTML ট্যাগে পাস করা হয়। স্টেট এবং প্রপস শেখার পর আপনি ফাঙ্কশনাল কম্পোনেন্ট এবং ক্লাস কম্পোনেন্টের মধ্যে পার্থক্য শিখতে পারবেন।

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

কম্পোনেন্টে স্টেট যোগ করা 

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

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

state = {

todos: [],

}

রিএক্ট ডেভেলপার টুলস 

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

আপনার পছন্দের ব্রাউজারের জন্য এক্সটেনশন পৃষ্ঠায় যান (এখানে ক্রোম এবং ফায়ারফক্স এখানে) এবং এটি ইনস্টল করুন।আপনি এটি ইনস্টল করার পরে, আপনি সম্পন্ন. এটি অন্য কোন সেটআপ প্রয়োজন হয় না.