React: App not rendering to screen when wrapped in React.Component

Question

So, my app, after being wrapped in a class, no longer renders to the screen, and no errors are issued. Just a blank screen is displayed.

What am I overlooking here?

webpack.config

 var path = require('path'); var webpack = require('webpack'); const Dotenv = require('dotenv-webpack'); module.exports = { devtool: 'source-map', entry: [ 'webpack-hot-middleware/client', './client/index' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new Dotenv({ path: './.env', // Path to .env file (this is the default) safe: true // load .env.example (defaults to "false" which does not use dotenv-safe) }) ], module: { rules: [ // js { test: /\\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client') }, // CSS { test: /\\.styl$/, include: path.join(__dirname, 'client'), use: [ 'style-loader', 'css-loader', 'stylus-loader' ] } ] } }; 

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import app from './app.js'; ReactDOM.render ( <app />, document.getElementById('root') ) 

app.js

 import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { Router, Route, IndexRoute, Redirect } from 'react-router' import 'babel-polyfill'; import { ApolloProvider, graphql, gql } from 'react-apollo'; import client from './apolloClient'; import App from './components/App'; import Single from './components/Single'; import PhotoGrid from './components/PhotoGrid'; import LoginUser from './components/LoginUser'; import css from './styles/style.styl'; import store, { history } from './store'; import Raven from 'raven-js'; import { sentry_url } from './data/config'; if(window) { Raven.config(sentry_url).install(); } import * as OfflinePluginRuntime from 'offline-plugin/runtime'; if (process.env.NODE_ENV === 'production') { OfflinePluginRuntime.install(); } class app extends React.Component { render () { return ( <ApolloProvider store={store} client={client}> { /* Tell the Router to use our enhanced history */ } <Router history={history}> <Route path="/" component={App}> <IndexRoute component={PhotoGrid} /> <Route path="/view/:postId" component={Single}></Route> <Route path="/login" component={LoginUser}></Route> </Route> </Router> </ApolloProvider> ) } } export default app; 

But if I remove the class, as follows, and specify app.js as the entry: point in my webpack.config, then the app renders correctly:

 render( <ApolloProvider store={store} client={client}> { /* Tell the Router to use our enhanced history */ } <Router history={history}> <Route path="/" component={App}> <IndexRoute component={PhotoGrid} /> <Route path="/view/:postId" component={Single}></Route> <Route path="/login" component={LoginUser}></Route> </Route> </Router> </ApolloProvider>, document.getElementById('root') ); 

Answer 1

All react classes in jsx must have a capital first letter. You need to update your index.js accordingly

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render (
    <App />,
    document.getElementById('root')
)

If you were to look at the html output of your code you would likely see <app></app> where you expected your component to be inserted

Answer 2

what about try stateless component:

export default function App() {
    return (
      <ApolloProvider store={store} client={client}>
        { /* Tell the Router to use our enhanced history */ }
        <Router history={history}>
          <Route path="/" component={App}>
            <IndexRoute component={PhotoGrid} />
            <Route path="/view/:postId" component={Single}></Route>
            <Route path="/login" component={LoginUser}></Route>
          </Route>
        </Router>
      </ApolloProvider>
    )
}