tutorial

আমরা আগের পর্বগুলোতে useState, useEffect, useRef, useReducer, useContext নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useCallback এবং React.memo নিয়ে আলোচনা করবো ইনশাল্লাহ। প্রথমেই বলে রাখা ভালো, এগুলো মূলত আমাদের React এর perfomance optimization এ কাজে লাগে। এগুলো নিয়ে আলোচনার পূর্বে আগে দেখে নেওয়া দরকার কি প্রবলেমের কারনে এগুলোর দরকার হয়। এটাকে বুঝানোর জন্যে একটি ডেমো অ্যাপ বানিয়েছি। দেখা যাক এটার মধ্যে কি আছে। initial app আমরা দেখতে পারছি আমাদের অ্যাপে একটি প্যারেন্ট কম্পোনেন্ট আছে যেখানে "Parent Increment Button" নামে একটি বাটন আমাদের প্যারেন্টেই আছে এবং সাথে ৩টি child কম্পোনেন্ট আছে, যেগুলো প্যারেন্ট কম্পোনেন্ট থেকে আলাদা ভাবে আছে। parent component এরপরে আমরা দেখি আমাদের child component গুলোতে…

পর্ব ৫ – useContext hook আমরা আগের পর্বগুলোতে useState, useEffect, useRef, useReducer নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useContext নিয়ে আলোচনা করবো ইনশাল্লাহ। useContext এর নাম থেকেই আমরা বুঝতে পারছি এই hook টি React Context এর সাথে সম্পর্কিত। আমরা এই পোস্টে context নিয়ে বিস্তারিত আলোচনায় যাব না, কিন্তু আমরা হাল্কা আলোচনা করবো useHook এর ব্যাখ্যায় যাওয়ার আগে। Context কি? React Context হচ্ছে এমন একটি মেথড যেটার মাধ্যমে আমরা খুব সহজে আমাদের parent component থেকে child component এ props পাঠাতে পারি। আমরা সবাই জানি React এর সবথেকে বেষ্ট জিনিস হচ্ছে আমরা আমাদের UI কে reusable component এ বিভক্ত করতে পারি। ছোট…

পর্ব ৪ - useReducer hook আমরা আগের পর্বগুলোতে useState, useEffect, useRef নিয়ে আলোচনা করেছি। আজকের পর্বে আমরা useReducer নিয়ে আলোচনা করবো ইনশাআল্লাহ। তাহলে শুরু করা যাক। প্রথমে আসা যাক useReducer hook কি? useReducer hook হচ্ছে আমাদের useState hookএর আরেকটি অলটারনেটিভ এবং এটি দিয়েও আমরা আমাদের ইন্টারনাল state কে আপডেট করতে পারি। useState এর মত useReducer এর মাধ্যমে state আপডেট করলেও আমাদের React Component re-render হয়ে আমাদেরকে নতুন state দেয়। আমাদের মনে এখন স্বভাবতই প্রশ্ন আসে, useReducer যদি useState এর মতই একই কাজ করে তাহলে এটার দরকার কি আমাদের? ভালো প্রশ্ন। মূলত আমাদের ইন্টারনাল ষ্টেটের উপর ডিপেন্ড করে যে আমরা কোনটা…

আগের ২ পর্বে আমরা কাভার করেছি useState এবং useEffect. এই পার্টে আমরা ইনশাল্লাহ useRef hook নিয়ে আলোচনা করবো। প্রথমে আসা যাক এটার অফিসিয়াল সংজ্ঞায়ে। useRef hook হচ্ছে একটি ফাংশন যেটা আমাদের একটি mutable (মানে যারা value modify করা যায়) রেফ (ref) অবজেক্ট রিটার্ন করে। এবং এই অবজেক্ট এর একটি প্রপার্টি হচ্ছে current যেটাতে আমরা initial ভেলু সেট করতে পারি আর্গুমেন্ট পাস করে। আর এই অবজেক্টটি আমাদের component আর পুরো লাইফ সাইকেল জুড়ে পারসিস্ট থাকে। উপড়ের অংশটি হচ্ছে আমাদের সংজ্ঞা, এটা দেখে ভড়কে যাওয়ার কিছু নেই। আমরা এখন সহজ ভাবে এটা বুঝার ট্রাই করবো। আমরা ফার্স্টে বললাম যে useRef hook আমাদের…

পর্ব ২ useEffect আগের পর্বে আমরা hooks এর ব্যাকগ্রাউন্ড এবং useState hook নিয়ে আলোচনা করেছি। এই পর্বে আমরা useEffect hook নিয়ে আলোচনা করবো ইনশাআল্লাহ্‌। React.useEffect হচ্ছে React এর একটি বিল্ট-ইন hook যেটার মাধ্যমে আমরা আমাদের যেকোনো কাস্টম কোড রান করাতে পারি React render এবং re-render এর পরে। React.useEffect(() => { // 1 -> callback function // your side-effect code here. }, [] // 2 -> dependency array) উপড়ের কোডের ভিতরে আমরা একটু খেয়াল করে দেখি যে আমি ১, ২ দিয়ে ২ টি জায়গায় লেবেলিং করেছি। আমাদেরকে React.useEffect এর কাজ বুঝতে হলে এই ১ এবং ২ পয়েন্ট ২টী ভালমতো বুঝা লাগবে।…

Hooks এর সাথে পরিচিতি React এর ডকুমেন্টেশন থেকে আমরা জানতে পারি hooks হচ্ছে react এর নতুন এডিশন যেটার মাধ্যমে আমরা React এর স্টেট এবং অন্যান্য ফিচার ব্যাবহার করতে পারব class component না লিখেই, অর্থাৎ ফাংশনাল কম্পোনেন্টের মাধ্যমেই। যেকোনো ইন্টারেক্টিভ অ্যাপ্লিকেশনে আমাদের অ্যাপের স্টেট ধরে রাখা লাগে (store) কোথাও না কোথাও এবং এই স্টেট এর ডিপেন্ড করেই কিন্তু আমরা আমাদের আপ্লিকেশনকে ইন্টারেক্টিভ করে থাকি। এখন আসা যাক তাহলে React এ। আমরা React এ কিছু স্পেশাল ফাংশন ব্যাবহার করে থাকি আমাদের অ্যাপকে ইন্টারেক্টিভ করার জন্যে। এই ফাংশন গুলোকেই আমরা "Hooks" বলি। React আমাদের এরকম কিছু কমন বিল্ট-ইন hooks দিয়ে দিয়েছে। React.useStateReact.useEffectReact.useContextReact.useRefReact.useReducer এখানে…

This might be a common requirement that sometimes in our forms we need to add or remove input fields dynamically and each input field needs to be attached with its corresponding value. Recently I have implemented this. We can do it in different ways. So here goes my implementation. In order to achieve this first, I declare 2 states and 1 ref. // this will be attached with each input onChangeText const [textValue, setTextValue] = useState(''); // our number of inputs, we can add the length or decrease the length const [numInputs, setNumInputs] = useState(1); // all our input fields…

I have recently built a simple horizontal calendar in React Native. Today in this post, I will share how I implemented it. We can use a horizontal flat list to render my horizontal scrollable calendar. First I populate the data of my flat list with dates. I generate 14 days (we can generate any number of dates we want) and fill it in the flat list. It looks like the following: With that, we get our flat list ready with 14 days. The data array is of type Date[] where the first value is the day before 14 days from…

expo tools Expo কি? Expo হচ্ছে এমন একটি প্লাটফর্ম যেটা আপনাকে Universal React অ্যাপ তৈরি, বিল্ড, ডিপ্লয় এবং খুব দ্রুত পুনরাবৃত্তি করতে সহায়তা করে। এটা আপনাকে একটা স্ট্যান্ডার্ড টুলসেট প্রভাইড করে যার জন্যে আপনার React Native অ্যাপ বানানো আরও সহজ হয়ে যায়। যেহেতু React Native অ্যাপ বানাতে Expo লাগে না কিন্তু এটি ডেভলপারদের অনেক ভাবে হেল্প করে। কয়েকটি Expo টুলিং এর সাথে পরিচিতি হই। ১। Expo Go - এটি হচ্ছে একটি Expo ক্লাইন্ট অ্যাপ যেটি আপনি আপনার ফোনে ডাউনলড করে আপনার অ্যাপ ডেভেলপ করতে পারবেন। মানে আপনি যা কোড করছেন সেটি আপনি এই ক্লাইন্ট অ্যাপে রান করে দেখতে পারবেন ইনস্ট্যান্ট।…