Got them to work... It was a couple of puctuation errors in module.exports
---------- package.json
{
"name": "node-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build":"webpack",
"start":"webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.3.1",
"react-dom": "^15.3.1"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-react": "^6.11.1",
"html-webpack-plugin": "^2.22.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
}
}
----------- webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
plugins: [HTMLWebpackPluginConfig]
};
---------- index.html
<!DOCTYPE html>
<html lang="en">
<script src="./index.js"></script>
<head>
<meta charset="utf-8">
<title>My First Local App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
---------- index.js
var React = require('react');
var ReactDOM = require('react-dom');
var MyComponentClass = require('../components/App');
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);
---------- App.js
var React = require('react');
var picture = "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg";
var MyComponentClass = React.createClass({
render: function (){
return (
<div>
<h1>Hello world</h1>
<img src={picture} style={{height: 200}}/>
</div>
);
}
});
module.exports = MyComponentClass;
