Tutorial Review: Academind — React Native Tutorial for Beginners (YouTube)
The Stats
Feelings
- Before: Fine
- During: Good
- After: Great
Time
- Runtime: 6 hours
- Actual: 8–9 hours
Imposter Syndrome Check: Positive
The Verdict
- Overall: 8/10
- Understandability: 9/10
- Relevance: 6/10
- Production quality: 10/10
- Applicability: 8/10
- Vanilla JS balance: 5/10
The Background
I want to start building apps, both for professional reasons and for my own enjoyment. After all, who doesn’t have a million and one app ideas?
But before I get there, of course, I need to learn how to make them! I actually wanted to learn NativeScript originally because it works well with Vue. Lately I’ve been really enjoying the way Vue is structured; I find the average Vue component much easier to understand than the average React component. However, as State of JS ordains, React Native is king. NativeScript just isn’t on the radar for most companies at this point in time and sometimes you gotta follow your head over your heart.
The Feeling
Capable! It might just be because I had a great guiding hand in Academind’s Maximillian, but I do feel as though I picked up the nuances of React Native almost immediately. There were some challenges not solved by the tutorial (especially in regards to to bugs) but I feel like I handled them pretty well, and my Google-fu really came through for me. The proof will be in the pudding when I start building my first app, TeaTotal, but for the moment I don’t feel concerned about my abilities in creating new apps — thanks to this tutorial!
The Review
Basic knowledge of React is a prerequisite for this course and, if you’ve built a couple of apps in React before, you’ll have no problem with this tutorial. Also, this is a 6-hour crash course, and not his full tutorial. I haven’t yet done a video course that doesn’t take longer than the runtime of the video, so no surprises about the length.
Maximillian starts by taking you through the theory and fundamentals of the React Native experience. He prepares you for what you’re going to be doing and how it will differ from your experience in making apps. This is where the high production quality really pays off: the well-made slides and graphics are easy to follow and keep up with. He also speaks relatively slowly, so you can speed up the video if needed. It’s a nice touch to allow for coders of all levels.
He then goes into the lengthy and often annoying set up process that includes different simulators, live updates on your mobile device, the Expo client, and initialising a new project. I’d actually tried another tutorial a few months back that also used Expo. I got so confused and frustrated with the set up that I eventually abandoned it altogether and did a Flutter course instead. It might just be because I’m now 6 months more patient with software (compare your impatience at the start of your coding journey to the zen-like reasoning you apply to errors and problems today), but I really did think Maximillian did a fantastic job of getting the user set up.
It seems as though the main difference between React and React native is purely vocabulary and props. React Native uses a pre-determined form of JSX with elements that are ready-made in the react-native package. For example, you’ll be using <View> instead of <div>, <Text> instead of <p>, and a self-closing <Button> where you assign all necessary qualities in props. Props are vital in React Native, and there are a billion and one different props for each element, as defined in the official docs. So what you’re essentially working with here is a frontend JS framework with a UI framework built in.
In this 6-hour course we built two apps. Nothing particularly fancy, just some good, old-fashioned guessing games and to do lists. But definitely a good base for understanding, “ohhhh, in React you’ve got to do it like this but in React Native you’ve got to do it like that.” Crucially, he also walked us through debugging with React Native Debugger, which is basically a desktop app that is a wrapped version of the React Dev Tools extension. I would have liked him to introduce this earlier in the course (and not halfway in), as bugs inevitably appeared before we got to the debugger. Still, jumping back and forth to that section wasn’t rocket science.
The main drawbacks of the course are (in order of a) too much attention paid to styling rather than functionality, b) not enough Vanilla JS, and c) not enough attention paid to exploiting native mobile features.
In the video, Maximillian styles a lot of the components in in the exact same way. Border, bit of shading, big of padding. Nothing special. This, of course, makes the app look more consistent, but it would be nicer in a tutorial to have an uglier app with more varied demonstrations of styling possibilities. That being said, he does do a good job of demonstrating different ways to style: inline, styled components, and theme files.
Secondly, I would like to see more JS logic going into the the apps. I know this is a React Native-focused tutorial, but companies are looking for raw JS skills. Those skills need to be practiced regularly, and I expect most people watching this video are beginners that could do with that practice.
The most egregious issue with the video is that, in 6 hours, we barely scrape the surface of React Native’s potential. This video is just a starter, and the rest of the course can be found on Academind’s website, so this was obviously intentional. But would it have been so hard to throw in one funky mobile capability? Play with the flashlight or the camera? Perhaps the explore the possibilities of GPS? We didn’t even get to do Redux, use external APIs or packages, or routing/navigation — which I’ve heard is a little different in React Native.
Still, though, a great entry point into the world of React Native. Now I’m going to go away and see if I can use routing to rewrite the apps he walked us through. If that’s successful, next I’ll be making an app that tells you the optimal brewing time for a cup of England’s finest breakfast tea.
