Question 191677 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I get my App.js file to run properly?

I am new to codding, so I am following this tutorial: https://www.sitepoint.com/react-tutorial-build-calculator-app/ I’ve been unable to render any elements. This is what the console shows when running the web app

enter image description here

This is the code I have for my 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;

Then this is the 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")
);
Tags:

3

Answers


  1. 0

    Try to specify the root element like this:

    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>
);
    Login or Signup to reply.
  2. 0

    From the error message in the console, it appears that there is an issue with the import statement in your index.js file. The error specifically states that ReactDOM is imported from ‘react-dom/client’, which is not a valid import path.

    To fix this issue, you should update the import statement in your index.js file to import ReactDOM from ‘react-dom’ instead of ‘react-dom/client’. Here’s the corrected import statement:

    import ReactDOM from 'react-dom';
    Login or Signup to reply.
  3. 0

    You can follow intructions below

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

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

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

    refs: https://react.dev/learn/add-react-to-an-existing-project#step-1-set-up-a-modular-javascript-environment

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search