反応レンダリングに何も表示されません

Question

私の反応コードは何も表示されていません。

JS

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

私が反応しReactDOMは、CDNの谷インポートHTML

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

。 React/ReactDOMをコンソールに入力すると、正しくインポートされます。このコードではエラーは表示されませんが、私は何も見ません。私はこれを複数のブラウザ（chrome、firefox、icecat）でテストしましたが、まだ結果はありません...私はbableを使用していますがプリプロセッサです。

Answer 1

ReactDOM.renderReact.renderに変更してください。

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

コンポーネントは、裸の文字列ではなく要素を返す必要があります。変更すると、<div>Hello World!</div>

Answer 3

あなたは、有効な反応要素の代わりにReact.render

の

使用ReactDOM.renderを返却する必要がある2つのこと

1. スニペット

   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>

   また、あなたがReactDOM

   react vs react DOM confusion