Keine Ausgabe von meiner Reaktion App

Ich bin sehr interessiert in Reactjs lernen, sah ich einige Tutorials auf YouTube.Keine Ausgabe von meiner Reaktion App

Ich folgte auch einige andere Tutorials im Internet wie diese tutorial.

Mein Hauptproblem ist, wenn ich versuche, das erste Beispiel aus dem oben genannten Tutorial ausführen, gibt der Code kein Ergebnis, habe ich etwas verpasst? (Ich benutze IntelliJ IDEA.)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>React tutorial</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<div id="content"></div> 

<script type="text/jsx"> 

    var TimerExample = React.createClass({ 

     getInitialState: function(){ 

      // This is called before our render function. The object that is 
      // returned is assigned to this.state, so we can use it later. 

      return { elapsed: 0 }; 
     }, 

     componentDidMount: function(){ 

      // componentDidMount is called by react when the component 
      // has been rendered on the page. We can set the interval here: 

      this.timer = setInterval(this.tick, 50); 
     }, 

     componentWillUnmount: function(){ 

      // This method is called immediately before the component is removed 
      // from the page and destroyed. We can clear the interval here: 

      clearInterval(this.timer); 
     }, 

     tick: function(){ 

      // This function is called every 50 ms. It updates the 
      // elapsed counter. Calling setState causes the component to be re-rendered 

      this.setState({elapsed: new Date() - this.props.start}); 
     }, 

     render: function() { 

      var elapsed = Math.round(this.state.elapsed/100); 

      // This will give a number with one digit after the decimal dot (xx.x): 
      var seconds = (elapsed/10).toFixed(1); 

      // Although we return an entire <p> element, react will smartly update 
      // only the changed parts, which contain the seconds variable. 

      return <p>This example was started <b>{seconds} seconds</b> ago.</p>; 
     } 
    }); 


    ReactDOM.render(
      <TimerExample start={Date.now()} />, 
     document.getElementById('content') 
    ); 
</script> 

</body> 
</html>

Quelle

2017-12-05 Pro

Sie Fehler in der Konsole erhalten Sie? –

Wird in Ihrer Konsole eine Fehlermeldung angezeigt? Wie auch immer, dein Tutorial scheint sehr veraltet zu sein. – Axnyff

Keine Fehlermeldungen und die Webseite öffnet sich, aber es ist leer :) – Pro

Bin ich etwas verpasst?

Ja, Sie haben zwei wichtige Teile gemischt: "React" und "ReactDOM". Anfangs reagierte eine einzelne lib, die den gesamten Code enthielt, aber nach v0.14 wurde die einzelne lib in zwei Teile "react" und "react-dom" aufgeteilt.

Für weitere Informationen überprüfen Sie dies: React vs ReactDOM?

Lösung für Ihr Problem:

Sie V0.13 so React.render statt ReactDOM.render verwenden verwenden. Eine andere mögliche Lösung ist es, diese Skripte verwenden (getrennte Bibliotheken):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Auch Sie nicht JQuery benötigen, so können Sie die Referenz entfernen.

Vorschlag: Überprüfen Sie die doc für weitere Updates und bessere Wege.

von React.render mit Snippet Arbeiten:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>React tutorial</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="content"></div> 
 

 
<script type="text/jsx"> 
 

 
    var TimerExample = React.createClass({ 
 

 
     getInitialState: function(){ 
 

 
      // This is called before our render function. The object that is 
 
      // returned is assigned to this.state, so we can use it later. 
 

 
      return { elapsed: 0 }; 
 
     }, 
 

 
     componentDidMount: function(){ 
 

 
      // componentDidMount is called by react when the component 
 
      // has been rendered on the page. We can set the interval here: 
 

 
      this.timer = setInterval(this.tick, 50); 
 
     }, 
 

 
     componentWillUnmount: function(){ 
 

 
      // This method is called immediately before the component is removed 
 
      // from the page and destroyed. We can clear the interval here: 
 

 
      clearInterval(this.timer); 
 
     }, 
 

 
     tick: function(){ 
 

 
      // This function is called every 50 ms. It updates the 
 
      // elapsed counter. Calling setState causes the component to be re-rendered 
 

 
      this.setState({elapsed: new Date() - this.props.start}); 
 
     }, 
 

 
     render: function() { 
 

 
      var elapsed = Math.round(this.state.elapsed/100); 
 

 
      // This will give a number with one digit after the decimal dot (xx.x): 
 
      var seconds = (elapsed/10).toFixed(1); 
 

 
      // Although we return an entire <p> element, react will smartly update 
 
      // only the changed parts, which contain the seconds variable. 
 

 
      return <p>This example was started <b>{seconds} seconds</b> ago.</p>; 
 
     } 
 
    }); 
 

 

 
    React.render(
 
      <TimerExample start={Date.now()} />, 
 
     document.getElementById('content') 
 
    ); 
 
</script> 
 

 
</body> 
 
</html>

Quelle

2017-12-05 15:55:26

Vielen Dank für deine Antwort :) – Pro

Keine Ausgabe von meiner Reaktion App

Antwort

Verwandte Themen