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:

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:

Posts Series:
  1. Array.Map(), Filter() & Reduce() in ReactJS
  2. Use of JS Class & Arrow Function In ReactJs App
  3. 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.