Kurser

Kursusadministration

Brug for hjælp?

  • Gregersensvej 8
  • 2630 Taastrup
Google MapsApple MapsRejseplanen
  • Forskerparken Fyn, Forskerparken 10F
  • 5230 Odense M
Google MapsApple MapsRejseplanen
  • Teknologiparken Kongsvang Allé 29
  • 8000 Aarhus C
Google MapsApple MapsRejseplanen
  • NordsøcentretPostboks 104
  • 9850Hirtshals
Google MapsApple MapsRejseplanen
  • Gammel Ålbovej 1
  • 6092Sønder Stenderup
Google MapsApple MapsRejseplanen

React, Redux & Router med Hooks

Vil du gerne kunne skrive interaktive applikationer i HTML og JavaScript? Eller skriver du allerede Single Page Applications, men er HTML fyldt med semi-kode, der er umulig at vedligeholde? Kæmper du med debugging af databinding og ydeevne? Kan du ikke lige huske, hvordan data finder vej til brugergrænsefladen? Kurset afholdes på engelsk.

Evaluering

4stjerner

Alle arrangementer på Teknologisk Institut bliver evalueret af deltagerne. Stjernerne angiver deltagernes gennemsnitlige tilfredshed.

Evalueringen er baseret på: 5 besvarelser

Det er tid til React!
 
Facebook har skabt en funktionel tilgang til at tackle traditionelle kompleksiteter i JavaScript: React (open source). Kritiseret i 2013, men brugt siden 2015 af de dominerende websteder i verden. Lad os bygge hurtige komponenter på en vedvarende og meningsfuld måde
 
På dette kursus kommer du til at lære om React, hooks og dets økosystem. Redux og React Router dækkes i dybden. EcmaScript 202X (eller TypeScript), npm, Babel og Webpack bruges i kursusforløbet.
 
Kursisterne kan, afhængigt af deres egne projektkrav, vælge at udføre øvelser, som fokuserer på funktions- eller klasse komponenter samt på JavaScript eller TypeScript. Der er løsninger til alle situationer.
 
Nye funktioner i React føjes til kurset med det samme, når de bliver udgivet. Herefter kan du med det samme føje React-dele til både nye og eksisterende websteder.
 
 

Deltagerprofil

Dette kursus er beregnet til professionelle udviklere, som har erfaring med HTML- og JavaScript 5-programmering.

Gennem mine 25 år i branchen, og utallige kurser/seminarer, er Rick Beerendonk den dygtigste underviser jeg har mødt! Hans viden om emnet og hans materiale er enormt!
Søren Møller Thomsen, Kamstrup A/S

Indhold

Introduction
  • What is React?
  • Why React?
Module 1: Language constructs for React & Redux
  • EcmaScript 2018 and later (JavaScript): The relevant features for React and Redux.
  • JSX
  • Babel transpiler
  • Optional: TypeScript
Module 2: JSX
  • How it works (compiler)
  • Differences with HTML
  • Mix JavaScript and JSX
Module 3: Basic
  • Root
  • Render
  • Fragments
  • Properties
  • Databinding
Module 4: Forms JSX vs HTML
  • Input
  • TextArea
  • Option
Module 5: Interactivity
  • Events
  • Event Pool
  • State: Initialising
  • State: Change sync vs async
  • Hooks: useState, useCallback
  • XSS attacks / protection
Module 6: Setting up a project
  • Webpack
  • ESLint
  • Hot Module Replacement
  • Create-react-app
  • Optional: Zeit Next
Module 7: Multiple Components
  • Parent to Child communication
  • Child to Parent communication
  • Children
  • Key
  • Handling form submit
Module 8: Building Apps
  • Function vs Class components, single responsibility
  • React, Redux and Router (with Hooks)
  • Error Boundaries
  • Reusable components (prop-types / typescript)
  • Default property values
Module 9: Developer experience
  • Debugging
  • Developertools
  • Updating to new React versions
  • Optional: Storybook (Component development)
Module 10: Side Effects
  • useEffect hook
  • Component lifecycle
  • DOM Interaction
  • Fetch server data
  • Suspense
  • Suspense Lists
  • Lazy Loading
  • Portals
Module 11: Hooks miscellaneous
  • Custom Hooks
  • Rules for using Hooks
Module 12: Patterns and Best Practices
  • Context (Pattern: Implicit state)
  • Pattern: Destructuring props and state
  • Pattern: Render Props
  • Optional: Pattern: Transclusion
  • Optional: Higher Order Components
Module 13: React Router
  • Static routing
  • No match (like a 404)
  • Dynamic routing
  • Redirection
  • Prompt
  • Nested routes
  • Code Splitting
Module 14: Redux Basics
  • Redux Basics
  • Redux Dev Tools
  • useReducer hook (React)
  • React, Redux and Router (with Hooks)
Module 15: Advanced Redux
  • Pattern: Presentational vs Container Components
  • React-Redux
  • Optional: Redux Middleware
  • Optional: Async actions
  • Optional: Redux Undo
Appendix 1: EcmaScript 5
  • JavaScript basics: Types, objects, arrays, loops, conditional statements, errors, etc.
Appendix 2: Performance
  • useMemo hook
  • shouldComponentUpdate() lifecycle method
  • MemoComponent (f.k.a. PureComponent)
  • memo() Higher-Order Component (React 17+)
  • Event Handlers: inline vs method
  • React Profiler
Appendix 3: Testing
  • Unit testing
  • Snapshot testing
Appendix 4: Good to know
  • Wrapping existing JavaScript components
  • Appendix 5: Immutable Data
  • Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures;
  • Lazy sequences; Equality; Batch mutations
Appendix 6: Styling
  • Animations
  • CSS, Inline styles
  • Optional: Styled Components

Se også vores avanceret React kursus på 2 dage

Format

Workshop. Der bruges dias, masser af øvelser og mere end 200 eksempler. Kurset afholdes på engelsk.

Form ved virtuelt afholdelse

  • Du tilgår kurset via internettet fra din egen computer, stabil forbindelse er vigtig.
  • Du logger på via det tilsendte link, hvor vores underviser sidder klar til at gennemgå kurset “live” med en gruppe deltagere
 

Underviser

Underviser Rick Beerendonk
Rick er seniorkonsulent og underviser fra Holland. Han har over 25 års professionel erfaring med at arbejde i små og store organisationer samt organisationer, der er i kraftig vækst. Hans passion er enkelhed, velskrevet kode og teamdynamik. Han er specialiseret i front-end-teknologier, og han taler ofte om disse emner ved internationale begivenheder. Rick har fortalt om React og undervist i det siden 2014..

Har du faglige spørgsmål, så kontakt:
Andre kigger også på