محمد_عاطف

إن خطاف useTheme هو خطاف مخصص (Custom Hook) في React وهو يوفر لك وصول سهل إلى السمات (themes) الخاصة بالتطبيق أو إعدادات التصميم. فهو طريقة للحصول على البيانات المتعلقة بالتصميم مثل الألوان والخطوط و المسافات وغيرها في أي مكون React يحتاجها. فمثلا لو أن لديك تطبيق أو مشروع وتريد توفير إمكانية للمستخدم أن يقوم تبديل المظهر مثلا بين الوضع العادي والوضع الليلي أو من الممكن أن تريد إستخدام مجموعة معينة من الألوان والخطوط يقوم بإختيارها المستخدم. لذلك بدون useTheme سيتوجب عليك تمرير هذه السمات ك props إلى كل مكون يحتاجها وهذا الأمر سيكون صعبا وسيأخذ وقت كبير. فمثلا : أولا يجب إنشاء سياق الثيم (Theme Context) حيث يتم إنشاء React.Context خاص لتخزين بيانات الثيم. بعد ذلك إنشاء مزود السمة (Theme Provider) حيث يكون عبارة عن مكون ThemeContext.Provider يكون حول جزء من شجرة المكونات ويوفر قيمة السمة لهذا السياق. وأخيرا خطاف useTheme حيث يستخدم useContext من React للوصول إلى القيمة المقدمة من ThemeContext. فمثلا في ملف ThemeContext.js : import React, { useContext, createContext } from 'react'; const ThemeContext = createContext(null); export const ThemeProvider = ({ children, theme }) => { return ( <ThemeContext.Provider value={theme}> {children} </ThemeContext.Provider> ); }; export const useTheme = () => { const context = useContext(ThemeContext); if (!context) { throw new Error('should use useTheme ThemeProvider'); } return context; }; ثانيا ملف App.js : import React from 'react'; import { ThemeProvider } from './ThemeContext'; import MyComponent from './MyComponent'; const lightTheme = { colors: { background: '#FFFFFF', text: '#000000', }, fonts: { primary: 'Arial', }, }; function App() { return ( <ThemeProvider theme={lightTheme}> <MyComponent /> </ThemeProvider> ); } export default App; والآن في المكون الذي تريد تغير الثيم له : import React from 'react'; import { useTheme } from './ThemeContext'; function MyComponent() { const theme = useTheme(); return ( <div style={{ backgroundColor: theme.colors.background, color: theme.colors.text, fontFamily: theme.fonts.primary }}> <p>text</p> </div> ); } export default MyComponent; إذا إن useTheme هو أداة تجعل إدارة وتطبيق ثيمات التطبيق في React منظم وإنشاءه بسهولة.

ما هي فكرة المشروع التي تعمل عليها أو ما الذي تحاول تنفيذه هنا ؟ إليك الأفكار التالية ويمكنك تنفيذها بناء على ما تريد أن يقوم به المشروع . يمكنك بناء لوحة تحكم شخصية للمستخدم (User Dashboard) فيمكنك إنشاء سجل للمستخدمين وإنشاء حسابات حيث تسمح لهم بالاحتفاظ بسجل لتنبؤاتهم السابقة. وهذا يسمح لهم بمتابعة تطور حالتهم مع الوقت. أيضا يمكنك إستخدام وإنشاء رسم بياني يوضح احتمالية الإصابة وأيضا توفير نصائح متخصصة بناءً على القيم المدخلة. أيضا يمكنك مقارنة النتائج مع المتوسطات الطبيعية لمعرفة مدى بعد القيم عن الطبيعي. يمكنك إنشاء واجهة رسومية GUI لتستخدم ال apis التي تنشأها.

يوجد العديد والكثير من المشاريع التي يمكنك إنشاءها بإستخدام React وهي مشاريع متقدمة في المستوى وأيضا في الصعوبة. فمثلا يمكنك إنشاء لوحة تحكم Dashboards لإدارة موقع أو بيانات لديك. يمكنك إنشاء مشروع تجارة إلكترونية متكامل حيث تقوم بعرض المنتجات والطلبات وعربة التسوق وأيضا لوحة تحكم لمتابعة الطلبات وتعديل البيانات وغيرها من الأمور التي تتحكم بها في الموقع. يمكنك إنشاء تطبيق تواصل إجتماعي حيث يحوي دردشة حية . وأيضا قوائم للأصدقاء وإرسال طلبات الصداقة . وأيضا نشر المنشورات وغيرها من الخصائص الموجودة في مشاريع التواصل الإجتماعي. يمكنك أيضا إنشاء منصة تعليمية كما هنا في الاكاديمية حيث توفر عرض الدروس والإشتراكات والأسئلة وغيرها من الخصائص المهمة في المنصات التعليمية. وهكذا يمكنك إنشاء أى مشروع تريده يمكنك البحث عن مواقع مهمة بالنسبة لك ومحاولة إنشاء مثلها إذا أردت.

إذا قمت بفتح ال console ستجد أخطاء فيه وهي التي تمنع تشغيل المشروع بشكل صحيح. لاحظ المشكلة أنك لم تقم بإستيراد المكون Contact و Footer لذلك يجب إستيرادهم في ملف src\App.jsx هكذا : import Contact from "./Components/Contact/Contact"; import Footer from "./Components/Footer/Footer"; ليكون الكود هكذا : import React from "react" import Navbar from "./Components/Navbar/Navbar"; import Home from "./Components/Home/Home"; import About from "./Components/About/About"; import Skills from "./Components/Skills/Skills"; import Services from "./Components/Services/Services"; import Projects from "./Components/Projects/Projects"; import Contact from "./Components/Contact/Contact"; import Footer from "./Components/Footer/Footer"; function App() { return ( <> <div> <Navbar /> <Home /> <About /> <Skills /> <Services /> <Projects /> <Contact /> <Footer /> </div> </> ) } export default App

لاحظ المشكلة أنك قمت بوضع سطر 25 : @app.route('/') قبل الصنف Predict مباشرة وهذا خاطئ . وحيث أنك إستخدمت api.add_resource لتسجيل الأصناف. إذا المسارات التي يجب أن تذهب إليها هي /predict أو /health وليس المسار / . ولكن الصحيح هو إما حذف @app.route('/') أو إضافة مسار أساسي هكذا مثلا : from flask import Flask, jsonify from flask_restful import Api, Resource, reqparse import numpy as np import pandas as pd import joblib import tensorflow as tf app = Flask(__name__) api = Api(app) # تهيئة Flask-RESTful # تحميل النماذج والمحولات dl_model = tf.keras.models.load_model('models/dl_model.h5') rf = joblib.load('models/rf_model.joblib') scaler = joblib.load('models/scaler.joblib') # مستخرج السمات من النموذج العميق feature_layer = dl_model.get_layer(index=-2).output extractor = tf.keras.Model(inputs=dl_model.input, outputs=feature_layer) # تحضير محلل البيانات المطلوبة parser = reqparse.RequestParser() for feat in ['age', 'sex', 'cp', 'trestbps', 'chol', 'fbs', 'restecg', 'thalch', 'exang', 'oldpeak', 'slope', 'ca', 'thal']: parser.add_argument(feat, type=float, required=True, help=f"{feat} مطلوب") @app.route('/') def home(): return "Home use /predict or /health" class Predict(Resource): def get(self): args = parser.parse_args() df = pd.DataFrame([args]) X_scaled = scaler.transform(df.values) X_dl = extractor.predict(X_scaled) X_comb = np.hstack([X_scaled, X_dl]) y_pred = int(rf.predict(X_comb)[0]) y_proba = rf.predict_proba(X_comb)[0].tolist() # توليد التوصيات العلاجية recommendations = [] if y_pred >= 2: recommendations = [ "مراجعة طبيب قلب مختص", "إجراء رسم قلب وتخطيط مجدد", "متابعة مستمرة للضغط والكوليسترول" ] else: recommendations = [ "اتباع نظام غذائي قليل الدسم", "ممارسة الرياضة بانتظام", "متابعة سنوية فقط" ] return jsonify({ 'prediction': y_pred, 'probabilities': y_proba, 'recommendations': recommendations }) class Health(Resource): def get(self): return {'status': 'healthy'}, 200 api.add_resource(Predict, '/predict') # GET /predict api.add_resource(Health, '/health') # GET /health if __name__ == '__main__': app.run(debug=True) ويمكنك الذهاب إلى المسارات التالية الصحيحة : http://localhost:5000/predict http://localhost:5000/health

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

إن خطأ 401 يعني Unauthorized (أت أن الوصول غير مصرح به). وهذا يحدث عندما تطلب موارد محمية بكلمة مرور أو بيانات اعتماد أو إشتراك، ولكنك لم تقم بتقديم هذه البيانات أو قمت بتمريرها أو كتابتها بشكل غير صحيح. ولذلك يجب عليك التأكد من تسجيل الدخول الصحيح وإرسال إما ال token أو jwt بناء على ما تقوم به ويمكنك إرفاق صورة للخطأ لمساعدتك. وإليك أنواع الأخطاء التي من الممكن أن تظهر لك وسبب ظهورها:

المشكلة لديك في ملف src\Components\Navbar\Navbar.jsx في جزء ال ul حيث لاحظ أنك تستخدم عنصر a مع href يحوي رابط localhost:5173 ولكن الصحيح هو جعل الرابط نسبي أى من الموقع الحالي المفتوح . لذلك يرجى إستبدال من سطر 13 حتى 16 بالتالي : <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> وإستيراد link في بداية الملف كالتالي : import { Link } from 'react-router-dom'; ليصبح كود الملف كالتالي : import React from 'react' import './Navbar.css'; import logo from '../../assets/logo.png' import { Link } from 'react-router-dom'; const Navbar = () => { return ( <div> <div className="navbar"> <div className="logo"> <img src={logo} alt="" /> </div> <div className="nav-list"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </div> </div> </div> ) } export default Navbar

يرجى تفعيل ال debug لمعرفة أين الخطأ وما هو . يجب إستبدال السطر التالي : app.run() بهذا السطر : app.run(debug=True) بعد ذلك يجب إغلاق المشروع وإعادة تشغيله وإرسال رسالة الخطأ التي تظهر لك مع أخر ملف قمت بتعديله.

وعليكم السلام ورحمة الله وبركاته. نعم صحيح ما تقوم بإنشائه يشبه إلى حد ما لعبة "Mad Libs Generator" حيث يتم إنشاء قصة باستخدام مدخلات المستخدم لملء الفراغات في القصة لديك. الأمر أسهل بكثير بالنسبة للغة الإنجليزية أما مثلا في اللغة العربية الأمر صعب وعقد حيث يتم تغير الضماء والأفعال وحتى الصفات لتناسب جنس البيانات المدخلة . أما في الإنجليزية فيمكننا إنشاء متغيرات بناء على الجنس المدخل هكذا مثلا : if gender == 'male': pronoun = 'he' possessive = 'his' elif gender == 'female': pronoun = 'she' possessive = 'her' else: pronoun = 'they' # للتعامل مع حالات الإدخال الخاطئة أو غير المحددة possessive = 'their' ويمكنك إستخدام تلك الضمائر بداخل الجملة هكذا مثلا : name = input('Enter your name: ') gender = input('Enter your gender (male/female): ').lower() age = int(input('Enter your age: ')) favorite_food = input('Enter your favorite food: ') country = input('Enter your country: ') country_dream = input('Enter which country you wish you could live in: ') siblings = input('Enter the number of your siblings: ') hobbies = input('Enter your hobbies: ') if gender == 'male': pronoun = 'he' possessive = 'his' elif gender == 'female': pronoun = 'she' possessive = 'her' else: pronoun = 'they' possessive = 'their' print(f'Once upon a time, there was a person named {name}. This {gender} was {age} years old. ' f'{pronoun.capitalize()} loved eating {favorite_food}. {pronoun.capitalize()} lived in {country} ' f'but dreamed of settling in {country_dream}. {pronoun.capitalize()} had {siblings} siblings ' f'and enjoyed {hobbies} in {possessive} free time.')

إذا يجب عليك تحديد أولا المجال الذي تريد العمل فيه سواء كان تطوير تطبيقات الويب أو الهاتف أو الذكاء الإصطناعي وذلك لتحديد الدورة المناسبة لك. أما إذا لم تكن لديك فكرة مسبقة عن مجال البرمجة أو التكنولوجيا عموما ولا تعرف المجال المناسب لك فإن دورة علوم الحاسوب هي أفضل بداية لك : ويمكنك قراءة تفاصيل حول تلك الدورة وفائدتها لك :

إذا هذه مشكلة في الكود في الخادم لديك يبدوا أنه يوجد خطأ في الكود

هذا لأنك في الصنف في سطر 26 قمت بتعريف فقط طريقة post أى يجب أن يتم إرسال الطلب من خلال نوع post من نموذج form . ولكن لو أردت أن تجعل الطلب get أى يمكنك الوصول إليه من خلال كتابته في المتصفح يجب تغير post إلى get . أو أن تقوم بتعريف دالة get بداخل الصنف وتعيد ما تريد إعادته عند الذهاب إلى العنوان /

وعليكم السلام ورحمة الله وبركاته. هل تقصد أنك قمت بالإشتراك في دورة هنا في الأكاديمية ؟ إذا كان كذلك هل يمكنك توضيح أى دورة إشتركت بها لمساعدتك.

هل تقوم بالذهاب إلى مسار الرئيسية / ويظهر لك 404 أم تذهب إلى عنوان أخر ؟ أولا غالبا المشكلة بسبب أنك قمت بتعريف app مرتين مرة في سطر 8 ومرة أخرى في سطر 23 . app = Flask(__name__) حيث بسبب هذا بعد أن قمت بكتابة المسار في سطر 10 من خلال app تم إعادة تعينه . لذلك يجب خذف هذا السطر 23 . وأيضا في نهاية الملف لم تستدعي app.run() يجب أن تستديعها هكذا : if __name__ == '__main__': app.run()

أولا المدرب يقوم بتجهيز الكود مسبقا وذلك لتقليل الوقت الخاص بالدرس فلو قام بكتابة الكود أول مرة في الدرس فهذا سيطيل وقت التعلم للطلاب جميعا . ولكن المدرب بالفعل قام بكتابة الأكواد بنفسه من البداية وتقسيم وتخطيط للمشروع وللأدوات والمكتبات اللازمة لتنفيذ ما يريده. والمشكلة التي تواجهك هي مشكلة أغلب الطلاب في بداية التعلم فالسبب الرئيسي هو البدء مباشرة في كتابة الكود قبل فهم المشروع ككل سواء من حيث المتطلبات أو هيكل المشروع حيث : لا تقوم بتحديد المتطلبات أو الميزات منذ البداية. وأيضا لا ترسم صورة كاملة عن بنية وهيكل المشروع. وأيضا تبدأ في كتابة الكود قبل تخطيط الحل وفهم كيف سيتفاعل كل جزء مع الآخر. فأول شي يجب فعله هو فهم المشروع وكتابة متطلباته فقبل ان تكتب أي سطر كود يجب عليك معرفة ما سيفعله المشروع وما هي ما هي صفحاته وهيكله وما هي الوظائف الرئيسية مثل تسجيل دخول أو رفع صور أو محادثة حية (chat) أو غيرها من الخصائص. بعد ذلك يجب عليك تصميم المشروع سواء تصميم قاعدة البيانات التي ستستخدمها لتوفر لك جميع الخصائص التي تريدها أو تصميم الواجهات أو الصفحات وغيرها . وأيضا تصميم هيكل المشروع وكيف سيتفاعل المشروع مع بعضه فمثلا في الواجهة الخلفية تقوم بتصميم ال API المناسب وما هي البيانات التي سيستقبلها من الواجهة الأمامية وهكذا حتى تستطيع تحديد كيف سيتفاعل المشروع ككل مع بعضه البعض. بعد ذلك تحديد الأدوات والمكتبات اللازمة فمثلا هل ستسعمل واجهة خلفية ؟ إذا كان كذلك وقمت بإختيار javascript فالمناسب لك هو nodejs مع express وقاعدة بيانات mongodb . وأيضا مثلا هل تحتاج إلى واجهة أمامية ؟ إذا ما المناسب هل هو React أو Vue أم غيره بناء على متطلبات المشروع . ومثلا لو أردنا تقديم خدمة chat أو إتصال لحظي فهنا الأفضل إستخدام socket.io مثلا . ويمكنك البحث عن المكتبات التي ستساعدك أو التقينة الأفضل لتنفيذ خصائص مشروعك . بعد ذلك وأخيرا بعد أن حددت المتطلبات وحددت التقنيات والأدوات التي ستستخدمها يمكنك الآن البدأ في كتابة الكود جزء بجزء . أى تقوم بتقسمه إلى أجزاء صغيرة كل جزء منها خاص بوظيفة معينة وتجميع تلك الأجزاء معا لتشغيل المشروع ككل . وفي البداية ستجد بالفعل صعوبة في الأمر لذلك يجب عليك التمرين على إنشاء مشاريع كثيرة بنفسك فأن تبدأ بمشاريع بسيطة ثم تدريجيا تقوم بالتقدم في المستوى قليلا إلى أن يتحسن مستواك.

إذا كان المشروع خاص بدرس من دروس الدورة يرجى وضع سؤالك أسفل الدرس مع توفير ملف المشروع. أما إذا كان مشروع شخصي أو خارج محتوى الدورة فيرجى إرفاق المشروع.

إن خاصية aspect-ratio في CSS تستخدم لتحديد نسبة العرض إلى الارتفاع لعنصر ما وهو ما يساعد في الحفاظ على أبعاده بشكل متناسق عند تغيير حجم الشاشة أو عندما لا يتم تحديد العرض والارتفاع صراحة. فمثلا في الصور هناك الصورة 3:4 هنا يعني أى العرض هو 3 والطول هو 4 . أى أن الطول سيكون أكبر من العرض .فمثلا أنت لا تعرف ما هو قيمة الطول والعرض الأصلية للصورة أو للعنصر . ولكنك تخبر css أن تحافظ على تلك النسبة أى أن قسمة العرض على الطول يجب أن تكون 3:4 . img { aspect-ratio: 1 / 1; width: 100px; object-fit: cover; } فمثلا في المثال السابق نحن وضعنا النسبة 1 إلى 1 أى أننا نريد صورة الطول والعرض الخاص بها متساويين أى نريد صورة مربعة. وهكذا يمكنك وضع النسبة بناء على ما تريده فلو أردت الطول أكبر من العرض تعطي نسبة أكبر للطول وهكذا فأنت لست مجبرا على معرفة قيمة ال px للصورة .

وعليكم السلام ورحمة الله وبركاته. إن تحليل السلاسل الزمنية (Time Series) هو مجال مهم جدا في تعلم الآلة ويستخدم على نطاق واسع في الشركات وذلك لإتخاذ قرارات تعتمد على الزمن مثل التنبؤ بالمبيعات وتحليل السوق والصيانة التنبؤية وتحليل المخزون وغيرها. فالسلسلة الزمنية هي مجموعة من البيانات التي تجمع بترتيب زمني وغالبا تكون على فترات منتظمة مثل كل ساعة أو كل يوم أو كل شهر وهكذا. فمثلا عدد الزوار لموقع إلكتروني كل يوم خلال سنة هو سلسلة زمنية. والعمليات المستخدمة بكثرة فيه : الرسم البياني: نستخدم المخططات الخطية لرؤية الأنماط بمرور الوقت. تحليل المكونات: الاتجاه (Trend) الموسمية (Seasonality) الضوضاء (Noise) الدورات (Cycles) تحويل البيانات: مثل تحويلها إلى اختلافات (Differences) لإزالة الاتجاه. النماذج التنبؤية المستخدمة: ARIMA (من أكثر النماذج الكلاسيكية شهرة). Prophet من فيسبوك وهو سهل وسريع التهيئة. LSTM و GRU. XGBoost و RandomForest (عند استخدام ميزات مستخرجة من الزمن). وإليك التالي لمزيد من التفاصيل : أما في دورة الذكاء الإصطناعي فتم شرح وإستخدام السلاسل الزمنية في مسار "تطوير نماذج ذكاء اصطناعي لمتجر إلكتروني" هنا : ستجده في هذا المسار القسم الخامس .

أولا لاحظ أنه يوجد مشكلة لديك في ملف src\App.jsx حيث أنك وضعت Routes بخارج BrowserRouter ويجب أن يكون بداخلها. لقد إستطعت بنفسك إنشاء مسار Navbar وسيعمل معك الآن . ولكن لاحظ أنه لايجب أن يكون هناك مسار لعرض شريط التنقل بل يجب أن يكون مكون وصفحة كاملة. وإليك هذا الكود بعد التعديل : import React, { useEffect, useState } from "react" import Navbar from "./Components/Navbar/Navbar"; import About from "./Components/About/About"; import Hero from "./Components/Hero/Hero"; import {Routes , Route, BrowserRouter} from 'react-router-dom'; import Background from "./Components/Background/Background"; function App() { let heroData = [ {text1: 'Titanium' , text2: 'color'}, {text1: 'Fast and ' , text2: 'powerful'}, {text1: 'Practical and' , text2: 'attractive'}, ] const [heroCount , setHeroCount] = useState(1); const [playStatus , setPlayStatus] = useState(false); useEffect(() => { setInterval(() => { setHeroCount((count) => {return count === 2?0:count+1}) }, 4000); },[]) return ( <> <BrowserRouter> <Navbar /> <Routes> <Route path="/about" element={<About />}/> <Route path="/service" element={<About />}/> <Route path="/contact" element={<About />}/> </Routes> </BrowserRouter> <div> <Background playStatus={playStatus} heroCount={heroCount}/> <Hero heroData={heroData[heroCount]} heroCount={heroCount} playStatus={playStatus} setHeroCount={setHeroCount} setPlayStatus={setPlayStatus} /> </div> </> ) } export default App الآن في ملف src\Components\Navbar\Navbar.jsx يوجد مشكلة لديك في أنك تستخدم العنصر a وهذا خاطئ فلاحظ عند الضغط عليه يقوم مباشرة بإعادة تحديث الصفحة والذهاب للعنوان الجديد . ولكننا لا يجب أن نقوم بذلك لأننا نستخدم React ونبني Single Page Application أى لا يجب أن يكون هناك تحدث للصفحة. لهذا يجب إستخدام Link من react-router-dom لتقوم بالتوجيه بدلا منا هكذا : import React from 'react' import './Navbar.css'; import logo from '../../assets/logo.png' import { Link } from 'react-router-dom'; const Navbar = () => { return ( <div> <div className="navbar"> <div className="logo"> <img src={logo} alt="" /> </div> <div className="nav-list"> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link></li> <li> <Link to="/service">Services</Link></li> <li> <Link to="/contact">Contact</Link></li> </ul> </div> </div> </div> ) } export default Navbar الآن لاحظ بمجرد الضغط على زر التنقل لا يتم تحديث الصفحة بل يتم التوجه مباشرة وتغير العنوان دون إعادة تحديث الصفحة.

أولا أنت لا تستخدم useState لإداراة الحالة حيث يستخدمها React لمعرفة التغيرات التي حدثت في قيمة المتغيرات وحينها يمكنه التعامل معها وإعادة تصير (render) المكون مرة أخرى عند حدوث تغير في القيمة. وأيضا هنا في الكود التالي أنت قمت بإنشاء زر واحد فقط ولكن الصحيح هو إنشاء زر لكل عنصر ليقوم بحذف هذا العنصر نفسه وليس حذف أول عنصر من القائمة دائما. أيضا يجب تمرير المؤشر index الذي نريد حذف هذا العنصر لديك . حيث الدالة splice تأخذ المؤشر الذي نريد بدأ الحذف منه . وهذا هو الكود النهائي الصحيح : import React, { useState } from "react"; function App() { const [tasks, setTask] = useState([ "item1", "item2", "item3", "item4", ]); const maytaskslist = tasks.map((item, index) => { return <li key={item}>{item} <button onClick={() => deleteClick(index)}>clear</button> </li> }) const deleteClick = (item) => { const newDelete = [...tasks] newDelete.splice(item, 1) setTask(newDelete) } return ( <div> <ul> {maytaskslist} </ul> </div> ) } export default App; حيث لاحظ كيف قمنا بإستخدام useState لإنشاء قائمة المهام والتي سيدير حالتها React ومع كل تغير فيها سيقوم تلقائيا بإعادة بناء المكون.

نعم بالطبع يمكنك ذلك فيمكنك إنشاء ملف منفصل وإستدعاء كمكون في ملف App . والملف يكون عبارة عن شئ كالتالي : import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./pages"; import About from "./pages/about"; const router = createBrowserRouter([ { path: "/", element: <Home />, }, { path: "/about", element: <About />, }, ]); export default function Router() { return <RouterProvider router={router} />; } ويمكنك إستدعاءه هكذا في App : import Router from "./router"; function App() { return <Router />; } export default App;

أولا يجب تنزيل المكتبة من خلال الأمر : npm install react-router-dom بعد ذلك يجب تهيئة التوجيه داخل مشروعك ففي لملف src/App.js يجب إضافة التالي : import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; function Home() { return <h2>Home Page</h2>; } function About() { return <h2>About Page</h2>; } function App() { return ( <Router> <nav> <Link to="/">Home</Link> | <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } export default App; الآن قمنا بإنشاء عنوانين أحدهما لصفحة ال home و الأخرى لصفحة ال about . وهكذا يمكنك وضع أى مسار أو عنوان هنا في الملف App ومن ثم توفير المكون الذي سيعمل عند الذهاب لهذا العنوان . ويمكنك قراءة التالي لمزيد من التفاصيل :

توجد عدة طرق لذلك بجانب إستخدام مكتبة React Router لإدارة التنقل بين الصفحات (Routes). حيث يجب تغير العنوان url لتغير title الصفحة فلا يمكنك إستخدام أكثر من title لنفس العنوان فهذا ليس أفضل شئ. الطريقة الأولى لتغيير title لكل صفحة دون تعديل ملف HTML مباشرة، يمكنك استخدام مكتبة مثل react-helmet أو react-helmet-async لإدارة العناصر في <head>. فأولا يجب أن تقوم بتثبيت المكتبة باستخدام الأمر: npm install react-helmet-async بعد ذلك في ملف index.js أو App.js، قم بتغليف التطبيق بمكون HelmetProvider: import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <HelmetProvider> <Router> <App /> </Router> </HelmetProvider> ); وفي كل مكون (صفحة) يمكنك إستخدام Helmet لتحديد العنوان. فمثلا: import { Helmet } from 'react-helmet-async'; function Home() { return ( <div> <Helmet> <title>Home Page</title> </Helmet> <h1>Home Page</h1> </div> ); } والطريقة الثانية لتغيير title بدون react-helmet حيث يمكنك تغيير العنوان مباشرة باستخدام document.title في useEffect: import { useEffect } from 'react'; function Home() { useEffect(() => { document.title = 'Home Page'; }, []); return <h1>Home Page</h1>; }

نعم إن إمتداد .tsx هو نوع من ملفات TypeScript ويستخدم خصوصا في مشاريع React وهو يحتوي على بناء جملة JSX (JavaScript XML). أى أنه بالفعل ملف تايب سكريبت ولكنه ملف تايب سكريبت خاص يدعم تضمين JSX بداخله مباشرة. وهذا مفيد عند بناء واجهات المستخدم باستخدام مكتبات مثل React حيث يتم استخدام JSX لوصف بنية المكونات. فإمتداد .ts هو ملف TypeScript عادي لا يدعم JSX بشكل مباشر. أما .tsx فهو ملف TypeScript يدعم JSX مما يسمح لك بكتابة HTML-like syntax داخل كود TypeScript الخاص بك لإنشاء واجهات المستخدم.