带有 React 的 Visual Studio 代码

Question

I am trying to use React with MS Visual Studio Code.我正在尝试将 React 与 MS Visual Studio Code 一起使用。 If I ran the program from the terminal, I get following error message: "Cannot use import statement outside a module"如果我从终端运行程序，我会收到以下错误消息：“无法在模块外使用 import 语句”

If I run the program without terminal, it takes me to the browser (Firefox) and gives "File not found" error message.如果我在没有终端的情况下运行程序，它会将我带到浏览器（Firefox）并给出“找不到文件”错误消息。

Not sure how the above two are connected.不知道以上两个是如何连接的。 Is this is a problem with node installation, location of my files (where I do the actual programming), or perhaps is has something to do with Firefox debugger.这是节点安装的问题，我的文件位置（我在哪里进行实际编程），或者可能与 Firefox 调试器有关。

Kindly ask for help.请寻求帮助。 Many thanks.非常感谢。

Here is the code:这是代码：

import React from "react";
import { ReactDOM } from "react-dom";


class App extends React.Component {
    render() {

        return (
            <div>Test div</div>
        );
    }
}

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

I am also providing a code to my .html, in case it is relevant:我还为我的 .html 提供了一个代码，以防相关：

<!DOCTYPE html>
<html lang="eng">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="/src/Dejan/Kalkulator/calc.css">
    
</head>

<body>

<h1 id="test">Testing the system</h1>
<script src="/src/Dejan/Kalkulator/calc.js"></script>
</body>
<div id="App"></div>
</html>

Answer 1

Hey Deyan doesn't add into the HTML file, because react will automatically handle that, and also don't use CSS in HTML it will cause weird behavior at the end.嘿，Deyan 不会添加到 HTML 文件中，因为 react 会自动处理它，并且不要在 HTML 中使用 CSS，它会在最后导致奇怪的行为。

And don't put App div outside of the body tag.并且不要将 App div 放在 body 标签之外。 Because inside that div your whole react app will be fitted.因为在那个 div 里面，你的整个 react 应用程序都将被安装。

import React from "react";
import { ReactDOM } from "react-dom";
import "./Dejan/Kalkulator/calc.css"; // and add css like this I don't know your file path use the correct I put randomly.


 class App extends React.Component {
   render() {

    return (
        <div>Test div</div>
       );
      }
}

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


<!DOCTYPE html>
<html lang="eng">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>

</head>
<body>
  <div id="App"></div>
</body>

带有 React 的 Visual Studio 代码

问题描述

1 个解决方案

解决方案1
0 2022-06-25 12:38:33

带有 React 的 Visual Studio 代码

问题描述

1 个解决方案

解决方案1 0 2022-06-25 12:38:33

解决方案1
0 2022-06-25 12:38:33