3 månader med ”React.js” – vecka 2

Jag går här igenom fler ämnen inom Javascript som krävs för att kunna behärska React. Denna gång handlar det om ”this”, ”class”, ”inheritance”, och ”modules”. Källa är mestadels Mosh Hamedanis video som nämns längst ner i artikeln (ES6 Tutorial: Learn Modern JavaScript in 1 Hour)

Video: Vecka 2 (del 1)- this, classes, inheritance, modules

this

this kan ge upphov till viss förvirring bland utvecklare. I programmeringsspråk som Java och C# returnerar this alltid en referens till det aktuella objektet. Men i Javascript är det inte alltid på det viset. Jag ska försöka bena ut begreppet.

I nedanstående exempel har vi ett objekt och här syftar this på objektet, dvs ”steve”

let steve = {
  firstName: 'Steve',
  lastName: 'Rush',
let steve = {
  firstName: 'Steve',
  lastName: 'Rush',
  work() {
    console.log(this.firstName + ' ' + this.lastName + ' is working.')
  },
}

steve.work()

Men när jag nästlar en funktion inne i metoden ”work()” och loggar this i konsolen så ser vi att detta this i syftar på det globala objektet Window.

let steve = {
  firstName: 'Steve',
  lastName: 'Rush',
  work() {
    function nestedFunction() {
      console.log(this)
    }
    nestedFunction()
    console.log(this.firstName + ' ' + this.lastName + ' is working.')
  },
}

steve.work()

Vad avgör då vad this syftar på? Jo, this syftar på det objekt som anropar aktuell funktion. När metoden ”work()” körs så är det objektet ”steve” som anropar metoden. Därför syftar this på detta objekt.

Varför syftar då inte this i ”nestedFunction()” också på objektet ”steve”? Jo, det beror på att ”nestedFunction()” inte anropas utifrån objektet ”steve”. Så när det inte finns ett objekt som en metod anropas ifrån (med punkt-notation) så menar Javascript att metoden anropas från det globala objektet Window.

Värdet av this avgörs alltså av hur en funktion anropas. Om man anropar en funktion som en metod i ett objekt returnerar alltid this en referens till det objektet. Men om man anropar en funktion utanför ett objekt så pekar this på webbläsarens globala objekt Window.

Class

Klasser är en del av objektorienterad programmering och är grundläggande för många ramverk och bibliotek, inklusive React. Det är ett sätt att strukturera koden samt undvika att repetera samma kod på flera ställen. Det gör livet lättare för utvecklare vid felsökning och underhåll.

En klass är som en mall. Utifrån samma mall skapar man olika objekt. Det kallas även instansiering av objekt.

I klassen placeras objekt med sina properties och methods. En viktig metod kallas constructor som kan ta en eller flera parametrar. När man instansierar ett objekt med nyckelordet new, lägger man in parametern från constructor. Så när objektet skapas tilldelas den i samma ögonblick det värde man anger för respektive parameter.

När man instansierar ett objekt anropar man en metod, och det är just metoden constructor. Objektets properties och methods nås från objektet med punktnotation, t ex ”person.name” respektive ”person.eat()”

class Person {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log('eating...')
  }
}

const person = new Person('Steve')
console.log(person.name)
console.log(person.eat())

Inheritance

Inheritance, alltså arv, i objektorienterad programmering, innebär att en ”child class” ärver av sin ”parent class”. Om man har en klass för t ex djur, så vill man att en klass för fågel ska kunna ärva en del properties och methods som är gemensamma med klassen djur. Till exempel kan ett djur andas och äta och det kan en fågel också. Däremot kan inte alla djur flyga så den egenskapen hamnar bara i klassen fågel.

Detta med arv är också ett sätt att undvika repetition av kod. I React används arv när man t ex skapar en klass-baserad komponent. Klassen som ärver från ”base component” använder nyckelordet extends.
Metoden super() krävs i den ärvda klassen för att kunna få tillång till name från huvudklassen. När man lägger till en constructor i en ärvd klass behöver man anropa constructor från huvudklassen, med hjälp av metoden super().

class Employee extends Person {
  constructor(name, title) {
    super(name)
    this.title = title
  }

  work() {
    console.log('working...')
  }
}

const employee = new Employee('Steve', 'CFO')
console.log(employee.name)
console.log(employee.title)

Som man kan se i exemplet ovan har objektet ”employee” tillgång till både ”name” från klassen ”Person” samt ”title” från klassen ”Employee” (eftersom ”Employee” ärver från ”Person”).

Modules

Att dela upp sin kod i flera filer är väldigt vanligt och även nödvändigt i stora applikationer. Det är ett ytterligare sätt att få en bra struktur på koden. Man jobbar i moduler, säger man, dvs man importerar och exporterar filer till och från andra filer.

Vi kan fortsätta med exemplet ovan. I stället för att lägga de båda klasserna i samma fil så skapar man en fil för respektive klass.

Klasser är private, dvs man kan inte nå dem utanför klassen. Därför måste man exportera för att göra dem public, och sedan importera till en annan fil.

// filnamn: person.js

export class Person {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log('eat')
  }
}

// filnamn: employee.js

import { Person } from './person'

export class Employee extends Person {
  constructor(name, title) {
    super(name)
    this.title = title
  }

  work() {
    console.log('working...')
  }
}

// filnamn: main.js

import { Employee } from './employee'

const employee = new Employee('Steve', 'CFO')
employee.work()

React

Det går stadigt framåt för mig med React! Jag har hittills bara jobbat med grunderna och jag börjar få koll på vissa saker. Nedan är ett exempel där jag använder några av de ”higher order functions” som jag skrev om i förra blogginlägget.

Jag använder mig av Codepen som är ett gratis webbaserat program för att skriva frontend-kod. Man slipper installera filer och mappar på sin dator utan man anpassar sitt projekt efter de tekniker man vill använda sig av. I detta fall är det biblioteken ”React” och ”ReactDOM” samt ”Babel” (som inte är ett bibliotek utan en transpiler). På detta sätt har man sin egen ”sandlåda” i vilken man enkelt kan experimentera, öva, nöta och även enkelt dela med sig av sin kod.

Video: Vecka 2 (del 2)- enkel React-app

Här är länken till min övning i React på Codepen som jag döpte till TshirtApp.

Resurser

Javascript

ES6 Tutorial: Learn Modern JavaScript in 1 Hour

The 10 Days of JavaScript: Day 8 (Variable Scope & Context / this keyword)

React

Offentlig dokumentation

Codecademy: Learn React

LearnWebCode (Brad Schiff) Learn React JS Tutorial for Beginners: Day 2 – Day 8

Parallellt med Udemy-kursen så förstärker jag det jag lärt mig på Codecademy samt ReactJS.org. Och det är även givande att bara lyssna i mobilen på t ex Traversy React Crash Course. Då påminns jag om det jag lärt mig i de andra kurserna.

---