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

Question

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'))

app.jsx

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"

Answer 1

Did you type code below at the top in index.js and app.jsx file?

// app.jsx
import React from "react";

// index.js
import React from "react";
import ReactDom from "react-dom";

or maybe you type "require" code in the wrong line. Check it!

Answer 2

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

Answer 3

if there is "type":"module" in package.json, remove it.