ReactDOM.render Nicht alles Rendering

Question

In meinem Haupt-Datei, die ich habe diesen Code

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

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

"../components/phone.js" sieht wie folgt aus:

import React, { Component } from 'react'; 

class TestComponent extends Component { 

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

} 
export default TestComponent; 

Es scheint, wie seine Arbeits richtig, weil es keine fehler in der konsole gibt, und ich kann das element in google chrome tools sehen, aber es scheint leer zu sein. Es zeigt nicht "IT WORKED", was mache ich hier falsch?

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

und es zu machen:

Answer 1

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

Bedürfnisse sein

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

Answer 2

JSX behandelt Klein Tags als normale HTML-Tags. Sie sollten phoneReactElement zu PhoneReactElement oder etwas anderes, das mit einem Großbuchstaben beginnt, umbenennen.

Weitere Informationen finden Sie unter the docs.