反应渲染问题答案

【问题标题】：React rendering issue反应渲染问题
【发布时间】：2020-11-10 00:13:17
【问题描述】：

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

这是 index.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="script.js"></script>
</body>
</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"))

【问题讨论】：

标签： html reactjs dom webstorm

【解决方案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

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

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

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

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

【讨论】：

【解决方案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

你应该在浏览器中看到这个

【讨论】：

【解决方案3】：

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

【讨论】：