title: React is compiled with no errors but no component is displayed on browser
body: <p>I am new to React.</p>
  
  <p>I have Installed React using <code>npm install create-react-app</code> .
  I have created a <code>server.js</code> file, and my file structure is here.</p>
  
  <p><a href="https://i.stack.imgur.com/c9cdt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c9cdt.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>package.json</p>
  </blockquote>
  
  <pre><code>{
        "name": "my-app",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "axios": "^0.17.1",
          "babel-loader": "^7.1.2",
          "body-parser": "^1.18.2",
          "classnames": "^2.2.5",
          "express": "latest",
          "lodash": "latest",
          "morgan": "^1.9.0",
          "prop-types": "latest",
          "react": "^16.2.0",
          "react-dom": "^16.2.0",
          "react-router": "^4.2.0",
          "react-router-dom": "^4.2.2",
          "react-scripts": "1.0.17",
          "validator": "^9.2.0",
          "webpack-hot-middleware": "^2.21.0",
          "html-webpack-plugin": "latest"
        },
        "scripts": {
          "start": "nodemon --watch server --exec babel-node -- server.js",
          "start-dev": "node server.js",
          "build": "react-scripts build",
          "test": "react-scripts test --env=jsdom",
          "eject": "react-scripts eject"
        },
        "devDependencies": {
          "babel-cli": "^6.26.0",
          "babel-preset-env": "^1.6.1",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "babel-preset-react-hmre": "^1.1.1",
          "nstall": "^0.2.0",
          "react-hot-loader": "^3.1.3",
          "react-redux": "^5.0.6",
          "redux": "^3.7.2",
          "redux-thunk": "^2.2.0",
          "webpack": "^3.10.0",
          "webpack-dev-middleware": "^2.0.3"
        }
      }
  </code></pre>
  
  <blockquote>
    <p>server.js File</p>
  </blockquote>
  
  <pre><code>import path from "path";
  
  import express from 'express';
  import webpack from 'webpack';
  import webpackMiddleware from 'webpack-dev-middleware';
  import webpackHotMiddleware from 'webpack-hot-middleware';
  import webpackConfig from './webpack.config.dev';
  import bodyParser from 'body-parser';
  
  import users from './src/Actions/users';
  
  const app = express();
  
  app.use(bodyParser.json());
  
  app.use('/api/users',users);
  
  const compiler = webpack(webpackConfig);
  
  app.use(webpackMiddleware(compiler, {
      hot:true,
      publicPath: webpackConfig.output.publicPath,
      noInfo: true
  }));
  app.use(webpackHotMiddleware(compiler));
  
  app.use(express.static('public'));
  
  app.get('*',(req,res)=&gt;{
      res.sendFile(path.join(__dirname,'./public/index.html'));
  });
  app.listen(5001, () =&gt; console.log('Example app listening on port 5001!'));
  </code></pre>
  
  <blockquote>
    <p>Webpack.config.js file</p>
  </blockquote>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  
  module.exports = {
      devtool:'eval-source-map',
  
      entry: [
          'webpack-hot-middleware/',
          path.resolve(__dirname, './src/index.js')
      ],
  
      output:{
          path: path.join(__dirname, 'public'),
          filename: "[name].bundle.js",
          publicPath: '/'
      },
      plugins: [
          new webpack.optimize.OccurrenceOrderPlugin(),
          new webpack.NamedModulesPlugin(),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoEmitOnErrorsPlugin()
      ],
      devServer: {
          hot: true,
          inline: false,
          contentBase: "./"
      },
      module:{
          rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              loaders: [
                  'react-hot-loader/webpack',
                  'babel-loader?' +
                  'babelrc=false,' +
                  'presets[]=es2015,' +
                  'presets[]=react'
              ]
          }]
      },
      resolve:{
          extensions:['.js']
      }
  }
  </code></pre>
  
  <p>On running <code>npm run start</code> . It listens to the sufficient port and it compiles everything with no errors. But, On Browser it displays no components of React. It just Runs and does nothing.</p>
  
  <blockquote>
    <p>src/index.js File</p>
  </blockquote>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import registerServiceWorker from './registerServiceWorker';
  import { BrowserRouter, Link, Route } from 'react-router-dom'
  import {Provider} from 'react-redux';
  import thunk from 'redux-thunk';
  import { createStore, applyMiddleware } from 'redux';
  
  import App from './App';
  import Greet from './Greetings';
  import SignupPage from './signup/signup';
  
  const stores = createStore(
      (state = {}) =&gt; state,
      applyMiddleware(thunk)
  );
  
  ReactDOM.render((
      &lt;Provider store={stores}&gt;
      &lt;BrowserRouter &gt;
          &lt;div&gt;
              &lt;Route component={App}&gt;
              &lt;/Route&gt;
              &lt;div id={'jumbo'} className='container css'&gt;
                  &lt;Route exact path='/' component={Greet}/&gt;
                  &lt;Route path='/signup' component={SignupPage}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;
  ), document.getElementById('app'));
  registerServiceWorker();
  </code></pre>
  
  <p>How can I clear my code. I did not know where i did mistakes. Help me !!
  Thanks in advance. :-)</p>