ليه الـ Front-End مش مجرد كتابة كود؟ 7 حاجات فهمتها بعد ما بدأت أتعلم React
ليه الـ Front-End مش مجرد كتابة كود؟ 7 حاجات فهمتها بعد ما بدأت أتعلم React
لما كنت بسمع كلمة Front-End في البداية، كنت بتخيل إن الموضوع كله عبارة عن كتابة شوية HTML وCSS وبعدها JavaScript، وخلاص الموقع بقى جاهز.
لكن بعد ما بدأت أتعلم المجال بشكل فعلي، اكتشفت إن الصورة أكبر بكتير.
الموضوع مش بس إنك تعرف تعمل زرار أو تخلي الصفحة شكلها حلو. أحيانًا المشكلة بتكون في تفصيلة صغيرة جدًا، زي إن الصفحة شكلها ممتاز على اللابتوب لكن على الموبايل كل حاجة اتلخبطت.
ومع الوقت بدأت أفهم إن الـ Front-End مش مجرد "كود بيطلع شكل"، لكنه طريقة تفكير في إزاي المستخدم هيتعامل مع الموقع من أول ثانية يفتحه فيها.
1. الشكل الحلو مش معناه إن الموقع كويس
دي من أول الحاجات اللي فهمتها.
ممكن تعمل صفحة شكلها ممتاز جدًا، ألوانها متناسقة والـ animations فيها جميلة، لكن لما حد يستخدمها يحتار: الزرار فين؟ أضغط على إيه؟ أو ليه الصفحة بطيئة؟
هنا بدأت أفهم الفرق بين إن الموقع يكون شكله حلو وإنه يكون سهل الاستخدام.
الـ Front-End Developer محتاج يفكر في الاتنين مع بعض: الشكل وتجربة المستخدم.
وده السبب إن معرفة أساسيات الـ UI/UX بتفرق جدًا حتى لو شغلك الأساسي هو البرمجة.
2. الـ Responsive Design مش رفاهية
في البداية كنت باختبر المواقع على شاشة اللابتوب وأقول: تمام، الصفحة شغالة.
وبعدين فتحت نفس المشروع من الموبايل.
المفاجأة إن كلمة "شغالة" كانت محتاجة تعريف جديد.
ممكن الـ navbar يتكسر، والكروت تنزل تحت بعض بطريقة غريبة، والنص يبقى أكبر من الشاشة، والصور تخرج بره العنصر.
من هنا بدأت أهتم أكتر بفكرة الـ Responsive Design.
الموقع المفروض يتعامل مع أحجام الشاشات المختلفة، مش يتصمم لجهاز واحد وخلاص.
وعشان كده الـ CSS مش مجرد أداة لتغيير الألوان والخطوط. هو جزء أساسي جدًا من تجربة المستخدم.
3. JavaScript هي اللحظة اللي الموضوع بيبدأ يتغير فيها
HTML وCSS بيدوك الهيكل والشكل، لكن JavaScript بتضيف للموقع سلوك.
زرار يفتح Menu، Form يتأكد من البيانات، منتجات تتغير، بيانات تيجي من API، عناصر تظهر وتختفي حسب تفاعل المستخدم.
وهنا بدأت أكتشف إن حفظ الـ syntax مش كفاية.
ممكن تحفظ طريقة كتابة function، لكن لما تواجه مشكلة حقيقية مش هتلاقي السؤال مكتوب قدامك بنفس الطريقة اللي اتعلمتها.
اللي بيفرق فعلًا هو إنك تفهم ليه الكود اتكتب بالشكل ده وإزاي تفكر في المشكلة.
4. الـ Debugging جزء من الشغل، مش علامة إنك فاشل
دي يمكن أكتر حاجة كنت محتاجة أتعود عليها.
تكتب الكود وأنت متأكد إنه صح، وبعدها تلاقي Error غريب.
تبدأ تبص على الكود مرة واتنين وثلاثة، وفي الآخر تكتشف إن المشكلة كانت حرف ناقص أو import مكتوب بطريقة غلط.
في البداية كنت أعتبر إن وجود Errors معناه إني مش فاهمة.
بعد كده فهمت العكس تمامًا.
الـ Debugging نفسه مهارة.
المهم مش إنك ما تغلطش، لكن إنك تعرف تقرأ الـ Error، تحدد مكان المشكلة، وتجرب حلول منطقية بدل ما تغير حاجات عشوائية في الكود.
5. React مش بديل لـ JavaScript
لما بدأت أتعرف على React، كان سهل جدًا أقع في فكرة إن React هي الطريقة الجديدة لكتابة المواقع وإن JavaScript بقت أقل أهمية.
لكن الحقيقة مختلفة.
React مبنية على JavaScript، وفهم JavaScript بيسهل عليك فهم React بشكل كبير.
لما بدأت أتعامل مع Components وProps وState وEvents، لقيت إن حاجات كتير بترجع لمفاهيم JavaScript نفسها.
عشان كده، لو حد لسه في بداية الطريق، أنا شايفة إن الأفضل ما يستعجلش في React قبل ما يكون عنده أساس كويس في JavaScript.
مش لازم تكون خبير، لكن لازم تكون فاهم الأساسيات فعلًا.
6. استخدام الأدوات مهم، لكن فهم اللي بتعمله أهم
حاليًا فيه أدوات كتير ممكن تساعد المطور.
ممكن أداة تقترحلك كود، أو تشرح Error، أو تساعدك تبدأ مشروع أسرع.
وده شيء مفيد جدًا.
لكن المشكلة بتبدأ لما تنسخ الكود من غير ما تعرف هو بيعمل إيه.
لأن أول ما يحصل Bug أو يتغير المطلوب، هتلاقي نفسك مش عارف تصلح الحاجة اللي أنت أصلًا ما كتبتهاش.
بالنسبة لي، أدوات الذكاء الاصطناعي ممكن تكون مساعد ممتاز أثناء التعلم، لكن مش المفروض تكون بديل عن الفهم.
7. المشاريع بتعلمك أكتر من مشاهدة عشرات الفيديوهات
ممكن تتفرج على Tutorial طويل وتخرج منه حاسس إنك فهمت كل حاجة.
لكن أول ما تفتح VS Code وتبدأ تعمل مشروع من الصفر، تكتشف إن فيه حاجات كتير مش فاكرها.
وده طبيعي.
المشروع الحقيقي بيجبرك إنك تبحث، تجرب، تغلط، تصلح، وترجع تقرأ documentation.
حتى المشروع البسيط ممكن يعلمك حاجات مش هتاخد بالك منها أثناء مشاهدة شرح.
مثلًا، لما تعمل Product Card بنفسك، هتبدأ تفكر في شكل البيانات، وإعادة استخدام الـ Components، والـ Responsive Design، وتنظيم الملفات، والتعامل مع الحالات المختلفة.
وهنا التعلم بيكون مختلف تمامًا.
هل لازم أتعلم كل حاجة قبل ما أبدأ؟
لا.
ودي من الحاجات اللي كنت أتمنى أعرفها من البداية.
مجال الـ Front-End واسع جدًا، وممكن تفضل تتعلم تقنيات جديدة طول الوقت.
HTML وCSS وJavaScript، وبعدهم React، وبعدها APIs وGit وأدوات تانية كثيرة.
لو فضلت مستني اللحظة اللي تقول فيها "أنا جاهز"، غالبًا مش هتبدأ.
الأفضل إنك تتعلم الأساسيات، وبعدها تبدأ تعمل مشاريع صغيرة، وكل مشروع يكشفلك حاجة جديدة محتاج تتعلمها.
في النهاية...
أكتر حاجة اتغيرت عندي في نظرتي للـ Front-End هي إني مبقتش أشوفه على إنه مجرد كتابة كود.
هو خليط بين البرمجة، التصميم، حل المشكلات، وفهم طريقة استخدام الناس للموقع.
ومش كل يوم في التعلم بيكون سهل.
في أيام هتكتب كود كتير وتحس إنك اتقدمت، وفي أيام تانية ممكن تضيع وقت طويل في مشكلة صغيرة جدًا.
لكن مع الوقت، هتلاحظ إن المشاكل اللي كانت بتوقفك ساعات بدأت تتحل في دقائق.
وده في رأيي من أجمل الحاجات في تعلم البرمجة: إنك في كل مرة تصلح مشكلة، بتكتشف إنك بقيت أفضل من النسخة اللي كنت عليها قبلها.
ولو كنت لسه بتفكر تبدأ في الـ Front-End، متستناش إنك تعرف كل حاجة.
ابدأ بالأساسيات، اعمل مشاريع، اغلط كتير، واسأل كتير.
لأنك مش محتاج تعرف كل حاجة عشان تبدأ، لكن لازم تبدأ عشان تعرف إيه اللي محتاج تتعلمه.
