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