2 of 34

Introduction

JS Recap

Break!

JS Recap

Questions!

var / let / const

modules, imports & exports

Arrow functions

3 of 34

01 Introduction

4 of 34

Course Structure

01 - Welcome and JavaScript Recap

02 - JavaScript Recap “Destructing and Array Functions“

03 - JS to know for React

04 - Introduction to JSX

05 - React Components

06 - Conditional Rendering, Rendering Lists and Handling Events

07 - Thinking in React: reusability and hierarchy

08- Children and Styling

09 - useEffect & async await & fetch

10 - Routing

5 of 34

Practical Things

Please be on time
Please turn on your webcam - it makes a huge difference for us!

6 of 34

Communication

We communicate on MS Teams
Do not hesitate to ask questions or share anything that you feel is important!
There are no stupid questions - every question is a good question!
If it is not a personal matter, ask/write in the public chat - the more eyes see it, the more chance there is that you can get help!

7 of 34

What is React?

React is a frontend framework
It is basically a tool to write very complex applications without going crazy
In the end, the output of React is “simple” HTML/CSS/JS

But it needs to be compiled!

A main reason for using something like React is “Developer Experience”

React allows us to build complex things in a smart way - especially compared to writing everything in standard HTML/CSS/JS

8 of 34

React Alternatives

There are several alternatives to React

Angular
Vue
Svelte
Ember
...

10 of 34

JS Recap - var / let / const

11 of 34

Modern JavaScript / ES2015+

React builds heavily on ES2015+ features
ES2015 refers to the new version of JS released in 2015
Since 2015, a new version is released every year
Changes always extend, never change JS - because it would break the web

12 of 34

Javascript (or ECMAScript) Versions

Edition	Date published	Name
1	June 1997
2	June 1998
3	December 1999
4	-- Abandoned --
5	December 2009
5.1	June 2011
6	June 2015	ECMAScript 2015 (ES2015)
7	June 2016	ECMAScript 2016 (ES2016)
8	June 2017	ECMAScript 2017 (ES2017)
9	June 2018	ECMAScript 2018 (ES2018)
10	June 2019	ECMAScript 2019 (ES2019)
11	June 2020	ECMAScript 2020 (ES2020)

13 of 34

Datatypes in JS

Primitive Datatypes

undefined: Variable that has not been assigned a value
null: signals the non-existence of a value
Boolean: true or false
Number: between -(253 − 1) and 253 − 1 & +Infinity/-Infinity/NaN
String: textual data
BigInt*: Like number but without the limitations
Symbol*: a unique and immutable primitive value

Object Type(s)

Data Structures created with new (Object, Array, Map, Set, Date, ...)

Object: typeof instance === "object"
Array: typeof instance === "object"

Function : typeof instance === "function"

14 of 34

Datatypes in JS

Source: justjavascript.com

15 of 34

var / let / const

let and const basically replace var.

let and const are block-scoped. They are not available within the whole execution context like var.
let and const can not be redclared. var can be redeclared.
You use const instead of var if you plan on never re-assigning this "variable" (effectively turning it into a constant).
You use let instead of var otherwise.

This is a popular, but definitely opinionated view on var/let/const!

16 of 34

var is available outside a block it is declared within

let & const are only accessible within the block they were declared in

var / let / const

Variable Scope

17 of 34

var allows redeclaration of variables

let & const do not allow redeclaration of variables

var / let / const

Redeclaring

18 of 34

var & let allow reassignment

const does not allow reassignment

var / let / const

Reassignment

19 of 34

const - Primitive Values vs. Objects

const prevents the reassignment of a variable

✅ This works when const-variables hold primitive values, because they are immutable

string, number, bigint, boolean, undefined, & symbol

❌ This does not always work when const-variables hold objects, arrays or functions (they are all objects - also arrays and functions!)

Objects are stored in variables as references. When changes are made to the object, its reference remains unchanged. const will not block this.
When an object is replaced with a completely new object, the reference is changed. const will block this.

20 of 34

Changing a primitive value is blocked by const

Changing an object is not blocked by const

Replacing an object is blocked by const (because it is a reassignment)

const

with

Objects

21 of 34

var / let / const - Semantic Perspective

The way you declare variables can also serve as a form of communcation to other developers looking at code you wrote

From the article "JavaScript ES6+: var, let, or const?":

const is a signal that the identifier won’t be reassigned.
let is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function.
var is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.

22 of 34

There are subtle, but essential differences between the classic var and the new let & const
They help us to avoid creating bugs while we write code - because we immediately get errors
We recommend:

Always use const
If you need to reassign, switch to let
Don’t use var

Again: This is a popular, but definitely opinionated view on var / let / const!

var / let / const - Summary

25 of 34

JS Recap - Template Literals

26 of 34

Template Literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.�They were called "template strings" in prior editions of the ES2015 specification.�

�

Syntax: �

27 of 34

The problem

Here’s a situation that comes up all the time: You need to build a URL. In this case, you’re building a link to an image on a cloud service. Your cloud service is pretty great, though. In addition to hosting the asset, you can pass query parameters that will convert the asset in a variety of ways (height, width, and so on).

😬 URLs get particularly ugly because you have to add slashes between the parts of a route along with the building blocks of queries such as ?, =, and &. Traditionally, you have to combine each piece with a + sign.

28 of 34

Alternatively with Template Literals

29 of 34

JS Recap - Arrow Functions

30 of 34

Your usual JS function

• The word function

• Name of the function�• Parentheses around arguments

• The word return

• Curly braces

31 of 34

Galaxy Brain Function Definition

32 of 34

JS Recap - Modules, import and export

33 of 34

Modules

In React projects (and actually in all modern JavaScript projects), you split your code across multiple JavaScript files - so-called modules. You do this, to keep each file / module focused and manageable.

To still access functionality in another file, you need export (to make it available) and import (to get access) statements.

[Very detailed yet simple explanation of imports and exports in JS] https://javascript.info/import-export

1 of 34

2 of 34

3 of 34

4 of 34

5 of 34

6 of 34

7 of 34

8 of 34

9 of 34

10 of 34

11 of 34

12 of 34

13 of 34

14 of 34

15 of 34

16 of 34

17 of 34

18 of 34

19 of 34

20 of 34

21 of 34

22 of 34

23 of 34

24 of 34

25 of 34

26 of 34

27 of 34

28 of 34

29 of 34

30 of 34

31 of 34

32 of 34

33 of 34

34 of 34