Html 反应渲染问题

我是一个新的环境反应，我已经尝试在WebStorm。DOM是完全空白的。我已附加以下文件作为html和js文件

这是index.html

script.js是

import React from "react"
import ReactDOM from "react-dom"

// JSX
ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))

从“React”导入React
从“react dom”导入react dom
//JSX
render（Hello world！这是一个段落，document.getElementById（“根”））

您没有呈现react组件。尝试用官方模板创建一个简单的react应用程序。

我认为，你不应该像这样使用react。 请看一下我用代码笔写的代码行

https://codepen.io/web-sudo/pen/qBNJpRb

它起作用了。为什么？因为它在codepen模块中有自己的react开发环境。 但是在上面的代码中，正如您所看到的，您编写了

从“React”

导入React。 也就是说，您需要script.js中的

react

模块。但是

react

模块在哪里？ 你没有

因此，您需要在开发环境中包含

react

和

react dom

模块。 请关注下面的例子

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_test

在这里您可以看到这样的评论： /* 本教程中的示例是使用 创建react应用程序。安装CreateReact应用程序， 您将能够在计算机上运行相同的示例

在本例中，我们创建了一个名为“Test”的组件。 组件在名为“根”的容器中呈现。 单击“index.html”选项卡查看容器。 */

总的来说，您确实需要遵循此链接中的指南

---

https://reactjs.org/docs/create-a-new-react-app.html

按照以下步骤在React中创建项目

npx创建react应用程序hello world

cd hello world

将

App.js

的内容更改为以下内容

导入“/App.css”； 函数App（）{ 返回( 你好，世界！ 这是一段

); } 导出默认应用程序；

纱线开始

或

npm开始

您应该在浏览器中看到这一点

import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
      <p>This is a paragraph</p>
    </div>
  );
}

export default App;