Enkelsidige reaksjonsapplikasjoner med React-Router og React-Transition-Group Modules

Denne opplæringen vil gå deg gjennom ved hjelp av reaksjonsrutene og reaksjonsovergang-gruppemodulene for å lage flersidige React-applikasjoner med sideovergangs animasjoner.

Klargjøre React App

Installere Opprett-Reager-App-pakken

Hvis du noen gang har hatt sjansen til å prøve React, har du sikkert hørt om create reagere-app pakke, noe som gjør det super enkelt å starte med et React-utviklingsmiljø.

I denne opplæringen bruker vi denne pakken for å starte vår React-app.

Så først og fremst må du kontrollere at Node.js er installert på datamaskinen. Det vil også installere npm for deg.

I terminalen din, løp npm installere-g create-react-app. Dette vil installere globalt create reagere-app på datamaskinen din.

Når det er gjort, kan du bekrefte om det er der ved å skrive opprett-reager-app -V.

Opprette React Project

Nå er det på tide å bygge vårt React-prosjekt. Bare løp Opprett-reagere-app flersidet-app. Du kan selvfølgelig erstatte flersidig-app med alt du vil ha.

Nå, create reagere-app vil opprette en mappe som heter flersidig-app. Skriv bare cd-flersidet-app å endre katalogen, og kjør nå npm start å initialisere en lokal server.

Det er alt. Du har en React-app som kjører på din lokale server.

Nå er det på tide å rydde standardfilene og utarbeide programmet.

I din src mappe, slett alt annet enn App.js og index.js. Så åpne index.js og erstatt innholdet med koden nedenfor.

Import Reakt fra 'reagere'; importere ReactDOM fra 'react-dom'; importer app fra './App'; ReactDOM.render (, document.getElementById ( 'root')); 

Jeg slettet i utgangspunktet registerServiceWorker relaterte linjer og også importer './index.css'; linje.

Også, erstatt din App.js filen med koden nedenfor.

Import React, Component fra 'reagere'; klassen App utvider komponent render () return ( 
 
 );  eksporter standard app;

Nå skal vi installere de nødvendige modulene.

Skriv inn følgende kommandoer i din terminal for å installere reagere-router og reagere-overgang-gruppe moduler henholdsvis.

npm installere reager-router-dom - save

npm installere [email protected] --save

Etter at du har installert pakkene, kan du sjekke package.json filen i hovedprosjektkatalogen for å verifisere at modulene er inkludert under avhengig.

Rutekomponenter

Det er i utgangspunktet to forskjellige rutermuligheter: HashRouter og BrowserRouter.

Som navnet tilsier, HashRouter bruker hashes for å holde oversikt over koblingene, og den er egnet for statiske servere. På den annen side, hvis du har en dynamisk server, er det et bedre alternativ å bruke BrowserRouter, vurderer at nettadressene dine vil bli finere.

Når du bestemmer deg for hvilken du skal bruke, bare gå videre og legg til komponenten til din index.js fil.

importer HashRouter fra 'reager-router-dom'

Den neste tingen er å pakke inn vår  komponent med ruteren komponent.

Så din siste index.js filen skal se slik ut:

Import Reakt fra 'reagere'; importere ReactDOM fra 'react-dom'; importer HashRouter fra 'reagere-router-dom' importer app fra './App'; ReactDOM.render (, document.getElementById ( 'root')); 

Hvis du bruker en dynamisk server og foretrekker å bruke BrowserRouter, Den eneste forskjellen ville være å importere BrowserRouter og bruker den til å pakke inn  komponent.

Ved å pakke inn vår  komponent, vi betjener historie protesterer mot vår søknad, og dermed kan andre reaktor-router komponenter kommunisere med hverandre.

Innsiden Komponent

Inne i vår  komponent, vil vi ha to komponenter kalt 

importere React fra 'react' const Meny = () => retur ( 
 
Hjem
 
Virker
 
Handle om
 
 ) Utfør standardmeny