Introduction to

web apps & React

Lesson 2: Web Environment

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Browser Dev Tools

Topics

JavaScript & Web APIS

Developer Toolkit

Tabs & Panels

Browser Dev Tools

  • Elements
    • Markup & Styling panel
  • Console
  • Network
  • Application

Debugger 🔥

Browser Dev Tools

  • Break points within code
  • See scoped variables
  • Step in, out, and over function calls

Exercise

Browser Dev Tools

Fix all 3 bugs in an application:

  • Initialization bug
  • Remove error state on change
  • Display results in DOM

Starting point:

  • github.com/amsul/george-brown-course
  • Under the lesson-02 directory

15 minute break

Runtimes

JavaScript & Web APIs

  • Node.js
  • Browser (Chrome, Firefox, Safari)
  • Mobile (React Native)

Web APIs

  • DOM (Document Object Model)
  • Event handling
  • Data fetching
  • Data storing

Web APIs

JavaScript & Web APIs

MDN is the best resource to find documentation and examples:

developer.mozilla.org/docs/Web

Debugging is the best way to learn.

Exercise

JavaScript & Web APIs

Discover web globals:

  • Display your window screen size
  • Log all properties of the document body
  • (Optional) Display the scroll offset of content

Starting point:

  • github.com/amsul/george-brown-course
  • Under the lesson-02 directory

15 minute break

Developer Toolkit

Title

  • Linters
    • ESLint
    • JSHint
    • And many many more
  • Type-checkers
    • TypeScript
    • FlowType
  • Formatters: Prettier

Exercise

Developer Toolkit

Set up your toolkit:

  • ESLint
  • Prettier
  • (Optional) TypeScript

Starting point:

  • github.com/amsul/george-brown-course
  • Under the lesson-02 directory

End of Lesson

Lesson 2: Web Environment

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Lesson 2: Web Environment

By amsul

Made with Slides.com

Lesson 2: Web Environment

  • 118

More from amsul