So I was bored and I decided to try messing around with React again. I’ve used JavaScript on-and-off for years, both on the server and in the browser. I’ve used React before, but that was when it first came out. I’m sure a lot has changed since then!
Fantastic. The React website has a “Getting Started” guide. This should be fairly straightforward.
Looks like I have to use React with a “CommonJS module system”. Sure thing, chief! You mean I can even choose between two competing methodologies for doing the same thing? You’re right — it wouldn’t be JavaScript if I couldn’t!
I wonder if I already have one of these installed. “Browserify” or “webpack”.
Come to think of it, the last time I was really heavily working on a JavaScript project (nearly a year ago now), I remember something about “AMD” and “require.js”? Or were those the same thing? Who gives a fuck?! Onward!
So, how do I list globally installed node modules? Let’s see… duck-duck-go’ing… oh, ok. `npm ls -g`. Wait, what’s this tree diagram? That’s nice, but I really just want to know if I installed “browserify” already (I honestly have no clue what “webpack” is).
By the way, the worst case scenario here is that I don’t have either of these installed globally and *do* have “the old dumbshit misguided way” of doing whatever the fuck “browserify” does, which has now become globally installed garbage.
Dudes-MacBook-Pro-2:react-test dudeguy$ npm -g ls | grep “^├─”
├─┬ bower@1.3.12
├─┬ express-generator@4.10.0
├─┬ generator-angular@0.10.0
├─┬ generator-karma@0.8.3
├─┬ grunt@0.4.5
├─┬ grunt-cli@0.1.13
├─┬ gulp@3.8.10
├─┬ less@2.2.0
├─┬ npm@2.1.14
Ha! Grunt. Gulp. Ha! Ha! I guess all that shit is firmly out the window now. Good riddance! Fortunately, I was a good boy and didn’t globally install too many things.
Nice going, me!
So, let’s go ahead with browserify. (This is the all-too-familiar coinflip moment where you have no idea which way the market is going to go and arbitrarily choose one path out of many, which you hope won’t be the loser way next time you login.)
Dudes-MacBook-Pro-2:react-test dudeguy$ npm install -g browserify
/usr/local/bin/browserify -> /usr/local/lib/node_modules/browserify/bin/cmd.js
browserify@13.0.0 /usr/local/lib/node_modules/browserify
├── tty-browserify@0.0.0
├── https-browserify@0.0.1
├── htmlescape@1.1.0
├── path-browserify@0.0.0
├── duplexer2@0.1.4
├── os-browserify@0.1.2
├── inherits@2.0.1
├── isarray@0.0.1
├── string_decoder@0.10.31
├── constants-browserify@1.0.0
├── browser-resolve@1.11.0
├── through2@2.0.0
├── process@0.11.2
├── stream-browserify@2.0.1
├── defined@1.0.0
├── punycode@1.4.0
├── xtend@4.0.1
├── read-only-stream@2.0.0
├── querystring-es3@0.2.1
├── assert@1.3.0
├── timers-browserify@1.4.2
├── domain-browser@1.1.7
├── deps-sort@2.0.0
├── util@0.10.3
├── parents@1.0.1 (path-platform@0.11.15)
├── console-browserify@1.1.0 (date-now@0.1.4)
├── events@1.1.0
├── concat-stream@1.5.1 (typedarray@0.0.6)
├── has@1.0.1 (function-bind@1.0.2)
├── vm-browserify@0.0.4 (indexof@0.0.1)
├── shell-quote@1.4.3 (array-filter@0.0.1, array-map@0.0.0, array-reduce@0.0.0, jsonify@0.0.0)
├── subarg@1.0.0 (minimist@1.2.0)
├── shasum@1.0.2 (sha.js@2.4.4, json-stable-stringify@0.0.1)
├── url@0.11.0 (punycode@1.3.2, querystring@0.2.0)
├── labeled-stream-splicer@2.0.0 (stream-splicer@2.0.0)
├── readable-stream@2.0.5 (process-nextick-args@1.0.6, util-deprecate@1.0.2, core-util-is@1.0.2)
├── stream-http@2.1.0 (builtin-status-codes@1.0.0, to-arraybuffer@1.0.1)
├── glob@5.0.15 (path-is-absolute@1.0.0, inflight@1.0.4, once@1.3.3, minimatch@3.0.0)
├── resolve@1.1.6
├── buffer@4.3.0 (isarray@1.0.0, ieee754@1.1.6, base64-js@1.0.2)
├── JSONStream@1.0.7 (through@2.3.8, jsonparse@1.2.0)
├── syntax-error@1.1.4 (acorn@1.2.2)
├── crypto-browserify@3.11.0 (create-hmac@1.1.4, randombytes@2.0.2, pbkdf2@3.0.4, create-hash@1.1.2, diffie-hellman@5.0.1, browserify-cipher@1.0.0, create-ecdh@4.0.0, public-encrypt@4.0.0, browserify-sign@4.0.0)
├── browserify-zlib@0.1.4 (pako@0.2.8)
├── insert-module-globals@7.0.1 (is-buffer@1.1.1, lexical-scope@1.2.0, combine-source-map@0.7.1)
├── browser-pack@6.0.1 (umd@3.0.1, combine-source-map@0.7.1)
└── module-deps@4.0.5 (stream-combiner2@1.1.1, detective@4.3.1)
…cool…
But wait. Just because I like pain, lemme see my globally installed packages again. It should just have one more line than it did before, right? Hee hee!
Dudes-MacBook-Pro-2:react-test dudeguy$ npm -g ls | grep “^├─”
— SNIP —
…millions of lines of “npm WARN unmet dependency” and “npm ERR! missing” displayed in vomit colors…
What the fuck have I done?
Well, this is a tough thing to Google. “I npm installed -g browserify but then when I npm ls’ed I had WARN unmet dependency and ERR!”
I guess I’ll try `brew update`-ing node.
Wow! It worked? Luck, you sexy lady.
Dudes-MacBook-Pro-2:react-test dudeguy$ npm -g ls | grep “^├─”
├─┬ bower@1.3.12
├─┬ browserify@13.0.0
├─┬ express-generator@4.10.0
├─┬ generator-angular@0.10.0
├─┬ generator-karma@0.8.3
├─┬ grunt@0.4.5
├─┬ grunt-cli@0.1.13
├─┬ gulp@3.8.10
├─┬ less@2.2.0
├─┬ npm@3.5.3
There it is! Now, back to React?
Ah, a helpful note: “If you are using ES2015, you will want to also use the babel-preset-es2015 package.” I can’t take anymore punishment. I’ll just nod and pretend I know what that means.
So, guys, don’t I end up creating an index.html and an app.js somewhere? It doesn’t say. It just goes to the next section, “Quick Start Without npm”.
-=//**But I just fucking went through all that npm shit.**\\=-
Nah, I’m skipping this pussy section. This is the section for people who don’t have the wherewithall to do what I just did, damnit. We’re going to the “Tutorial”!
Alright, looks like we’re building a “simple but realistic comments box”. Scroll down, blah blah blah. First section: “Running a server”.
You have got to be fucking kidding me. And wait. The tutorial isn’t even using “browserify”. It’s linking directly to CloudFare’s CDN. And, come on man, don’t make me learn what the fuck “babel-js” is.
I’m literally about to cry.
Fuck it. I have to work in the morning. I’ll pick this back up tomorrow night.
Sure I will.
