react示例网页的控制台错误--有状态组件

Question

代码片段在react网页上找到。

向下滚动到，一个重要的组件

Copy+Pasted进入我的代码库，出现这个控制台错误

Uncaught SyntaxError: Unexpected token <

这是代码链接

下面也是代码本身：

class Timer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {secondsElapsed: 0};
    }

    tick() {
        this.setState((prevState) => ({
          secondsElapsed: prevState.secondsElapsed + 1
        }));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    } 

    render() {
        return (
          <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
        );
    }

}
ReactDOM.render(<Timer />, mountNode);

Answer 1

将HTML 添加为预处理器，在中添加要挂载组件的节点。

<div id="mountNode"/>

更新链接：https://codepen.io/DP888/pen/Gvdwzg?editors=1010

由于JSX语法和ES6在所有的browsers.Hence中都不受支持，如果我们在React代码中使用它们，我们需要使用一个工具来将它们转换成浏览器支持的格式。这就是babel出现在照片里的地方。