after some time, i'm creating a react app, and i've just set up a skeleton, but it doesn't show up.

i've done the steps, npx create, npm install and start.

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

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

import React from "react";
import Main from "./components/Main"

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

export default App;

import React from "react";
import "./Main.scss";

const Main =()=> {
    <div id="main">
        <div className="gameboard">
        </div>
        <div className="console">
        </div>
    </div>
}

export default Main;

using inspector, there are no divs from Main component in the browser. just the root.

CodePudding user response：

Because you don't return the main jsx

import React from "react";
import "./Main.scss";

const Main =()=> {
 return (
  <div id="main">
    <div className="gameboard">
    </div>
    <div className="console">
    </div>
</div>
)
}

export default Main;