React Component from jsx is not rendering to html

Question

I am new to react and webpack configuration just trying with basic program.

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:

My React Component:

 import React from 'react';
 import ReactDOM from 'react-dom';
 import SearchBar from '../search/search_bar';

 export default class Index extends React.Component{

     render()
     {
         return (<div>Hi Its me</div>);
     }

}

html Page:

  React Component is here:
  <Index/>
  <script src="bundle.js"></script>

webpack.config.js:

   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'],
     }
  };

Answer 1

You can't render the component in an HTML file, so this:

<Index/>
<script src="bundle.js"></script>

is invalid. You need to render the application in your entry file index.js using the ReactDOM.render method, like this:

ReactDOM.render(
  <Index />,
  document.getElementById('#app'),
)

Then create that tag in your html file like this:

<div id="app"></div>
<script src="bundle.js"></script>

The principle of JSX is that it allows you to render HTML inside the JavaScript using a familiar syntax. All your components will always need to be rendered from inside your JS files.