As I write this post, it is exactly a week before Thanksgiving. Which means two and a half weeks before we start our third and final unit of LC101. (And six days til I leave for Breckenridge! Squee!)
I’m trying to go into this unit expecting another bump in difficulty, plus all the fun frenzy that comes with the 🥂Holi~day Sea*son🎄
I’m set to take the Javascript track, along with about 25 of my peers. (The rest are going the way of the back-end and are learning Java.) And though Javascript is well in demand in the Kansas City tech scene, there’s a bit of a rub: it only pays to know Javascript if you also know a framework. And for that, we’re going to be largely responsible for learning on our own.
To grease the turkey — I mean wheels of Unit 3, I’ve used a couple of resources to dip my toes in Javascript and React. Here are my recommendations if you want to do the same.
1. Mosh Hamedani’s “Learn React – Crash Course 2018” video
Way back in July, when I didn’t know what a Github account was, let alone the finer points of Python syntax, I attended DjangoGirls Kansas City. From zero experience to coding a blog in Python using the Django framework, it was definitely a learn-by-doing experience.
To get us there, the participants were directed to a webpage with a series of tutorials that took us from learning things like ~ what even is a command line ~ all the way to making this piece of absolute artwork:
And I found that, even though I was in WAYYYYY over my head with the material, I liked that feeling. I learned much quicker than I would have if they’d tried to stand up and give me a 45-minute Powerpoint on Django. My learning pattern was: read, do, ask questions (the mentors were awesome), repeat.
So, continuing the pattern of learning by jumping into a raging river of information and clinging to any piece of driftwood I can, I began my Javascript/React journey by following along with Mosh’s 2.5-hour interactive tutorial.
If you’re starting from zero like me, there will be a lot you don’t understand, and it’ll take much longer than 2.5 hours to get through because you’ll pause, try some code, see it doesn’t work, rewind and do it again. It’s slow going but worth it. By the end, you’ll have gained a smidgen of fluency, dab of familiarity, and a skosh of confidence. And you’ll have an application that looks like this:
You’ll still wonder things like, what the heck is an arrow function, and should I make macaroni chili for dinner? The answers to both are yes, and will become clearer in step two:
2. Mosh’s “Javascript for React Developers” video
There’s a disclaimer somewhere towards the beginning of Mosh’s React crash course where he says, “If you don’t already know Javascript, I recommend you learn it before continuing on with this video.”
Because I do what I want ™, I ignored his advice and finished the crash course, knowing I’d circle back to watch his “Javascript for React Developers” video. At 50 minutes long, this one is a little more bite-sized.
It covers “the essential Javascript functions in React development:” Var/Let/Const, Objects, this, Arrow functions, object destructuring, spread operator, classes, and modules.
It’s pretty dry, I’m not going to lie. Which is another reason it’s good to start with the react crash course rather than here: you already know the types of projects you can use Javascript/React to create. That should help keep you motivated for the hour or so this video takes.
3. LaunchCode’s Bootstrap lesson
This! This is what I’ve been waiting for this whole time: a way to make things PRETTY.
Now, LaunchCode’s Bootstrap lesson is technically a part of Unit 2, but the timing of it was perfect, coming after I followed along with the two Mosh videos. Just like “Javascript for React developers” filled in a lot of the info I was missing in the “Crash Course,” LC’s Bootstrap resources filled in everything I didn’t understand about Mosh’s use of the popular framework.
This is the front-end stuff I always KNEW existed — the things that make it easy to build on others’ code, the templates for making stuff that looks good right off the bat — but just didn’t know where to find.
As it turns out, I could have found it pretty easily at www.getboostrap.com.
One of my favorite resources in this lesson is What is Bootstrap: A Beginner’s Guide by Alexander Ouellette. He describes why LaunchCode probably didn’t have us start with Bootstrap right off the bat:
“There’s always the risk that, by using Bootstrap, you’ll get into a cycle of simply recycling existing code without actually understanding it. By spending the time to really learn what you’re doing, however, you can use Bootstrap as a way of accelerating your learning, rather than hindering it.”
Alexander Ouellette, Career Foundry
Which: fair. Would I have enjoyed toiling for 10 hours over my blogz assignment, the result of which was this:
…if I had know than I could copy and paste everything from Bootstrap I needed to make a blog that looked like this?
Although W3 School’s UI isn’t the most awesome, their set of tutorials on Bootstrap (as with so much) was probably the most helpful. I found it most efficient to scroll down to the exercises to start, rather than reading through. You won’t learn til you do the dang thing anyway.
4. Epilogue
In this post I skipped over a very important question: why learn React over Angular or Vue? My reasoning boiled down to:
- I read in this article that more dev job postings on Indeed mention React than Angular or Vue.
- When I’ve asked people in class and at networking events which I should choose, more people said React.
So, my choice wasn’t terribly scientific: one stat + a handful of people.
There are tons of articles out there going over the finer points of React vs Angular vs Vue. There’s even a Reddit thread. I am way less than qualified to tell anyone which they should choose to learn, but here are a couple of bonus pieces of info that might help:
- Angular is a full-fledged framework; React and Vue are libraries. Here’s an article about what that means. The key difference seems to be IoC or Inversion of Control. As Geeks for Geeks say, “When we call a method from a library, we are in control. But in framework, the control is inverted i.e. the framework calls us.”
- Learning Angular also requires learning TypeScript. According to this article, “TypeScript is a superset of Javascript [that] offers us more control over our code via type annotations, interfaces, and classes.”
- Angular was created by Google; React by Facebook. I’ll leave it to your discretion which way to lay your alliance.
Andie from KC 