استكشاف هيكل ملفات المشروع وتعديل أول صفحة (App.jsx)

استكشاف هيكل ملفات المشروع وتعديل أول صفحة (App.jsx)

ماذا سنتعلم اليوم؟

اليوم، سنغوص في قلب مشروع React.js لنفهم هيكله الأساسي، ثم ننتقل لتعديل المكون الرئيسي App.jsx لعرض رسالتنا الترحيبية الخاصة.

فهم هيكل المشروع

عند إنشاء مشروع React جديد باستخدام أدوات مثل Vite أو Create React App، يتم إنشاء مجموعة من المجلدات والملفات الافتراضية. أهم هذه المكونات هي:

• node_modules/: يحتوي على جميع المكتبات والتبعيات التي يحتاجها مشروعك. لا يجب تعديل محتوياته يدوياً.
• public/: يحتوي على الملفات الثابتة مثل index.html (الصفحة الرئيسية لتطبيقك)، الأيقونات، والصور.
• src/: هذا هو المجلد الذي ستقضي معظم وقتك فيه. يحتوي على جميع مكونات React، ملفات CSS، JavaScript، وأي منطق لتطبيقك.
• package.json: يصف المشروع، يسرد التبعيات (dependencies)، والبرامج النصية (scripts) التي يمكنك تشغيلها (مثل npm start).

ملاحظة تقنية: مجلد src/ هو قلب تطبيق React الخاص بك. بداخله، ستجد ملفات مثل main.jsx (أو index.jsx) الذي يقوم بتحميل المكون الرئيسي App.jsx إلى DOM.

تحديد موقع ملف App.jsx ومحتواه الأولي

المكون App.jsx هو المكون الرئيسي الافتراضي الذي يتم عرضه عند بدء تشغيل تطبيق React. ستجده داخل مجلد src/. لنلقِ نظرة على محتواه النموذجي قبل أي تعديل:

// src/App.jsx (المحتوى الأولي النموذجي)
import React from 'react'; // استيراد مكتبة React الأساسية
import './App.css'; // استيراد ملف التنسيق CSS الخاص بالمكون App

function App() { // تعريف المكون الوظيفي App
  return ( // ما سيعرضه هذا المكون على الشاشة (JSX)
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.jsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; // تصدير المكون App ليكون متاحاً للاستخدام في ملفات أخرى (مثل main.jsx)

تعديل App.jsx لعرض رسالة مخصصة

الآن، دعنا نعدل هذا الملف لعرض رسالتنا الخاصة. سنقوم بإزالة المحتوى الافتراضي واستبداله ببعض عناصر HTML البسيطة.

ملاحظة تقنية: ما تراه داخل جملة return هو JSX (JavaScript XML)، وهي صيغة تسمح لك بكتابة HTML مباشرة داخل ملفات JavaScript. يتم تحويلها لاحقاً بواسطة Babel إلى JavaScript عادي يمكن للمتصفح فهمه.

// src/App.jsx (بعد التعديل)
import React from 'react'; // استيراد مكتبة React
import './App.css'; // استيراد ملف التنسيق CSS الخاص بالمكون (يمكن تعديله أو حذفه إذا لم نعد نحتاجه بشكل كامل)

function App() { // تعريف المكون الوظيفي App
  return ( // العودة بمحتوى JSX جديد ومخصص
    <div className="App"> {/* العنصر الجذر للمكون */} 
      {/* هذا هو التعليق داخل JSX - يستخدم أقواس معقوفة و /**/ */} 
      <h1>مرحباً بك في أول تطبيق React.js خاص بك!</h1> {/* عنوان ترحيبي */} 
      <p>لقد قمت بتعديل المكون الرئيسي بنجاح.</p> {/* فقرة توضيحية */} 
      <p>هذا الدرس مقدم من مبرمجك الخبير.</p> {/* إضافة سطر إضافي */} 
    </div>
  );
}

export default App; // تصدير المكون App ليستخدمه تطبيقنا الرئيسي

الكود النهائي الكامل

إليك الكود الكامل لملف App.jsx بعد التعديلات التي أجريناها:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>مرحباً بك في أول تطبيق React.js خاص بك!</h1>
      <p>لقد قمت بتعديل المكون الرئيسي بنجاح.</p>
      <p>هذا الدرس مقدم من مبرمجك الخبير.</p>
    </div>
  );
}

export default App;

النتيجة المتوقعة

بعد حفظ التعديلات وتشغيل تطبيقك (عادةً باستخدام الأمر npm run dev أو npm start في سطر الأوامر)، سيقوم المتصفح تلقائياً بإعادة التحميل. سترى صفحة بيضاء بسيطة تعرض الرسائل التي كتبتها:

مرحباً بك في أول تطبيق React.js خاص بك!

لقد قمت بتعديل المكون الرئيسي بنجاح.

هذا الدرس مقدم من مبرمجك الخبير.

تهانينا! لقد قمت بنجاح باستكشاف هيكل مشروع React وتعديل المكون الرئيسي App.jsx.

← السابقالفهرسالتالي →