ReactDOM.renderが私のメインのファイルでは何も

Question

をレンダリングない私はこのコードを持っている

import phoneReactElement from "../components/phone.js"; 

ReactDOM.render(<phoneReactElement />, document.getElementById('phoneComponentTester')); 

「../components/phone.js」は次のようになります。

import React, { Component } from 'react'; 

class TestComponent extends Component { 

    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <div>IT WORKED</div> 
     ); 
    } 

} 
export default TestComponent; 

それは、その作業のように思えますコンソールにエラーはなく、Google Chromeのツールでその要素を見ることができますが、空であるようです。それは "IT WORKED"を表示していませんが、私はここで何が間違っていますか？

Answer 1

import phoneReactElement from "../components/phone.js"; 

ニーズもします

import TestComponent from "../components/phone.js"; 

し、それをレンダリングする：

ReactDOM.render(<TestComponent />, document.getElementById('phoneComponentTester')); 

Answer 2

JSXは、通常のHTMLタグとして小文字のタグを扱います。 phoneReactElementをPhoneReactElementに変更するか、大文字で始まる名前に変更する必要があります。

詳細については、the docsを参照してください。