Konsole Fehler beispielsweise die Homepage reagieren - eine Stateful Komponente

Question

Der Code-Snippet auf dem react webpage

Scrolling bis A Stateful Komponente

Copy + Geklebte in meine codepen, diese Konsole Fehler aufkommt gefunden wird

hier

Uncaught SyntaxError: Unexpected token < 

ist die codepen link

auch hier ist t er Code selbst:

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

hinzufügen Babel als Prä-Prozessor, fügen Sie Knoten in HTML, wo Sie wollen, um die Komponente zu montieren.

<div id="mountNode"/> 

Aktualisiert-Link: https://codepen.io/DP888/pen/Gvdwzg?editors=1010

Als JSX Syntax und ES6, werden nicht unterstützt in allen browsers.Hence, wenn wir sie in der Reaktion Code verwenden, müssen wir verwenden ein Werkzeug, das sie in das Format übersetzt, das von den Browsern unterstützt wird. Hier kommt Babel ins Bild.