首页 > 解决方案 > 反应渲染问题

问题描述

我是反应环境的新手,我在 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"))

标签: htmlreactjsdomwebstorm

解决方案


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

  1. npx create-react-app hello-world

  2. cd hello-world

  3. 将内容更改为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;
  1. yarn start或者npm start

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

在此处输入图像描述


推荐阅读