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

بتاريخ 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';

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

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.

بتاريخ 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';

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

بتاريخ 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

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

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

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

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

import ReactDOM from 'react-dom';