React Setup V

Get Help React.js
#1

Could someone who has this working, post the entire set of files from React Setup, Part V?

MacBook-Pro:node-test sp$ npm run build
npm ERR! Darwin 15.6.0
npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” “build”
npm ERR! node v6.5.0
npm ERR! npm v3.10.3

npm ERR! missing script: build

#2

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;
#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.