Beshoy Mokhlis -بيشوي مخلص

Beshoy Mokhlis -بيشوي مخلص Front- End Developer

يعني إيه useState في React؟🤔لو بتشتغل بـ React أكيد سمعت عن Hook اسمه useState…ببساطة كده هو أداة بتخلّيك تحفظ بيانات جو...
25/09/2025

يعني إيه useState في React؟🤔

لو بتشتغل بـ React أكيد سمعت عن Hook اسمه useState…
ببساطة كده هو أداة بتخلّيك تحفظ بيانات جوة الصفحة
(زي رقم العداد أو نص المستخدم)
وتغيّرها في أي وقت، ولما تتغير React تعيد رسم الجزء ده من الصفحة تلقائيًا.

أهم الحاجات اللي لازم تعرفها👌:

🔴 بيخزّن قيمة: ممكن يكون رقم، نص، object أو array.

بيرجعلك حاجتين:
⬅️ القيمة الحالية.
⬅️ ودالة بتغيّر القيمة (React هي اللي تحدّث الصفحة).
☝️ القيمة محفوظة بين كل رندر: يعني لو الصفحة أعادت التحميل داخليًا، هتفضل البيانات زي ما هي.
✌️ لو التغيير بيعتمد على القيمة القديمة: استخدم شكل “اعتمد على القيمة السابقة” علشان التحديث يبقى دقيق.
👌 ما تعدّلش القيمة مباشرة: دايمًا استعمل دالة التغيير.

أمثلة استخدام:

1.عدّاد أرقام (Counter).
2 .حفظ نص إدخال المستخدم في فورم.
3 .تبديل حالة زرار (فتح/قفل مودال).

الخلاصة🌚:

useState =
طريقة سهلة تحافظ بيها على بيانات متغيرة جوة Function Component
من غير ما تكتب Class Components أو كود معقد.

يعني إيه React Hooks؟لو إنت شغال React هتسمع كلمة Hooks كتير…ببساطة كده، Hooks هي أدوات بتخليك تستخدم مميزات React الكبي...
24/09/2025

يعني إيه React Hooks؟

لو إنت شغال React هتسمع كلمة Hooks كتير…
ببساطة كده، Hooks هي أدوات بتخليك تستخدم مميزات React الكبيرة
زي تخزين البيانات أو متابعة التغييرات أو التحكم في عناصر الصفحة
وإنت شغال بـ Functions من غير ما تحتاج تكتب Class Components.

أشهر الـ Hooks:

✨ useState:
بتخليك تحفظ بيانات جوة الصفحة (زي رقم العداد أو اسم المستخدم) وتغيّرها بسهولة.

✨ useEffect:
بتخلّيك تنفّذ حاجة بعد ما الصفحة تترسم أو لما يحصل تغيير
(زي جلب بيانات من API أو تشغيل تايمر).

✨ useRef:
بيسمحلك تمسك عنصر معين في الصفحة أو تحفظ قيمة من غير ما تعيد رسم الصفحة.

✨ useContext:
بيسهّل مشاركة بيانات بين أكتر من جزء في الموقع من غير ما تبعت props كتير.

✨ useReducer:
شبه useState بس مناسب لو البيانات معقدة أو فيها أكتر من حالة.

😏 الخلاصة:

Hooks = أدوات بتدي قوة لــ Function Components.

بتخليك تكتب كود أبسط وأنضف.

أهم اتنين تبدأ بيهم: useState و useEffect.

💭 سؤال ليك:
إيه أكتر Hook شايف إنه مفيد في شغلك؟ شاركنا رأيك في الكومنتات 👇

يعني إيه Redux Toolkit؟لو إنت شغال React وعايز تدير البيانات (state) في مشروعك بشكل منظم وسهل،بدل ما تتعب مع Redux التقل...
23/09/2025

يعني إيه Redux Toolkit؟

لو إنت شغال React وعايز تدير البيانات (state) في مشروعك بشكل منظم وسهل،
بدل ما تتعب مع Redux التقليدي وكمية الأكواد الكتير… Redux Toolkit جاي ينقذك
ليه نستخدمه؟

⬅️ بيختصر الكود: يعني مش هتكتب Actions وReducers كتير زي زمان.
⬅️ إعداد سريع: بـ configureStore بتعمل الـ Store في سطرين.
⬅️ سهل تربطه بالـ API: عنده حاجة اسمها createAsyncThunk بتسهّل الـ requests.
⬅️مناسب للمبتدئين والمحترفين: مش محتاج تكون خبير Redux.

الخلاصة 🌚:
لو حابب مشروعك يبقى منظم وكودك قليل ومفهوم،
جرب Redux Toolkit وهتدعيلي

اخدت اللوزة بتاعتك! يلا بينا 😉زي ما اتكلمنا علي الWeb Developer في البوست اللي فاتالبوست ده بقي هنتكلم علي الLanguages و...
05/07/2024

اخدت اللوزة بتاعتك! يلا بينا 😉
زي ما اتكلمنا علي الWeb Developer في البوست اللي فات
البوست ده بقي هنتكلم علي الLanguages والSkills
في البداية في Front-end
ابدأ باستخدام او تعلم HTML‏ ده هو بناء الهيكل الأساسي للموقع
وبعدها CSS تعتبر لغة بتوصف شكل الموقع من حيث الالوان والشكل الجمالي ليها
و بعدها JavaScript هي اللغه بتستخدمها عشان يحصل تفاعل في الموقع زي الButton مثلا
عشان كدا هم البناء الأساسية Web development.

بعد كدا عايز مكتبة ( Library ) مجانية تسهل تصميم صفحات web على Developer هي Bootstrap لانها بتوفرله CSS جاهزة يمكنه إستخدامها ، يضيفها في الصفحات بشكل جميل جداً ومتجاوب مع حجم الصفحة زي Buttons و Input Fields بس من كدا بتتاكد ان الموقع شكله مناسب على كل الأجهز وده هو
Master JavaScript Frameworks :
زي React أو Vue أو Angular لعمل واجهات ديناميكية.

بعد كدا Back-end : استكشف server-side languages مثل Node.js أو Python أو PHP. تعرف على كيفية التعامل معهم
تعمل قواعد البيانات مثل MongoDB أو ‏MySQL .
بس يا صديقي بكدا عرفت ايه هي Skills و الLanguages اللي بيستخدمها Web Developer😉
جهز لوزتك واستني البوست الجاي عشان تعرف حاجات عن Html بناء هيكل الموقع

Beshoy Mokhlis

اخدت اللوزة بتاعتك! يلا بينا 😉 اول مرحلة دي مرحلة Web Designer ده اللي بيرسم شكل الموقع يعني زي اما تروح للمهندس تقوله ا...
04/07/2024

اخدت اللوزة بتاعتك! يلا بينا 😉
اول مرحلة دي مرحلة Web Designer ده اللي بيرسم شكل الموقع يعني زي اما تروح للمهندس تقوله انا عايز ابني بيت المهندس بيصمم ليك شكل البيت وده بناءا علي طلبك اهو كدا وظيفة الWeb designer هو انه يقعد مع العميل يسمع منه ويفكر ويبقي Creative ويطلع اللي عايزه العميل
وال web design ينقسم الي حاجتين UX وUI
نيجي بقي لل (UX) اللي هو User Experience Design او مصمم تجربة المستخدم
وده بقي الراجل اللي بياخد كل حاجه من العميل ويوضح كل حاجة ليه وبياخد FeedBack من الUser ويتفاعل معاه عشان يوفر تجربة إيجابية ليهم
تعالي بقي لل(UI) اللي هو User Interface او مصمم واجهه المستخدم
وده بقي يا صديقي بيوفرلك شكل جذاب للموقع ومريح وبيهتم بالألوان وتنسيقها من الاخر الCreative او ابو عيون حلوه

نجيب بقي للراجل اللي بيحول كلة ده من Static الي Dynamic اللي بيحول كل حاجة علي ارض الواقع
هو Web Developer مطور المواقع وده اللي بياخد من Web Designer التصميم يحوله الي Coding عشان يظهر ال Website قدامك
وهو بينقسم الي حاجتينFront-end و Back-end والاتنين مكملين لبعض
الأول Front-end ده اللي بيعمل الواجهة الأمامية لتطوير الويب اللي انت بتتعامل معاها وبتشوفها في اي موقع واللي بيصممه الWeb Designer
والتاني Back-end وده اللي بيعمل كل حاجة خلف الكواليس يعني انت مش بتشوفها زي Control في كل حاجة تخص الWebsite زي التعامل مع Requests on the server او التعامل مع Databases باختصار ه عقل الموقع
بس يا صديقي بكدا عرفت ازاي بيتعمل ال Website ومراحله😉
جهز لوزتك واستني البوست الجاي عشان تعرف كل حاجة عن Web Developer واللغات المستخدمة وازاي انت تبدا؟!

Beshoy Mokhlis

اخدت اللوزة بتاعتك! يلا بينا 😉website (موقع الكتروني)هو( collection of web pages ) يعني مجموعة من صفحات الويب بيبقي بينه...
03/07/2024

اخدت اللوزة بتاعتك! يلا بينا 😉
website (موقع الكتروني)
هو( collection of web pages ) يعني مجموعة من صفحات الويب بيبقي بينهم (Hyperlinking ) يعنى مربوطين ببعض عشان تعرف تتنقل في الموقع
بيبقي ليهم (domain name) مشترك وهو اسم النطاق الخاص الWebsite
و بعد كدا يتم نشره على(web server) واحد على الأقل
بس يا صديقي و المواقع دي بيبقي ليها اغراض معينة زي
موقع Google موقع للبحث
موقع للتعليم والترفيه ومشاهدة الفيديوهات زي YouTube
مواقع للتجارة زي Amazon
مواقع التواصل الاجتماعي زي Facebook
وغيرهم من الموقع بتستخدم في مجالات تانية وبكدا يبقي فهمت يعني ايه Website 😉
جهز لوزتك واستني البوست الجاي 🤌
عشان تعرف مين اللي بيعمل الWebsites؟!وازاي؟! وانت تقدر تبقي واحد منهم؟!

Address

Asyut

Website

Alerts

Be the first to know and let us send you an email when Beshoy Mokhlis -بيشوي مخلص posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Shortcuts

Share

Category