<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Setup</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
{
"name": "es6-react-setup",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"react": "^0.14.3",
"react-dom": "^0.14.3"
},
"description": "Setup files for React in ES6 lessons"
}
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: ['es2015', 'react']
}
}
]
}
}
import React from 'react';
class App extends React.Component {
render(){
return <div>Hi</div>
}
}
export default App
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))
Thanks a lot