title: React Component from jsx is not rendering to html
body: <p>I am new to react and webpack configuration just trying with basic program.</p>
  
  <p>I am not able to see any exception while running in localhost:8080 but not able to see the data in return statement of Render Component too. Please help me:</p>
  
  <p>My React Component:</p>
  
  <pre><code> import React from 'react';
   import ReactDOM from 'react-dom';
   import SearchBar from '../search/search_bar';
  
   export default class Index extends React.Component{
  
       render()
       {
           return (&lt;div&gt;Hi Its me&lt;/div&gt;);
       }
  </code></pre>
  
  <p>}</p>
  
  <p>html Page:</p>
  
  <pre><code>  React Component is here:
    &lt;Index/&gt;
    &lt;script src="bundle.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>   var path = require('path');
  
     webpack = require('webpack');
  
     var BUILD_DIR = path.resolve(__dirname, './src/client/public');
  
     var APP_DIR = path.resolve(__dirname, './src/client/app');
  
     module.exports = {
                  entry: APP_DIR + '/index.jsx',
  
     output: {
              path: path.join(__dirname, 'dist'),
              filename: 'bundle.js',
              publicPath: '/public/'
             },
  
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                       presets: ['es2015', 'react']
                  }
               }
           ]
       },
  
       resolve: {
           extensions: ['', '.js', '.jsx'],
       }
    };
  </code></pre>