Beskrivelse
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.
>> Available in Danish <<
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 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.
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å kurset 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 klassekomponenter samt på JavaScript eller TypeScript. Der er øvelser til omrent 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 dig, der er professionel udvikler og har erfaring med HTML- og JavaScript 5-programmering.
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.
Bliv klogere på React, hooks og dets økosystem, og lær at bruge i det i praksis
Få en grundig og dybdegående forståelse af Redux og React Router
Bliv opdateret på de nyeste funktioner i React
Form Kurset afholdes som en workshop, hvor der bruges dias, masser af øvelser og mere end 200 eksempler. Kurset afholdes på engelsk.
Indhold Introduction
What is React?
Why React?
Module 1: Language constructs for React & Redux
EcmaScript 20xx 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/Bootstrap React App
Render
Fragments
Properties
Databinding incl. Conditional and List rendering
Portals
Module 4: Forms JSX vs HTML
Input
TextArea
Option
FormData
Module 5: Interactivity
Events & Event Object
State: Initialising
State: Change sync vs async
Hooks: useState, useCallback
Automatic batching
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
Single responsibility
Error Boundaries
Reusable components (prop-types / typescript)
Default property values
Module 9: Developer experience
Debugging
Developer tools
Updating to new React versions
Optional: Storybook (Component development)
Module 10: Side Effects
useEffect, useLayoutEffect
DOM Interaction:useRef
Connect with REST service
Module 11: Hooks miscellaneous
Custom Hooks
useDebugValue
Rules for using Hooks
Module 12: Concurrent Rendering
Lazy Loading
Suspense
Suspense List
Transitions
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)
Module 15: Advanced Redux
Pattern: Presentational vs Container Components
React-Redux
Optional: Redux Middleware
Optional: Async actions
Optional: Redux Undo
Module16: Patterns and Best Practices
Context (Pattern: Implicit state)
Pattern: Destructuring props and state
Optional: Transclusion
Optional: Render Props
Optional: Higher Order Components
Module 17: Performance
useMemo, useCallback hooks
MemoComponent (f.k.a. PureComponent)
memo() Higher-Order Component (React 17+)
Event Handlers: inline vs method
React Profiler
Appendix 1: EcmaScript 5
JavaScript basics: Types, objects, arrays, loops, conditional statements, errors, etc.
Appendix 2: Testing
Unit testing
Snapshot testing
Appendix 3: Good to know
Wrapping existing JavaScript components
Appendix 4: Immutable Data
Immutable JavaScript: List; Map; Set; Convert from and to raw JavaScript objects; Nested structures;
Lazy sequences; Equality; Batch mutations
Appendix 5: Styling
Animations
CSS, Inline styles
Optional: Styled Components
Appendix 6: Specialised Hooks
useId
useTransition
useDeferredValue
useSyncExternalStore
useInsertionEffect
