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ändare 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
| Vecka | Javascript | React |
| 1 | objects, arrow functions, higher order functions | basics |
| 2 | classes, modules, this, inheritance | basics |
| 3 | Bygg projekt samt repetera: objects, arrow functions, higher order functions | basics |
| 4 | async await and promises, fetch, Web API:s | basics |
| 5 | Bygg projekt samt repetera: classes, modules, this, inheritance | basics |
| 6 | destructuring, spread operator and events | basics |
| 7 | Bygg projekt samt repetera: async await and promises, fetch, Web API:s | intermediate |
| 8 | Bygg projekt samt repetera: destructuring, spread operator and events | intermediate |
| 9 | var, let, const, closures and scope, recursion | intermediate |
| 10 | Functional programming | intermediate |
| 11 | Bygg projekt samt repetera: var, let, const, closures and scope, recursion | intermediate |
| 12 | Bygg projekt samt repetera: functional programming | intermediate |
| 13 | Bygg projekt samt repetera allt | intermediate |
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.
- LearnWebCode (Brad Schiff) – 10 days of JavaScript + Bootcamp
- Codecademy – Learn React
- Traversy Media – React JS Crash Course
- The Net Ninja – React
- Udemy – React (Brad Schiff), React (Maximillian Schwarzmüller)