Уведомление об устаревании: ReactDOM.render больше не поддерживается в React 18

В вашем файле index.js измените на:

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

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

reportWebVitals();

Как указано в вашей ошибке, ReactDOM.render больше не поддерживается. Так что используйте новый createRoot. Как видно из приведенного ниже кода (который был взят из документы), все, что вам нужно сделать, это заменить ReactDOM.render на createRoot.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab = "home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab = "home" />);

Чтобы обеспечить более или менее эквивалент предыдущих версий реакции, я использую эту слегка сжатую версию вышеизложенного, по-прежнему окружая <App><React.StrictMode>. Еще одна причина, по которой я сокращаю это, заключается в том, что мне никогда не нужен доступ к корневой переменной, в результате чего операторы объединяются в цепочку, и весь файл состоит всего из 5 строк кода:

import React from 'react';
import ReactDOM from "react-dom/client";

import './index.css';
import App from './App';

    ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);

[P.S. Не забудьте, если вам нужна функциональность webvitals, чтобы также добавить к приведенному выше коду]

Как вы сказали, вы создали свое приложение React, используя: npx создать-реагировать-приложение мое-приложение.

• Ваш index.js должен выглядеть так после выполнения команды.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• Ваш код после правок, упомянутых в консоли

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

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

reportWebVitals();

React 18 был отправлен вчера (29 марта). ReactDOM.render устарела в React18 и в настоящее время выдает предупреждение и работает в совместимом режиме.

Устаревшие

Устаревшие

• react-dom: ReactDOM.render устарело. Его использование предупредит и запустит ваше приложение в режиме React 17.
• react-dom: ReactDOM.hydrate устарело. Его использование предупредит и запустит ваше приложение в режиме React 17.
• react-dom: ReactDOM.unmountComponentAtNode устарело.
• react-dom: ReactDOM.renderSubtreeIntoContainer устарело.
• react-dom/server: ReactDOMServer.renderToNodeStream устарело.

Чтобы решить эту проблему, вы можете либо вернуться к предыдущей версии React, либо обновить файл index.js, чтобы он соответствовал синтаксису React 18.

Пример:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

В вашем файле index.js:

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

// Используйте это, прежде чем реагировать на версию 18

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

// Используйте это в версии реакции 18

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

Это должно сделать это:

import React from 'react';
import {createRoot}  from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById("root"))
root.render
  (
    <App />
  )

React 18 был выпущен 29 марта 2022 года, и нам нужно знать о нескольких критические изменения и Устаревшие.

• react-dom: ReactDOM.render устарел. Использование этого предупредит и запустите свое приложение в режиме React 17.
• react-dom: ReactDOM.hydrate устарел. Использование этого предупредит и запустите свое приложение в режиме React 17.
• react-dom: ReactDOM.unmountComponentAtNode устарел.
• react-dom: ReactDOM.renderSubtreeIntoContainer устарел.
• react-dom/server: ReactDOMServer.renderToNodeStream был устарел.

React 18 поставляет два корневых API: Legacy Root API и New Root API.

Устаревший корневой API: Это существующий API с именем ReactDOM.render. Он создает корень, работающий в «устаревшем» режиме, который работает так же, как React 17. Перед выпуском мы добавим в этот API предупреждение о том, что он устарел, и переключимся на New Root API.

Новый корневой API: Новый корневой API вызывается с помощью ReactDOM.createRoot. Он создает корень, работающий в React 18, который добавляет все улучшения React 18 и позволяет вам использовать параллельные функции. Это будет корневой API в будущем.

В New Root API вызывающая сторона создает корень, а затем вызывает для него рендеринг:

import * as ReactDOMClient from 'react-dom/client';
import App from 'App';

const container = document.getElementById('app');

// Create a root.
const root = ReactDOMClient.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab = "home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab = "profile" />);

Также проверьте официальную документацию React для обновление до реактивной версии 18.

Ссылка: ReactDOM.render больше не поддерживается в React 18.

// До

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab = "home" />, container);

// После

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab = "home" />);

//До того, как в вашем файле index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

// Измените, как показано ниже, в файл index.js импортировать React из «реагировать»;

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<React.StrictMode>
  <App />
</React.StrictMode>);


reportWebVitals();

Если ваше приложение использует React-Router, то следующий код будет работать нормально:

import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Он будет работать отлично (с реактивным маршрутизатором)