Simple React Component Doesn't Appear

Question

I am quite new to React. I am trying to create simple react configuration with webpack and babel. But none of my tries succeed. When i run npm start,then enter http://localhost:3333 from browser, an empty page appears. I can see just the title of the page. What do i miss?

Here my codes.

webpack.config.js

module.exports = {
 entry: './main.js',
 output: {
    path: './',
    filename: 'index.js'
 },
 devServer: {
    inline: true,
    port: 3333
 },
 module: {
    loaders: 
    [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['react','es2015']
        }
    }]
 }
}

package.json

{
"name": "es6-react-setup",
"version": "1.0.0",
"main": "index.js",
"scripts": {
  "start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
  "react": "^0.14.3",
  "react-dom": "^0.14.3"
},
"devDependencies": {
  "babel-core": "^6.3.17",
  "babel-loader": "^6.2.0"
},
"description": ""
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Setup</title>     
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

main.js

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

ReactDOM.render(<App />, document.getElementbyId('app'));

App.js

import React from 'react'; 
class App extends React.Component {
    render(){
        return <div>Hello</div>
    }
}

export default App

EDIT:

I delete index.js and node_modules. After that i installed react react-dom babel-loader babel-core babel-preset-es2015 and babel-preset-react. Then below package.json appears. I also run webpack command to produce index.js

{
  "name": "es6-react-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "nw": "webpack --progress --profile --colors"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

Did you run webpack? Does index.js exist? Did you install the presets (they don't appear in your package.json)? — Felix Kling
Thank you Felix. I edited the post. But page is still empty. — Uğur Yeşilyurt
Is it in the webpack.config.js? Does entry part indicate that? Is there any place to call main.js? — Uğur Yeşilyurt

J. Mark Stevens J. Mark Stevens · Accepted Answer · 2015-12-13T20:50:52

Your still missing

"webpack": "^1.8.5",
"webpack-dev-server": "^1.4.7"

from your dependencies.

Simple React Component Doesn't Appear

1 Answers