How to import .jsx files to .js files in reactJS

I m using node.js for this and using react as frontend, Now how do I import app.jsx file to index.js file? index.js

import App from "./components/app";

ReactDOM.render(<App text="Hello world"/> , document.getElementById('root'))

JavaScript
​x
 
import App from "./components/app";
​
ReactDOM.render(<App text="Hello world"/> , document.getElementById('root'))
​
​

app.jsx

function App(props){
    return <h1>{props.text}</h1>
}

export default App;

JavaScript
 
function App(props){
    return <h1>{props.text}</h1>
}
​
export default App;
​

now at last in app.jsx file I tried to import/require the React file but I get an error “require is not defined”

also in console when importing app.jsx it says require is not defined i m using import and that’s what it says

Answer

use npx create-react-app in your terminal to create new starter react app, you will see the working code over there. link for more info https://create-react-app.dev/docs/getting-started