React：ReactDOM.render（）不渲染任何東西

Question

我是第一次使用React，但是我很難讓這個簡單的東西開始工作。

我需要做的是將一個h1元素添加到ID為“ app”的div中，但瀏覽器頁面上沒有任何顯示。 在服務器端和客戶端控制台上都沒有錯誤。 在用if語句包裝ReactDOM.render（）之前，發生了以下錯誤：

ReferenceError: document is not defined

我想在不使用JSX的情況下執行此操作，因為該課程直到稍后才涉及。

app.js

var React = require('react');
var ReactDOM = require('react-dom');

class Clock extends React.Component {
    render() {
        return React.createElement('h1', null, `Hello ${this.props.toWhat}`);
    }
}

if (typeof window !== 'undefined') {
    ReactDOM.render(
        React.createElement(Clock, {toWhat: 'World'}, null),
        document.getElementById('app')
    );
}

index.html

<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>

<script>
    console.log(React);
    console.log(ReactDOM);
</script>

<div id="app"></div>

Answer 1

按照兩位評論者的建議嘗試了不同的設置，確實解決了該問題。 我發現了以下內容，它起作用了： Github-創建React App

要創建新項目（mac終端）：

npx create-react-app my-app