Comment faire fonctionner correctement mon fichier App.js ?

Question

Je suis nouveau dans le codage, je suis donc ce tutoriel : https://www.sitepoint.com/react-tutorial-build-calculator-app/ Je ne parviens à restituer aucun élément. C'est ce que la console affiche lors de l'exécution d'une application Web

Voici mon code App.js :

import Wrapper from "./components/Wrapper.js";
import Screen from "./components/Screen.js";
import ButtonBox from "./components/ButtonBox.js";
import Button from "./components/Button.js";

const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "X"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".", "="],
];

const App = () => {
  return (
    <Wrapper>
      <Screen value="0" />
      <ButtonBox>
        {
          btnValues.flat().map((btn, i) => {
            return (
              <Button
                key={i}
                className={btn === "=" ? "equals" : ""}
                value={btn}
                onClick={() => {
                  console.log(`${btn} clicked!`);
                }}
              />
            );
          })
        }
      </ButtonBox>
    </Wrapper>
  );
};

export default App;

Alors voici index.js :

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

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

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

Answer 1

Essayez de spécifier l'élément racine comme ceci :

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

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

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

Answer 2

À en juger par le message d'erreur dans la console, il semble y avoir un problème avec l'instruction d'importation dans le fichier index.js. L'erreur indique spécifiquement que ReactDOM est importé depuis « react-dom/client », ce qui n'est pas un chemin d'importation valide.

Pour résoudre ce problème, vous devez mettre à jour les instructions d'importation dans votre fichier index.js pour importer ReactDOM depuis "react-dom" au lieu de "react-dom/client". Voici le relevé d'importation corrigé :

import ReactDOM from 'react-dom';