Question

我是新来的反应者，但我有HTML javascript和CSS的经验。我安装了node和npm并使用npm并在Windows pc上输入了以下命令。

npm install -g create-react-app

这将安装一个名为create-react-app的命令行实用程序，然后通过输入以下命令来创建我的react应用

create-react-app my-app

现在，我已经设置了所有我决定要尝试的东西，并编辑了app.js。我最后添加了以下几行（导入行除外）。

import ReactDOM from 'react-dom';

const h1 = ( <h1>Hey there!</h1> );
ReactDOM.render(h1, document.getElementById("test") );
//the id "test" was assigned to a <h1> element in index.js

现在我将其保存并运行以下命令。

cd my-app
npm start

现在出现错误。

有人遇到过同样的错误吗？如果可以的话，您能告诉我如何解决吗？

PS：如果有帮助，我可以在Visual Studio代码中进行代码编辑。

Answer 1

检查index.js中是否包含ReactDOM
您的应用中应该只有一个RenderDOM，那就是您的index.js。这是由于create-react-app webpack配置，它将仅从index.js读取ReactDOM。

将App.js更改为：

  - name: Replace configuration in xml 
    replace:
      path: /path/to/file/configuration.xml
      regexp: '(<\s*{{node}}.*>)(\s*)(currentvalue)(\s*)(<\/\s*{{node}}\s*>)'
      replace: '(<\s*{{node}}.*>)(\s*)(newvalue)(\s*)(<\/\s*{{node}}\s*>)'

并将Index.js更改为：

import React from 'react';

const App = () => {
    return (
        <h1>HELLO WORLD</h1>
    );
};

export default App;

Answer 2

如果您不想要App.js，也可以尝试以下方法：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
   return (<h1>HELO WORLD</h1>);
}

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

我无法做出反应

2 个答案: