ReactJs Learning | Oct – Dec 2018

Note: This post is part of my JavaScript/react learning progress series. Link to previous learning progress are available here: First Quarter (2018), Second Quarter (2018) and 3rd Quarter (2018).

At the beginning of year 2018, I had set a goal of learning JavaScript (JS) deeply to improve my JS skills. Here are links to previous learning progress for the First quarter (Jan-March) and Second quarter (April-June) and Third quarter (July-Sept). This post is overview of my learning/coding progress overview for the fourth quarter (October-December) of 2018.

Fourth Quarter Goals

I had set the following learning goals for this fourth quarter (October-December) of 2018:

Learning From Previous Quarter

In my previous quarter learning, some ES6 topics (eg. Closures, Execution context and function stacks and others) were more intense and often I felt like bug-down on a single topic. I didn’t felt that I was productive enough. Therefore I had pledge to learn thorough but become more productive by making some tweaking in my learning approach. I had wrapped up the third quarter progress overview post with the following quotes from Richard Bovell:

What you really need to know is mostly how the concept applies in the real world. Once you understand the concept adequately, use it in the context of building a real project and its meaning will emerge and hit you about the head, and you will get it right away. Or, at least you will better understand its relevance in a real-world application. Richard Bovell
Teaching Yourself to Code

Following Richard Bovell‘s above advise I decided to tweak my learning approach by (i) exploring new subject (topics) to learn, and (ii) learning through project building.

Goals Accomplishment

I totally missed my JS fundamentals learning goals for this fourth quarter. Instead, I made some progress in learning & understanding ReactJs.

JS Topics Covered

My major goals for this quarter were to learn more deeply JS ES6 features. Started the quarter with the following topics:

  • Use of this keyword in JS: Use of ‘this‘ keyword is very confusing to most JS newbies. Value of this could be different in different context. For better understanding wrote Understanding this Keyword in JavaScriptpost.
  • Use of this keyword in ReactJs: The this key word is widely used in ReactJs. Took a brief detour to explore how this keyword is used in the ReactJs.
Exploring ReactJs Learning

Started learning React from the 4th week of October for about 6 weeks (2-3 hrs/daily) and wrote 9 react learning-note posts. Some highlights include:

Gutenberg & WordPress
  • Styling Columns Blocks: Gutenberg editor native block contains columns block (beta). Inspired by Styling the Gutenberg column blocksby Joe Casabona, I also attempted apply columns in my Pandhak theme with two & three columns.
  • WordPress 5.0 Upgrade: WordPress 5.0 with block based Gutenberg editor was released. Because this this was major software upgrade I had to upgrade my sites cautiously.
Inspiring Posts
Developers and Blog Sites

Interesting Articles

What I Learned
  • Coding Every Day: Inspired by John Resig‘s post Write Code Everyday, I started learning JS/ReactJs everyday, except when I was sick and unable work. I found this process incredibly productive.
  • Learning through Doing Projects: Learning through projects building helped me to understand ReactJs/JS concepts better and appreciate JS language.

Goals for Next Year

Based on lessons learned from this year, my ReactJS and JS learning roadmap for 2019 include:

WordPress 5.x and Gutenberg
  • Learn Gutenberg Blocks Fundamentals and create Gutenberg blocks using <a href="https://github.com/ahmadawais/create-guten-block" target="_blank" rel="noopener">create-gluten-block</a> package by Ahmad Awais.
  • Follow Gutenberg phase 2 development and learn how to upgrade themes, widget and navigation with blocks.
Wrapping Up

In my previous 3rd quarter progress overview post, I wrote that while I was doing JS ES6 advance topics often I felt intense and bug-down in a pigeon hole experience. This quarter, I slightly tweak my learning practice by taking a brief break from ES6 topics and began learning ReactJs. Initially I was little afraid that I might not follow ReactJs without understanding ES6 features, however it turned out it was not that bad. In the contrary, I felt I was most productive in this quarter than I was in the previous three-quarters. At least in my case, learning by doing projects (getting my hands dirty) appears to be the appropriate learning approach. To quote from my ReactJs guru Robin Wieruch below:

Build things yourself before you dive into the next topic. Programming is about getting your hands dirty and not only reading and watching tutorials. Robin Wieruch

In the coming year 2019, my goal is to continue learning by building things. Because building things in ReactJs involves prior knowledge of advance ES6 features, when I am stuck from building my React things, I would go back and learn deeply that topic before I comeback and continue building my React things. I am looking forward to having a very Happy & Productive Coding Year 2019!