كيفية استخدام ميزات ES6 في React باحتراف

Updated يونيو 7, 2026 7 min read

Aldawsari

دقائق القراءة: 7

تُعد ميزات ES6 من الأساسيات التي يعتمد عليها كثير من مطوري JavaScript عند العمل مع React وبقية الأطر الحديثة. وفهم هذه الميزات لا يساعدك فقط على قراءة الشيفرة البرمجية بسهولة، بل يجعلك أيضاً تكتب تطبيقات أكثر تنظيماً واختصاراً ووضوحاً.

في هذا الدليل العملي، سنتناول أبرز ميزات ES6 المستخدمة بكثرة في React، وهي:

Modules
Destructuring
Spread Operator
Arrow Functions
Template Literals

جميع الأمثلة هنا مبسطة ومناسبة للمبتدئين، مع توضيح كيفية الانتقال من JavaScript التقليدية إلى استخدامها داخل React بشكل عملي.

شرح استخدام ميزات ES6 في React مع أمثلة على Modules وDestructuring وSpread Operator

لماذا تُعد ميزات ES6 مهمة في React؟

تعتمد React بشكل كبير على أسلوب كتابة حديث في JavaScript، لذلك ستلاحظ أن أغلب المشاريع والدروس والملفات البرمجية تستخدم ميزات ES6 بشكل مباشر. والسبب في ذلك أن هذه الميزات تقدم فوائد واضحة مثل:

تقليل تكرار الشيفرة البرمجية.
تحسين تنظيم الملفات والمكونات.
تسهيل قراءة الكود وصيانته.
تسريع كتابة المنطق البرمجي داخل المكونات.
جعل التعامل مع البيانات أكثر مرونة.

استخدام ES6 Modules في JavaScript وReact

تساعدك Modules على تقسيم وظائف التطبيق إلى ملفات مستقلة، بحيث يمكن وضع كل وظيفة أو منطق في ملف منفصل ثم استيراده عند الحاجة. هذا الأسلوب مهم جداً في المشاريع الكبيرة لأنه يرفع من قابلية الصيانة وإعادة الاستخدام.

مثال على بنية الملفات

لنفرض أن لدينا هذا التنظيم:

index.html
script.js
myModules/
  add.js
  sub.js

سنبدأ أولاً باستخدام Modules في JavaScript العادية، ثم نرى كيف تعمل الفكرة نفسها داخل React.

الخطوة الأولى: إنشاء ملف HTML وربط ملف JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <title>ES6 Modules</title>
</head>
<body>
  <script type="module" src="script.js"></script>
</body>

لاحظ أن الوسم script يحتوي على الخاصية type="module"، وهي خطوة أساسية عند استخدام Modules. هذا يُخبر المتصفح بأن الملف سيستخدم أسلوب الاستيراد والتصدير الحديث.

في هذا المثال، سيكون الملف script.js هو الملف الرئيسي الذي سنستورد إليه الدوال من الملفات الأخرى.

الخطوة الثانية: إنشاء دوال منفصلة وتصديرها

في الملف add.js نكتب:

export function add(a, b) {
  return a + b;
}

وفي الملف sub.js نكتب:

export function sub(a, b) {
  return a - b;
}

استخدام الكلمة export يعني أننا نسمح باستخدام هذه الدالة في ملفات أخرى. ويمكنك أيضاً التصدير في نهاية الملف باستخدام export default إذا كان السيناريو مناسباً لذلك.

الخطوة الثالثة: استيراد الدوال في الملف الرئيسي

import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js";

console.log(add(6, 4)); // 10
console.log(sub(6, 4)); // 2

بهذا الشكل، أصبح بإمكانك إعادة استخدام الدوال في أي ملف آخر دون الحاجة إلى إعادة كتابتها كل مرة. وهذه واحدة من أهم مزايا Modules في JavaScript الحديثة.

كيفية تطبيق Modules داخل React

في React، يتم استخدام الفكرة نفسها تقريباً، لكن بدلاً من تقسيم الدوال فقط، ستقوم غالباً بتقسيم الواجهة إلى مكونات مستقلة Components.

في معظم تطبيقات React، يكون الملف App.js هو المكون الرئيسي. سننشئ مكوناً آخر باسم User.js.

محتوى الملف App.js:

function App() {
  return (
    <div className="App"></div>
  )
}

export default App

أما الملف User.js فيكون كالتالي:

function User() {
  return (
    <div>
      <h1>My name is Ihechikara.</h1>
      <p>I am a web developer.</p>
      <p>I love writing.</p>
    </div>
  )
}

export default User

ثم نستورد المكون داخل App.js:

import User from "./User"

function App() {
  return (
    <div className="App">
      <User />
    </div>
  )
}

export default App

هنا أضفنا سطر الاستيراد import User from "./User" ثم استخدمنا المكون عبر <User />. بهذه الطريقة يمكنك بناء تطبيق React من مكونات قابلة لإعادة الاستخدام بدلاً من وضع كل شيء في ملف واحد.

فهم ES6 Destructuring واستخدامه في React

يشير مصطلح Destructuring إلى تفكيك بنية البيانات واستخراج القيم منها بطريقة مختصرة وواضحة. ويمكن تطبيقه على Arrays وObjects وحتى Strings.

استخراج القيم من Array قبل ES6

var scores = [500, 400, 300];
var x = scores[0], y = scores[1], z = scores[2];

console.log(x, y, z); // 500 400 300

استخدام Destructuring مع Array في ES6

let scores = [500, 400, 300];
let [x, y, z] = scores;

console.log(x, y, z); // 500 400 300

سيتم إسناد القيم حسب ترتيبها داخل المصفوفة، أي أن x = 500 وy = 400 وz = 300.

وإذا طلبت متغيراً إضافياً غير موجود في المصفوفة، فستكون قيمته undefined:

let scores = [500, 400, 300];
let [x, y, z, w] = scores;

console.log(x, y, z, w); // 500 400 300 undefined

استخدام Destructuring مع Object

let scores = { pass: 70, avg: 50, fail: 30 };
let { pass, avg, fail } = scores;

console.log(pass, avg, fail); // 70 50 30

في حالة Objects يتم الاعتماد على أسماء الخصائص، وليس على الترتيب.

استخدام Destructuring مع String

let [user, interface] = 'UI';

console.log(user); // U
console.log(interface); // I

في هذا المثال تم تفكيك النص إلى أحرف مستقلة ثم إسناد كل حرف إلى متغير.

استخدام Destructuring داخل React

من أكثر المواضع شيوعاً لاستخدام Destructuring في React هو العمل مع useState.

import { useState } from 'react';

function TestDestructuring() {
  const [grade, setGrade] = useState('A');

  return (
    <></>
  )
}

export default TestDestructuring

في هذا السطر:

const [grade, setGrade] = useState('A');

تم استخدام Destructuring للحصول على قيمة الحالة grade ودالة التحديث setGrade من المصفوفة التي تعيدها useState. وهذا أسلوب ستراه باستمرار في تطبيقات React الحديثة.

كيفية استخدام Spread Operator في ES6

يُستخدم Spread Operator عبر الرمز ... لنسخ أو دمج عناصر من Array أو Object أو حتى String داخل بنية جديدة.

دمج Arrays باستخدام Spread Operator

const collectionOne = [10, 20, 30];
const collectionTwo = [40, 50, 60];
const allCollections = [...collectionOne, ...collectionTwo];

console.log(allCollections); // 10, 20, 30, 40, 50, 60

هنا تم نسخ عناصر المصفوفتين ودمجها في مصفوفة جديدة، دون تعديل الأصل.

تمرير عناصر Array كقيم منفصلة

const allCollections = [10, 20, 30, 40, 50, 60];
const maxNumber = Math.max(...allCollections);

console.log(maxNumber); // 60

في هذا المثال، استخدمنا Spread Operator لتمرير عناصر المصفوفة كأنها قيم منفصلة إلى الدالة Math.max.

دمج Spread Operator مع Destructuring

let scores = [500, 400, 300];
let [x, ...y] = scores;

console.log(x); // 500
console.log(y); // [400, 300]

المتغير x حصل على أول قيمة، بينما المتغير y جمع بقية العناصر في مصفوفة جديدة. هذا النمط مفيد عندما تريد استخراج أول عنصر والاحتفاظ ببقية البيانات معاً.

العمل مع Arrow Functions في ES6

توفر Arrow Functions صياغة أقصر وأكثر حداثة لكتابة الدوال في JavaScript. وهي مستخدمة بكثرة في React، خاصة داخل المكونات، ومعالجة الأحداث، وعمليات التكرار مثل map().

كتابة الدوال قبل ES6

var greetings = function() {
  console.log("Hello World!")
}

// OR
function greetings2() {
  console.log("HI!")
}

كتابة الدوال باستخدام Arrow Functions

var greetings = () => {
  console.log("Hello World!")
}

var greetings = () => {
  console.log("HI!")
}

في هذا الأسلوب تمت إزالة الكلمة function واستُبدلت بالرمز =>. وهذا يختصر الصياغة ويجعل الكود أكثر خفة، خصوصاً في الدوال القصيرة.

استخدام Parameters مع Arrow Functions

var add = (a, b) => {
  return a + b;
}

console.log(add(2, 2)) // 4

يتم تمرير Parameters داخل الأقواس التي تسبق السهم. وإذا كانت الدالة بسيطة، يمكن اختصارها أكثر في بعض الحالات، لكن من الأفضل للمبتدئ أولاً فهم الصياغة الكاملة.

استخدام Template Literals في ES6

تتيح لك Template Literals كتابة النصوص باستخدام Backticks بدلاً من علامات الاقتباس التقليدية. وهذا يمنحك مرونة أكبر عند تنسيق النصوص أو إدخال المتغيرات داخلها.

قبل ES6

var name = "My name is Ihechikara"
console.log(fullname);

باستخدام Template Literals

var name = `My name is Ihechikara`
console.log(fullname);

الميزة الأهم هنا ليست فقط شكل الكتابة، بل إمكانية إدخال المتغيرات والتعابير بسهولة داخل النص.

String Interpolation داخل Template Literals

var me = 'Ihechikara';
var fullname = `My name is Abba ${me}`;

console.log(fullname);

لإدراج متغير داخل النص، نستخدم الصيغة ${}. ويجب أن يكون النص مكتوباً باستخدام Backticks وليس علامات الاقتباس العادية.

إنشاء عناصر HTML ديناميكياً

let name = 'Ihechikara';
let myHtmlTemplate = `<h1>This is a paragraph created by ${name}</h1>`;

هذا الأسلوب شائع عند إنشاء القوالب النصية أو تجهيز أجزاء من الواجهة بشكل ديناميكي، كما أنه مفيد جداً عند التعامل مع JSX والمحتوى المتغير.

أفضل الممارسات عند استخدام ES6 في React

قسّم التطبيق إلى مكونات وملفات واضحة باستخدام Modules.
استخدم Destructuring لتحسين قابلية القراءة عند التعامل مع props وstate.
اعتمد على Spread Operator عند نسخ البيانات بدلاً من تعديلها مباشرة، خصوصاً مع الحالة في React.
استخدم Arrow Functions عندما تحتاج إلى صياغة مختصرة ومباشرة.
استفد من Template Literals عند بناء النصوص أو القوالب التي تحتوي على متغيرات.

الخلاصة التقنية

إتقان ميزات ES6 ليس خطوة تجميلية في تعلم React، بل هو جزء أساسي من فهم طريقة كتابة التطبيقات الحديثة في JavaScript. فكل من Modules وDestructuring وSpread Operator وArrow Functions وTemplate Literals يساهم في جعل الشيفرة أوضح وأكثر مرونة وقابلية للتوسع. ومن الناحية التقنية، كلما استخدمت هذه الميزات بشكل صحيح، أصبحت قادراً على قراءة مشاريع React الحقيقية والتعامل معها بكفاءة أعلى، سواء أثناء التطوير أو الصيانة أو تحسين بنية المشروع.