تحميل التطبيق
شارك المقالة
شرح TypeScript لإنشاء مشروع React احترافي مع Components و Hooks
رياكت

شرح TypeScript لإنشاء مشروع React احترافي مع Components و Hooks

شرح انشاء React TypeScript احترافي خطوة بخطوة في عالم تطوير الويب الحديث، أصبحت تقنيات مثل React و TypeScript و Next.js…

شرح انشاء React TypeScript احترافي خطوة بخطوة


في عالم تطوير الويب الحديث، أصبحت تقنيات مثل React و TypeScript و Next.js من أهم الأدوات التي يعتمد عليها المطورون لبناء تطبيقات ويب عالية الأداء وقابلة للتطوير.

يعد Next.js TypeScript خيارًا ممتازًا للمطورين الذين يرغبون في إنشاء تطبيقات احترافية تجمع بين قوة React، وتنظيم TypeScript، ومميزات Next.js مثل التقديم من جانب الخادم SSR والتوليد الثابت SSG والتنقل السريع بين الصفحات.

في هذا المقال سنتعلم كيفية إنشاء مشروع Next.js مع TypeScript، ثم نشرح المكونات Components، والتنقل بين الصفحات باستخدام Link، وطريقة استخدام Conditional Rendering، بالإضافة إلى أهم React Hooks مثل useState و useRef و useEffect.

لماذا نستخدم Next.js مع TypeScript؟

استخدام Next.js TypeScript يمنحك تجربة تطوير قوية ومنظمة، خاصة في المشاريع المتوسطة والكبيرة.

أداء ممتاز
يوفر Next.js ميزات مثل Server Side Rendering و Static Site Generation، مما يساعد على تحسين سرعة الموقع وتجربة المستخدم.

سلامة الكود
يساعد TypeScript في تقليل الأخطاء من خلال تحديد أنواع البيانات قبل تشغيل التطبيق.

تجربة تطوير أفضل
يوفر Next.js إعدادات جاهزة تساعدك على بدء المشروع بسرعة دون الحاجة إلى إعدادات معقدة.

جاهزية للإنتاج
المشروع الذي يتم إنشاؤه باستخدام Next.js يكون مناسبًا للتطوير والنشر بشكل احترافي.

المتطلبات الأساسية قبل البدء

قبل إنشاء مشروع Next.js TypeScript يجب التأكد من توفر الأدوات التالية:

– تثبيت Node.js إصدار 14.6.0 أو أحدث – توفر npm أو yarn – استخدام محرر كود مثل VS Code – معرفة بسيطة بأساسيات JavaScript و React

إنشاء مشروع Next.js جديد مع TypeScript

افتح Terminal أو سطر الأوامر، ثم قم بتنفيذ الأمر التالي:

npx create-next-app@latest my-app --ts

تعلم كيفية إنشاء مشروع React TypeScript خطوة بخطوة

هذا الأمر يقوم بإنشاء مشروع Next.js جديد باسم my-app مع دعم TypeScript بشكل مباشر.

بعد انتهاء التثبيت، انتقل إلى مجلد المشروع:

cd my-app

ثم قم بتشغيل خادم التطوير:

npm run dev

بعد ذلك يمكنك فتح المتصفح على الرابط:

http://localhost:3000

ما هي Components في React و Next.js؟

في React و Next.js يتم تقسيم الواجهة إلى أجزاء صغيرة تسمى Components. هذه المكونات قابلة لإعادة الاستخدام، مما يجعل الكود أكثر تنظيمًا وسهولة في الصيانة.

يمكنك إنشاء مجلد باسم components ثم إنشاء ملفات مثل:

– Header.tsx – Desc.tsx

مثال على Header Component


type HeaderProps = {
  title: string;
};

function Header(props: HeaderProps) {
  return <p>{props.title}</p>;
}

export default Header;

في هذا المثال قمنا بإنشاء مكون Header يستقبل خاصية title من نوع string، ثم يعرضها داخل عنصر p.

مثال على Desc Component


type DescProps = {
  esm: string;
};

function Desc(props: DescProps) {
  return (
    <>
      <div>{props.esm}</div>
      <div>{props.esm}</div>
    </>
  );
}

export default Desc;

هذا المكون يستقبل قيمة باسم esm ويعرضها أكثر من مرة داخل الصفحة.

استخدام Components داخل الصفحة الرئيسية

يمكنك الآن استدعاء المكونات داخل الصفحة الرئيسية:

import Header from '../components/Header';
import Desc from '../components/Desc';
import Link from 'next/link';

function App() {
  return (
    <main>
      <Header title="This is the header" />
      <Desc esm="This is the esm prop value" />

      <Link href="/about">Go to About</Link>
      <Link href="/counter">Go to Counter</Link>
    </main>
  );
}

export default App;
تعلم كيفية إنشاء مشروع React TypeScript خطوة بخطوة

بهذا الشكل يصبح الكود منظمًا، ويمكن إعادة استخدام Header و Desc في أكثر من صفحة.

استخدام Link في Next.js

يوفر Next.js مكون Link للتنقل بين الصفحات بدون إعادة تحميل كاملة للصفحة.

مثال:

import Link from 'next/link';

<Link href="/about">Go to About</Link>

لكي يعمل الرابط، يجب إنشاء صفحة باسم about داخل مجلد pages أو app حسب طريقة إعداد مشروعك.

طرق إضافة Style في Next.js

يمكنك تنسيق العناصر بأكثر من طريقة.

الطريقة الأولى: Inline Style

<div style={{ color: "black", backgroundColor: "white" }}>
  About Page
</div>

الطريقة الثانية: CSS Modules

import Style from '../styles/Home.module.css';

<div className={Style.aboutPage}>
  About Page
</div>

تعد CSS Modules طريقة منظمة لأنها تمنع تعارض أسماء الكلاسات بين الصفحات.

شرح Conditional Rendering

يعني Conditional Rendering عرض عنصر معين بناءً على شرط.

مثال:

{hideContent ? null : <h1>About Page</h1>}

إذا كانت قيمة hideContent تساوي true فلن يتم عرض شيء، أما إذا كانت false فسيتم عرض العنوان.

مثال كامل:

import Link from 'next/link';
import Style from '../styles/Home.module.css';

function AboutPage() {
  let hideContent = false;

  return (
    <div className={Style.aboutPage}>
      {hideContent ? null : <h1>About Page</h1>}

      <button onClick={() => {
        hideContent = !hideContent;
      }}>
        Toggle
      </button>

      <Link href="/">Go to Home</Link>
    </div>
  );
}

export default AboutPage;

لكن يجب الانتباه أن تغيير let وحدها لا يعيد بناء الواجهة، لذلك الأفضل استخدام useState.

شرح useState في React

يستخدم useState لإدارة الحالة داخل المكون. أي قيمة تريد تغييرها وعرض نتيجتها مباشرة في الواجهة يجب غالبًا أن تكون داخل State.

مثال:

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

هنا counter هو المتغير، و setCounter هي الدالة المسؤولة عن تحديثه.

شرح useRef في React

يستخدم useRef للوصول المباشر إلى عناصر DOM، مثل input، أو لحفظ قيمة لا تسبب إعادة بناء للواجهة.

مثال:

const inputRef = useRef<HTMLInputElement>(null);

const handleFocus = () => {
  inputRef.current?.focus();
};

بهذا الشكل يمكننا التركيز على حقل الإدخال مباشرة عند الضغط على زر معين.

شرح useEffect في React

يستخدم useEffect لتنفيذ كود بعد بناء الصفحة أو عند تغير قيمة معينة.

مثال:

useEffect(() => {
  console.log("Counter value changed:", counter);
}, [counter]);

هذا الكود يعمل كلما تغيرت قيمة counter.

كود كامل لصفحة Counter باستخدام Hooks


'use client';

import { useEffect, useRef, useState } from "react";

function Home() {
  const [counter, setCounter] = useState(0);
  const [success, setSuccess] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleIncrement = () => {
    setCounter(counter + 1);
  };

  const handleFocus = () => {
    inputRef.current?.focus();
  };

  useEffect(() => {
    console.log("Counter value changed:", counter);
  }, [counter]);

  return (
    <div>
      <h1>Counter: {counter}</h1>

      <input ref={inputRef} type="text" placeholder="Focus me" />

      <button onClick={handleIncrement}>Increment</button>

      <button onClick={handleFocus}>Focus</button>

      <button onClick={() => {
        console.log("Input value:", inputRef.current?.value);
      }}>
        Print Value
      </button>
    </div>
  );
}

export default Home;

ملاحظات مهمة عند استخدام Next.js TypeScript

عند العمل على مشروع Next.js TypeScript يفضل الانتباه إلى النقاط التالية:

– استخدم أسماء واضحة للمكونات – افصل Components في مجلد مستقل – استخدم TypeScript لتعريف Props – لا تستخدم let لتحديث الواجهة، بل استخدم useState – استخدم Link بدلًا من a للتنقل الداخلي – قسم الكود إلى ملفات صغيرة لسهولة الصيانة

أفضل استخدامات Next.js TypeScript

يمكنك استخدام هذا الأسلوب في بناء:

– مواقع الشركات – لوحات التحكم Dashboard – المتاجر الإلكترونية – المدونات – تطبيقات SaaS – مواقع تعليمية

لأن Next.js يوفر أداء قويًا، وTypeScript يمنحك كودًا أكثر أمانًا وتنظيمًا.

رابط المقال

الخلاصة

يعد Next.js TypeScript من أفضل الخيارات لبناء تطبيقات ويب حديثة وقوية باستخدام React. فهو يجمع بين الأداء العالي، والتنظيم الجيد، وسلامة الكود، وتجربة التطوير الممتازة.

من خلال هذا المقال تعلمنا كيفية إنشاء مشروع Next.js جديد، وكيفية استخدام Components، والتنقل بين الصفحات باستخدام Link، وتطبيق Conditional Rendering، بالإضافة إلى شرح Hooks مهمة مثل useState و useRef و useEffect.

إذا كنت ترغب في تطوير مهاراتك في React وبناء تطبيقات جاهزة للإنتاج، فإن تعلم Next.js TypeScript خطوة مهمة جدًا في رحلتك كمطور ويب.

مزيد من المقالات : شرح Day Night Switch في Jetpack Compose (Compose Multiplatform) مع مثال عملي
شاهد أيضًا
مقالات ذات صلة

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع