子组件未在父组件中正确呈现

Question

The following is the parent component:

 class Parent extends Component {
     constructor(props) {
         super(props);
         this.state = {

         }
     }

     render() {
         return (
             <div>
                 <h1>My heading</h1>
                 <child />
             </div>
         );
     }
 }

 ReactDOM.render(<Parent />, document.querySelector('.container'));

The following is the child component:

 import React from 'react';

 class child extends React.Component {
     constructor(props) {
         super(props);
         this.state = {}
     }

     render() {
         return (<p>My paragraph</p>);
     }
 }

 export default child;

I am very new to React.js so this question might be stupid. But why only the parent component, namely "My heading" is displayed on the page and the child component is not shown up? I expect both the parent and the child components to be displayed on the page.

Also, what is the difference between:

1) document.querySelector('.container') ;

AND

2) document.getElementById('.container') ;

In my case, only 1) works and when I tried to use 2) in ReactDOM.render() , I got an error message saying that: Target container is not a DOM element.

Thank you!

Answer 1

Capitalize child to be Child . Custom component classes must have capital names, which differentiates them from vanilla DOM elements.

For your second question, read the method name, getElementById . Your container element doesn't have an ID named '.container'