Question

我是新来的反应环境，我已经在WebStorm中尝试过了。 DOM完全空白。我已将以下文件附加为html和js文件。

这是index.html

INLA

script.js是

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="script.js"></script>
</body>
</html>

Answer 1

我认为您不应该尝试像这样使用React。请看一下我在Codepen中编写的代码行。

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

有效。为什么？因为它在Codepen模块中具有自己的反应开发环境。但是在上面的代码中，您可以看到您写了import React from "react"。意思是，您想要在script.js中使用react模块。但是react模块在哪里？你没有。

因此，您需要在开发环境中包含react和react-dom模块。请重点关注以下示例。

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

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

在此示例中，我们创建一个名为“测试”的组件。该组件在名为“ root”的容器中呈现。点击“ index.html”标签以查看容器。 * /

总体而言，您确实需要遵循此链接中的指南。

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

Answer 2

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

npx create-react-app hello-world
cd hello-world
将App.js的内容更改为以下内容

import "./App.css";

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

export default App;

yarn start或npm start

您应该在浏览器中看到它

Answer 3

您没有渲染反应组件。尝试codesandbox用官方模板创建一个简单的react应用。

反应渲染问题

3 个答案: