Hvordan Unngå Monolitiske Komponenter i React: En Guide til Gjenbrukbare og Effektive Komponenter

Når vi utvikler applikasjoner i React, er det vanlig å begynne med en monolitisk komponent, en komponent som er ansvarlig for både datahåndtering og presentasjon av UI. Dette er en intuitiv tilnærming, men etter hvert som applikasjonen vokser, kan dette føre til problemer med vedlikehold, testing og gjenbruk. I denne delen av boken tar vi for oss hvordan du kan unngå monolitiske komponenter ved å dele opp funksjonaliteten i mindre, gjenbrukbare komponenter og gjøre bruk av render props for mer fleksibilitet og enklere administrasjon av komponentavhengigheter.

I utgangspunktet kan en monolitisk komponent se ut som en stor blokk som både håndterer tilstand (state) og rendering av UI-elementer. Dette kan føre til kode som er vanskelig å teste, feilbarlig og utfordrende å gjenbruke i andre deler av applikasjonen. For eksempel, i en komponent som håndterer både en liste av artikler og en form for å legge til nye artikler, kan det hende at både logikken for databehandling og presentasjonen er tett sammenkoblet. Dette gjør det vanskelig å endre eller utvide applikasjonen senere.

For å adressere dette problemet, er en løsning å bryte opp funksjonaliteten i mindre, gjenbrukbare komponenter. Et godt eksempel på dette er å separere en "Feature"-komponent som håndterer applikasjonens tilstand og forretningslogikk fra de komponentene som kun er ansvarlige for rendering. På denne måten kan applikasjonen håndtere tilstanden i en sentralisert komponent, mens små presentasjonskomponenter får de nødvendige dataene som props.

I praksis fungerer render props ved at en komponent mottar en funksjon som et prop. Denne funksjonen returnerer et JSX-element som skal renderes. For eksempel, i stedet for å importere en AddArticle eller ArticleList komponent direkte, kan du sende disse som funksjoner som props til hovedkomponenten, som deretter kan bruke dem til å fylle ut de nødvendige UI-elementene. Dette reduserer direkte avhengigheter og gjør komponentene lettere å gjenbruke i forskjellige deler av applikasjonen.

I koden, kan vi ha noe som dette:

javascript
Copy code
{addArticle({ 
    title, 
    summary, 
    onChangeTitle, 
    onChangeSummary, 
    onClickAdd 
})}
{articleList({ 
    articles, 
    onClickRemove 
})}

En annen viktig ting å merke seg er at React-komponenter ofte er delt opp i to kategorier: containere og presentasjonskomponenter. Container-komponenter håndterer vanligvis tilstanden i applikasjonen, mens presentasjonskomponenter kun er ansvarlige for hvordan dataene blir vist. Denne separasjonen gjør det lettere å gjenbruke komponentene, ettersom presentasjonskomponentene kan brukes i ulike deler av applikasjonen uten å være tett knyttet til en spesifikk tilstand eller datakilde.

Monoli

Hvordan bruke Lazy Components og Suspense for effektiv deling av kode i React-applikasjoner

I moderne webutvikling er ytelse et kritisk element, spesielt når det gjelder React-applikasjoner som kan vokse raskt i størrelse. For å håndtere den potensielle flaskehalsen som oppstår ved at store applikasjoner lastes i ett enkelt bundle, kan teknikker som "code splitting" og "lazy loading" brukes. Disse teknikkene gir muligheten til å laste bare den nødvendige koden ved behov, noe som forbedrer brukeropplevelsen betydelig ved å redusere initial lastetid.

React tilbyr flere mekanismer for å implementere denne strategien. En av de mest brukte metodene er bruken av React.lazy og Suspense. Disse komponentene hjelper til med å laste komponenter kun når de faktisk er nødvendige, og gir et enkelt fall-back for innholdet som ikke er lastet ennå.

Når vi bruker React.lazy(), kan vi definere komponenter som lastes asynkront. I koden som følger, kan vi se hvordan to komponenter, First og Second, kan lastes på en lat måte ved hjelp av React.lazy():

javascript
Copy code
const First = React.lazy(() => import("./First"));

const Second = React.lazy(() => import("./Second"));

På denne måten vil ikke hele appen bli lastet med en gang. I stedet blir First og Second komponentene lastet når de faktisk trengs – for eksempel når brukeren navigerer til en spesifikk rute som krever at én av disse komponentene blir vist.

For å håndtere tilstandene mens komponentene lastes, benytter vi Suspense-komponenten som tilbyr en fallback-egenskap. Denne egenskapen bestemmer hva som skal vises til brukeren mens komponenten er i ferd med å laste:

javascript
Copy code
<Suspense fallback={<div>Loading...</div>}>

  <Route path="/first" component={First} />

  <Route path="/second" component={Second} />
</Suspense>

Et viktig aspekt ved implementeringen av lazy loading er å unngå å gjøre komponentene lazy uten en god grunn. I tilfellene hvor flere komponenter er sterkt relaterte og alltid lastes samtidig, er det bedre å samle disse i ett bundle i stedet for å laste dem asynkront, ettersom dette kan føre til flere HTTP-forespørsler uten reell ytelsesgevinst.

Videre, i større applikasjoner som bruker en ruter som react-router, kan lazy loading være spesielt nyttig. Her er det viktig å forstå at ruter og deres respektive komponenter kan lastes på en lat måte, og at dette kan bidra til bedre organisering av applikasjonens kode og forbedret ytelse. Når en ny rute aktiveres, for eksempel /first, vil den respektive komponenten ikke bli lastet med en gang applikasjonen starter, men først når brukeren navigerer til den. Dette reduserer initial lastetid og holder applikasjonen responsiv.

For videre ytelsesforbedringer kan React-biblioteket også brukes sammen med verktøy som Webpack for å finjustere hvordan bundles blir generert og lastet. For eksempel kan Webpack bruke dynamisk import og lage separate bundles per komponent, noe som gir enda mer kontroll over hva og når koden blir lastet.

Hva er forskjellen mellom Select og Radio Buttons i Material UI?

Når det kommer til brukergrensesnittdesign i Material UI, er det viktig å forstå hvordan forskjellige komponenter fungerer og når det er mest hensiktsmessig å bruke dem. En av de vanligste forskjellene mellom komponentene som brukes til valg i et skjema er hvordan Select og Radio Buttons håndterer visning og interaksjon.

Select-komponenter skiller seg fra Radio Buttons på flere måter, men den mest åpenbare forskjellen er hvordan de håndterer plasseringen på skjermen. Select-komponenter krever mindre plass fordi alternativene bare vises når brukeren åpner menyen. Dette gjør Select ideelt for situasjoner der du har flere valg, men ikke har plass til å vise dem alle på en gang. I eksempelet nedenfor ser vi hvordan Select-komponenten fungerer:

jsx
Copy code
import { useState } from "react";

import InputLabel from "@mui/material/InputLabel";

import MenuItem from "@mui/material/MenuItem";

import FormControl from "@mui/material/FormControl";

import Select from "@mui/material/Select";

export default function MySelect() {
  const [value, setValue] = useState();
  return (
    <FormControl fullWidth>

      <InputLabel id="my-select-label">My Select</InputLabel>

      <Select
        labelId="my-select-label"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        inputProps={{ id: "my-select" }}
      >
        <MenuItem value="first">First</MenuItem>

        <MenuItem value="second">Second</MenuItem>

        <MenuItem value="third">Third</MenuItem>
      </Select>
    </FormControl>
  );
}

En annen vanlig komponent for brukerinteraksjon er Radio Buttons, som er ideelle når det er behov for at brukeren velger ett alternativ fra en liten mengde alternativer, men der alle alternativene vises samtidig. I tilfelle Radio Buttons, vises alternativene alltid på skjermen, og valget er begrenset til ett alternativ om gangen.

En annen viktig komponent er TextField, som er nødvendig når brukeren trenger å skrive inn tekst. TextField krever ingen støttekomponenter og lar oss sette verdier og håndtere brukerens inndata enkelt. Et eksempel på bruk av TextField kan se slik ut:

jsx
Copy code
export default function MyTextInput() {
  const [value, setValue] = useState("");
  return (
    <TextField
      label="Enter text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      margin="normal"
    />
  );
}

I dette tilfellet er value-tilstanden knyttet til brukerens inndata, og verdien endres i henhold til hva brukeren skriver.

jsx
Copy code
type ButtonColor = "primary" | "secondary";

export default function App() {

  const [color, setColor] = useState("secondary");
  const updateColor = () => {
    setColor(color === "secondary" ? "primary" : "secondary");
  };
  return (

    <Stack direction="row" spacing={2}>

      <Button variant="contained" color={color} onClick={updateColor}>Contained</Button>
      <Button variant="text" color={color}>Text</Button>
      <Button variant="outlined" color={color}>Outlined</Button>
    </Stack>
  );
}

Her bruker vi Stack-komponenten for å plassere knappene horisontalt, og hver knapp kan skifte farge når brukeren klikker på den. Material UI gjør det enkelt å eksperimentere med forskjellige varianter av knapper som "Contained", "Text", og "Outlined".

En annen måte å tilpasse utseendet på komponentene i Material UI er ved å bruke styled()-funksjonen, som lar oss lage komponenter med spesifikke stilinnstillinger basert på JavaScript-objekter. Eksemplet nedenfor viser hvordan man kan lage en tilpasset knapp med marginer og rundede hjørner:

jsx
Copy code
const StyledButton = styled(Button)(({ theme }) => ({

  "&.MuiButton-root": { margin: theme.spacing(1) },
  "&.MuiButton-contained": { borderRadius: 50 },

  "&.MuiButton-sizeSmall": { fontWeight: theme.typography.fontWeightLight },

}));
export default function App() {
  return (
    <>

      <StyledButton variant="contained">First</StyledButton>

      <StyledButton variant="contained">Second</StyledButton>

      <StyledButton variant="contained">Third</StyledButton>

    </>
  );
}

Når du begynner å bruke tilpassede temaer, kan du endre utseendet på hele applikasjonen. Material UI gir oss muligheten til å bruke createTheme()-funksjonen for å lage et tema som gjelder for alle komponenter i applikasjonen. For eksempel kan du endre skrifttypen og marginene på MenuItem-komponentene som vist i dette eksempelet:

jsx
Copy code
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontSize: 11,
  },
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          marginLeft: 15,
          marginRight: 15,
        },
      },
    },
  },
});
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Menu>
        <MenuItem>First Item</MenuItem>
        <MenuItem>Second Item</MenuItem>
        <MenuItem>Third Item</MenuItem>
      </Menu>
    </ThemeProvider>
  );
}

Hvordan navigere mellom skjermer i React Native med Expo og React Navigation

I React Native-utvikling er navigasjon mellom skjermer en essensiell del av appens brukeropplevelse. Når du bygger apper, trenger du en måte å bevege deg fra én skjerm til en annen, og håndtere dynamiske data som må vises på forskjellige skjermbilder. I denne delen av boken går vi gjennom hvordan man setter opp navigasjon i en React Native-app ved hjelp av Expo og React Navigation.

For å komme i gang, må vi installere nødvendige avhengigheter. Bruk Expo for å installere de grunnleggende pakkene:

bash
Copy code
npx expo install react-native-screens react-native-safe-area-context

Disse pakkene er nødvendige for å bruke navigasjonen i appen. Videre, for å bruke stack navigatoren, trenger vi å installere ytterligere en pakke relatert til navigasjonspakken:

bash
Copy code
npm install @react-navigation/native-stack

Når disse pakkene er installert, kan vi begynne å utvikle navigasjonen. Her er et eksempel på hvordan App-komponenten kan se ut:

javascript
Copy code
import Home from "./Home";

import Settings from "./Settings";
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <Stack.Navigator>

      <Stack.Screen name="Home" component={Home} />

      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Funksjonen createNativeStackNavigator() setter opp navigasjonen i appen. Den returnerer et objekt som har to hovedkomponenter: Screen og Navigator. Screen representerer skjermene som kan navigeres til, mens Navigator håndterer navigasjonen mellom disse skjermene. Den første argumenten til createNativeStackNavigator() er en liste over skjermene, og den andre argumenten definerer generelle navigasjonsvalg. I eksemplet over forteller vi navigatoren at “Home”-skjermen skal være standard skjerm.

Skjermkomponentene

En skjerm kan være hvilken som helst React Native-komponent. Det er ingen spesifikke krav til hvordan komponentene skal se ut, men de må håndtere navigasjonens egenskaper. For eksempel, her er hvordan Home-komponenten kan se ut:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;

export default function Home({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>

      <Button title="Go to Settings" onPress={() => navigation.navigate("Settings")} />

    </View>
  );
}

Dette er et vanlig funksjonelt komponent i React. Når brukeren trykker på knappen, navigeres de til "Settings"-skjermen. Navigasjonsegenskapen navigation er tilgjengelig i komponentene via react-navigation og gjør det mulig å bruke ulike API-funksjoner som navigate(), som tar skjermens navn som parameter. I dette tilfellet navigerer vi til skjermen med navnet “Settings”.

javascript
Copy code
export type RootStackParamList = {
  Home: undefined;
  Settings: undefined;
};

Tilbakeknappen og Navigasjonsbar

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Settings'>;

export default function Settings({ navigation }: Props) {

  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
      <Button title="Go back to Home" onPress={() => navigation.navigate("Home")} />
    </View>
  );
}

Når du trykker på knappen her, blir brukeren sendt tilbake til “Home”-skjermen. I tillegg vil tilbake-knappen i navigasjonslinjen gjøre det samme. Denne funksjonaliteten krever ingen ekstra koding fra utviklerens side, noe som sparer mye tid.

Ruteparametere

Først definerer vi RootStackParamList med rutenavnene og eventuelle parametere:

javascript
Copy code
export type RootStackParamList = {
  Home: undefined;
  Details: { title: string };
};

I Home-komponenten kan vi sende forskjellige titler til Details-skjermen:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;

export default function Home({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate("Details", { title: "First Item" })} />
      <Button title="Go to Details" onPress={() => navigation.navigate("Details", { title: "Second Item" })} />
      <Button title="Go to Details" onPress={() => navigation.navigate("Details", { title: "Third Item" })} />
    </View>
  );
}

I Details-komponenten kan vi deretter hente ruteparametrene:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;

export default function Details({ route }: Props) {
  const { title } = route.params;
  return (
    <View style={styles.container}>
      <Text>{title}</Text>
    </View>
  );
}

På denne måten kan vi dynamisk sende og vise data fra én skjerm til en annen.

Det er også viktig å merke seg at selv om vi kun sender en tittelparameter i dette eksemplet, kan du sende flere parametere etter behov. Å bruke ruteparametere på denne måten gjør appen mer dynamisk, og det gir bedre fleksibilitet i hvordan data håndteres mellom skjermene.

Hvordan implementere en dynamisk liste med sortering og filtrering i React Native

FlatList er designet for å være generisk og effektiv, med muligheter for å håndtere oppdateringer i dataene og tilby en optimalisert scrolling-opplevelse. Den lar deg definere hvordan hvert enkelt element i listen skal se ut, og hvilke data som skal vises. Når du benytter deg av FlatList, gir du komponenten en liste med data som den vil bruke for å vise innholdet.

For å gjøre listen visuelt tiltalende og brukervennlig, er det nødvendig å definere stiler for både containeren og elementene i listen. Dette kan gjøres ved å bruke StyleSheet fra React Native:

javascript
Copy code
import { StyleSheet } from "react-native";

export default StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    paddingTop: 40,
  },
  item: {
    margin: 5,
    padding: 5,
    color: "slategrey",
    backgroundColor: "ghostwhite",
    textAlign: "center",
  },
});

Når du har grunnlaget for listen på plass, kan du begynne å legge til funksjoner som gir brukeren kontroll over innholdet. En vanlig funksjon er muligheten til å sortere og filtrere listen basert på ulike kriterier. Dette kan oppnås ved å introdusere ekstra komponenter som lar brukeren interagere med listen på en intuitiv måte.

Strukturen av komponentene

I en applikasjon med sorterings- og filtreringsfunksjoner, kan komponentene organiseres på en måte som skiller ansvarene mellom ulike deler av applikasjonen. Her er en typisk komponentstruktur for en liste med kontroller:

1. ListContainer: Den overordnede containeren som håndterer tilstanden til listen og gir funksjonalitet til de underliggende komponentene.

2. List: En stateless komponent som tar inn data fra ListContainer og bruker FlatList til å vise elementene.

3. ListControls: Denne komponenten holder kontrollene for filtrering og sortering som påvirker listen.

4. ListFilter: En kontroll for å filtrere elementene basert på en tekstverdi.

5. ListSort: En kontroll som lar brukeren endre sorteringen av listen.

6. FlatList: Selve komponenten som tar seg av rendering av elementene i listen.

Denne strukturen gjør det mulig å utvikle en applikasjon som er både modulær og lett å vedlikeholde. Hver komponent er ansvarlig for en spesifikk oppgave, og endringer i én komponent vil ikke nødvendigvis påvirke resten av applikasjonen.

Implementasjon av funksjoner

En av de viktigste aspektene ved å håndtere lister er å kunne filtrere og sortere dem på en effektiv måte. For å gjøre dette kan man bruke utility-funksjoner som filtrerer og sorterer listen basert på brukerens input. Her er et eksempel på hvordan dette kan implementeres:

javascript
Copy code
function filterAndSort(text: string, asc: boolean): string[] {

  return array
    .filter((i) => text.length === 0 || i.includes(text))
    .sort(
      asc

        ? (a, b) => (a > b ? 1 : a < b ? -1 : 0)

        : (a, b) => (b > a ? 1 : b < a ? -1 : 0)
    );
}

I dette tilfellet definerer vi en funksjon som filtrerer listen basert på om teksten finnes i elementene, og deretter sorterer listen enten i stigende eller synkende rekkefølge.

Videre benytter vi React Native's useMemo-hook for å optimalisere beregningen av listen, slik at den kun blir oppdatert når filtrering eller sortering endres:

javascript
Copy code
export default function ListContainer() {

  const [asc, setAsc] = useState(true);
  const [filter, setFilter] = useState("");
  const data = useMemo(() => {
    return filterAndSort(filter, asc);
  }, [filter, asc]);
  return (
    <List
      data={data}
      onFilter={(text) => setFilter(text)}
      onSort={() => setAsc(!asc)}
    />
  );
}

Denne tilnærmingen gjør at listen oppdateres dynamisk uten unødvendige beregninger.

Bruken av kontroller

Kontrollene for filtrering og sortering er ansvarlige for å endre tilstanden til listen. I ListControls komponenten kan vi legge til knapper eller tekstfelt som gjør det mulig for brukeren å filtrere eller endre sorteringsrekkefølgen. Dette gir en god brukeropplevelse og lar brukeren interagere med listen på en intuitiv måte.

Et eksempel på ListControls-komponenten kan være:

javascript
Copy code
export default function ListControls({ onFilter, onSort, asc }: Props) {

  return (
    <div>
      <input
        type="text"
        placeholder="Søk"
        onChange={(e) => onFilter(e.target.value)}
      />
      <button onClick={onSort}>
        Sorter {asc ? "▼" : "▲"}
      </button>
    </div>
  );
}

I dette eksemplet har vi et tekstfelt for søk og en knapp for å bytte sorteringsrekkefølge.

Viktige betraktninger

Når du implementerer slike funksjoner, er det viktig å forstå hvordan tilstandsbehandling fungerer i React Native. Ved å bruke hooks som useState og useMemo, kan du effektivt håndtere dynamiske endringer i listen og minimere unødvendige oppdateringer. I tillegg bør du være oppmerksom på ytelsen når du arbeider med store datamengder, spesielt når du bruker komponenter som FlatList som renderer innholdet dynamisk etter behov.

En annen viktig faktor er at designet av listen bør være responsivt, slik at det fungerer godt på både små og store skjermstørrelser. Det kan være nødvendig å justere utseendet og funksjonaliteten for å sikre at listen er brukervennlig på tvers av ulike enheter.