Comparing React.js Tutorials
I immediately sensed React Native was "game-changing" technology upon first hearing about it, and have been eagerly waiting to try it out. Unfortunately, I've had to wait quite a while because React Native creator Facebook has a definite iOS-first bias, and I don't do any Apple stuff. So I had to wait for Android/Windows functionality to catch up.
It still hasn't, and possibly never will, as Facebook has admitted its engineers are into Macs -- their primary dev machines of choice -- and they're relying upon community outsiders to move the counterpart Android/Windows effort forward. That doesn't seem to be happening very quickly ("As of version 0.14 Android development with React native is mostly possible on Linux and Windows."). "Mostly possible" just doesn't inspire a lot of confidence.
Apparently I'm not alone. Just yesterday, a Hacker News post asked: "What are some good React tutorials?"
For those who might be in the same boat and wondering where to start, here is my comparison of two courses I just finished: React.js Fundamentals by Tyler McGinnis, and Learn React.js: The Basics, on Lynda.com.
First off, the basics. React.js Fundamentals is a free course, offered along with another course (ES6/7 for React, $45) and some upcoming paid courses in McGinnis' React.js Program. The Learn React.js: The Basics course comes with a Lynda.com subscription. For brevity, I'll just refer to McGinnis or Lynda.com from here on in discussing the two courses.
Prerequisites -- the Target Audiences
McGinnis uses a different approach, starting out with text to generally introduce a concept and following up with a video (total duration of the videos is about 2.5 hours, approximately an hour longer than Lynda.com) to work through lessons on the concepts just discussed.
"The whole premise of React.js Program is that the student is going to have three different learning approaches thrown at them," McGinnis explains in an introductory note written at 3:30 a.m. "First via text. Second via a video. Third via curriculum."
The curriculum comes in project files for each section hosted on GitHub. At the beginning of each video, McGinnis points to the corresponding code branch. I simply downloaded the overall project structure, opened up the base folder in Sublime Text and, with each new lesson, scraped the new code and pasted into index.js or whatever files were appropriate.
What You Build
Lynda.com runs through the creation of a bulletin board app, in which you can create notes, edit them, delete them and move them around on a virtual "board."
McGinnis' project is called GitHub Battle. It lets you enter two GitHub usernames and pops up a comparison listing personal details along with number of followers, number of developers they're following, public repos and more, along with photos of the two "combatants."
Both courses utilize NPM and Babel.
With McGinnis, after the introduction but before you even start to code, you get lessons on set-up first, using NPM, Babel and Webpack. You learn how to download and wire everything up first, so upon making your first component, you can view it on localhost and immediately see coding changes reflected on the "Web site."
Here's a comparison of the respective curricula, with the Lynda.com curriculum abbreviated and condensed for space:
|Intro to the React Ecosystem
||What is React.js and why is it so fast?
|Setting up your first React component with NPM, Babel, and Webpack
||Setting up React tools with Chrome
|Pure Functions. f(d)=v. Props and Nesting Components
|this.props.children and getting started with React Router
||Introducing JSX and Babel
|Container vs Presentational Components, PropTypes, and Stateless Functional Components
||Creating a React component, using properties, handling events
|Life Cycle Events and Conditional Rendering
||Adding state to the note component
|Axios, Promises, and the Github API
||Using refs and PropTypes
||Adding multiple child elements
|More Container vs Presentational Components
||Updating, removing and adding notes
|Private Functional Stateless Components
||A deeper look at keys
|Building a Highly Reusable React Component
||Component life cycle, mounting components
|React Router Transition Animation and Webpack's CSS Loader
||Setting properties, updating components
|Further Curriculum: a Weather App
||Integrating React with a server, hosting with npm and httpster
||Enhancing React with additional frameworks
The Subjective Stuff
I found both courses useful, and I found them even more useful taken together. The different technologies and approaches provide insights you wouldn't get by just following one course (which is probably true for learning any technology).
If I had to choose, I'd go with the young upstart, McGinnis. Part of the reason is the focus on retrieving real live data, in this case from GitHub users. Data is king, and I'm interested in presenting it in new and useful ways, especially tapping into public data sets. That can lead to advances in my own field -- such as data-driven journalistic techniques -- and probably just about any other endeavor.
But the main reason I preferred McGinnis is simple: the personal touch provided by Tyler McGinnis himself. The man appears to be a human dynamo, with more irons in the fire than I can count. He clearly understands the value of providing a human face to connect with, offering a little webcam image of himself to accompany the coding screen as he narrates a video. And he offers personalized touches throughout the course and superb support.
Here's his intro:
In addition to those things, he's trying to grow his tutorial business, and he appeared to be available for help pretty much around the clock. He invited each course participant to the associated Slack channel, where he provides personalized help for seemingly hundreds of users.
I was duly impressed, and apparently others are, too. His tutorial came in for some kudos on the aforementioned Hacker News post.
"I am using this one and like it very much so far," one commenter said.
"+1 for Tyler and his courses," read another post. "There's something great about the way he presents the knowledge I can't quite put words to. He manages to 'pull back the curtain' just enough to satisfy my curiosity without allowing me to go down a tangent path of little details that contextually don't matter until later. His frank demeanor instilled a lot of trust in me from the get-go, as well, which in turn left me satisfied when he says things like, 'that doesn't matter right now -- we'll get back to that when it's important.' Usually in tutorials or classes it's either high or low of that mark -- either I don't believe I will end up learning about some hidden principle that ends up being important, or I'll have way too much depth dumped on me and I'll be lost."
"I am working through Tyler's free tutorial and so far have enjoyed it," read yet another post.
One advantage of the Lynda.com approach, if you're paying for a subscription, is access to the huge inventory of other courses. McGinnis, while offering his React.js for free possibly as an intro to his for-pay options, has only the "ES6/7 for React" course available now, as mentioned for $45. Others, including Redux + Immutable, React Native and Universal React, are all labeled "Coming Soon" for $245 each.
I don't see how his single-handed support scheme can scale as his business grows (how many 3:30 a.m. "nights" can you hack while holding down a day job?), but it will be interesting to watch.
In the meantime, here's a list of some other tutorials mentioned in that aforementioned Hacker News post published yesterday to keep you occupied:
What React tutorials have you found most useful. Comment here or drop me a line.
Posted by David Ramel on 04/11/2016 at 6:10 PM