reagieren Rendern zeigt nichts

Question

Mein Reactive Codepen zeigt nichts.

JS

class HelloWorld extends React.Component { 
    render() { 
     return (<div>Hello World!</div>); 
    } 
} 
var app = document.getElementById("mainapp"); 
React.render(<HelloWorld />, app); 

HTML

<div id='mainapp'></div> 

Ich importierte Reagieren und ReactDOM Trog ein CDN. Und wenn ich React/ReactDOM in der Konsole tippe, wird es korrekt importiert. Dieser Code zeigt keine Fehler an, aber ich sehe nichts. Ich habe das auf mehreren Browsern getestet (Chrome, Firefox, Icecat), aber immer noch keine Ergebnisse ... Ich benutze Bable ist ein Präprozessor.

Answer 1

ReactDOM.render nicht zu ändern.

class HelloWorld extends React.Component { 
 
    render() { 
 
     return <div>Hello World!</div>; 
 
    } 
 
} 
 
var app = document.getElementById("mainapp"); 
 
ReactDOM.render(
 
    <HelloWorld/>, 
 
    app 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script> 
 
<div id='mainapp'></div>

Answer 2

Ihre Komponente muss ein Element anstelle einer nackten Zeichenfolge zurückgeben. Versuchen Sie, es zu <div>Hello World!</div>

Answer 3

Zwei Dinge

1. Sie benötigen eine gültige reagieren zurückzukehren Element
2. Verwenden ReactDOM.render statt React.render

Snippet

class HelloWorld extends React.Component { 
 
    render() { 
 
     return <div>"Hello World!"</div> 
 
    } 
 
} 
 
var app = document.getElementById("mainapp"); 
 
ReactDOM.render(<HelloWorld />, app);

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

diese Antwort sehen Sie auch auf, warum Sie ReactDOM

react vs react DOM confusion