اذهب إلى المحتوى
  • 0

تحديث تطبيق react إلى الاصدار 18

محمود_سعداوي

السؤال

السلام عليكم.

يظهر لي الخطأ التالي في مشروع react

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17

أعتقد أنه يشير علي بتحديث نسخة react.

كيف أقوم بهذا التحديث.

علما و أني جربت الحلول التالية:

أولا:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

ثانيا.

import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);

كل هذه الحلول لم تجد نفعا.

شكرا على المساعدة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 35 دقائق مضت قال محمود سعداوي:

الآن ظهرت رسالة الخطأ التالية:

react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

حاولت التعديل بالطرق الإضافات التالية:

// 👇️ For client createRoot or hydrateRoot
import * as ReactDOMClient from 'react-dom/client';

// 👇️ For renderToPipeableStream or renderToReadableStream
import * as ReactDOMServer from 'react-dom/server';

 

للأسف دون جدوى

عدل الكود للشكل :

import React from "react";
import ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
import "./index.css";
import App from "./App";

const root = ReactDOMClient.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

تم تعديل الكود السابق وإضافة الـ :

 

import ReactDOM from 'react-dom';

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الشكل الصحيح هو :

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

وابسط شكل لها هو كالتالي :

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

انظر التوثيق الرسمي لـ reactjs

وتأكد من ان اصدار react  و react-dom لديك هو اكبر من 18.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 16 دقائق مضت قال عمر قره محمد:

الشكل الصحيح هو :

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

وابسط شكل لها هو كالتالي :

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

انظر التوثيق الرسمي لـ reactjs

الآن ظهرت رسالة الخطأ التالية:

react-dom.development.js:86 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"

حاولت التعديل بالطرق الإضافات التالية:

// 👇️ For client createRoot or hydrateRoot
import * as ReactDOMClient from 'react-dom/client';

// 👇️ For renderToPipeableStream or renderToReadableStream
import * as ReactDOMServer from 'react-dom/server';

 

للأسف دون جدوى

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 12 دقائق مضت قال عمر قره محمد:

عدل الكود للشكل :

import React from "react";
import * as ReactDOMClient from 'react-dom/client';
import "./index.css";
import App from "./App";

const root = ReactDOMClient.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

في هذه المرة قال لي بأن ReactDom غير معرف

index.js:7 Uncaught ReferenceError: ReactDOM is not defined

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 14 دقائق مضت قال محمود سعداوي:

في هذه المرة قال لي بأن ReactDom غير معرف

index.js:7 Uncaught ReferenceError: ReactDOM is not defined

اضف السطر التالي :

import ReactDOM from 'react-dom';

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...