made with reveal.js & zuehlke-reveal-package

Follow the presentation here:

https://webplatformz.github.io/react-training-slides-v2/

Navigate using ← → and ↑ ↓ (arrow keys)

React is a library for creating user interfaces.

It is provides the rendering mechanism and a basic state handling (for interactivity), but leaves other aspects to the developer.

Thanks to the huge community, there are many complementing libraries , e.g. for routing and data fetching.

There are also full-featured frameworks based on React, which target common use cases (e.g. Next.js, Remix).

History of React

• Created in 2011 at Meta
• Made open source in 2013
• React Hooks introduced in 2019
• Concurrent features introduced in 2022
• Current version is React 18

Who uses React?

Who uses React?

Who uses React?

Who uses React?

and many more…

Object Destructuring

const joe = { name: 'Joe', age: 20, home: 'Schlieren', size: 170 };

console.log(joe.name, joe.age);

const { name, age } = joe;
console.log(name, age); // "Joe", 20

Array Destructuring

Similarly, arrays can be destructed:

const fruits = ["banana", "apple", "orange"];
  
const [firstFruit, secondFruit] = fruits;

console.log(firstFruit); // "banana"
console.log(secondFruit); // "apple"

Using destructuring for function parameters:

function person({ name, age }) {
    …
}

person(joe);

function person({ name, age }: Person) {
    …
}

person(joe);

Spread Syntax

const joe = { name: 'Joe', age: 20, home: 'Schlieren', size: 170 }

const { name, ...rest } = joe
// name = 'Joe'
// rest = { age: 20, home: 'Schlieren', size: 170 }

const jack = { name: 'Jack', ...rest }
// jack = { name: 'Jack', age: 20, home: 'Schlieren', size: 170 }