(Welcome! &)

1. JS Recap

React Week 01

Consent for Audio Recording

WELCOME!

01

02

03

04

05

06

Introduction

JS Recap

Break!

JS Recap

JS Recap

Questions!

var / let / const

15 min

10 min

40 min

modules, imports & exports

25 min

5 min

40 min

Arrow functions

01 Introduction

Know Your Teachers

Anil

Carolyn

Eric

Firas

James

Mojgan

Peter

Sara

Shauna

Tiago

Redi Team

Carys

Fadi

Manu

Course Schedule

• Classes: 02.03. - 17.06.
• All classes will be online
• Demo Day: ?? June
• Some classes will be replaced by Redi Career Workshops

Course Structure

• A) JS Recap
• B) Base Syntax and Features of React
• C) Reusability & Component Hierarchy in React
• D) Further React Concepts
• E) Final Project

Practical Things

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

Communication

• We communicate on Slack
• 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!

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

React Alternatives

• There are several alternatives to React
• Angular
• Vue
• Svelte
• Ember
• ...

Questions?

JS Recap - var / let / const

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

Javascript (or ECMAScript) Versions

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"

Datatypes in JS

Source: justjavascript.com

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!

• 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

• var allows redeclaration of variables

​

​

​

​

​

• let & const do not allow redeclaration of variables

​

​

​

​

​

var / let / const

Redeclaring

• var & let allow reassignment

​

​

​

​

​

​

​

​

​

• const does not allow reassignment

​

​

​

​

​

var / let / const

Reassignment

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.

• 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

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.

• 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

Questions?

Break!

JS Recap - Arrow Functions

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: �

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.

Alternatively with Template Literals

​

JS Recap - Arrow Functions

Arrow Function

In JavaScript, you see a lot of callback functions. Those are functions that are passed as a parameter to other functions. Most of the loops you’re about to learn depend on callbacks.

Like most pre-ES6 code, functions are wordy. You have to explicitly declare that you’re creating a function with the function keyword, add curly braces to signify the body, use return statements to end the function, and so on. It’s not unusual for the callback to be longer than the function you inject it into

• The word function

• Name of the function�• Parentheses around arguments

• The word return

• Curly braces

👀

😱 So much extraneous information in a function !� It turns out, we can communicate a function without them.

🙂 Here’s a simple function that takes an argument and returns a slightly modified value. In this case, it takes a name and returns the name with a capitalized first letter.

😊 Here’s the same function as an anonymous function.

Everything is the same except you’re assigning it to a variable.

🤩 An arrow function version uses the same idea: an anonymous function you assign to a variable. You can remove the function keyword and replace it with a fat arrow.

😎 As a bonus, if you have exactly one parameter (which will be the case for many array methods), you can dispense with the parentheses.

​

JS Recap - Modules, import & export

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.

https://codesandbox.io/s/competent-bhaskara-kheif