I’ve FInished Taking the Online Course – Intro to ReactJS

Full disclosure, I wrote my previous blog post about the Intro to ReactJS course a week or so after I started it.

For those who didn’t know, I started an edX course not too long ago. I chose ReactJS because I was already familiar with it but was hoping to find a few gems.

Intro to ReactJS is Basic, But Good!

Unfortunately because it was an introduction course, there wasn’t much to be learned from the content. However, the discussion boards were very good.

At the end of each module you’re asked to complete a lab assignment. This typically consisted of a small application showcasing recently learned aspects of ReactJS.

A graded mark was given out to those who reviewed and critiqued others’ work. This was a great way to see different ways a problem could be tackled. Having fellow programmers review my work was great too. I’m not perfect and the reviews gave me a better idea of how I should be designing ReactJS applications.

I was going to blow away my peers…

Since I was familiar with the library, I may have been a tad over-confident. The first module I designed my components in a way to be reused in multiple future situations.

You may think this is good. That’s how components are meant to be written(not really true). If the components needed to be reused later there would be very little to no refactoring.

YAGNI

The thing is, I knew this would be the last time I would open the source. There was never going to be any more updates to the application. This is where I should have thought of YAGNI (You Aren’t Gonna Need It).

Don’t get me wrong, thinking ahead and preparing for change is important. But what I really should have been considering, is the possibility of needing the functionality I was introducing. Which was zero.

It was a good learning experience and I’m glad a fellow peer had called me on it.

Course Content

The content I thought was well put together. This was my first edX course and it won’t be my last. I’ve already enrolled in another one.

The content includes both written and video media of the same content. This allows you to consume it how you like.

Personally I stuck with the text just because it was slightly faster.

The assessments (tests) were not bad. There were definitely some question/answers I thought could be improved. For the most part it was well done though.

The course was listed as an intermediate course as it should be. If you’re not familiar with JavaScript and HTML I don’t think you’ll do well. This course stays strictly on the topic ReactJS which was really nice. No fluff, just focused content.

I hope this helps anyone considering looking into edX’s courses, maybe I’ll see you on the discussion boards.

Have experience with other courses? Please leave a comment and let me know about it! Also if there are some resources you’d like to share, that would be great too.

I’m Taking an Online Course – Intro to ReactJS

I was browsing some of my favorite info hot spots when I came across a list of resources. They were free learning resources containing mainly books and online courses.

This sparked a memory of me taking some courses at Udacity. I had first come across it a few years back and took the Intro to Computer Science course. This course was (is?) built around using Python to create a web crawler.

Man reading a book beside a laptop

Free Learning for All

I thought the Udacity course was very well done. Especially being a free online course. Assignments were marked automatically. YouTube videos were interactive and allowed you to answer multiple choice questions.

It was a great experience.

I’m always looking for new resources to learn from. Every day I venture to PacktPub’s free learning page to see what free book I can get my hands on.

I’ll be honest, the majority of them will go unopened. But whenever I come across a topic I’d like to dig into I’ve got a heap of books that may help.

Some more great resources are Hacker Bookshelf and Leanpub.

Leanpub is a hidden gem I had come across nearly a year ago. Not everything is free. But I have read some good free content from this site.

If I ever create a book, I’ll likely use this platform to publish it.

Back to the Online Course

Trailed off a little there, but hopefully some of those links will be useful to someone.

So I decided to try out an online course on ReactJS.

Why ReactJS?

Well, I do have experience in ReactJS, but I want more. It seems whenever I read tutorials, books, watch conferences, etc. I learn something new about ReactJS.

There’s just so much to learn in React. And not every resource will cover things necessary for a production ready application.

The course is created by Microsoft but hosted on edX. I’m not paying for the certificate because I don’t feel I have the need for it. But I will audit the course and let others know how it was.

So, my journey through Introduction to ReactJS starts now.

Beautiful Code Formatting by Linting with ESLint

What is “Linting”?

Linting is a process of checking source code for suspicious or non-portable constructs. Or at least one definition… [1]

There are many extensions and programs to provide linting functionality for Javascript. Some of these are; JSHint, JSLint, and the one I have been using lately, ESLint.

Some may say that linting isn’t worth the effort. [2] I personally, disagree…

Linting provides a way to enforce code style standards. It can be hard to enforce code style standards on a team sometimes. People disagree with how things should be styled, they may have habits for their own style methods already, some even forget the standards exist.

Another great benefit is keeping your source lean. In ESLint at least, you can configure it to flag variables that are unused. It sounds obvious that you would just remove those variables. But in large files of source, it may be difficult to see the variable is no longer used after an update.

Tech Company Base Rules

Airbnb has a detailed style guide. I like the description, “A mostly reasonable approach to JavaScript“. [3] Probably not a complete solution for all, but it’s a good place to start. In addition to these rules, you can add your own or even override them.

My favorite part about their documentation is where they explain why they have implemented specific rules.

You’ll likely need to install a few modules if you’re using Node.JS but these rules will get you started. [4] I use the ESLint extension published by Dirk Baeumer and have had no complaints. [5]

Finally, enforcing some new JavaScript conventions. Using keywords such as const and let instead of var. This allows the programmer to better describe the variable and define more specific scope. [6]

ESLint warning for using the 'var' keyword.

[1] – What is “Linting”? – https://stackoverflow.com/questions/8503559/what-is-linting

[2] – After 3 Months Of JavaScript Linting, It’s Pretty Much All Pain And No Gain – https://www.bennadel.com/blog/3312-after-3-months-of-javascript-linting-it-s-pretty-much-all-pain-and-no-gain.htm

[3] – Javascript Style Guide – https://github.com/airbnb/javascript

[4] – eslint-config-airbnb-base – https://www.npmjs.com/package/eslint-config-airbnb-base

[5] – ESLint – Visual Studio Marketplace – https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

[6] – What’s the difference between using “let” and “var” to declare a variable? – https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable