Beginning React

a one day workshop

/by @kjellski

Agenda

  • Who am I?
  • Who are you?
  • Hands-On Workshop

Who am I?

  • Studied Computer Science
  • Software Engineer/Architect
  • Teamlead
  • Love teaching and empowering others

Who are you?

Tell us who you are - round robin?

What's your experience with:

  • JavaScript / TypeScript?
  • Single Page Applications?
  • React?

Hands-On Workshop

What's next?

What do you expect?

What we'll look into:

  • React
    • concepts
    • terminology
  • Typical scenarios for Single Page Applications (SPAs)
    • UI Frameworks
    • State Management
    • Routing
    • Translations
  • Your questions
    • Bring your own questions and let us explore answers together

 

TypeScript Primer

Do we need this?

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 error
string 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

// 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: 3
modules
// 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';

No types?

Type Inference!

// 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

No types?

// 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

React

#!/bin/bash

git clone git@github.com:kjellski/beginning-react-workshop.git

cd beginning-react-workshop/app

npm install

npm start

...

Questions

&

Answers?

Thanks!

What to improve?

Beginning React

By Kjell Otto

Made with Slides.com

Beginning React

This is a workshop about the what and how of react Single-page Frontend Applications

  • 933

More from Kjell Otto