Не могу начать работу с react, локальный сервер не отображает изменений в app.js

Question

Начал изучения reacta по роликам. Сравнил код с образцом не нашёл различий, но на локальном сервере не отображает изменения, подскажите в чем проблема.

index.js

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

ReactDOM.render(
    <div>
        работа пошла
    </div>,
    document.getElementById('root')
);

//ещё один метод который я пробовал так же не работает
//const root = ReactDOM.createRoot(document.getElementById(root));
//root.render(<App/>)



App.js


const App = () => {
  return (
<div>text</div>
  );
};

export default App;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

Answer 1

Вот простой рабочий пример, где выводится текст. Попробуйте начать с этого:

const App = () => {
  return (
      <div>
        DIV TEXT
      </div>
    );
}

// Рендеринг
ReactDOM.render(
  <App /> ,
  document.body
);

.red-text {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

UPD

Помогло изменение пути импорта. Не import ReactDOM from 'react-dom/client';, а надо import ReactDOM from 'react-dom';

БЛОГ НА HUSL

Не могу начать работу с react, локальный сервер не отображает изменений в app.js

Ответы (1 шт):

UPD