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:
- Completing learning-in-progress topics – getter / setter methods, Nested Functions & Closure: JS closures, Execution Context & Function Stack & understanding deeply use of
thisin JavaScript - ES6 features (definition from MDN Reference) including AsyncFunction, Promises, Default Parameter, Destructuring, Rest parameter, Spread and ES6 – Cheatsheet| GitHub.
- DOM (document object model) simultaneously with other topics, as breather topics.
- Learning ES6 features from Lynda library (i) Learning ECMAScript 6– by Eve Porcello, (ii) ES6 : The Right Parts– by Kyle Sympson, (iii) React: ES6, 2016, and Beyond– by Carl Peaslee
- Start familiarizing with React JS terminology and introduction starting with Getting Started with React by Tania Rascia.
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
thiskeyword in JS: Use of ‘this‘ keyword is very confusing to most JS newbies. Value ofthiscould be different in different context. For better understanding wrote Understanding this Keyword in JavaScriptpost. - Use of
thiskeyword in ReactJs: Thethiskey word is widely used in ReactJs. Took a brief detour to explore howthiskeyword 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:
- React App Development in MacOS. Learned to install create-react-app (a npm package), using Visual Code integrated terminal and create React App starter app in my MacOS laptop.
- Basic Overview of ReactJs. Basic React terminology and an overview of React concepts were learned.
- Learning React Components. Learned the basic structure of a react components and building a simple react component using run time
<script>in a HTML file. An example of combining small components into creating a more complex components was practiced. - Create App Components with Create React App package. Got familiarization with
create-react-apppackage, learned to create small components and wired into a single container component to pass intoReactDOM.render()function to render to the browser DOM for display. - JS Functions and
Array.Map()Methods in ReactJs. Use ofarray.map()method to list an array items in react component was practiced. - Understanding How Props Are Passed to React Component. Lear about react props, how they are used in react components and some use cases were practiced.
- Creating List Component in ReactJs. Learned how to transform list of items in array into list of React element with some use case examples.
- Creating a Simple Blog Listing React Component. Learned to create a simple post listing component using static data array including step-by-step building & deploying the App to a remote Apache server.
- Learning Basic Routing in ReactJs. (in progress)
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
- 9 Year Old Shares his Journey Learning React | Wptavern. HoLy Moly! This nine-year-old Revel Carlberg West’s talk at the React NYC meetup on Learning React is indeed inspiring.
- How I Became a Better Programmer| James Long. Very inspiring post and heeding to James’s call, my learning React Blog project will be my long-term learning by doing project. In addition, I would plan incorporate some of his other advises as well.
- Write Code Everyday | John Resig. Developing a routine of daily learning/coding is incredibly productive. Most rewarding aspect this process is that after a while it becomes a habit.
- Blogging as a Developer by Ali Spittel. In this post Ali Spittel discusses why it’s important for a developer to start a blog and provides tips to get started with additional resources.
Developers and Blog Sites
- Robin Wieruch| Website | GitHub| Twitter
Software Engineer, writer, teacher. Author, The Road to lean React. - Trey Alexander Davis| Byte-sized React
Editor of Byte-sized React. Very instructive posts on ReactJs learning. I greatly benefited from his post on list components. - Andreas Reiterer| Website | Twitter
Software developer from Austria. Very comprehensive tutorial in creating react list component. - A Beginners Guide to React by Betsy Sallee | Noteworthy – The Journal Blog. A well written introductory guide on, what she calls “four pillars of React”, components, JSX, state and props.
- React Router v4: The Complete Guide by Manjunath | SitePoint. Very comprehensive guide on react router with good use case examples.
Interesting Articles
- Clean Code vs. Dirty Code: React Best Practices by Donavon West. A well written article on clean react code writing practices. Mr Donovon is proud father of Revel Calberg West (the nine-year-old react learner)
- I Learned How to be Productive in React in a Week and You Can, Too – by Sarah Drasner | CSS-Tricks. A well written & informative post on React for beginners to more advanced users.
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:
- ReactJs & JavaScript Learning Roadmap for 2019
- Building React Blog SPA – A Long-Term Project
- Strengthen JS fundamentals by reverse engineering, as outlined in this post.
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!