Dev With Next

شنو هو Framer Motion؟ Framer Motion هو واحد المكتبة ديال الأنيميشن (الحركات) كتخدم مع React، وداكشي علاش خدام مزيان مع Next.js. كيعطيك الحركات بحال: الظهور والتخبية (Fade…

Updated May 31, 20255 min readSource on GitHub (opens in a new tab)

App Router :#

شنو هو App Router فـ Next.js؟ App Router هو النظام الجديد ديال التوجيه (routing) فـ Next.js، اللي تعوّض pages/ بالـ app/. خدام بـ File-Based Routing ولكن فيه مفاهيم جديدة بحال: Layouts Server Components Client Components Loading / Error pages Nested routes Dynamic segments

الحاجـة	`pages/` Router	`app/` Router
Structure	قديمة وبسيطة	جديدة وأكثر مرونة
Server/Client components	كلشي Client	تقدر تدير Server و Client components
Layout support	خاصك تعاود كلشي	Layout تلقائي بـ `layout.tsx`
Data Fetching	`getServerSideProps`	`async` component مباشرة
File Routing	نعم	نعم (بحال Pages ولكن محسّن)

install App router :#

bash

npx create-next-app@latest my-app

واختار: App Router TypeScript TailwindCSS (اختياري) غادي تلاحظ أنه كاين فولدر app/ ماشي pages/.

bash

app/
├── layout.tsx          -> Layout الرئيسي
├── page.tsx            -> الصفحة الرئيسية (route: /)
├── about/
│   ├── page.tsx        -> صفحة about (route: /about)
├── dashboard/
│   ├── layout.tsx      -> Layout خاص بهاد القسم
│   ├── page.tsx        -> /dashboard
│   ├── settings/
│   │   └── page.tsx    -> /dashboard/settings

الملف	الدور ديالو
`page.tsx`	هو الـ route (كل ملف `page.tsx` = route)
`layout.tsx`	كيتكرر على جميع الصفحات داخل المسار
`loading.tsx`	كيتعرض أثناء الانتظار ديال البيانات
`error.tsx`	كيتعرض فـ حالة error فـ route معين
`not-found.tsx`	خاص بالـ 404 فـ route معين

مثال ديال route بسيط#

/app/about/page.tsx

tsx

export default function AboutPage() {
  return <h1>About Page</h1>
}

SSR & CSR#

المفهوم	المعنى	وقت التنفيذ	شنو كيطرا
CSR	Client-Side Rendering	عند المستخدم (البراوزر)	الكومبوننت كيتعرض من بعد ما تدخل للصفحة
SSR	Server-Side Rendering	فالخادم (السيرفر)	الصفحة كلها كتترندر قبل ما توصل للمستخدم

مثال ديال SSR:

tsx

export default async function HomePage() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()
 
  return <div>{posts.map(p => <p>{p.title}</p>)}</div>
}

كلو كيترندر فالسيرفر ما خاصكش useEffect أو useState

مثال ديال CSR:

tsx

'use client'
 
import { useState, useEffect } from 'react'
 
export default function ClientComponent() {
  const [posts, setPosts] = useState([])
 
  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data))
  }, [])
 
  return <div>{posts.map(p => <p>{p.title}</p>)}</div>
}

خاصك تكتب 'use client' فوق useEffect كتخدم غير فالمتصفح useState باش تخزن البيانات

use client#

شنو هي 'use client'؟ فـ Next.js App Router، الكومبوننتات by default كيكونو Server Components. يعني إذا بغيتي: تستعمل useState تستعمل useEffect تدير event handlers (click, submit...) تدخل localStorage أو window

خاصك تكتب:

tsx

'use client'

فـ أول سطر فـ الملف.

useState :#

شنو كتدير useState؟

tsx

const [count, setCount] = useState(0)

count = القيمة الحالية setCount = باش تبدل القيمة

tsx

<button onClick={() => setCount(count + 1)}>
  Count: {count}
</button>

useHok#

شنو كتدير useEffect؟ هي Hook كتخليك تنفذ كود بعد ما يتعرض الكومبوننت.

Example: جلب بيانات

tsx

useEffect(() => {
  fetch('https://api.example.com')
    .then((res) => res.json())
    .then((data) => setData(data))
}, [])

[] معناها: execute مرة وحدة من بعد الـ render إذا درتي فيها variable, كتخدم كل ما تبدلات

Framer Motion :#

شنو هو Framer Motion؟ Framer Motion هو واحد المكتبة ديال الأنيميشن (الحركات) كتخدم مع React، وداكشي علاش خدام مزيان مع Next.js. كيعطيك الحركات بحال: الظهور والتخبية (Fade In/Out) تحريك العناصر (Slide / Zoom / Rotate) Animations m3a hover, click, exit...

install Framer Motion :#

bash

npm install framer-motion

Typescript#

Why use Typescript :#

شنو هو TypeScript؟ TypeScript هو نسخة محسنة من JavaScript، كتزيد فيها حاجة سميتها "typing"، يعني كتعرف راسك شنو النوع ديال البيانات (string, number, boolean...).

Typescript : كتجنب الأخطاء قبل ما تترونى الكود. كتخلي IDE (VS Code مثلاً) يعاونك فـ الإكمال التلقائي (auto-complete). كتنظم الكود ديالك مزيان، خصوصاً فـ المشاريع الكبار.

الفرق بين JavaScript و TypeScript#

JavaScript	TypeScript
لغة برمجة ديناميكية (مافيهاش أنواع صارمة)	superset ديال JavaScript (يعني JavaScript + types)
ماكيتأكدش من الأخطاء ديال النوع فـ وقت الكتابة	كيعطيك أخطاء قبل ما تترونى الكود (Static Type Checking)
أسهل ولكن معرض بزاف للأخطاء	أصعب شوية ولكن آمن بزاف

الأنواع (Types) فـ TypeScript:#

tsx

let name: string = "Anas"
let age: number = 25
let isActive: boolean = true

Arrays:#

tsx

let tags: string[] = ["cyber", "security"]
let numbers: number[] = [1, 2, 3]

Object (بلا و مع Type):#

**methode 1:

tsx

let user: { name: string; age: number } = {
  name: "Anas",
  age: 25,
}

**methode 2:

tsx

interface User {
  name: string
  age: number
}
 
let user: User = {
  name: "Anas",
  age: 25,
}

Functions:#

tsx

function sayHi(name: string): string {
  return `Hi ${name}`
}

! TypeScript كيعرف شنو النوع ديال name و شنو خاص function ترجع.

Tailwind CSS#

شنو هو Tailwind CSS؟ Tailwind CSS هي واحد المكتبة ديال CSS، كتخليك تكتب الستيل ديالك مباشرة فـ الكلاس بلا ما تحتاج تكتب CSS ملف بوحدو.

يعني: ماشي بحال Bootstrap لي فيها كلاصات جاهزة (btn, card...), Tailwind كتعطيك أدوات باش تبني ديزاين من الزيرو بطريقة سريعة ومرنة.

install tailwind css :#

tsx

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

in tailwind.config.js :

content: [
  "./app/**/*.{js,ts,jsx,tsx}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
]

in globals.css do this :

css

@tailwind base;
@tailwind components;
@tailwind utilities;

exemples :#

text-3xl · تكبير النص هذا الكلاس كيستعمل باش تكبر الخط بزاف. "3xl" معناها الحجم الثالث الكبير. تقدر تبدلها بـ text-sm, text-base, text-lg, text-xl, text-4xl حسب الحجم اللي بغيتي

tsx

<h1 class="text-3xl"> Hi Ana anas </h1>

text-white → لون النص أبيض كتعني: "النص يكون أبيض" خاص الـ background يكون غامق باش يبان تقدر تستعمل: text-black, text-red-500, text-gray-600, إلخ...

html

<p class="text-white">هذا النص أبيض</p>

bg-black → خلفية سوداء bg = background تقدر تبدلها: bg-red-500, bg-blue-200, bg-gray-100, إلخ…

tsx

<div class="bg-black text-white p-4">خلفية سوداء، والنص أبيض</div>

p-4 → Padding داخلي p = padding (المسافة بين المحتوى و حواف العنصر) 4 = وحدة قياس (كل وحدة تقريبا = 4px) تقدر تستعمل: p-0 حتى p-96

tsx

 <div class="bg-gray-200 p-4">عندي padding داخلي</div>

m-2 → Margin خارجي m = margin (المسافة بين العنصر و العناصر الأخرى) يمكن تستعمل: m-0, m-1, m-5, m-10...

jsx

<div class="bg-blue-200 m-2"> 3ndi margin </div>

rounded-lg → زاوية مدورة rounded = خاص الزوايا lg = حجم التدوير كبير شوية كاين rounded-sm, rounded-md, rounded-xl, rounded-full (دائري كامل)

tsx

<div class="bg-green-300 rounded-lg p-4">زاوية مدورة بزاف</div>

text-center → النص فالنص كيخلي text-align: center يمكن تستعمل text-left, text-right, text-justify

tsx

<p class="text-center">أنا النص ديالي وسط</p>

flex → Flexbox كتبدل display باش تولي flex, وتخليك تنظم العناصر حدا بعضهم خاصها دايماً مع justify- و items- باش تحكم في الإتجاهات

tsx

<div class="flex">
  <div>Box 1</div>
  <div>Box 2</div>
</div>

items-center → وسط عمودياً (vertical) خاصك تكون داير flex items-center كتخلي العناصر يتوسّطو عمودياً

tsx

 <div class="flex items-center h-32 bg-gray-100">
  <p>أنا فوسط العلو</p>
</div>

justify-center → وسط أفقياً (horizontal) كتعني: "خلي العناصر يتوسّطو من الليمن لليسار" كاين: justify-start, justify-end, justify-between, justify-around, justify-evenly

tsx

 <div class="flex justify-center">
  <button class="bg-blue-500 text-white px-4 py-2">Button</button>
</div>

shadow-md → Shadow (ظل) كيعطي shadow خفيف من التحت كاين: shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl

tsx

 <div class="bg-white p-6 rounded shadow-md">عندي shadow</div>

md:text-2xl → Responsive: كبر الخط غير فالشاشة المتوسطة md: = ميديم سكرين (768px) text-2xl = فداك الحجم كيتزاد حجم الخط كاين: sm:, md:, lg:, xl:, 2xl:...

html

 <h1 class="text-base md:text-2xl">صغير فالموبايل، كبير فالكمبيوتر</h1>

** Please see the Tailwind CSS Cheat Sheet file

shadcn/ui :

shadcn/ui شنو هو؟ shadcn/ui هي مكتبة كتجمع Components ديال UI (بحال Button, Input, Modal, Card...) مبرمجين بـ Tailwind CSS و Radix UI.

الفكرة ديالها: ماكتعطيكش مكتبة install كـ npm، ولكن كتخليك تنسخ الكومبوننتات لمشروعك، يعني عندك تحكم كامل عليهم وتقدر تعدلهم بحريتك.

install shadcn/ui :#

bash

npx shadcn-ui@latest init

غادي يسولك: واش كتخدم Next.js؟ → قول yes واش كتستعمل TypeScript؟ → yes وين تحب تحط components؟ → مثلا: components

كيفاش تزيد component؟ (مثلاً Button)

bash

 npx shadcn-ui@latest add button

هاد الأمر كيضيف ملف:

components/ui/button.tsx ويمكنك تستعملو مباشرة:

tsx

import { Button } from "@/components/ui/button"
 
<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>

مكتبة	الوظيفة
`shadcn/ui`	Components UI مبرمجين بـ Tailwind
`lucide-react`	Icons SVG متوافقة مع React + Tailwind

Fetch and Axios :#

شنو كيديرو Axios و Fetch؟ الزوج كيديرو نفس الخدمة: كيطلبو البيانات من API (back-end) وكيجيبوك response (JSON ولا غيرو).

Fetch · الطريقة الكلاسيكية فـ JavaScript ➕ المميزات: مدموجة فـ المتصفح (ما خاصكش تنصبو) خفيفة

➖ العيوب: مافيهاش handling errors مزيان خاصك تكتب بزاف الكود فـ كل مرة

مثال:

tsx

const getData = async () => {
 try {
   const res = await fetch('https://api.example.com/data')
   const data = await res.json()
   console.log(data)
 } catch (err) {
   console.error('Error:', err)
 }
}

Axios · مكتبة خارجية ➕ المميزات: Response ديما structured (data, status, headers) كيحسن التعامل مع الأخطاء كيدعم interceptors (مفيد فـ JWT, loading, etc.) ساهل بزاف فـ POST, PUT, DELETE ➖ العيوب: خاصك تركبو:

bash

npm install axios

مثال:

tsx

import axios from 'axios'
 
const getData = async () => {
  try {
    const res = await axios.get('https://api.example.com/data')
    console.log(res.data)
  } catch (err) {
    console.error('Axios Error:', err)
  }
}

Dev With Next

Updated May 31, 20255 min readSource on GitHub (opens in a new tab)

App Router :#

الحاجـة	`pages/` Router	`app/` Router
Structure	قديمة وبسيطة	جديدة وأكثر مرونة
Server/Client components	كلشي Client	تقدر تدير Server و Client components
Layout support	خاصك تعاود كلشي	Layout تلقائي بـ `layout.tsx`
Data Fetching	`getServerSideProps`	`async` component مباشرة
File Routing	نعم	نعم (بحال Pages ولكن محسّن)

install App router :#

bash

npx create-next-app@latest my-app

واختار: App Router TypeScript TailwindCSS (اختياري) غادي تلاحظ أنه كاين فولدر app/ ماشي pages/.

bash

app/
├── layout.tsx          -> Layout الرئيسي
├── page.tsx            -> الصفحة الرئيسية (route: /)
├── about/
│   ├── page.tsx        -> صفحة about (route: /about)
├── dashboard/
│   ├── layout.tsx      -> Layout خاص بهاد القسم
│   ├── page.tsx        -> /dashboard
│   ├── settings/
│   │   └── page.tsx    -> /dashboard/settings

الملف	الدور ديالو
`page.tsx`	هو الـ route (كل ملف `page.tsx` = route)
`layout.tsx`	كيتكرر على جميع الصفحات داخل المسار
`loading.tsx`	كيتعرض أثناء الانتظار ديال البيانات
`error.tsx`	كيتعرض فـ حالة error فـ route معين
`not-found.tsx`	خاص بالـ 404 فـ route معين

مثال ديال route بسيط#

/app/about/page.tsx

tsx

export default function AboutPage() {
  return <h1>About Page</h1>
}

SSR & CSR#

المفهوم	المعنى	وقت التنفيذ	شنو كيطرا
CSR	Client-Side Rendering	عند المستخدم (البراوزر)	الكومبوننت كيتعرض من بعد ما تدخل للصفحة
SSR	Server-Side Rendering	فالخادم (السيرفر)	الصفحة كلها كتترندر قبل ما توصل للمستخدم

مثال ديال SSR:

tsx

export default async function HomePage() {
  const res = await fetch("https://api.example.com/posts")
  const posts = await res.json()
 
  return <div>{posts.map(p => <p>{p.title}</p>)}</div>
}

كلو كيترندر فالسيرفر ما خاصكش useEffect أو useState

مثال ديال CSR:

tsx

'use client'
 
import { useState, useEffect } from 'react'
 
export default function ClientComponent() {
  const [posts, setPosts] = useState([])
 
  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data))
  }, [])
 
  return <div>{posts.map(p => <p>{p.title}</p>)}</div>
}

خاصك تكتب 'use client' فوق useEffect كتخدم غير فالمتصفح useState باش تخزن البيانات

use client#

خاصك تكتب:

tsx

'use client'

فـ أول سطر فـ الملف.

useState :#

شنو كتدير useState؟

tsx

const [count, setCount] = useState(0)

count = القيمة الحالية setCount = باش تبدل القيمة

tsx

<button onClick={() => setCount(count + 1)}>
  Count: {count}
</button>

useHok#

شنو كتدير useEffect؟ هي Hook كتخليك تنفذ كود بعد ما يتعرض الكومبوننت.

Example: جلب بيانات

tsx

useEffect(() => {
  fetch('https://api.example.com')
    .then((res) => res.json())
    .then((data) => setData(data))
}, [])

[] معناها: execute مرة وحدة من بعد الـ render إذا درتي فيها variable, كتخدم كل ما تبدلات

Framer Motion :#

install Framer Motion :#

bash

npm install framer-motion

Typescript#

Why use Typescript :#

الفرق بين JavaScript و TypeScript#

JavaScript	TypeScript
لغة برمجة ديناميكية (مافيهاش أنواع صارمة)	superset ديال JavaScript (يعني JavaScript + types)
ماكيتأكدش من الأخطاء ديال النوع فـ وقت الكتابة	كيعطيك أخطاء قبل ما تترونى الكود (Static Type Checking)
أسهل ولكن معرض بزاف للأخطاء	أصعب شوية ولكن آمن بزاف

الأنواع (Types) فـ TypeScript:#

tsx

let name: string = "Anas"
let age: number = 25
let isActive: boolean = true

Arrays:#

tsx

let tags: string[] = ["cyber", "security"]
let numbers: number[] = [1, 2, 3]

Object (بلا و مع Type):#

**methode 1:

tsx

let user: { name: string; age: number } = {
  name: "Anas",
  age: 25,
}

**methode 2:

tsx

interface User {
  name: string
  age: number
}
 
let user: User = {
  name: "Anas",
  age: 25,
}

Functions:#

tsx

function sayHi(name: string): string {
  return `Hi ${name}`
}

! TypeScript كيعرف شنو النوع ديال name و شنو خاص function ترجع.

Tailwind CSS#

install tailwind css :#

tsx

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

in tailwind.config.js :

content: [
  "./app/**/*.{js,ts,jsx,tsx}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
]

in globals.css do this :

css

@tailwind base;
@tailwind components;
@tailwind utilities;

exemples :#

text-3xl · تكبير النص هذا الكلاس كيستعمل باش تكبر الخط بزاف. "3xl" معناها الحجم الثالث الكبير. تقدر تبدلها بـ text-sm, text-base, text-lg, text-xl, text-4xl حسب الحجم اللي بغيتي

tsx

<h1 class="text-3xl"> Hi Ana anas </h1>

text-white → لون النص أبيض كتعني: "النص يكون أبيض" خاص الـ background يكون غامق باش يبان تقدر تستعمل: text-black, text-red-500, text-gray-600, إلخ...

html

<p class="text-white">هذا النص أبيض</p>

bg-black → خلفية سوداء bg = background تقدر تبدلها: bg-red-500, bg-blue-200, bg-gray-100, إلخ…

tsx

<div class="bg-black text-white p-4">خلفية سوداء، والنص أبيض</div>

p-4 → Padding داخلي p = padding (المسافة بين المحتوى و حواف العنصر) 4 = وحدة قياس (كل وحدة تقريبا = 4px) تقدر تستعمل: p-0 حتى p-96

tsx

 <div class="bg-gray-200 p-4">عندي padding داخلي</div>

m-2 → Margin خارجي m = margin (المسافة بين العنصر و العناصر الأخرى) يمكن تستعمل: m-0, m-1, m-5, m-10...

jsx

<div class="bg-blue-200 m-2"> 3ndi margin </div>

rounded-lg → زاوية مدورة rounded = خاص الزوايا lg = حجم التدوير كبير شوية كاين rounded-sm, rounded-md, rounded-xl, rounded-full (دائري كامل)

tsx

<div class="bg-green-300 rounded-lg p-4">زاوية مدورة بزاف</div>

text-center → النص فالنص كيخلي text-align: center يمكن تستعمل text-left, text-right, text-justify

tsx

<p class="text-center">أنا النص ديالي وسط</p>

flex → Flexbox كتبدل display باش تولي flex, وتخليك تنظم العناصر حدا بعضهم خاصها دايماً مع justify- و items- باش تحكم في الإتجاهات

tsx

<div class="flex">
  <div>Box 1</div>
  <div>Box 2</div>
</div>

items-center → وسط عمودياً (vertical) خاصك تكون داير flex items-center كتخلي العناصر يتوسّطو عمودياً

tsx

 <div class="flex items-center h-32 bg-gray-100">
  <p>أنا فوسط العلو</p>
</div>

justify-center → وسط أفقياً (horizontal) كتعني: "خلي العناصر يتوسّطو من الليمن لليسار" كاين: justify-start, justify-end, justify-between, justify-around, justify-evenly

tsx

 <div class="flex justify-center">
  <button class="bg-blue-500 text-white px-4 py-2">Button</button>
</div>

shadow-md → Shadow (ظل) كيعطي shadow خفيف من التحت كاين: shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-2xl

tsx

 <div class="bg-white p-6 rounded shadow-md">عندي shadow</div>

md:text-2xl → Responsive: كبر الخط غير فالشاشة المتوسطة md: = ميديم سكرين (768px) text-2xl = فداك الحجم كيتزاد حجم الخط كاين: sm:, md:, lg:, xl:, 2xl:...

html

 <h1 class="text-base md:text-2xl">صغير فالموبايل، كبير فالكمبيوتر</h1>

** Please see the Tailwind CSS Cheat Sheet file

shadcn/ui :

shadcn/ui شنو هو؟ shadcn/ui هي مكتبة كتجمع Components ديال UI (بحال Button, Input, Modal, Card...) مبرمجين بـ Tailwind CSS و Radix UI.

install shadcn/ui :#

bash

npx shadcn-ui@latest init

غادي يسولك: واش كتخدم Next.js؟ → قول yes واش كتستعمل TypeScript؟ → yes وين تحب تحط components؟ → مثلا: components

كيفاش تزيد component؟ (مثلاً Button)

bash

 npx shadcn-ui@latest add button

هاد الأمر كيضيف ملف:

components/ui/button.tsx ويمكنك تستعملو مباشرة:

tsx

import { Button } from "@/components/ui/button"
 
<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>

مكتبة	الوظيفة
`shadcn/ui`	Components UI مبرمجين بـ Tailwind
`lucide-react`	Icons SVG متوافقة مع React + Tailwind

Fetch and Axios :#

شنو كيديرو Axios و Fetch؟ الزوج كيديرو نفس الخدمة: كيطلبو البيانات من API (back-end) وكيجيبوك response (JSON ولا غيرو).

Fetch · الطريقة الكلاسيكية فـ JavaScript ➕ المميزات: مدموجة فـ المتصفح (ما خاصكش تنصبو) خفيفة

➖ العيوب: مافيهاش handling errors مزيان خاصك تكتب بزاف الكود فـ كل مرة

مثال:

tsx

const getData = async () => {
 try {
   const res = await fetch('https://api.example.com/data')
   const data = await res.json()
   console.log(data)
 } catch (err) {
   console.error('Error:', err)
 }
}

Axios · مكتبة خارجية ➕ المميزات: Response ديما structured (data, status, headers) كيحسن التعامل مع الأخطاء كيدعم interceptors (مفيد فـ JWT, loading, etc.) ساهل بزاف فـ POST, PUT, DELETE ➖ العيوب: خاصك تركبو:

bash

npm install axios

مثال:

tsx

import axios from 'axios'
 
const getData = async () => {
  try {
    const res = await axios.get('https://api.example.com/data')
    console.log(res.data)
  } catch (err) {
    console.error('Axios Error:', err)
  }
}

App Router :#

install App router :#

مثال ديال route بسيط#

SSR & CSR#

use client#

useState :#

useHok#

Framer Motion :#

install Framer Motion :#

Typescript#

Why use Typescript :#

الفرق بين JavaScript و TypeScript#

الأنواع (Types) فـ TypeScript:#

Arrays:#

Object (بلا و مع Type):#

Functions:#

Tailwind CSS#

install tailwind css :#

exemples :#

shadcn/ui :

install shadcn/ui :#

Fetch and Axios :#

Related notes

App Router :#

install App router :#

مثال ديال route بسيط#

SSR & CSR#

use client#

useState :#

useHok#

Framer Motion :#

install Framer Motion :#

Typescript#

Why use Typescript :#

الفرق بين JavaScript و TypeScript#

الأنواع (Types) فـ TypeScript:#

Arrays:#

Object (بلا و مع Type):#

Functions:#

Tailwind CSS#

install tailwind css :#

exemples :#

shadcn/ui :

install shadcn/ui :#

Fetch and Axios :#

Related notes