I can't get my React app to work due to script errors

[jackweb]

After concluding two courses on React on Codecademy, I then followed instruction downloading Babel and Webpack, and tediously wrote out the package.json. Long story short, the package.json was filled with errors that npm caught when I tried to start it.

I couldn’t make it work so I tried something else, I download a “create-react-app” from something called facebook incubator. That worked OK, put up a dev server and ran its app. So I tried to transfer its methodology to my first app. But it is different. It does not use Webpack! It uses something called react-scripts, and you have to require that, and somehow a service worker file is in there someplace.

I replaced the webpack parts of my package.json file with the good parts from the create-react-app and react-scripts. I then imported react-scripts under the imports for react and react-dom in my app. Like this:

{
  "name": "jackproject1",
  "version": "1.0.0",
  "description": "Jack's first project",
  "main": "index.js",
  "scripts": {
	"build": "webpack",
	"author": "",
	"license": "ISC"
	},
	"dependencies": {
		"react": "^15.6.1",
		"react-dom": "^15.6.1",
		"react-scripts": "1.0.10"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test --env=jsdom",
		"eject": "react-scripts eject"
	},
	"devDependencies": {
		"babel-core": "^6.25.0",
		"babel-loader": "^7.1.1",
		"babel-preset-react": "^6.24.1"
	}
}

But it still does not work. When I type “npm start”, I still just get ERR ERR ERR ERR ERR ERR
and now I have lost the plot altogether. I don’t know what to do.

Is this the part where React saves us all time and effort? If this were a live production situation, it would be faster for me to use vanilla JS by hand.

I need a SIMPLE way of running React components I build,otherwise I won’t use it.

[fretburner]

Hey @jackweb

The react-scripts package is create-react-app’s way of trying to keep things simple by hiding away the configuration for tools like babel and webpack. If you want to get at that configuration, you can run npm run eject which copies it into your project - beware though, as this is a one-way step intended for if/when you grow beyond the presets and need something custom.

Create-react-app is the recommended way for learning React and starting new projects, as it avoids you needing to get up to speed with all the build tooling like transpilers and bundlers first. That said, if you really want to strip it back even further, you can run React simply by including some script tags in your page (although it’s definitely not recommended for production code!).

[jackweb]

Thanks. I found Babel and Webpack to be such a headache that I think I will actually stay with create-react-app for now, until I get more of a sense of what properties I actually want. (I think what I really want is a wizard, but…)

[jackweb]

I’m working on Vue now, but still having trouble with the build. I notice that when I do a tutorial, the tutorial will make me go to npm and download its own node_modules, its own vue, its own vue_resource, its own webpack, and package.json, etc. So I think I now have four copies of everything on my dev server. I’m trying to figure out what I need to actually write to set up each project. I gather that a custom package.json is one thing, per project. But there must be a way to stash libraries globally and point the config files at them. And I guess I still need to use npm build at some point.

[fretburner]

Although there are ways you can share the same copy of a library between projects, most of the time you probably don’t want to be doing that.

By using npm and having a separate node_modules folder for each project, you can control exactly which versions of the different libraries your project will use. Also, assuming that you’re using a module bundler in your projects, the final built JS will include the code of all your dependencies anyway, so you won’t have to worry about the size of the node_modules folder in production (if that’s what you’re concerned about).