React Setup : Run A Local React App (Article 5)


#1

LINK TO ARTICLE / EXERCISE : LINK
Scroll to the Sub-Heading titled "Run A Local React App"

ERROR MESSAGE:

> testing@1.0.0 build /Users/snaylor/Desktop/testing
> webpack

sh: webpack: command not found

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! testing@1.0.0 build: webpack
npm ERR! spawn ENOENT
_npm ERR! _
npm ERR! Failed at the testing@1.0.0 build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the testing package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs testing
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls testing
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/snaylor/Desktop/testing/npm-debug.log

MY CODE:

App.js :

var React = require('react');

var MyComponentClass = React.createClass ({
	render: function () {
		return (
			<h1>Hello world</h1>
		);
	}
});

module.exports = MyComponentClass;

index.js :

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');

ReactDOM.render(
	<MyCompnentClass />,
	document.getElementById('app')
);

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My First Local App</title>
</head>
<body>
	<div id="app"></div>
</body>
</html>

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]
};

package.json :

{
  "name": "testing",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-react": "^6.22.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  }
}

QUESTION I NEED HELP WITH:
I'm assuming that I have punctuation errors (particularly in App.js ? ). Does anyone have help to get this application running? If so, it would be mighty appreciated!


#2

You haven't installed webpack, among a few others


#3

Hello @ionatan! Thanks for your help, so far!

I re-installed the webpack, re-configured the HTML WebPackPlugin & babel, too. After that the program was able to run, thankfully.

However, when I open the App's URL now : http://localhost:8080 , the page displayed is completely blank and white. LINK TO INSTRUCTIONS <-- Scroll down to the Sub-Heading "Run A Local React App".

Below is the code that is supposed to run on it:

CODE : app/components/App.js

var React = require('react');

var MyComponentClass = React.createClass ({
	render: function () {
		return (
			<h1>Hello world</h1>
		);
	}
});

module.exports = MyComponentClass;

QUESTION:
I believe that there are punctuation errors, but am unable to locate them. Are you able to assist? In addition, the remaining code in the other related files, are in the OP for your reference.


#4

A white page suggests a page was served. Check the source of the page


#5

@ionatan

Thanks again! The source code from the white web page shows this:
index.html :

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>My First Local App</title>
</head>
<body>
	<div id="app"></div>
<script type="text/javascript" src="transformed.js"></script></body>
</html>

When I modify the component class' render function in App.js (please see the above OP for code), nothing shows up on the white page. Any thoughts / ideas on why this may be happening?

The only way I can get something to show up on the page is by including HTML in index.html such as : <h1> MyComponentClass </h1> between the two "div" brackets.


#6

Aside from that, they name it App.
I don't know what's up or down in a react app though.

Would be nice with some logging on the requests, but yeah, no clue how to make that happen.


#7

I got some logging out of setting DEBUG='*'

DEBUG='*' npm run start

Lots of output but nothing about my intentional typo that I could see. I don't really know what to expect or how those things are "supposed" to be debugged though.

Anyway, correcting that typo should make the app render and show up, like you already found out by replacing it by just <h1>blah blah</h1>


#8

@ionatan Wohoo! That solved the problem.


#9

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


React Setup: webpack errors