Day #1 of React

Just downloaded the (almost) 300-page 30 Days of React book.

30-days-of-react-book-cover-2-as-book-220

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).

Advertisements

Learning React Is More Funner Now

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 …

Overall, loving the course.

Aaargh! Updating Node Part 2

Previously on JotaScript:

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.

As it turns out, it looks like I never tried updating Node using David Walsh’s instructions that I’d found at AskUbuntu.com (mentioned in post above) so I did that.

Why does it wait until after you've started to warn you, "I sure hope you know what you're doing"?
Why does it wait until after you’ve started to warn you, “I sure hope you know what you’re doing”?

But then starting NPM resulted in this hideous madness.

I also then tried re-installing NPM
I also then tried re-installing NPM

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 found a link to what looks to be the NVM Github home but it uses all these curl commands that scare me so I chose to follow Walsh’s link (because he said it was a mere two simple commands with which I was familiar) to Installing and Managing Different Versions of Node with NVM.

tried installing NVM with NPM

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.

installed NVM with Curl

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:

not useful then NVM -ls

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!

NPM start In Correct Folder

Yay!

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.

Articulating My Goal(s) and a New Book

Sent an email to Swizec Teller after buying his book, React+d3.js: Build Data Visualizations with React and d3.js. He wrote me back, asking what I was working on and I was able to, IMHO, concisely state what I’m working on and why with some specific goals:

I used to teach all the Adobe products plus web-related classes such as HTML, JavaScript, and CSS. After layoffs, I used those skills quite happily for a few years in Instructional Design. Steve Jobs killed Flash which is one of the reasons most Instructional Designer jobs now suck. Finally decided to go all-in and learn programming/web-dev in-depth so I can get my creative/intellectual mojo back. Been focusing on JavaScript and I’ve heard great things about React. I love data visualization–especially if it’s dynamic and interactive–so I’ve fallen in love with D3. I’m hoping your materials clear a bottleneck I’ve had in my learning journey: I want to create pages/apps that access external data from, for example, external JSON docs or a MySQL database–not “data” (notice the “air quotes”) that is embedded in some Javascript in the same HTML file as the D3 code. My end goal for this specific effort is to access APIs such as the CDC or any number of Open Government APIs to create cool, beautiful data visualizations and apps.

Passion & love for programming/creativity is awesome:

fyeah

Here’s a similarly eloquent review from one of his consulting clients:

review.png