Tag: react

Kodearkitektur

Bruk av Redux Store i Containere og Components. Kort oppsummert (TL;DR) Send “ID” eller andre identifikatorer via Props til komponenten og la komponenten hente data fra Redux Store. Utfordring (Why?) Hvis en del av Redux Store sendes som Props så vil komponenten re-rendres ved endringer av denne Prop/Store. Det er ønskelig at komponenter ikke rendrer unødvendig. Re-rendring trigges av… Endring av Props. Endring av State som endrer Props. Kilder Redux best practices Common pitfalls Filtrering av Redux Store i mapStateToProps() ved help av Selector Kort oppsummert (TL;DR) Bruk Memoized Selector for å filtrere Redux Store til Props når Redux Store er stor. »

Material UI

Material UI is used in Altinn Studio as the React UI library. Material UI was chosen because It is based on the Google’s material design. It focuses exclusively on the React components Can use responsive components provided by the library Can override the style to customize the component to match the application requirements Can save time by using the components in the library instead of creating it from scratch (for example, the navigation drawers, application bar) It uses JSS as a styling solution that exposes a low-level API which helps in advanced overriding and theming mechanism Material UI links https://material-ui. »

React

React React is a library for developing component based applications. It is done by having declared html as xml in javascript code, and that is again transpiled into vanilla javascript for the browser to render into a page. React Components lifecycle There are sequences that are called when mounting, updated, unmounted and error-catching for every component in React. This is the order they are called: Mounting constructor() static getDerivedStateFromProps() render() componentDidMount() Updating static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting componentWillUnmount() Error handling static getDerivedStateFromError() componentDidCatch() Other React component APIs and properties APIs setState() forceUpdate() Class Properties defaultProps displayName Instance Properties props state Adding a new react-app to altinn. »

React

Modulært rammeverk for å utvikle UI komponenter som kan gjenbrukes flere steder i løsningen. Hvert React komponent har en tilstand som gir den data i henhold til hvor i applikasjonen brukeren er og hvilke handlinger som foretas. Vedlikeholdt av Facebook, under MIT lisens. Slik React blir brukt Uten redux Ved bruk av higher order components kan tilstand sendes fra rot-komponenten nedover i komponent-hierarkiet. Rot-komponenten håndterer alt av state, og sender callbacks ned i komponentene, slik at det er mulig og legge til, fjerne og endre komponeter. »

Redux

Redux is used to manage the states of the ux-editor. Actions Actions are the events that are triggered when a change is made. An action contains the action type, and any metadata needed to complete the action. For example: export interface IUpdateFormDataAction extends Action { formData: any; componentID: string; dataModelElement: IDataModelFieldElement; } Sagas Redux saga is the middleware used to process information before the store is updated. All logic used in a saga should be an exported function in the utils-folder. »

Redux

Applikasjonstilstandshåndtering En felles tilstand for hele applikasjonen Tilstanden styres av Actions som håndteres av Reducere som igjen populerer tilstanden. En Action kan f.eks. være “FETCH_POSTNUMMER” Når en slik actions kjøres, så vil en Reducer ta imot og oppdatere tilstanden slik at det er i tilstanden at applikasjonen nå henter postnummer. Når er hentingen er fullført, vil man f.eks. sende en action “FETCH_POSTNUMMER_FULFILLED” som har postnummer-data med som parameter. »

Tredjeparts komponenter

Det er ønskelig at tredjeparter skal kunne utvikle komponenter som en tjenesteeier skal kunne bruke i sine løsninger Hvordan utvikle 3. parts komponenter Når du som en bruker ønsker å utvikle tredjeparts-komponenter så er det anbefalt å bruke rollup.js som kompilerer til cjs (CommonJS). Basert på dette repoet i altinn.studio Eksempel på et komponent som i et fiktivt git repo (basert på Gitea Repo) ligger i src/components/BalloonCounter/index.js : import React from 'react'; export class BalloonCounter extends React. »