a one day workshop
/by @kjellski
Tell us who you are - round robin?
What's your experience with:
What do you expect?
let & const
// let has block scope
let name = 'Ryan';
if (true) {
let name = 'Michael';
name // 'Michael'
}
name // 'Ryan'
// const has block scope too
const name = 'Ryan';
if (true) {
const name = 'Michael';
name // 'Michael'
}
name // 'Ryan'// let can be reassigned
let isOpen = true;
isOpen = false;
isOpen // false
// const cannot be reassigned
const isOpen = true;
isOpen = false; // throws errorstring templates
const something = 'ugly stuff';
const str = 'instead of ' + something + ' like this';
const something = 'lovely stuff';
const str = `you can do ${something} like this`;
const str = `
also
multiline
is totally cool
`;const obj = {
insteadOfThis: function() {
// do stuff
},
youCanDoThis() {
// do stuff
}
};object functions
// Truthy and Falsy
>> Boolean()
<< false
// boolean
>> Boolean(true)
<< true
>> Boolean(false)
<< false
// number
>> Boolean(0)
<< false
>> Boolean(1)
<< true
// string
>> Boolean('')
<< false
>> Boolean(' ')
<< true
...arrow functions =>
const obj = {
url: '/api/stuff',
fetch(users) {
users.forEach((user) => {
// `this` is the `this` from outside this function because
// there is no context inside an arrow function
return getUser(`${this.url}/${user.id}`);
})
}
};const add = function(x, y) { return x + y };
// becomes
const add = (x, y) => { return x + y };
// which can be shorter with explicit expression return
const add = (x, y) => x + y;
// if we want multiline, we can create an expression with ()
const add = (x, y) => (
x + y
);implicit return
arrays
const numbers = [ 1, 2, 3, 4, 5 ];
// map converts an array to a new, transformed array
const doubled = numbers.map((number) => {
return number * 2;
})
doubled // [ 2, 4, 6, 8, 10 ]
// filter, return false to remove from an array
const lessThan3 = numbers.filter((n) => {
return n < 3;
})
lessThan3 // [ 1, 2 ]
// remember, that can be super short
const lessThan3 = numbers.filter(n => n < 3);destructuring
const obj = { x: 1, y: 2, z: { a: 3 }, c: 4, d: 5 };
// instead of:
const x = obj.x;
const y = obj.y;
console.log(`x: ${x}, y: ${y}`); // x: 1, y: 2
// we can "destructure" the values off
const { c, d } = obj;
console.log(`c: ${c}, d: ${d}`); // c: 4, d: 5
// you can use this all over the place, like function parameters
const add = ({x, y}: { x: number, y: number}): number => x + y;
console.log(add({x: 3, y: 4})) // 7
// you can use nested destructuring as well
const { z: { a } } = obj;
console.log(`a: ${a}`) // a: 3modules
// instead of cjs
var React = require('react');
// we use ES modules
import React from 'react';
import ReactDOM from 'react-dom';
// and with destructuring
import { render } from 'react-dom';// https://www.typescriptlang.org/docs/handbook/basic-types.html
const isDone: boolean = false; // boolean, string, number...
const list: number[] = [1, 2, 3]; // or Array<number>
let x: [string, number]; // Typles
x = ['foo', 12];
// x = [12, 'foo']; // Error: Type 'number' is not assignable to type 'string'
enum Color {
Red,
Green,
Blue = 'Blue',
}
console.log(
`Color.Green: ${Color.Green}, Color.Blue: ${Color.Blue}`
); // Color.Green: 1, Color.Blue: Blue
// Interfaces and Types
type TestCase = {
description: string;
message: string;
assert: () => void;
};
interface TestClass {
test(): TestCase;
}
class A implements TestClass {
test(): TestCase {
return {
description: "desc",
message: "msg",
assert: () => {
throw new Error("Failed.");
},
};
}
}
// ...
// Union Types
// Union Exhaustiveness checking#!/bin/bash
git clone git@github.com:kjellski/beginning-react-workshop.git
cd beginning-react-workshop/app
npm install
npm start
...