Læringsplan for Webudvikling - Tobbekjaer/Portfolio GitHub Wiki

Læringsplan for React

Læringscirkel 1 (Uge 34-35): Grundlæggende JavaScript

Mål

  • Viden: Opnå grundlæggende forståelse af JavaScript som programmeringssprog, dets syntax og anvendelse i webudvikling.
  • Færdigheder: Udvikle små scripts, der kan interagere med HTML og manipulere DOM'en.
  • Kompetencer: Forstå og implementere grundlæggende programmeringskoncepter som variabler, loops, funktioner og events i JavaScript.

Læringsaktiviteter

  • Litteratursøgning: Grundlæggende forståelse for HTML og CSS. Læs "Eloquent JavaScript" (kapitel 1-4) for at opnå en dyb forståelse af sprogets grundlæggende koncept.
  • Online kursus: Følg et kurset "JavaScript Programmering" fra freeCodeCamp samt LinkedIn Learning Kurser.

Projekter

  • Passenger Counter App: En app til at tælle, hvor mange passagerer, der stiger på toget om morgenen bygget med HTML, CSS og JavaScript!
  • Black Jack Game: Et sjovt Black Jack spil bygget med HTML, CSS og JavaScript!
  • Lead Tracker Chrome Extension: En Chrome-extension til at gemme vigtige faner og browservinder. Bygget med HTML, CSS, JavaScript og LocalStorage.

Evaluering af Læringscirkel 1: Grundlæggende JavaScript

I denne læringscirkel har jeg fået styr på de basale ting i JavaScript som syntax, loops, funktioner osv. Projekter som Passenger Counter App og Black Jack Game har virkelig hjulpet mig med at forstå, hvordan man manipulerer DOM’en og interagerer med HTML. Jeg føler mig nu klar til at tage fat på mere avancerede emner i JavaScript og React, som bygger videre på de langsigtede mål.

Læringscirkel 2 (Uge 36-37): Introduktion til React

Mål

  • Viden: Forstå de grundlæggende principper bag React, inklusiv komponentbaseret arkitektur og JSX.
  • Færdigheder: Udvikle simple React-komponenter, der kan genbruges i en webapplikation.
  • Kompetencer: Oprette en enkel, interaktiv applikation, der illustrerer Reacts måde at håndtere brugergrænsefladen på.

Læringsaktiviteter

  • Litteratursøgning: Læs "React Official Documentation" (Introduktion og Hovedkoncepter).
  • Online kursus: Følg et introduktionskursus i React, "Learn React" fra Scrimba samt LinkedIn Learning Kurser og YouTube materiale.

Projekter

React Projects Repository

  • Static React App: En Static React App for at lære JSX, Custom Components og Styling.
  • AirBnb Experiences Clone: En React App, der går i dybden med JSX og Custom Components samt Props og Data Mapping.
  • Meme Generator: En Interaktiv React App til at generere sjove memes af billeder hentet fra et eksternt API. App'en bygger på Event Listeners, State, Conditional Rendering, Forms og Side Effects.

Evaluering af Læringscirkel 2: Introduktion til React

I denne læringscirkel har jeg fået styr på React’s grundprincipper som komponentbaseret arkitektur og JSX. Jeg udviklet et par simple, interaktive komponenter og har opnået erfaring med mere avancerede principper som state management og props. Jeg har ikke nået helt så meget, som jeg gerne ville, fordi der har været mange nye begreber og koncepter, som jeg har ekstra på at forstå. Denne cirkel har effektivt bygget videre på mine JavaScript-færdigheder og forberedt mig på at arbejde med avancerede React-emner i de kommende læringscirkler.

Læringscirkel 3 (Uge 38-39): Avanceret React

Mål

  • Viden: Udforske React state management, hooks, og hvordan man håndterer komplekse komponenthierarkier.
  • Færdigheder: Udvikle avancerede funktioner i en React-applikation, såsom datahåndtering, formularer og routing.
  • Kompetencer: Udvide en eksisterende applikation til at håndtere komplekse interaktioner og dataflyd.

Læringsaktiviteter

  • Litteratursøgning: Dyk ned i avancerede emner i React-dokumentationen, såsom "Hooks" og "State Management".
  • Online kursus: Følg et kursus om React Hooks og React Router.
  • Eksperimenter: Udvikle applikationer, der inkluderer med forskellige React Hooks og applikationsnavigation med React Router.

Projekter

React Projects Repository

  • Notes App: En funktionel Notes App, der dynamisk opdaterer og gemmer data i en Firebase database.
  • Todo List App: En funktionel Todo-liste applikation, hvor du kan tilføje, slette og markerer opgaver som afsluttet. Todo-listen gemmes i Local Storage.
  • Tenzies Game: Et sjov spil Tenzies, hvor du kan rulle og holde på terningerne indtil du har 10 ens.
  • React Router App: En simpel applikation bygget til at arbejde med navigation i en React applikation med React Router.

Evaluering af Læringscirkel 3: Avanceret React

I denne læringscirkel har jeg fået en dybere forståelse af React Hooks, state management og React Router. Det har været spændende at arbejde med mere komplekse datahåndteringer og komponenthierarkier. Jeg ser rigtig meget frem til at anvende mine færdigheder i en projektrelateret sammenhæng. Vi skal bygge en React-baseret hjemmeside for Museum Moss, som integrerer med et headless WordPress CMS via WP REST API. Dette vil være en fantastisk mulighed for at designe, udvikle og optimere en fuld frontend-applikation.

Læringscirkel 4 (Uge 40-41): Byg en React Website fra Scratch

Mål

  • Viden: Få erfaring med at designe og strukturere en React-applikation fra bunden, med fokus på at anvende best practices for single-page applications (SPA). Forstå, hvordan man integrerer eksterne API’er, som et headless WordPress CMS.
  • Færdigheder: Skab en frontend-applikation i React, hvor layout og navigation simuleres. Udvikl et minimal viable produkt (MVP) til det 4. semester projekt for Museum Moss.
  • Kompetencer: Arbejd med designfasen i en React-applikation. Anvend viden om layout og navigation til at præsentere en prototype, der adresserer de forskellige behov for Vildmose Museet og Dorf Møllegård.

Læringsaktiviteter

  • React dokumentation og best practices: Gennemgå React-dokumentation, særligt for komponentbaseret design og dataflow. Lær at tænke i React og strukturer projektet ved at skabe genanvendelige komponenter.
  • Step-by-Step Guide: Udvikl din egen guide, der dokumenterer designprocessen trin for trin, baseret på "Thinking in React"-princippet.
  • Opstart af Museumsprojektet: Start projektet ved at mødes med Museum Moss og diskutere kravene til hjemmesiden. Simuler layout og navigation for Vildmose Museet og Dorf Møllegård.
  • Hooks og State Management: Lær at bruge React Hooks som useEffect og useState til at håndtere API-kald og dynamisk data.

Projekter

  • Museum Moss hjemmeside: Design frontend til Museum Moss’ nye hjemmeside, hvor du simulerer layout og navigation. Fremvis et minimal viable produkt (MVP) som et første skridt i projektet.
  • Step-by-Step design guide.pdf: Opret din egen guide baseret på principperne fra "Thinking in React", der hjælper med at designe hjemmesiden.

Evaluering af Læringscirkel 4: Byg en React Website fra Scratch

Denne læringscirkel har fokuseret på at designe en React-applikation fra bunden. Jeg har dykket ned i, hvordan man strukturerer komponenter, planlægger dataflow og opbygger en applikation med genanvendelige komponenter. Jeg har lavet en egen "step-by-step" designguide, der visualiserer denne proces, og præsenteret en Minimal Viable Product til virksomheden Museum Moss til vores 4. semester projekt. Processen har givet mig en dybere forståelse af, hvordan man tænker i React og oversætter det til en konkret løsning, der kan videreudvikles.

Læringscirkel 5 (Uge 42-44): Integration mellem React (frontend) og WordPress (backend)

Denne læringscirkel gælder for både React og Docker.

Mål

  • Viden: Forstå integrationen af React med et headless WordPress CMS via REST API, når begge kører i en samlet Docker Compose-fil.
  • Færdigheder: Opsæt og kør både frontend og backend i en samlet Docker Compose-konfiguration. Implementér API-kommunikationen mellem de to applikationer.
  • Kompetencer: Byg en funktionel applikation, hvor React henter dynamisk indhold fra WordPress.

Læringsaktiviteter

  • Docker Compose: Opret en samlet docker-compose.yml-fil for at køre både React og WordPress samt en database med én kommando.
  • Netværkskommunikation: Gør det muligt for React-appen at kommunikere direkte med WordPress via containerens hostname, opsat med Docker Compose.
  • Webudvikling med Postman: Brug Postman til at navigere og forstå responsdata fra WordPress REST API-endpoints, hvilket giver mig indsigt i, hvordan data struktureres og kan anvendes i React-applikationen.

Projekter

  • Museum Moss hjemmeside (Museum Moss Test App): Integrér React med WordPress som headless CMS via REST API og brug den samlede Docker Compose-konfiguration til at containerisere hele udviklingsmiljøet.

Evaluering af Læringscirkel 5: Integration mellem React (frontend) og WordPress (backend):

I denne læringscirkel har jeg arbejdet på at udvikle en samlet Docker Compose-fil for både frontend og backend. Jeg har også brugt Postman til at forstå og navigere i responsdata fra WordPress REST API, hvilket er afgørende for at implementere effektiv API-kommunikation i min React-app. Det har været virkelig lærerigt at arbejde med to applikationer, som er adskildt fra hinanden, men kommunikerer via API Endpoints, som jeg selv har sat op. Det bliver brugbar læring, når vi snart skal bygge en ny hjemmeside til Museum Moss.