javascript - 导出默认/导入不起作用

Question

This is my code: Why is this not working? The code is suppose to show the h1 in the html file, but for some reason it doesn't do that for me.

Element.js:

import React from "react"
function Element() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
}
export default Element

app.js:

import React from 'react'
import ReactDOM from 'react-dom'
import Element from './Element.js'

ReactDOM.render(<Element />, document.getElementById('root'))

the html code:

<script src="/index.js" type="text/babel"></script>

<div id="root"></div>

I looked at many solutions at stackoverflow but this bug it still doesn't work. I added import React from "react" and import ReactDOM from "react-dom" in both files but still same thing: nothing in the return statement doesn't show up, I've been struggling for hours. What is wrong with my code?

Answer 1

It appears that there are three issues here. With the code provided, thats what I get.

1. As @TJ Crowder mentioned in the comments, the script's type attribute needs a change. You can completely remove it too.
2. As far as I know, the latest ReactDOM package does not have a render method. You have to fitst create a root, and then render the app like so

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

3. Include the script after the root div element, coz the script when gets executed may not know the element with id root.

Answer 2

I would re-do the app.js to

 import Element from './test' function App() { return ( <div className='App'> <Element /> </div> ) } export default App

PS. also some links to the official documentation and how to use react https://reactjs.org/docs/create-a-new-react-app.html https://reactjs.org/docs/rendering-elements.html

PS 2: or if You would really like to do it in the old way

 import React from 'react' import './App.css' import Element from './test' function App() { return React.createElement('div', {}, React.createElement(Element)) } export default App

Answer 3

Following things need to improve into your code-

1-Use of root level rendering things in index.js instead of app.js.

index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App.js";  

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

2-Use App.js file to accumulate all other component into it.

App.js

import Element from './Element'

function App() {
return (
<div className='App'>
  <Element />
</div>
)
}

PS: Learn the heirarchy of react and its flow. This links may be helpful:

React Rendering - https://reactjs.org/docs/rendering-elements.html

Introduction to react rendering https://medium.com/information-and-technology/an-introduction-to-react-rendering-9c24a96b838b