Jag har börjat min väg in i React (och fördjupning i Javascript) och redovisar vad jag lärt mig under vecka 1. Jag har fokuserat mest på Javascript och kommer göra så de första fyra veckorna. Det finns en hel del man behöver förstå för att fatta React. Men jag har även redan skrivit lite React-kod. Min filosofi är att hjärnan behöver tid på sig att vänja sig vid vissa koncept, så genom att nosa lite på React redan nu har processen kommit igång.
Jag kan ju tillägga att jag har provat React tidigare, dels i min utbildning och dels på egen hand. Men under utbildningen var min Javascript-kunskap på en alltför grundläggande nivå, så våra React-lektioner var ganska svåra att ta in då.
Som jag skrev i min förra blogg så lär jag mig genom att:
1. Lära mig och använda olika källor och medier
2. Applicera kunskapen i projekt, dvs skriva kod själv
3. Repetera
4. Lära ut
Så punkt 4 är vad jag gör här på bloggen samt med video-guider. Jag kommer inte skriva så mycket kod i bloggen utan visa det mest i mina videor. Så här blir det mer att jag förklarar hur jag förstår vissa koncept med kodexempel samt att jag hänvisar till resurser som hjälpt mig på vägen.
Video: Vecka 1 – del 1 av 4 – Objects, arrow functions, forEach()
Nu tar vi en titt på de Javascript-kunskaper jag studerat senaste veckan.
Objects
Objekt är inget specifikt för Javascript utan det används i andra programmeringsspråk också. Objekt är en datatyp i vilken man kan lagra data i ”collections” bestående av ”key-value pairs” och skrivs så här:
const employee = {
firstName: 'Steve',
lastName: 'Rush',
age: 60,
office: 'New Jersey',
startYear: 1979,
salary: 100000,
work() {},
eat() {},
}I detta exempel är t ex firstName, lastName och age ”properties” i objektet employee. Varje ”property” tilldelas ett värde. Så firstName är ”property”samt ”key”, och ”Steve” är värdet (”value”) – alltså ”key-value pair”.
Längst ner har vi två metoder som också kan lagras i ett objekt – work() och eat()
För att ”komma åt” värdet i ett objekts ”properties” och ”methods” skriver man objektets namn, punkt och ”property” eller ”method”, t ex:
employee.firstName
employee.age
employee.work()Ett av syften med att lagra data i objekt är att koden blir bättre strukturerad, lättare att underhålla och att relaterad data samlas i ett logiskt kluster så att säga.
I Javascript finns objekt med tillhörande metoder som är klara att använda. T e x dessa globala objekt: Array, Boolean, Date, Math, Number och String. Och det finns objekt specifika för webbläsaren t ex Window med Navigator, Screen, History, Location, Document.
Det finns ett större koncept, eller egentligen ett programmeringsmönster, som kallas objektorienterad programmering. Det ska jag återkomma till lite senare.
Arrow functions
”Arrow functions” introducerades i ES6 och används ofta i React och i funktionell programmering. Det är ett sätt att skriva funktioner med elegantare, kortare kod. Exempel på traditionell funktion följt av ”arrow function”:
const multiplyMe = function (x) {
return x * x
}
const multiplyMe2 = x => x * xMan kan alltså ta bort nyckelordet function. Istället lägger man till en fet pil => efter parametern. Om funktionen bara har en parameter kan man även ta bort parentesen. Och man kan ta bort spetsparenteserna {} samt nyckelordet return
Higher order functions
”Higher order functions” är en del av ”functional programming”. En ”higher order function” kan ta en funktion som parameter och/eller returnera en funktion. ”Higher order functions” är array-metoder, dvs de används för att ändra data i arrayer. Jag har kollat på några som används ofta i React men det finns fler.
forEach()
För att loopa igenom en array finns det ju ett antal loopar i Javascript (for, while, do while, for…in, for…of), men det finns även en metod som heter forEach() som man kan använda. Exempel:
const numbers = [23, 19, 2, 89, 389, 24, 51, 5, 90]
numbers.forEach(loopingNumbers)
function loopingNumbers(number) {
console.log(number)
}
Video: Vecka 1 – del 2 av 4 – map()
map()
map() returnerar en manipulerad kopia av den array du påverkar. Här har jag skapat en ny array med förnamnen i respektive objekt förvandlade till versaler.
const employees = [
{
firstName: 'Steve',
lastName: 'Rush',
age: 60,
office: 'New Jersey',
startYear: 1979,
salary: 100000,
},
{
firstName: 'John',
lastName: 'McVie',
age: 34,
office: 'Toronto',
startYear: 2002,
salary: 89000,
},
{
firstName: 'Burt',
lastName: 'Lancaster',
age: 23,
office: 'Toronto',
startYear: 2012,
salary: 50000,
},
{
firstName: 'John',
lastName: 'Malkowitz',
age: 46,
office: 'LA',
startYear: 2015,
salary: 60000,
},
]
const employeeFirstName = employees.map((name) => {
return name.firstName.toUpperCase()
})
Video: Vecka 1 – del 3 av 4 – sort()
sort()
Denna metod sorterar data. Funkar så här:
const cars = ['BMW', 'Ford', 'Mercedes', 'Volvo', 'Porsche', 'Kia', 'Toyota']
console.log(cars.sort())Resultatet blir att bilarna sorteras i bokstavsordning. Vad gäller siffror får man lägga till två parametrar, a och b, och ett villkor (här skrivet med ”ternary operator”). Om villkoret uppfylls ges det element som loopas värdet 1, och det stiger i sorteringen, om villkoret inte uppfylls ges elementet som loopas värdet -1, och sjunker i sorteringen. Som jag förstår detta är det samma som ”bubble sorting”. I exemplet nedan har de anställda sorterats i åldersordning.
const employees = [
{
firstName: 'Steve',
lastName: 'Rush',
age: 60,
office: 'New Jersey',
startYear: 1979,
salary: 100000,
},
{
firstName: 'John',
lastName: 'McVie',
age: 34,
office: 'Toronto',
startYear: 2002,
salary: 89000,
},
{
firstName: 'Burt',
lastName: 'Lancaster',
age: 23,
office: 'Toronto',
startYear: 2012,
salary: 50000,
},
{
firstName: 'John',
lastName: 'Malkowitz',
age: 46,
office: 'LA',
startYear: 2015,
salary: 60000,
},
]
const sortedEmployees = employees.sort((a, b) => (a.age > b.age ? 1 : -1))
Video: Vecka 1 – del 4 av 4 – filter() och reduce()
filter()
Med denna metod kan man filtrera ut den data man vill ha från en array, utan att använda villkorssats och loop. I exemplet nedan kan jag filtrera ut de anställda som jobbar på kontoret i LA:
const employees = [
{
firstName: 'Steve',
lastName: 'Rush',
age: 60,
office: 'New Jersey',
startYear: 1979,
salary: 100000,
},
{
firstName: 'John',
lastName: 'McVie',
age: 34,
office: 'Toronto',
startYear: 2002,
salary: 89000,
},
{
firstName: 'Burt',
lastName: 'Lancaster',
age: 23,
office: 'Toronto',
startYear: 2012,
salary: 50000,
},
{
firstName: 'John',
lastName: 'Malkowitz',
age: 46,
office: 'LA',
startYear: 2015,
salary: 60000,
},
]
const employeesLA = employees.filter((x) => x.office === 'LA')reduce()
Denna metod reducerar värden i en array till ett värde.
const numbers = [1, 2, 3, 4]
const numbersSum = numbers2.reduce(function (total, number) {
console.log(number)
return total + number
}, 0)Här summeras värden numbers.
Ovanstående är enkla exempel på ”higher order functions” men det finns mycket mer att hämta i dessa metoder när man nått en högre nivå i programmeringen.
React
Jag kommer inte visa någon kod utan nämner några insikter om vad React gör för nytta och lite grundläggande idéer bakom detta populära Javascript-bibliotek. Youtube-klippen med Brad Schiff som jag hänvisar till under ”Resurser” nedan var superbra för mig för att öka förståelsen för vad poängen är med React.
Vad är React? React är ett Javascript-bibliotek för att bygga användargränssnitt, utvecklat av Facebook. För att förstå hur ett bibliotek eller ett ramverk inom programmering fungerar brukar det vara väldigt upplysande att jämföra med hur koden skrivs utan bibliotek eller ramverk. I detta fall i ”vanilla Javascript”. Så här förstår jag förklaringarna av Brad Schiff:
När man bygger användargränssnitt i Javascript (utan React) gör man det antingen via DOM (Document Object Model) eller Data/ Declarative view.
Nackdelar med ”DOM”:
Att jobba med DOM kräver mer kod och att spara och hämta data hela tiden gör applikationen långsam. Och varje element finns på flera olika ställen i koden vilket gör koden svårare att underhålla och överblicka. För små projekt fungerar det men i stora kodbaser blir det onödigt svårt att manuellt ha koll på alla element (spaghetti-kod). Kodexempel
Nackdelar med ”Data/Declarative view”:
Här är all kod för gränssnittet samlat på ett ställe, i Javascript-filen. Så det är mer organiserat än DOM-metoden. Den stora nackdelen är dock att så fort någon data ändras så måste all kod för gränssnittet renderas. Så även om det bara är ett enda element som ändrats ska hela appen renderas, vilket tar onödigt lång tid. Kodexempel
Det bästa av två världar – React
React liknar mest den andra metoden ovan, Data/Declarative view. I React är gränssnittets kod samlat på ett ställe och med hjälp av Virtual DOM renderas endast det enda element som ändrats. Vi som utvecklar behöver bara bry oss om appens data. Användargränssnittet ”reagerar” automatiskt på den datan. React låter oss behålla vår data utanför DOM, vilket innebär att det är enkelt och snabbt att arbeta med datan.
Kort överblick
Det mest grundläggande man bör titta på i början är JSX, komponenter, props och state.
JSX – liknar HTML och det går att skriva JSX i Javascript-koden. Man brukar prata om ”separation of concerns” inom programmering, t ex att man har all html i en fil, all css i en annan fil och all javascript i en tredje fil. Men i React sker ”separation of concerns” istället på komponentnivå.
Komponent – Varje komponent innehåller både Javascript och JSX och är i grunden en funktion (eller en klass om det är en klass-baserad komponent), som man med fördel kan spara i en egen fil. Funktionen tar in props som argument och returnerar ett React-element. Man kan ha komponenter i komponenter. Komponenter kan återanvändas.
Props – props är argument i komponenter och skickas (dynamiskt) in i HTML-attribut (eller snarare JSX-attribut).
State – En komponents inbyggda state-objekt. Här lagras ”property values”. När state-objektet ändras renderas komponenten igen.
Resurser
Javascript
ES6 Tutorial: Learn Modern JavaScript in 1 Hour
JavaScript Higher Order Functions & Arrays
16.5: Higher Order Functions in JavaScript – Topics of JavaScript/ES6
React
React for the rest of us: The 10 days of React JS (Day 1)
Learn React.js in 70 Minutes: JSX & useState Tutorial
Hoppas du har lärt dig något av det jag visat här. Själv har jag lärt mig väldigt mycket av att lära ut, så det känns som ett genombrott för min egen utveckling och förståelse av programmering! Lycka till!