Introduction

Welcome to this workshop. The goal of this workshop is to build the JavaScript fundamentals required when developing in React JS.

Why This Workshop

A common struggle of people learning React (or any frontend framework) is not just React itself, but also the JavaScript features/syntaxes that are used when coding with React, namely:

  • syntactic sugar

    • template string
    • destructuring
    • spread operator
    • arrow function
  • new JS features

    • block scope declaration: let and const
    • Array methods
    • ES modules
  • advanced concepts in JS

    • closure
    • functional programming

It’s like learning a subject in a foreign language - learning the subject is challenging by itself, and you have to fight your unfamiliarity with the language at the same time. For some people, the outcome for the struggle is good because eventually they learn two things at the same time, but for some of us, it’s just too overwhelming that we give up on them.

This workshop aims to give you a more gentle entrance to modern JS frameworks, by teaching you the language first before teaching you the subject.

Overall Structure

There are three main sections of this workshop:

  1. ES6 syntactic sugar
  2. new JS features
  3. advanced concepts

There are smaller topics within each section.

Each topic will follow this format:

  1. The purpose of the JS features
  2. A demo
  3. Exercise

About This Site

Few things to be aware while going through this website:

  1. There are two types of code examples: one editable and the other just read only. These small code snippets will be handy for you to tweak the code sligthly and see how it works.

    js
    console.log('Press the Play button to start edit, press Esc to stop editing');
    console.log('Use console.log to output the result at below.');
    console.log('Everytime you edit something here the code will be rerun again.');
    js
    console.log('Press the Play button to start edit, press Esc to stop editing');
    console.log('Use console.log to output the result at below.');
    console.log('Everytime you edit something here the code will be rerun again.');
    js
    console.log('This code is read only');
    console.log('You can copy the code, but could not edit it');
    js
    console.log('This code is read only');
    console.log('You can copy the code, but could not edit it');
  2. However, when doing exercise, my advice is to copy those code into the code editor that you usually use. Why? Because information is easier to be recalled when the context matches, and I want you to recall what you learn here the next time you’re coding.

  3. You can add comment by using the “Add Comment” button at bottom, which will allows you to create issue in repo for this site with specific title and label. Feel free to use the comment to ask question if you have question on specific topic, during or after the workshop.

  4. This site is created for this workshop, and will be always available online. Feel free to share this with anyone that you think would benefits from this.