كيفية فتح صفحة ويب الخاصة ب react

إن كنت قد قمت بإغلاق صفحة الـ react بالخطأ يمكنك استعادة صفحة الويب التي تم إغلاقها بالخطأ في React عن طريق النقر على زر “Ctrl + Shift + T” في نفس النافذة التي تم إغلاقها فيها.

أو بالذهاب إلى 

http://localhost:3000/

أرجو أن أكون قد فهمت سؤالك بشكل صحيح، فعند إغلاق صفحة ويب في تطبيق React، ستتم إعادة تحميل الصفحة وستبدأ من جديد بدلاً من استئناف حالتها السابقة.

ولكن تستطيع استخدام مختلف الأساليب للحفاظ على حالة الصفحة واستعادتها بعد إغلاقها، وهناك اثنتان من الأساليب الشائعة وهما:

1- استخدام تخزين المستعرض (Browser Storage)

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

كمثال، لتخزين حالة صفحة بسيطة في localStorage، استخدم الكود التالي:

// عند التحميل الأولي للصفحة
componentDidMount() {
  const savedState = localStorage.getItem('myPageState');
  if (savedState) {
    this.setState(JSON.parse(savedState));
  }
}

// عند تحديث حالة الصفحة
componentDidUpdate() {
  localStorage.setItem('myPageState', JSON.stringify(this.state));
}

2- استخدام مكتبة خارجية

هناك مكتبات خارجية تساعد في إدارة حالة التطبيق واستعادتها بعد إعادة التحميل، مثل Redux toolkit و Zustand، تتيح تلك المكتبات إدارة الحالة العالمية للتطبيق والاحتفاظ بها بين الجلسات.

ومثلاً باستخدام Redux toolkit، بإمكانك تخزين حالة التطبيق واستعادتها كالتالي:

1- تعريف المتجر (store) الخاص بالتطبيق وتعيين الحالة الابتدائية:

// في ملف store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const initialState = JSON.parse(localStorage.getItem('myAppState')) || {};
const store = createStore(rootReducer, initialState);

export default store;

2- استخدام المتجر في التطبيق:

   // في ملف index.js
   import { Provider } from 'react-redux';
   import store from './store';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );

3- في مكونات التطبيق، تستطيع الوصول إلى حالة التطبيق وتحديثها باستخدام الأوامر المناسبة من Redux.

import { useSelector, useDispatch } from 'react-redux';

function MyComponent() {
  const state = useSelector((state) => state); // الوصول إلى حالة التطبيق
  const dispatch = useDispatch();

  // تحديث حالة التطبيق
  const updateState = () => {
    dispatch({ type: 'UPDATE_STATE', payload: { /* بيانات التحديث */ } });
  };

  // ...
}

ومن المهم أن تعلم أن استخدام مكتبة مثل Redux يتطلب إعداد إضافي واستخدام مفاهيم مثل الأعمال (Actions) والمخفضات (Reducers) وتوصيل المكونات (Connect)، يمكنك قراءة المزيد عن Redux وكيفية استخدامه في التطبيقات ذات React في المستند الرسمي.

أما إذا كان المقصود بسؤالك كيف تقوم بإعادة فتح صفحة في المتصفح بعد إغلاقها فقم بالضغط على “Ctrl + Shift + T”  معًا في الكيبورد.

هذا ما يظهر لي ?

بتاريخ الآن قال Abdullah King:

هذا ما يظهر لي ?

عليك بتشغيل المشروع من خلال منفذ الأوامر بعد فتحه في مسار مجلد المشروع قم بتشغيل الأمر التالي:

npm start

وسيظهر لك عنوان المشروع والبورت مثلاً http://localhost:3000/ أو http://localhost:5000/