DEV Community: Arifur Rahman

Laravel সম্পর্কের চিটশিট

Arifur Rahman — Fri, 04 Oct 2024 21:32:45 +0000

সম্পর্কের ধরন	বর্ণনা	উদাহরণ	কোড স্নিপেট
hasOne	এক প্যারেন্টের একটি চাইল্ড থাকে।	User এর একটি Profile আছে	`public function profile() { return $this->hasOne(Profile::class); }`
belongsTo	একটি চাইল্ড একটি প্যারেন্টের অন্তর্ভুক্ত।	Profile একটি User এর অন্তর্ভুক্ত	`public function user() { return $this->belongsTo(User::class); }`
hasMany	এক প্যারেন্টের অনেক চাইল্ড থাকে।	Class এর অনেক Student আছে	`public function students() { return $this->hasMany(Student::class); }`
belongsToMany	দুটি মডেলের মধ্যে বহু-টু-গণনা সম্পর্ক।	Teacher অনেক Subject পড়ান	`public function subjects() { return $this->belongsToMany(Subject::class); }`
hasManyThrough	অন্য একটি মডেলের মাধ্যমে একটি মডেলকে অ্যাক্সেস করা।	Country এর অনেক Post আছে User এর মাধ্যমে	`public function posts() { return $this->hasManyThrough(Post::class, User::class); }`
morphOne	এক-টু-এক পলিমরফিক সম্পর্ক।	User এর একটি Image থাকতে পারে	`public function image() { return $this->morphOne(Image::class, 'imageable'); }`
morphMany	এক-টু-অনেক পলিমরফিক সম্পর্ক।	User এর অনেক Images থাকতে পারে	`public function images() { return $this->morphMany(Image::class, 'imageable'); }`
morphedByMany	বহু-টু-গণনা পলিমরফিক সম্পর্ক।	Tag অনেক Post এর সাথে যুক্ত	`public function posts() { return $this->morphedByMany(Post::class, 'taggable'); }`

মনে রাখার টিপস

প্যারেন্ট-চাইল্ড ধারণা: সবসময় সম্পর্কের দিক চিন্তা করুন। hasOne এবং hasMany সম্পর্কের ক্ষেত্রে প্যারেন্ট "মালিকানা" রাখে, যখন belongsTo সম্পর্কের ক্ষেত্রে চাইল্ড "সম্পর্কিত" হয়।
পলিমরফিক সম্পর্ক: মনে রাখবেন, পলিমরফিক সম্পর্ক যেমন morphOne এবং morphMany একটি মডেলকে একাধিক ধরনের মডেলের সাথে সংযুক্ত করতে সক্ষম করে একটি একক সংযোগের মাধ্যমে।
বহু-টু-গণনা: belongsToMany সম্পর্কের ক্ষেত্রে, পিভট টেবিলগুলি দুটি মডেলকে সংযোগ করতে সাহায্য করে, যেখানে উভয় মডেলেই একাধিক ইনস্ট্যান্স থাকতে পারে।

এই চিটশিটটি Laravel সম্পর্কের ধরনগুলির সংক্ষিপ্ত সারসংক্ষেপ। এটি আপনার অ্যাপ্লিকেশন তৈরি করার সময় একটি দ্রুত রেফারেন্স হিসাবে ব্যবহার করুন! যদি আপনার আরও প্রশ্ন থাকে বা আরও ব্যাখ্যার প্রয়োজন হয়, তাহলে নিশ্চয়ই জিজ্ঞাসা করুন!

Ajax

Arifur Rahman — Thu, 03 Oct 2024 07:19:43 +0000

তোমার দেওয়া কোডটি আমি ধাপে ধাপে ব্যাখ্যা করছি, যাতে তুমি সহজেই বুঝতে পারো এবং কখনো ভুলে না যাও। এটি হলো একটি AJAX রিকোয়েস্ট যা XMLHttpRequest ব্যবহার করে API থেকে ডেটা আনে। নিচে প্রতিটি লাইন কীভাবে কাজ করছে তা বাংলায় বুঝিয়ে দিচ্ছি।

১. ফাংশন তৈরি:

function fetchData() {

এখানে একটি ফাংশন তৈরি করা হয়েছে, যার নাম fetchData()। তুমি যখন এই ফাংশনটি কল করবে, তখন এটি সার্ভার থেকে ডেটা আনার জন্য AJAX রিকোয়েস্ট পাঠাবে।

২. XMLHttpRequest অবজেক্ট তৈরি:

var xhr = new XMLHttpRequest();

XMLHttpRequest হলো একটি বিল্ট-ইন জাভাস্ক্রিপ্ট অবজেক্ট, যা AJAX রিকোয়েস্ট পাঠাতে ব্যবহার করা হয়। xhr নামে একটি ভ্যারিয়েবল তৈরি করা হয়েছে, যেটি এই অবজেক্টটি ধারণ করছে।

৩. সার্ভারে GET রিকোয়েস্ট প্রস্তুত:

xhr.open('GET', 'https://api.example.com/data', true);

এখানে xhr.open() মেথডটি ব্যবহার করে সার্ভারে একটি GET রিকোয়েস্ট তৈরি করা হয়েছে। এই রিকোয়েস্টে তিনটি বিষয় আছে:

'GET': এটি HTTP মেথড, যা নির্দেশ করে যে আমরা সার্ভার থেকে ডেটা আনতে চাই (তথ্য পাঠানোর জন্য POST মেথড ব্যবহৃত হয়)।

'https://api.example.com/data': এটি হলো API এর ঠিকানা (endpoint)। তুমি এই ঠিকানায় রিকোয়েস্ট পাঠাচ্ছো, যেখানে থেকে সার্ভার ডেটা ফেরত পাঠাবে।

true: এটি নির্দেশ করে যে রিকোয়েস্টটি asynchronous হবে, অর্থাৎ পুরো পেজটি অপেক্ষা করবে না; ডেটা যখন পাওয়া যাবে তখন পেজের অন্য অংশের কাজ চলতে থাকবে।

৪. ডেটা পাওয়ার পর কী হবে:

xhr.onload = function() {

এটি হলো অনলোড ইভেন্ট, যা তখন ট্রিগার হবে যখন সার্ভার থেকে ডেটা আসবে। অর্থাৎ, যখন রিকোয়েস্ট সফলভাবে সম্পন্ন হবে এবং সার্ভার থেকে ডেটা আসবে, তখন এই ফাংশনটি চলবে।

৫. রেসপন্স স্ট্যাটাস চেক করা:

if (xhr.status === 200) {

এখানে xhr.status চেক করা হচ্ছে। 200 মানে হলো সার্ভার থেকে রিকোয়েস্ট সফলভাবে সম্পন্ন হয়েছে। যদি স্ট্যাটাস 200 হয়, তাহলে আমরা ডেটা প্রসেস করবো। অন্য যেকোনো স্ট্যাটাস মানে হতে পারে যে কোনো সমস্যা হয়েছে (যেমন 404 – পেজ না পাওয়া)।

৬. JSON ডেটা পার্স করা:

var data = JSON.parse(xhr.responseText);

xhr.responseText হলো সার্ভার থেকে আসা রেসপন্স, যা সাধারণত JSON ফরম্যাটে থাকে। JSON.parse() মেথডটি ব্যবহার করে JSON ডেটাকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করা হচ্ছে, যাতে আমরা সেটি সহজে ব্যবহার করতে পারি।

উদাহরণ:

{
    "name": "John",
    "age": 30
}

এটি JSON ফরম্যাট, যা সার্ভার থেকে আসতে পারে, এবং আমরা সেটিকে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করবো।

৭. ডেটা কনসোলে দেখানো:

console.log(data);
console.log(data) ব্যবহার করে আমরা সেই ডেটাকে কনসোলে দেখাচ্ছি, যাতে ডেভেলপাররা সহজে ডেটা দেখতে এবং ডিবাগ করতে পারেন। তুমি ব্রাউজারের কনসোলে ডেটাটি দেখতে পাবে।

৮. রিকোয়েস্ট পাঠানো:

xhr.send();

xhr.send() মেথডটি ব্যবহার করে রিকোয়েস্ট সার্ভারে পাঠানো হয়। যখন রিকোয়েস্ট পাঠানো হবে, তখন সার্ভার সেটি গ্রহণ করবে এবং ডেটা পাঠিয়ে দেবে।

সম্পূর্ণ ব্যাখ্যা:

১. ফাংশনটি তৈরি করা হলো যা AJAX রিকোয়েস্ট পাঠাবে।
২. XMLHttpRequest অবজেক্ট তৈরি করা হলো AJAX রিকোয়েস্টের জন্য।
৩. সার্ভারে GET রিকোয়েস্ট প্রস্তুত করা হলো API থেকে ডেটা আনার জন্য।
৪. রিকোয়েস্ট সফলভাবে ডেটা নিয়ে এলে অনলোড ইভেন্ট কাজ করবে।
৫. যদি স্ট্যাটাস 200 হয়, তাহলে ডেটা প্রসেস করা হবে।
৬. JSON ডেটাকে জাভাস্ক্রিপ্ট অবজেক্টে পার্থক্য (parse) করা হবে।
৭. কনসোলে ডেটা দেখা যাবে।
৮. রিকোয়েস্ট পাঠানো হবে সার্ভারে।

সংক্ষেপে মনে রাখার টিপস:
AJAX দিয়ে API থেকে ডেটা নিতে XMLHttpRequest ব্যবহার করা হয়।
API URL এ রিকোয়েস্ট পাঠিয়ে ডেটা পাওয়া হয়।
ডেটা সাধারণত JSON ফরম্যাটে আসে এবং আমরা সেটি JSON.parse() করে ব্যবহার করি।
এইভাবে প্রতিটি ধাপ অনুসরণ করলে তুমি কখনো এই প্রক্রিয়াটি ভুলবে না!

npm(node package manager) in Bangla

Arifur Rahman — Thu, 04 May 2023 10:53:57 +0000

sass file brower read korte pare na.so sass file k complile kore lage into css.in real world sass file k css comvert korte amader lage build tool.si jonno amra use kori gulp.amader install kora lage npm to run gulp

npm holo javascript er huge part of eco system

npm holo node package manager.npm a ace huge reposotory and mostly open sourse .anyone can those packge for freee.

but why we do need npm?

example :let say we need to build a car.car build korar jonno sobgo part jodi amra nijera create kore that will be expensive and hard.amra jodi car er part golo alada alada kore ani it will be easy for us.

same way npm prebuild code for us that other people already written.amara amader project code golo use korte pari.

author write the code and for their package and publish it on the npm registery .

tarpor tumi jodi ai package ta use korte chaw tomi install korte paro tomar computer a with npm cli or command line inteface .

akane alll kind of package ace small purpose kinba big project er jonnno pacakge pabe.

jokon nodejs install korbe tokon node.js abong npm run hobe same time a .
terminal a giye tomi node er version check korte parbe r npm er version check korte parbe

tumi ai package golo tomar project a use korte parbe.

tumi npm use korte hole tomake node.js install korte hobe tomar computer a .

node.js holo javascript runtime environment .

node.js install korar jonno nodejs website a install korte parben

jokon nodejs install korbe tokon node.js abong npm run hobe same time a .

terminal a giye tomi node er version check korte parbe r npm er version check korte parbe

tahole kon pacake golo tumi use korbe jekane over and thousand package ache ekane.kibabe janbe kon package ta tomar proyojon.actually it depen tumi ki doroner project create korcho.
for example :tumi jodi new vue.js project create korte chaw tahole you need tool like webpack or snowpack

example: amra amade sass file k css a compile korte use korbo gulp .so we need to install a bunch of gulp and sass related packages

kibabe npm package install korbe?

npm package install kora jai

locally
globally

installing locally mean that it will only be accessible from that specific project folder.if you have other project each will have it own set of local project..

to install localpackage youll use the npm cli in your terminal in npm install and name of the package you want for.

for example: to install chalk package .type npm install chalk in your terminal *

enake most package installed globally on your computer.etar mane holo the package functions will be accessible from any directory.
usually you will only globally install packages that are meant to be run on your command line in any directory the gulp cli is one example of this as it will run gulp when you type gulp into your command line from any location to install a pacage globally type in .
npm install gulp

akon amra dekbo basic of installation :

jodi tumi multiple packages use kore thako tomar project a .tahole akta upaye tumi track korte parbe kon package ta tumi install korecho .ta holo package.json file.package.json file er maddome tumi track korte parbe tomar package k.
package.json file also store infomation about your project like name,version,author,and github repository .

package.json * file super useful especially if other people want to clone your project and need all the specific package that you used they can use the package json file to install all of them all at once if they run

npm install

in a folder that the package json file to install all of them all at once if they run npm install in a folder that

package.json file super useful onno developerder jonno .
jodi developer clone korte chi tomar project
abon jesob package tumi use korecho ta proyojon hoi
ta tara use korte parbe jodi tara package json file install kore abong npm run kore
Jodi tara npm install run kore

in a folder jetate package json file ace.npm will read package json file and automatically install all the package listed

this come to deployment too as the server can install the packages right when you deploy

jokon tumo kono project developing korbe tokon prothomei tomi pakage.json file create korbe

tumi pakage.json file file npm er maddome create korte parbe by running npm init on your command line in your project

npm ask you some question like name and description and then create the json file

Tomi jodi manually answer dite na chaw tahole
tahole tomi likbe

npm init -y

eta immediately pacakge.json file create korbe and set kore dibe all the fieldd to a default value and tumi chile always chage the information in the future

Deal with dependency:

jokon tumi pakage.json file create korbe .er por theke tumi pakage install start korte parbe

what does installing a package actually do on your computer?

let say you have a brand new project abong tumar chalk package ta proyojon than type

npm install chalk

sate sate npm installing soro korbe chalk package k

jokon installtion kora ses hoye jabe tokon dekbe package.json file a chalk listed hobe as a dependency

etar mane holo tumi akon chalk package er function tomar code a use korte parbe

amra notice korbo node_modules has been created .ai node_modules a npm store all the file package file.er mane holo node_modules file a sob package file ace.

ai folder a er ekta file dekbe chalk file jeta make sense.but other file golo ki?

keno npm install chalk file er sate sate all the other file install korlo .this is because of dependecy nature of npm

tumi npm package install korcho in your project.to use other peoples code.tahole akon tomar project depent korche oi package er upor.abar oi package ta o use korteche onno kono package.amader node_modules folder a those folder are for package

chalk er package.json file a tumi dekte parbe dependency file .chalk ekane 2 ta dependency file/package niche

ansi-style
supports-color

than tumi jodi ansi-style file a jaw tomi dekba pakage.json file .package.json file a tomi also dekba depencny file color-conver

akon jodi color convert a jaw tokon dekba another package.json file.

supports color package a dependency pakage holo has-flag file
so package.json file also store infomation about your project like name,version,author,and github repository .

npm list dile tumi quickly package golo ki ki ache ta dekte parbe

pakage versioning

how does versioning and updating work in npm?

jodi amra amader terminal a type kori
npm view chalk versions
it will return a list of all the versions of chalk from the begining

tailwind css Basic in Bangla

Arifur Rahman — Thu, 04 May 2023 08:53:27 +0000

Documentation

CDN is not good choice *

Using postcss

     npm install -y

- create css/tailwind.css file
- in tailwind file add
- @tailwind base
- @tailwind components
- @tailwind utilities
যদি তুমি laravel , next.js অথবা vue ইউজ করে থাকেন তবে সবাই postcss ইউজ করে 🚀
install tailwindcss ,postcss, autoprefixer এবং vite via npm . everyting will be dev dependency

     npm install -D tailwindcss postcss autoprefixer vite

in package.json file change write "scripts" : {"dev" : "vite"}

    "scripts": {
  "dev": "vite"
     },

generate postcss config and tailwind conf

  npx tailwindcss init -p

  npm run dev

mobile designe

tips :

. যদি parent এর মদ্যের childrenগলো কে space দিতে হয় তবে spacey-4 দিতে হবে
. BUTTON e inline-block দিলে padding এর spaceing golo টিক তকবে

make it responsive

এখন যদি screen সাইজ বড় করেন তবে ডেকতে পাবেন ইমেজ অনেক বড় হয়ে গেছে । its weird

max-w-md mane div er width max-width bole dilam 448px
div টা কে center করতে mx-auto করে দিলাম

but এখানে problem হল div টার max-width:448px হওয়ায় লার্জ ডিসপ্লে তে অনেক স্পেস খালি দেখাছে

তাহলে any display তে div টা কিভাবে ভাল দেখাবে
breakpoint

tailwind css এর ৫ টা breakpoint আছে

sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }

div er width 640 er upore max-widht hobe max-w-xl

default setting er por প্রথমে sm device er jonne set korbo
then md er breakpoint set korbo
then lg er breakpoint er jonno set korbo
after that xl er
finally 2xl

h1
- default: h1 er font size hobe text-2xl(24px ) এবং sm:text-4xl(36 px) এবং
- font-weight hobe font-bold
p
- defalut : p font আছে তাই আর sm:text-xl(20px) হবে

lg breakpont(sm 640px @media (min-width: 640px) { ... })

lg breakpoint onek khali space dekacce
ami cacci image ek pase takbe ar content ek pashe takbe

img কে lg:hidden করে দিলাম ।
আলাদা div এ image নিলাম hidden করে দিলাম আর lg:block করে দিলাম


<div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl">
      <img class="h-10" src="img/twitch.png" alt="" />
      <img
        class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
        src="img/workonremote.webp"
        alt=""
      />
      <h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl">
        You can work on anywhere .
        <span class="text-red-500">Take advantage of it</span>
      </h1>
      <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
        Twitch will helps you find work-friendly rentals in beautiful so you can
        enjoy some niece weather even when your're not on vacation
      </p>
      <div class="mt-4 sm:mt-6">
        <a
          class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
          href=""
          >Book your space</a
        >
      </div>
    </div>

    <div>
      <img class="hidden lg:block" src="img/workonremote.webp" alt="" />
    </div>

flex er maddome amra split korte pari কিংবা grid er maddome amra split korte pari । আমরা এখানে grid এর মদ্যমে split করব
এই container টা কে আমরা div এর মদ্যের wrap করব

<div class="grid grid-cols-2">
      <div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl">
        <img class="h-10" src="img/twitch.png" alt="" />
        <img
          class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
          src="img/workonremote.webp"
          alt=""
        />
        <h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl">
          You can work on anywhere .
          <span class="text-red-500">Take advantage of it</span>
        </h1>
        <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
          Twitch will helps you find work-friendly rentals in beautiful so you
          can enjoy some niece weather even when your're not on vacation
        </p>
        <div class="mt-4 sm:mt-6">
          <a
            class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
            href=""
            >Book your space</a
          >
        </div>
      </div>

      <div>
        <img class="hidden lg:block" src="img/workonremote.webp" alt="" />
      </div>
    </div>

h1
- default: h1 er font size hobe
- text-2xl(24px ) এবং
- sm:text-4xl(36 px) এবং
- lg:text-3xl(30px)
- font-weight hobe font-bold
p
- defalut : p font আছে তাই আর sm:text-xl(20px) হবে

<div class="grid grid-cols-2">
      <div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 py-48">
        <img class="h-10" src="img/twitch.png" alt="" />
        <img
          class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
          src="img/workonremote.webp"
          alt=""
        />
        <h1
          class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl"
        >
          You can work on anywhere .
          <span class="text-red-500">Take advantage of it</span>
        </h1>
        <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
          Twitch will helps you find work-friendly rentals in beautiful so you
          can enjoy some niece weather even when your're not on vacation
        </p>
        <div class="mt-4 sm:mt-6">
          <a
            class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
            href=""
            >Book your space</a
          >
        </div>
      </div>

      <div>
        <img class="hidden lg:block" src="img/workonremote.webp" alt="" />
      </div>
    </div>

কিভাবে image full and space nibe with relative and absulate

<body class="bg-slate-200">
    <div class="bg-gray-300 grid grid-cols-2">
      <div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 py-48">
        <img class="h-10" src="img/twitch.png" alt="" />
        <img
          class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
          src="img/workonremote.webp"
          alt=""
        />
        <h1
          class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl"
        >
          You can work on anywhere .
          <span class="text-red-500">Take advantage of it</span>
        </h1>
        <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
          Twitch will helps you find work-friendly rentals in beautiful so you
          can enjoy some niece weather even when your're not on vacation
        </p>
        <div class="mt-4 sm:mt-6">
          <a
            class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
            href=""
            >Book your space</a
          >
        </div>
      </div>

      <div class="hidden relative lg:block">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>
  </body>

problem: larger breakpoint e tik ace but smaller breakpoint e designe ভেঙে গেছে

নিচের দিকে breakpoint এ সব gird-cols-2 ডেকাচ্ছে

so grid container e lg:grid-cols-2 dile ei sommar solution hobe . specify kore dite hobe grid-cols-2 ta lg er jonne


<body class="bg-slate-200">
    <div class="bg-gray-300 grid lg:grid-cols-2">
      <div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-48">
        <img class="h-10" src="img/twitch.png" alt="" />
        <img
          class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
          src="img/workonremote.webp"
          alt=""
        />
        <h1
          class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl"
        >
          You can work on anywhere .
          <span class="text-red-500">Take advantage of it</span>
        </h1>
        <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
          Twitch will helps you find work-friendly rentals in beautiful so you
          can enjoy some niece weather even when your're not on vacation
        </p>
        <div class="mt-4 sm:mt-6">
          <a
            class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
            href=""
            >Book your space</a
          >
        </div>
      </div>

      <div class="hidden relative lg:block">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>
  </body>

sm:max-w-md to lg:max-w-full

<div class="bg-gray-300 grid lg:grid-cols-2">
      <div
        class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-48 lg:max-w-full"
      >
        <img class="h-10" src="img/twitch.png" alt="" />
        <img
          class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
          src="img/workonremote.webp"
          alt=""
        />
        <h1
          class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl"
        >
          You can work on anywhere .
          <span class="text-red-500">Take advantage of it</span>
        </h1>
        <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
          Twitch will helps you find work-friendly rentals in beautiful so you
          can enjoy some niece weather even when your're not on vacation
        </p>
        <div class="mt-4 sm:mt-6">
          <a
            class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
            href=""
            >Book your space</a
          >
        </div>
      </div>

      <div class="hidden relative lg:block">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>

xl breakpont (xl 1280px @media (min-width: 1280px) { ... })

sm  640px   @media (min-width: 640px) { ... }
md  768px   @media (min-width: 768px) { ... }
lg  1024px  @media (min-width: 1024px) { ... }
xl  1280px  @media (min-width: 1280px) { ... }
2xl 1536px  @media (min-width: 1536px) { ... }

h1
- default: h1 er font size hobe
- text-2xl(24px ) এবং
- sm:text-4xl(36 px) এবং
- lg:text-3xl(30px)
- xl:text-4xl(36px)
- font-weight hobe font-bold
p
- defalut : p font আছে তাই আর sm:text-xl(20px) হবে

xl:max-w-xl set on content


<div class="bg-gray-300 grid lg:grid-cols-2">
      <div
        class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-48 lg:max-w-full"
      >
        <div class="xl:max-w-xl">
          <img class="h-10" src="img/twitch.png" alt="" />
          <img
            class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
            src="img/workonremote.webp"
            alt=""
          />
          <h1
            class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl"
          >
            You can work on anywhere .
            <br class="hidden lg:inline" />
            <span class="text-red-500">Take advantage of it</span>
          </h1>
          <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
            Twitch will helps you find work-friendly rentals in beautiful so you
            can enjoy some niece weather even when your're not on vacation
          </p>
          <div class="mt-4 sm:mt-6">
            <a
              class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
              href=""
              >Book your space</a
            >
          </div>
        </div>
      </div>

      <div class="hidden relative lg:block">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>

xl:mr-0

  <div class="bg-gray-300 grid lg:grid-cols-2">
      <div
        class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-48 lg:max-w-full xl:mr-0"
      >
        <div class="xl:max-w-xl">
          <img class="h-10" src="img/twitch.png" alt="" />
          <img
            class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
            src="img/workonremote.webp"
            alt=""
          />
          <h1
            class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl"
          >
            You can work on anywhere .
            <br class="hidden lg:inline" />
            <span class="text-red-500">Take advantage of it</span>
          </h1>
          <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
            Twitch will helps you find work-friendly rentals in beautiful so you
            can enjoy some niece weather even when your're not on vacation
          </p>
          <div class="mt-4 sm:mt-6">
            <a
              class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
              href=""
              >Book your space</a
            >
          </div>
        </div>
      </div>

      <div class="hidden relative lg:block">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>

2xl breakpoint

2xl:grid-cols-5 2xl:col-span-2 2xl:col-span-3

<div class="bg-gray-300 grid lg:grid-cols-2 2xl:grid-cols-5">
      <div
        class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:px-12 lg:py-48 lg:max-w-full xl:mr-0 2xl:col-span-2"
      >
        <div class="xl:max-w-xl">
          <img class="h-10" src="img/twitch.png" alt="" />
          <img
            class="mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-64 sm:w-full object-cover object-center lg:hidden"
            src="img/workonremote.webp"
            alt=""
          />
          <h1
            class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 sm:text-4xl lg:text-3xl xl:text-4xl"
          >
            You can work on anywhere .
            <br class="hidden lg:inline" />
            <span class="text-red-500">Take advantage of it</span>
          </h1>
          <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
            Twitch will helps you find work-friendly rentals in beautiful so you
            can enjoy some niece weather even when your're not on vacation
          </p>
          <div class="mt-4 sm:mt-6">
            <a
              class="inline-block bg-red-500 text-white px-5 py-3 rounded-lg font-semibold font-medium shadow-lg shadow-red-400 uppercase tracking-widest sm:text-base"
              href=""
              >Book your space</a
            >
          </div>
        </div>
      </div>

      <div class="hidden relative lg:block 2xl:col-span-3">
        <img
          class="absolute inset-0 w-full h-full object-cover object-center"
          src="img/workonremote.webp"
          alt=""
        />
      </div>
    </div>

hover, Focus and Other States

link

hover

 bg-red-500 hover:bg-red-400

hover:-translate-y-0 er maddome 2px lift hobe

hover:-translate-y-0

transform er maddome any transform will be apply

focus

focus:ring

focus:ring দিলে blue outline দেখা যাবে

focus:ring

focus:ring-offset-2

focus:ring-offset-2 দিলে blue outline দেখা যাবে

focus:ring-red-500

active

active:bg-red-600

Browser Workflow in Bangla

Arifur Rahman — Fri, 28 Apr 2023 17:09:05 +0000

React JS এর ক্ষেত্রে আমরা বারবারই একটা fancy word শুনে থাকি, সেটা হলো Virtual DOM! যে myth টা মানুষের মধ্যে ঢুকে আছে সেটা হলো - Virtual DOM, আমাদের চির পরিচিত browser DOM এর থেকে অনেক fast এবং একারণে vanilla DOM এর থেকে React অনেক fast User Interface Render করে! আসলেই কি তাই? React কি শুধুই Performance achieve করার জন্যই Virtual DOM use করে?

আমরা শুনে থাকি DOM(document object model) টা slow and inefficient । কিন্তু এটা টিক না ।

react এর dom এর ক্ষেত্রে বলা হয় এটা dom(document object model ) এর চেয়ে বেশি efficient and fast way তে view render করতে পারে ।

*we will discuss here why reactDOM faster and efficent.
what is vartual dom
why we will choose react *

DOM কি আসলেই slow ?

truth is DOM আসলে যতয়েষ্ট fast । dom theke কোন element add or রিমুভ করা simple একটা জাভাস্ক্রীপ্ট object এ property set করার মতো ।

যে process টা slow তা হল dom change হওয়ার পরে আমাদের চোখের সামনে সেটাকে দেখানোর জন্যে browser কে যে কাজটা করতে হয় সেই
process টা slow

সেটা বুজতে হলে আমাদের ব্রাউজার এর workflow টা বুজতে হবে

browser workflow

browser যখন html file receive করে ব্রাউজার এর render enginee সেটাকে parse করে (html parse ) এবং একটা dom tree বানাই । dom tree তে সব html এলিমেন্ট এক এক টা node হিসাবে থাকে
একই সাথে html এর সাথে যে css style গুলো এসেছিল সেগুলো আবার css parser এর কাছে যায় এবং সেটাকে parse করে document object (dom) এর মতো আর একটা model বানাই তাকে cssom বলে

তাহলে dom হল html এর object model আর ccsom হল style এর অবজেক্ট মডেল

এই parse css আর parse html মিলে আর একটা render tree নামে tree বানাই
এই render tree কে layout নামের একটা prase এর মদ্যে দিয়ে যেতে হয় এই layout prase এ প্রতিটা render tree র element এর coordinate হিসেব করে element গুলোর সাথে attatch হয়ে যায় যেন screen এর কোন জায়গায় actually সেটা print হবে সেটা সে বুজতে পারে ।
যেহেতু এখন render tree এর কাছে element আছে সেগুলোর style আছে এবং কোন জায়গায় print করতে হবে সেগুলোর coordinate আছে তাই এবার last prase painting এ paint বা print করে দেয় যাতে আমরা দেখতে পরি বা display করতে পরি!

git and github in bangla

Arifur Rahman — Thu, 27 Apr 2023 06:57:22 +0000

 git init

 git config --global user.name ”Arifur”

git config --global user.email ”arifur@gmail.com”

 git add .

git commit -m "v one"

 git log --oneline

 git status

 git config --global core.autocrlf true

 git config --global http.postBuffer 524288000

git push origin master

Git vs. GitHub: What's the difference?

Git a sadaronoto doi babe kaj kora jai

git gui
git terminal

Git gui r git terminal er modde git terminal use kora better.git gui holo graphical user interface

Sobar prothom amara akta working directory use korte hobe .je working directory te আমরা amader project file golo rakbo.ai working directory ta amra git er reposrity hisabe initialliaz korbo.

Lets create a git reposority

Prothom a floder create korte hobe .folder er name dibo anything u want ami akane folder name dilam pc
ai pc name er floder ta k git er reposority hisabe create korte hobe .jar fole ai folder a kono codeing kori change kori .tokon ta git track korte pare.

Git gui diye repository create kora :

Protom e pc folder a jete hobe r right click korle git gui name a option a click kore git gui ta open korbo

Then create new reposority te click korbo

Then browse name er option a giye pc folder ta select korte hobe .then pc folder a .git name file asbe.

Terminal diye repository create kora :

Coffee name akta noton folder korbo
Then coffee folder a gitbash terminal open korbo

Git init

er maddome coffee folder er repository create hoye gelo . akon Jodi ai coffee folder a kono kicho poriborton kori tobe ta git track korbe

Jeheto git a oonek jon mile kaj kora jai seheto git er o kinto idenfication dorkar .er janno akta user name r email git er modde diye dite hobe

Git a user name r email 2 ta way te deya jai akta holo

1.globally

2.locally

Globally kibae user name r email setup:

protekta floder er jonno aki name r email

$ git config --global user.name ”Arifur”

$ git config --global user.email ”arifur@gmail.com”

locally kibae user name r email setup:

protekta floder er jonno alada alada name r email

$git config user.name ”Arifur”

$git config git user.email ”Arifur@gmail.com”

Apner git a kon kon user name r email set kora ace ta kibabe ber korbo:

$ git config –list

Rescan,unstage,stage

Git gui te amra stage unstage kore cilam

Akon ta amra terminal er madomme korbo

$git status

Er mane holo cold and hot name r file ta git track kora soro kore nai

How to stage?

$ git add cold.txt

Er maddome staging kora hoi

Kibabe bojbo staging kora hoyece kina:

$ git status

Ebabe akta akta kore kob ei somoi sapekoo.tar jonno 2ta shortcut code ace ta holo

 git add --all

git add .

remember ekane fullstop ace

Attokon ja korlam ta holo working area theke staging area te niye gelam

Steging area the niye jawar por sei change golo k commit korte hobe

$ git commit

$ git commit like enter click korle onno akti terminal a chole jabe

How to commit

$ git commit

$ git commit like enter click korle onno akti terminal a chole jabe

Then I button press korle insert option asbe

Akon commit er je massage ta add korte cacci ta likbo

Erpor keyboard er esc button click korte hobe tarpor press korte hobe :x

Fole 2 ta file chang hoyeche

How to commit(shortcut)

   $git commit -m “chocolate added”

  $git commit -m "v one"

Git log

Git log er kaj holo ai porjonto apni joto golo comit kore chen ta deka

$ git log

$ git log –oneline

er sobgolo short kore dekabe

File a chane ene exprement

File kicho add kore

Then terminal e $git status run korle dekabe modifier:je file a midify korhi

Tarpor git staging korbo $git add . er maddome

Tarpor git comit korbo

$ git commit -m "ice cube added"

Er maddome

Tarpor amra ki ki kaj koreci ta dekbo

$ git log --oneline

Er maddome

Git checkout

Ami bolbosto ice cube stage a chole gechi ami ager stage chole jete cai.

$git checkout 690f09

$git checkout 85167d5

$git checkout master dile ager kaj e fire jabo

Git diff

Git diff er maddome last er stage ace sei stage theke akon je stage ace tar different tole dore

$git show

Chochalate added a ki ki proriborton hoyeche ta apni $git show er maddome dekte parben

$git rm

Akon remote repository er sate local repository er connect kibabe hoi?

ortat github ba gitlab er sate local repository kibabe connect hobe ba kibabe sync hobe.ortat apner local repository je kaj golo korche ta jeno remote repository te atumaticly chole jai.

Github accout open

Nije nije kore naw

Kibabe amder project github account e reke debo?

Sei jonno github e a reposority create korte hobe.

Eta copy korar por terminal e giye amra command ta past korbo

Er fole local reposiroty the je project ace ta amra remote repository the push kore patiye debo

Ekane github username r password dite hobe

File golo successfully remote repository the chole eseche

Ssh key

Ekane akta problem holo jokon file ta push korben tokon user name r password ta bar bar chibe so eta akta worse

Ei sommosa somadan er jonno amra use korbo ssh key

Lets go….

start from here

Then terminal a

$ ssh-keygen -t rsa -b 4096 -C "_your\_email@example.com_"

Then enter

> Enter a file in which to save the key (/c/Users/you/.ssh/id*rsa):*[Press enter]_

Then

$ eval $(ssh-agent -s)

Ei code run korle apnak a agent code dibe

Agent pid 59566

Then

$ ssh-add ~/.ssh/id_rsa

Code ta like run koron enter press korte hobe

Eake password ta abr dite hobe

Last apnak poro jinis ta copy korte hobe .copy kore apner github a eta add korte hobe

Tahole eta kibabe copy korben

$ clip < ~/.ssh/id_rsa.pub

Eta run korle sate sate eta apner clipboard a copy hoye giyeche

Akon amra amader github e amader key ta add korbo

Add shh key the press korbo

Then create reposory the click korbo

Terminal e past korbo

Then yes diben.yes dile project ta user name email password chara push hoye giye che .

Then refresh dile project ta github a chole asbe

Ssh key process end here

Remote repository theke local repository ba working directory the clone kore kibabe niye aste paren ?

Way1:

But this is not goot way

Way2(git clone):

(git clone) er name change:

Git fetch git pull

ekane ai project ti push pull korle user name r password r chibe na .

ai project dibe amra apnak fetch and pull dekabo so

ai project er remote repository te chole jabo

then amade student.txt file ace tar modde kicho likbo ba poriborton korbo

file er edit option a giye amra student file ta the kicho edit korbo ba poriborton korbo

edit kora por commit option e giye kicho add korbo

ei edit ti Jodi amra local repository the deki ta hole deka jabe student.txt file a kichoi add hoi nai

Ekane $git status diye dekle dekben akne kono kicho leka nai

Erpor ekane $git fetch like enter press korbo then password debo

Er pole local repository bojte parbe ekane a1 commit eseche

But student.txt file one korle deben kono kichp add hoi nai

Tar jooono $git pull like enter press korle r ssh er password ta debo dekben student.txt file a add hoyeche

***remember git fetch holo github er file er je change golo ace ta locol repository the obogoto kora .r git pull holo remote repository ba github te je poribor hoiye ta local repository te niye asa

Git branching:

$git branch idbranch er maddome branch create kora hoi

$git branch er madomme koita brach ace ta jana jai

$git checkout idbrach er maddome ak branch theke onno branch e jawa jai

Branch create kora sate sate brance poriborton kora jai kibabe?

$git checkout -b home-branch

Abar master branch e jawae jonno ki korte hobe?

$git checkout master

Home branch er change golo kibabe master branch e niye jabo?

$git marge home-branch

Kibabe akta branch delete korbo?

$git branch –d idbranch

git stash and clean

Add image/screenshot of your project to your GitHub repository

How can I rename a Git branch?

There may be times when you need to rename a Git branch. This is because if the naming is wrong and other developers continue to work with it, you may run into problems. Fortunately, despite the tight integration and various forks, if you want to rename a Git branch, it’s not a big issue. To do this, use the -m command. The corresponding syntax always follows the same structure:

git branch -m <old-name> <new-name>

However, there are differences between branches that you edit locally and those that are already remote. Below we explain the steps for both cases.

Rename a local Git branch

A local Git branch exists only on your computer. You make changes and tests here without other developers noticing. Renaming it can therefore be done quickly.

In the command line, select the Git branch you want to rename. The command for this is

git checkout old-name

You will get a confirmation that you have selected the correct branch. This will read Switched to branch 'old-name'
Now perform the actual rename for the local Git branch. The appropriate command for this is:

git branch -m new-name

Alternatively, you have the option to rename the Git branch via the master. To do this, use the following steps:

Switch to the master via the command

git checkout master

Now enter the following command if you want to rename a

Git branch: git branch -m old-name new-name

To ensure that the rename was successful, retrieve the current status of the branch using the

git branch -a

command.

Renaming a remote Git branch

In a remote repository, you cannot simply rename a Git branch, as this would lead to complications. Instead, you need to delete the old name and then add the branch with the new name. Fortunately, this is not too hard either and can be done with a few simple commands. As with the local branch, you have two options.

First, make sure the local branch has the correct, new name. The appropriate command is

 git branch -a

Now delete the branch with the old, incorrect name from the remote repository. To do this, use the following command:

git push origin --delete old-name

Verify that the old branch has been deleted properly.
Now add the branch with the correct name. For this, use the command

git push origin -u new-name

Lastly, perform a reset of the upstream branch to ensure that the changes are effective.
However, if you want to rename the remote Git Branch with just one command, you also have the following option.

Enter the following command:

git push origin :old-name new-name

Then also perform a reset of the upstream branch as described above.

Conclusion: Git branch rename

Mistakes happen, and Git is designed to let you rename Git branches easily. It can be done quickly and with a few commands. While the process is a rename in the true sense for local branches, a deletion is necessary in the remote branch. Once the error is fixed, it makes sense to carefully double-check. Afterwards you and other developers can continue working on your project without any restrictions.

React js in Bangla

Arifur Rahman — Wed, 26 Apr 2023 06:58:04 +0000

কেন react useful ? কেন react lagbe ?

 <div class="container">
      <div>
        <h1 id="display">0</h1>
        <div>
          <button id="button">Increment +</button>
        </div>
      </div>
 </div>


    <script>
      const display = document.getElementById("display");
      const button = document.getElementById("button");
      let counter = 0;

      button.addEventListener("click", function () {
        counter++;
        display.textContent = counter;
      });
    </script>

একটা মাত্র counter এর জন্যে এভাবে টিক আছে । কিন্ত
এটা লার্জার application এর জন্যে applicable না ।

যদি আমাদের aro একটা কাউন্টার এর দরকার হয় । তাহলে আমাদের aro একটা counter ক্রিয়েট করা লাগবে । তারপর id আর class golo change করা লাগবে । তারপর js file এ id আর class গলো change করা লাগবে

 <!-- কেন react useful ? কেন react lagbe ? -->
    <div class="container">
      <div>
        <h1 id="display">0</h1>
        <div>
          <button id="button">Increment +</button>
        </div>
      </div>
    </div>

    <!-- another counter create(if i create with same name it will show error) -->
    <div class="container1">
      <div>
        <h1 id="display1">0</h1>
        <div>
          <button id="button1">Increment +</button>
        </div>
      </div>
    </div>
    <script>
      const display = document.getElementById("display");
      const button = document.getElementById("button");
      let counter = 0;

      button.addEventListener("click", function () {
        counter++;
        display.textContent = counter;
      });

      //   another counter create(if i create with same name it will show error)
      const display1 = document.getElementById("display1");
      const button1 = document.getElementById("button1");
      let counter1 = 0;

      button1.addEventListener("click", function () {
        counter1++;
        display1.textContent = counter1;
      });
    </script>

এটা লার্জার application এর জন্যে applicable না ।সে জন্যে react আসছে

whyNeedReactandProblemSolve এই branch e amrar react js add korbo (uporer counter system ta amra vanilla js diye korecilam ta akon amra korbo react js diye)

how to add react js

add react to a website

with cdn

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="counter.js"></script>

</body>
  </body>
</html>

counter js file

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
// render: ƒ render(element, container, callback)
// render() method 2ta parameter recive kore 1.ki print korbe 2. kon jaigai print korbo
ReactDOM.render('hello world', domContainer);

both are object

React হল htmlগলো generate করবে আর create করবে

ReactDOM হল আমাদের browser এর dom এ render করবে যেন আমরা ডেকতে পাই

তাহলে ২ টা আলাদা কেন ? কারণ react সুদমাত্র browser এর জন্যে বানান হয় নাই । react mobile এর জন্য ও বান্নান হয়েছে । তখন আমরা ReactDOM এর পরিবর্তে ReactNative use করব

আমরা always use করব react । ৯০% কাজ করবে react . এবং বাকি কাজ করবে ReactDOM display করার জন্যে

note

ReactDOM.render is no longer supported in React 18

render: ƒ render(element, container, callback)

result

ReactDOM diye amra sodomatro text render korechi . কিন্তু আমরা চাইলে যে কুন কিছ render করতে পরি । তার জন্যে আমরা use করব React library . react amader kicho useful function diyeche jegolo diye amra react element banate pari

react.createElement()

lets create first react element with react.createElement

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div",null,"hello world3");

ReactDOM.render(myElemnt, domContainer);

React.createElement এর মদ্যমে আমরা আমদের এলিমেন্ট create করলাম. এখানে আমরা React.createElement() এর মদ্যে ৩ টা parameter পাঠাবো । । ১.কি এলিমেন্ট ক্রিয়েট করতে চাচী । আমরা div এলিমেন্ট create করতে চআছি ২.কি datatype পাস করতে হবে ৩.সেই এলিমেন্ট এর ভেতরে কি কন্টেন্ট থাকবে।

এখানে আমরা react এলিমেন্ট create করলাম । html এলিমেন্ট না

last এ আমরা ReactDOM কে বলে দিলাম myElement কে root div এ render কর

ReactDOM.render(myElemnt, domContainer);

কিভাবে React.createElement() এর মদ্যমে div এর মদ্যে p add korbo

    <div id="root"></div>
    <div id="root2"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="counter.js"></script>

counter.js

console.log(React);
console.log(ReactDOM);

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div",null,"hello world3");
ReactDOM.render(myElemnt, domContainer);


// div এর মদ্যে p add করতে চাচী
const domContainer2 = document.querySelector('#root2');
const myElemnt2 = React.createElement("div", null, React.createElement("p",null,"hello world4"));
ReactDOM.render(myElemnt2, domContainer2);

যদি div এর মদ্যে ২ টা p দিতে চাই

 <body>
    <div id="root"></div>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="counter.js"></script>
  </body>

counter.js

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div", null,[
    React.createElement("p", null, "hello world"),
    React.createElement("p", null, "hello world")
]);
ReactDOM.render(myElemnt, domContainer);

React library টা any react element create kore dei আর
ফাইনালি ReactDOM react element recive করে সেটা কে আমদের browser dom এর জন্যে html element বানিয়ে দেয় মানে browser e render kore dei

ReactDOM এর জায়গায় মোবাইল এর জন্যে আমরা ইউজ করতে পরি ReactNative

এখন question হল react দিয়ে আমরা এভাবে এলিমেন্ট create করে আমাদের লাভ কি ?

const domContainer = document.querySelector('#root');
const myElemnt = React.createElement("div", null,[
    React.createElement("p", null, "hello world"),
    React.createElement("p", null, "hello world")
]);
ReactDOM.render(myElemnt, domContainer);

এভাবে করলে জিনিসটা আরো কোটিং হয়ে গেল । আমরা যখন html লিখি dom কিন্ত আমাদের এভাবে এইচটিএমএল এলিমেন্ট ক্রিয়েট করে

suppose:

const domContainer = document.querySelector('#root');
let p = document.createElement("p");
p.innerHTML = "hello vanilla js";
domContainer.appendChild(p);

result

html এ আমরা এভাবে ই লিখী । কারণ এই সীনটেক্স টা মদের জন্যে সহজ


<div id="root">
   <p>hello vannilla js</p>
</div>

আমরা এভাবেই লিখী কিন্ত ব্রাউজার আমাদের এইচটিএমএল এলিমেন্ট parse kore createElement er madoome element create kore

const domContainer = document.querySelector('#root');
   let p = document.createElement("p");
   p.innerHTML = "hello vanilla js";
   domContainer.appendChild(p);

html সদমাত্র আমাদের এই কাজটা কে সহজ করে দেয়
একটা সহজ সীটেক্টটিক সুগার দেয় যাতে আমরা সহজে UI টা বানাতে পরি

react o same ভাবে তার createElement function diye নিজের জন্যে এলিমেন্ট বানিয়ে নেই এবং সব এলিমেন্ট জোড়া লাগিয়ে তার একটা seperate DOM create kore । এটাকে বলে VIRTUAL DOM

আমরা html element বানাই html markup syntex diye . টিক তেমনি react o amader তাদের একটা markup syntex দিয়েছে যেটা দিয়ে আমরা markup syntex element বানাতে পারি । এটাকে JSX - JAVASCRIPT XML বলে । যেটা ডেকতে ৯০% html এর মতো কিন্ত html না ।

JSX use করে আমরা react element banate pari

// ! create react element using jsx
const myElement = (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)

first bracket এর ভেতরে রেখে একটা variable এর ভেতরে রাখলে এটা createElement call kore kore একটা react এর এলিমেন্ট ক্রিয়েট করে দিবে

jsx যদি না তাকত তবে আমাদের এভাবে React.createElement() লিকতে হয়তো


React.createElement(
  "div",
  null,
  React.createElement(
    "h1",
    {id : display,
    },
    "0"
  ),
  React.createElement(
    "div",
    null,
    React.createElement(
      "button",
      {
        id : "button",
      }
      "Increment +"
    )

  )
)

কিন্ত কথা হচ্ছে এই কোডেটা জাভাস্ক্রীপ্ট ফাইল এ লিকচি কিন্ত জাভাস্ক্রীপ্ট jxs কোড বুজে না

const myElement = (
    <div>
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);

সেই জন্যে আমাদের use করতে হবে transpiler যেমন-bable ।
babel এই jsx কে vanilla javascript এ transpile করবে

transpile করার জন্যে আমরা babel ওয়েবসাইট এর সেটাপ এ গিয়ে লিংক টা কপি করে আমাদের index। html ফাইল rakbo

https://babeljs.io/setup/#installation

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="counter.js"></script>

type="text/babel" টাইপ="টেক্সট/বাবেল" দিব

সদারণত থাকে type="text/js"

counter.js file ta babel diye gore asbe

const myElement = (
    <div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);

still why we use react ?

আমাদের এই কাউন্টার এর বাটন এ ক্লিক করলে increment হবে তা কিভাবে করব । এই ফাংশনালিটি গুলো কোথায়
অদ্য করব

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const myElement = (
    <div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>

)
ReactDOM.render(myElement, domContainer);

myElement টা কে simply Increment নামে function এর মদ্যে নিয়ে sekan theke return kore debo নেব.
এর পর ReactDOM.render(Increment(), domContainer); এ increment() function ক্ call kore debo

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    return(<div class="container">
        <h1 id="display">0</h1>
        <div>
            <button>Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(Increment(), domContainer);

still kaj korbe
Increment() না লিখে এভাবে লিকতে পারবে । এটা jsx এ call করার সিস্টেম

kaj korche

button a click korle kivabe increment hobe

```let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
num++;
display.textContent=num
})




ei code ta increment function er niche bosate hobe.ReactDOM.render(<Increment />, domContainer); এর ও নিচে বসতে হবে

যেমন



```sh
const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
    num++;
    display.textContent=num
})

এখন কাজ করবে । কিন্ত কাজ করলেও system টা ত আগের মতো vanilla js এর মতো রইল । এখন আমাদের dom element দরতে হচ্ছে const display = document.querySelector("#display");
dom এ manually content render করতে হচ্ছে display.textContent=num

এবং counter এক এর বেশি হলে আবার কোড dublicate করতে হচ্ছে

তাহলে react এখানে আমাদের কি বেনিফিট দিচ্ছে। befinte পাচ্ছিনা কারণ আমরা react এর সবগলো এখন ও use করি নাই

most important হল আমরা state কে use করি নাই

তাহলে state কি জিনিস । state হল data যা আমরা আমাদের ui এ ইউজ করি

এখানে একটাই state আছে তা হল num=0 । কারণ এই একটাই data change হচ্ছে । এবং সেটার উপর base করে content এর data change হচ্ছে

আমাদের html element এ আমাদের onekgolo state variable থাকতে পারে । react আমাদের এগোল niye কাজ করতে হেল্প করে ।
react বলছে তুমি যদি আমার way তে কাজ কর তবে তোমাকে dom নিয়ে কোন কাজ করতে হবে না । dom react নিজে manage করে । আমরা যদি সময়মতো state change করে দিয়ে react dom manage করে দিবে

lets see how react work for us

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    const reactState = React.useState();
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

// let num = 0;
// const display = document.querySelector("#display");
// const button = document.querySelector('#button');

// button.addEventListener('click', function () {
//     num++;
//     display.textContent=num
// })

আমরা নিচের কোড কমেন্ট করে দেব র increment ফাংশন এর বেতরে একটা variable'নিব reactState নামে ।
তাতে assign করব react এর building মেথড useState React.useState()

এই useState() মেথড টা আমাদের increment ফাংশন এর state manage করে দিবে

useState() এ bydefault একটা value দিয়ে দিতে হয় যেটা আমাদের react state এর default ভ্যালু হিসাবে initially set করে রাখে

এখানে আমাদের state হল num variable টা । so আমরা সেটার ভ্যালু bydefault useState কে দিয়ে দিলাম 0 ।

আমরা চাইলে এখানে useState()এ আমরা যেকোন ভ্যালু দিয়ে দিতে পারব । হতে পারে এটা array , object ,string or null or anything ।

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    const reactState = React.useState(0);
    console.log(reactState);
    return(<div className="container">
        <h1 id="display">0</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

const reactState = React.useState(0);

console.log(reactState);

useState() ফাংশটা আমাদের একটা array return করছে যার দুইটা element আছে

প্রথমটা হল আমাদের state এর value টা ।
দিতীয়টা হল একটা function । এই ফাংশনটর কাজ হল যে parameter আমরা এই ফাংশন
কে দিব সে ওই value টা আমাদের state এ update করে দিবে

এর মানে হল এই function টা আমাদের state এর counter এর value টা আপডেট করে দিতে
help করে

array destructure

array destruring করে আমরা দুইটা জিনিস কে আলাদা করে দুইটা
variable এর মদ্যে নিয়ে নিলাম

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button">Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

array destruring করে আমরা দুইটা জিনিস কে আলাদা করে দুইটা
variable এর মদ্যে নিয়ে নিলাম

const [counter,setCounter] = React.useState(0);

তাহলে কাউন্টার এর ভেতরে থাকছে initial value 0 আর এবং
secondly setCounter variable টা হল একটা function । যেটা দিয়ে আমরা counter এর value টা change করতে পরি

{counter} interpolation এর modde counter variable টা দিলে আমরা initial value 0 পেয়ে যাব

কিভাবে বাটন এ ক্লিক করলে counter update হবে

Increment +
বা
Click me

javascript এ amra onclick এভাবে লিখি

jsx এ

setCounter(counter + 1) }> Increment +

এভাবে লিখতে হবে কারণ এটা jsx । onClick এর C capital hobe equel = dite hobe
তারপর { } interpolation দিতে হবে
setCounter(counter + 1 ) কল করতে হবে । কিন্ত এভাবে call করে দিলে runtime এ এটা কল হয়ে যাবে ।
so আমরা চাচ্ছি যখন বাটন এ ক্লিক করবে তখনই fire হবে । তার জন্যে ()=> arrow function এর মদ্যে দিতে হবে টা setCounter(counter + 1) এই ফাংশন কে রিটার্ন করবে । যাতে call না হয়ে যায়

setCounter(counter + 1) }> Increment +

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button" onClick={()=>setCounter(counter + 1) }> Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(<Increment />, domContainer);

তাহলে react use করে কি সবিধা টা হল ?

প্রথম সুবিধাটা হল আমাদের কে manually dom এর কোন element দরতে হবে না যেমন -
const display = document.querySelector("#display");
display.textContent=num

এভাবে করতে হল না

let num = 0;
const display = document.querySelector("#display");
const button = document.querySelector('#button');

button.addEventListener('click', function () {
    num++;
    display.textContent=num
})

এটা করা লাগবে না

প্রথম সুবিধাটা হল আমাদের কে manually dom এর কোন element দরতে হবে না আর state আর counter এর
value change হলে manually dom এ render করা লাগলো না । আমাদের old js file এ বারবার manually dom
update করা লাগছে । react এ আমরা ভ্যালু টা change করছি reactdom নিজে নিজে তা dom এ আপডেট করে দিচ্ছে
। মনে reactive সে । এটা হল first benifit

react এর main beauty টা হল - আমরা যদি চাই এই কাউন্টার একটার জায়গায় অনেকগোল লাগবে তাহলে component টা কয়েকবার লিখলে চলবে । যেমন --

ReactDOM.render(
    <div>
    <Increment />
    <Increment />
    <Increment />
    </div>
   ,
    domContainer
   );

const domContainer = document.querySelector('#root');
// ! create react element using jsx
const Increment = () => {
    // const reactState = React.useState(0);
    const [counter,setCounter] = React.useState(0);
    return(<div className="container">
        <h1 id="display">{counter}</h1>
        <div>
            <button id="button" onClick={()=>setCounter(counter + 1) }> Increment + </button>
        </div>
    </div>)
};
ReactDOM.render(
    <div>
    <Increment />
    <Increment />
    <Increment />
    </div>
   ,
    domContainer
   );

টিকমত কাজ করছে আর every state টিক মতো manage হচ্ছে । এক এক জায়গায় কাউন্টার এর ভ্যালু এক এক রকম
আমাদের কোন কোড dublicate করা লাগলোনা । তারমানে আমরা পুরো functionality সহ self contain block of component বানাতে পারছি । যার দনিয়া সম্পর্ন আলাদা তাখছে আর differnt দনিয়া create করতে পারছে component call করে। মনে আমরা কম্পোনেন্ট কে reuse করতে পারছি । তাই react কে component library বলা হয়

একটা react application এ multiple component থাকবে আর সবাই self contain functionality নিয়ে বসে থাকবে । একটা react component কে আমরা separate appliction ও বলতে পরি। আমরা একবারে component টা
লিখব আর যতবার প্রয়োজন আমরা component টা কে আমাদের application এ reuse করব

component গলো একবারে আলাদা হওয়ার কারণে বড় team এ separate developer separate component নিয়ে
কাজ করতে পারবে । finally egolo কে জোড়া লাগিয়ে একটা বিশাল web application বানান possible হয়।
এটাই react js এর beauty