JavaScript Fundamentals Knowledge & React Learning

Note: This post is work-in-progress learning-note and still in active development and updated regularly.

I have been deep diving into learning JavaScript (JS) throughout 2018 but with my only couple of daily learning hours, progress is frustratingly slow. Nevertheless, I feel that I have made some progress and here are links to first, second and third quarters learning progress.

Except occasional small catch up breaks into WordPress Gutenberg editor I have been focusing learning JS this year. My main goal of JS learning was to gain basic understanding of ReactJS frame work. Last week, while doing understanding this keyword, I learn that this key word is widely used in ReactJs. While deep diving this keyword, I thought to take a brief detour to explore how this keyword is used in the ReactJs.

After completing this keyword and its use in ReactJs learning-note post, I spent some time reviewing blog posts, tutorials, books on ReactJs to side track from my regular JS learning. In my brief search I found the following resources very helpful:

Kirupa Chinnathambi‘s blog posts on Building Your First React App and his Learning React book. Kirupa’s tutorial posts are very through and explains basic concepts in great detail in without much technical jargon suitable for beginners.
Robin Wieruch‘s blog post and highlight of his The Road to Learn React book.His blogs posts cover different components of ReactJS and most are more advanced for my current knowledge these three posts: JavaScript fundamentals before learning React, A simple React.js on MacOS Setup and The Road to learn React book. This post was inspired by his post too.
Watched some parts of ES6 features videos: Learning ECMAScript 6 – by Eve Porcello and few chapters from React for Web Designers – by Joe Chellman from lynda library to explore learning materials. Eve’s ES6 tutorial videos were very helpful but Joe Chellman’s video tutorial covers subject that I am interested in but currently a bit advance at my current JS skill level.

I have not completed yet my JavaScript fundamentals and my fourth quarter learning plan includeES6 features and understanding DOM. This post was inspired by Robin Wieruch’s post – JavaScript fundamentals before learning React, to identify my JS knowledge gaps required to understand terminology and various react components and ability to create and do small React App projects.

In this post, for the presentation purposes I will be following table of contents from Robin Wieruch’s post as a guide to structure content of this post.

Creating React App

Creating react app requires prerequisite knowledge in the following areas:

A good understanding of HTML & CSS
Basic knowledge of JavaScript Fundamentals
Basic knowledge on DOM and its working
JavaScript ES6 Syntax
Basic knowledge of JS development environment (working with Node.js and npm).

Lets look at the following react component App.js code:

// app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
          </div>
          <p className="app-intro">
            Happy Learning & hacking!
          </p>
         </div>
    );
  }
}

export default App;

This example code is basic React app.js code which is a bit scary at the beginning. But if we look at more carefully it is React class component.

Lets look at what is going here from JS perspective. There is import statement (at the beginning) and export statement (at the end). There is Class statement (line 6), render() class method (line 7) and class inheritance extends (line 6). Then there is React syntax JSX (lines: 9-17) as well.

Skill Status

In the above example, there is lot of typical React glossary of terms, and their understanding is critical for developing developing any react application. However, as suggested by Robin Wieruch, react is JS – functions, classes and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" target="_blank" rel="noopener">array.map()</a> etc.

React Learning approach

Because I learn better by learning by doing, I plan to start working with simple react projects at the same time I plan to go back and strengthen JS fundamentals (sort of reverse engineering) through the following books:

Understanding ECMAScript 6 – The Definitive Guide for JavaScript Developers. Nicolas C. Zakas.
Learning React – A Hands-on Guide to Building Web Applications Using React and Redux. Kirupa Chinnathambi.
The Road to Learn React. Robin Wieruch.

Posts Series:

Array.Map(), Filter() & Reduce() in ReactJS
Use of JS Class & Arrow Function In ReactJs App
Use of Switch and Enums Operators in ReactJS

Useful Resources and Links

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.