Min 3 månaders plan för att behärska React

Jag söker jobb som webbutvecklare. Den senaste tiden har jag fokuserat en del på WordPress och PHP utan någon direkt framgång i jobbsökandet. Därför vill jag nu fördjupa mina kunskaper i Javascript och React eftersom jag ser att dessa tekniker är mycket efterfrågade.

Javascript

För den som inte vet är Javascript ett programmeringsspråk – en del kallar det scriptspråk eftersom det ej behöver kompileras, dvs det behöver ej omvandlas från källkod till maskinkod. Javascript är en av tre byggstenar av en webbsida. De andra två är HTML, som står för strukturen av en sida, och CSS som står för designen, alltså färg, form, animeringar etc. Javascript används för funktionalitet, beteende, logik. När du klickar på en knapp i en webbapplikation så händer det något, t ex du lägger en vara i en varukorg eller du bekräftar ett ifyllt formulär. Vad som händer är styrt av vad en webbutvecklare skrivit för Javascriptkod.

React

React är ett Javascript-bibliotek som har utvecklats av Facebook. På grund av deras enorma användarbas, c:a 2 miljarder användare, ville man ta fram ett gränssnitt som trots mängden användare ändå var snabbt. React utnyttjar något som kallas Virtual DOM, vilket innebär att hela sidan inte behöver laddas om varje gång en användaren interagerar med appen. Om man t ex klickar på ”like”-ikonen laddas inte hela sidan om utan det enda som händer är att statusen för det aktuella inlägget har fått en extra ”like”.

I React bygger man komponenter och koden blir mer strukturerad vilket gör det lättare att underhålla och återanvända. Man kan åstadkomma mer med färre antal rader kod och biblioteket är uppskattat bland utvecklare och det finns en stor efterfrågan på React-kompetens.

För att kunna förstå React behöver man en del kunskap i Javascript. Jag har grunderna ganska bra men ska nu titta lite mer på några delar av Javascript som är extra värdefulla att kunna för att koda i React.

Koncept inom Javascript som jag kommer att nöta in

  • Objects
  • Classes, this
  • Inheritance
  • Modules, export, import
  • Data binding
  • Arrow functions
  • Destructuring
  • Spread operator
  • Events, higher order functions
  • Asynchrous Javascript (async await and promises)
  • Web API:s, fetch
  • Closures and Scope
  • Recursion

Fokus är A och O

När man studerar webbutveckling är det lätt att man tappar tråden eftersom det finns så många tekniker och kombinationer av programmeringsspråk, bibliotek och ramverk. En sak leder till en annan, och man behöver förstå x för att kunna gör y och helt plötsligt har man irrat iväg från sin ursprungliga plan. Därför vill jag nu skriva ner en plan för de kommande tre månaderna för mig själv och vem som helst som har nytta av den.

  • Studera – ta in information på olika sätt, t ex olika instruktörer som förklarar samma koncept, olika medier (böcker, artiklar, videokurser)
  • Bygga – skapa egna projekt baserat på vad jag nyligen har lärt mig
  • Repetera – repetera och fördjupa kunskapen i lagom intervall
  • Lära ut – att kunna lära ut något innebär att du har fattat det tillräckligt bra för att förklara får någon annan.

Den första månaden blir det mest fokus på Javascript men även lite React. Den andra månaden blir det lika mycket fokus på båda och den tredje månaden blir det mest fokus på React.

Efter denna 3-månaders period kommer jag att gå vidare med tekniker som är relaterade till React: Typescript, Material UI, Next.JS samt eventuellt ”Headless” wordpress med React. Och vid denna tid bör jag ha en snygg portfolio med några React-appar vilket förhoppningsvis gör mig relevant för de tjänster jag då söker. Nu kör vi!

Planen

VeckaJavascriptReact
1objects, arrow functions, higher order functionsbasics
2classes, modules, this, inheritancebasics
3Bygg projekt samt repetera: objects, arrow functions, higher order functionsbasics
4async await and promises, fetch, Web API:sbasics
5Bygg projekt samt repetera: classes, modules, this, inheritancebasics
6destructuring, spread operator and eventsbasics
7Bygg projekt samt repetera: async await and promises, fetch, Web API:sintermediate
8Bygg projekt samt repetera: destructuring, spread operator and eventsintermediate
9var, let, const, closures and scope, recursionintermediate
10Functional programmingintermediate
11Bygg projekt samt repetera: var, let, const, closures and scope, recursionintermediate
12Bygg projekt samt repetera: functional programmingintermediate
13Bygg projekt samt repetera alltintermediate

Resurser

Brad Schiff heter min favorit bland webbutvecklare som har kurser på Youtube och Udemy. Han har mycket bra gratiskurser på Youtube samt några på Udemy som kostar runt 120 kr. Och det finns några fler bra instruktörer som jag listar nedan. Vad gäller grundläggande Javascript så är Codecademy och FreeCodeCamp väldigt bra. Där krävs att man kodar själv för att komma vidare till nästa lektion.

Foto Green Chameleon från Unsplash