ReactJS Simple Component Not Shown
<p>I'm trying to render a small search bar onto my website, but what I see is that it is still existing in the website, but its size becomes 0x0, and I can't find anything wrong with my ES6 code. Can someone debug for me please?</p>

<p><a href="https://i.stack.imgur.com/b5bna.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5bna.png" alt="It only shows that it exists in the html, but not actually showing anything."></a></p>

<p>index.html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

  &lt;link rel="stylesheet" href="/style/style.css"&gt;
  &lt;!-- &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt; --&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
  &lt;title&gt;React-Redux-Learning&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="container"&gt;&lt;/div&gt;

  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified Bootstrap JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;script src="/bundle.js"&gt;&lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>index.js:</p>

<pre><code>import React from 'react'
import ReactDOM from 'react-dom'
import searchBar from './components/searchBar'
const youtubeAPIKey = '...'

const App = () =&gt; {
  return (
    &lt;div&gt;
      &lt;searchBar /&gt;
    &lt;/div&gt;
  )
}

ReactDOM.render(&lt;App /&gt;, document.getElementById('container'))
</code></pre>

<p>searchBar.js:</p>

<pre><code>import React, { Component } from 'react'

class searchBar extends Component {
  constructor(props) {
    super(props)

    this.state = {term: ''}
  }
  render() {
    return &lt;input onChange={event =&gt; console.log(event.target.value)}/&gt;
  }
}

export default searchBar
</code></pre>