Been meaning to get into React for a long time because it seems to be the hottest thing. A couple things have kept me from diving in with it (see previous posts about another mess of a book). Also, I figured I should/would finish my first couple (what I consider “more basic”) apps in jQuery & PHP and then make React versions.
However, I seem to have hit brick walls in both my “current” apps. Stakeout is having ZIP-archive-generating issues and rockinApp is … I can’t figure out what’s wrong. I need several hours at once to concentrate on and solve the mystery there to get over my latest learning hump.
So, to stay productive and positive while progress is slow on those, I’ll do this new 30 Days of React thing. I’ll let you know if this book/course is better than the last one(s).
Working through Codecademy‘s Learn ReactJS Part 1. Not only is it going much better than the rotten book I bought a while back but the content is funny.
The UI is a bit slow (on all three machines I’ve used — Windows, Mac, and Linux).
I’ve only run into one small glitch that I can keep an eye out for. In this course, each step you complete unlocks the next step. In one case, I kept changing my code because the next step wouldn’t unlock (in real-life, it’s almost always the coder’s fault; in courses/books, it’s almost always the source’s fault). Finally, I just clicked “show me the code” and it was expecting me to type in the second step! Grr … but, seriously, it only happened once and it might have been a browser/connection glitch or something …
TL;DR & Update:As it turns out, I’m always right–even when I’m wrong. 1) It’s always the user’s/coder’s fault and 2) the documentation was missing a crucial comma in the code. Read on.
Here I was, happily working through Swizec Teller‘s React + D3JS and, when running my first test, and ran into the same problem that brought me to a screeching halt six months ago. The npm start command resulted in an error/warning similar to one that flew by while installing at least one of the requirements saying something about a legacy/analog version of Node. I’d sort of ignored it during the installation, hoping it wouldn’t really affect anything but now my browser told me it couldn’t connect to localhost:3000.
But then starting NPM resulted in this hideous madness.
Then I read past the first couple of positive comments and the rest were horror stories. I went to Walsh‘s actual, original post (linked above) and, of course, there’s an update in it about how it can screw paths up and Walsh says using something called NVM is probably a better idea. Ugh. So I followed the link to his more relatively recent article Managing Different Node Versions with NVM. Despite his further high praise for NVM, I’m not interested in using multiple versions of Node, but one of the comments mentioned using NVM to install a tool “useful for moving your tools to the new Node.js version” which I thought might solve the paths issue.
I have never been yelled at by my terminal so much and with so much color as I have last night and this morning! It said I could try again as root but the message that I should use the curl commands seemed to be stated with more authority.
Not only was that successful, but included some yummy, specific feedback confirming I need to do some shizzle to clean up links & paths. I closed the terminal window as instructed and ran a test command to confirm NVM was installed and running correctly. Then I did use the “useful” command mentioned earlier which gave me this:
I tried a couple other things and the conclusion I’ve come to is that NPM couldn’t install a couple things because I had an old version of Node but updating Node broke NPM (I can’t use it or start it) even though NPM comes with Node so shouldn’t a new version of Node have updated NPM?
I don’t know what to do.
Googling, “updated Node broke NPM” returned these and I wonder if this has anything to do with my problem. I remember reading headlines and comics referring to this:
All of the problems others are having that Google offered up aren’t exactly the same problems I’m having so I’m going to do what I considered doing months ago but am still scared to try: uninstalling something in Linux. When something is easier in Windows than it is in Mac OS or Linux, something is seriously wrong with the universe. I’m pretty darn sure uninstalling something in Linux doesn’t uninstall all the shizzle that was installed with it. And that seems to just perpetuate the problem I’m having.
To be continued…
Conclusion & Solution
While reviewing my previous posts and screenshots to confirm which version(s) of Node I needed to uninstall, I noticed that I’d tried starting NPM from two different folders (root because I thought … why not? … and, when that didn’t work, from /var/www/html because that’s my little web server) and it looked for this missing (not found) “package.json” file in a relative location. So maybe, I thought, I should be running the command from one directory deeper–the folder in which I was building my little React+D3 app.
Completely different error this time! Apparently, my app didn’t know what Babel was and gave me the file and line number so I could go fix the offending unexpected identifier. I knew I’d typed the code correctly (how else could you spell Babel?) but I opened the book (React + d3js) and my file anyway to compare.
Flipping through the pages in order, I first found this:
My file was missing that comma at the end of line 22. But wait, I thought, “No way, that’s not what the book said last night! I remember thinking there should be a comma but there wasn’t one in the book so I trust this book that is now lying to me!”
I turned a couple pages just because and found this:
There it was. Or, rather, there it wasn’t. No comma. The line above to remove had a comma but the line to add didn’t. Remembering how many times tutorials and documentation have failed me and ignoring my instincts proved to be a mistake, I added the comma, saved my work, returned to the terminal and typed npm start. My laptop thought for a moment then spit out listening at localhost:3000. Glory to The One Above All! (that’s what God is called in the Marvel universe) Going to localhost:3000 in my browser gave me exactly what Mr. Swizec promised it would!
That’s why I need to know the language, not just given crap to type or copy & paste … so I can be confident and spot errors while I’m learning.
Let me just say, however, that, except for the missing comma that threw this newbie into a tailspin, Mr. Swizec and his book are downright excellent. Full review later but, in short, he teaches in a way that is perfect. If all books structured “how to build whatever” lessons like he does, the world would be a much better place.
Passion & love for programming/creativity is awesome:
Here’s a similarly eloquent review from one of his consulting clients: