Course Contents

Javascript ES6 in-depth with React

In this course we will be building a weather forecasting react application using the openweather API.

Term `aTrivia` is used to give a vague idea about the assignments that will be given in the chapter.

Note: Course structure is built considering most of the learners are beginners. The first two chapters might take more time than any others.

Introduction to JS

A basic introduction to javascript and its implications

  • Hello JS
    • history, syntax
    • Internet & How browser works
    • Difference between HTML, CSS and JS   
    • Understanding Browser Console
  • Variables
    • Declaration & Assignment
    • Case Sensitivity in naming
  • Operators
    • `+, -, *, /, %, ++, –,`
    • Compound
    • Assignment(`+=, -=, *=, /=`) 
    • Conditional Operators(`==, >, <, >=, <=, ?:`)
  • Escape Sequences
    • the backslash(`\`) literals
  • Arrays & their operations
    • functions on arrays(`push, pop, shift, unshift`)
  • Functions – defining and reusing
    • return statement
  • Scope of `var`
    • global and local scopes
  • Conditional Statements
    • `if, else, switch`
  • Loops
    • `for, while`
  • * try?
    • `try, catch`
  • The JS `Math` module – about the usability of js `Math`
  •  `DOM` and its `events`
    • URL
    • Event loop
    • async apis
  • Others
    • webservice
    • REST vs SOAP

aTrivia: Downloading the city dataset(around 200K cities) from openweather and perform actions on it such as creating a json object…

 

ES6 and other buddies

This chapter gives an in-depth idea about the new features in the ES6 standard.

  • what is ES6?
  • The differences
    • `let, const`
    • `let` vs `var`
    • `Promise`?
    • Mutation & freezing
    • The Arrow(`()=>`) function
    • Rest parameters and the spread operator
    • Destructive Assignment
    • concise object literals
    • Templating
    • Class syntax with getter and setter
    • `import` vs `require`
  • The Other buddies
  • Regular Expressions
  • Debugging
  • Functional programming
  • high order functions

aTrivia: Wrap a general XMLHttpRequest into a promise in order to reuse that in making API calls and fetching the data. generating our own prototype function over a object and some other assignments that helps in understanding the ES6 features along with regex etc.,

 

Node.js & its friends

  • what is `node.js`?
  • what is package manager?
  • `npm, yarn …`
  • integrating third party libraries without `npm`
  • integrating libs with `npm`

Why React?

  • Virtual DOM – advantages of VDOM
  • differences without using VDOM 
  • Reusability
  • examples
  • Hirable

aTrivia: Building a sample react component, build the same component without using react…

React Notations * `jsx`

  • `State` 
  • `Props`
  • `Context`
  • lifecycle events

aTrivia: Building components that will make the learner understand each of the notations

Styling Compontents

  • A brief intro to CSS
  • Inline Styling
  • CSS-in-JS
  • Styling using external libraries.

aTrivia: Building components in different styling variations. building individual static weather type components(sunny, haze etc.,)

Building the React Application

  • Syntax Standards
  • Re-usable library functions
  • How to use React context
  • Advanced integrations
  • Routing – Authentication

aTrivia: Building the final app with options like theme switch etc.