réagit ne montre rien

Question

Mon codepen de réaction ne montre rien.

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> 

I importées et React ReactDOM une cuvette cdn. Et si je tape React/ReactDOM dans la console, il est importé correctement. Ce code ne montre aucune erreur mais je ne vois rien. J'ai testé ceci sur plusieurs navigateurs (chrome, firefox, icecat) mais toujours pas de résultats ... J'utilise bable est un préprocesseur.

Answer 1

ReactDOM.render pas .

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

Votre composant doit renvoyer un élément au lieu d'une chaîne nue. Essayez de le modifier à <div>Hello World!</div>

Answer 3

Deux choses

1. Vous devez retourner un élément valide réagir
2. Utilisation ReactDOM.render au lieu de 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>

également voir cette réponse pourquoi vous devez utiliser ReactDOM

react vs react DOM confusion