Dilemmaer knyttet til cybersikkerhet: Datalekkasjer
Førjulsrushet er i full gang. På jakt etter gaver til sine kjære er folk stadig mer villige til å "storme" nettbutikkene
![The Codest](https://thecodest.co/app/uploads/2024/05/v8a9890-min.jpeg)
Remix er et fullstack webrammeverk med fokus på grunnleggende webfunksjoner og moderne UX.
Ja, dette er enda en JS rammeverk, men bare hold deg litt lenger ettersom dette rammeverket er laget av Michael Jackson og Ryan Florence de smarte gutta bak React Ruter. Håper det fikk oppmerksomheten din, så la oss se hva som er bra med Rammeverk for remiksering.
Remix er et serverside-rammeverk bygget på toppen av Web Fetch API og React Ruterhar hver rute i remix tre primære eksportvarer a laster
, en handling
og en standard komponent
eksport. De laster
funksjonen vil bli kalt på serveren før rendering for å levere data til ruten, vil handling
er ansvarlig for datamutasjon, er standard eksport den komponenten som vil bli gjengitt på den ruten. Den laster
og handling
funksjoner kjøres kun på serversiden og må returnere en Svar objektet standard
eksport kjøres både på server- og klientsiden.
Slik initialiserer du en ny Remix prosjekt:
npx create-remix@latest
VIKTIG: Velg "Just the basics", og deretter "Remix App Server" når du blir bedt om det
cd [hva enn du har kalt prosjektet]
npm run dev
```
Åpne opp http://localhost:3000. den opprette-remiks
kommandoen får du en startmal med følgende struktur:
app
mappen vil inneholde alle applikasjonsrutene dine og kode.app/entry.client.jsx
er den første koden som kjøres i nettleseren og brukes til å hydrat
React-komponentene.app/entry.server.jsx
er den første koden som kjøres når en forespørsel kommer til serveren. Denne filen gjør om React-appen vår til en streng/strøm og sender den som svar til klienten.app/root.jsx
er hvor rotkomponenten skal plasseres.app/ruter/
er der alle rutemodulene dine skal gå, bruker remix en filsystembasert ruting.offentlig
mappen er der de statiske ressursene dine plasseres (bilder/skrifttyper/etc.).remix.config.js
er der remix-konfigurasjonen kan stilles inn.La oss sjekke en login.jsx
ruteeksempel inne i en Remix-app:
import { redirect, json, Form, useActionData, useTransition } from 'remix';
import { isLoggedIn, verifyLogin } from '../auth';
export const loader = async ({ request }) => {
if (await isLoggedIn(request)) {
return redirect('/dashboard');
}
return json({ success: true });
};
export const action = async ({ request }) => {
const formData = await request.formData();
const values = {
email: formData.get('email') ?? '',
password: formData.get('password') ?? '',
};
const errors = await verifyLogin(values);
if (errors) {
return json({ errors }, { status: 400 });
}
return redirect('/dashboard');
};
export default function LoginRoute() {
const actionData = useActionData();
const transition = useTransition();
const isSubmitting = transition.state === 'submitting';
return (
Email
{actionData?.errors?.email &&
{actionData.errors.email}
}
<div>
<label htmlFor="password">Password</label>
<input id="password" name="password" type="password" />
{actionData?.errors?.password && (
<div>{actionData.errors.password}</div>
)}
</div>
<div>
<button type="submit" disabled={isSubmitting}>
{`Login ${isSubmitting ? '...' : ''}`}
</button>
</div>
</Form>
);
}
```
Det første som skjer her er laster
funksjon som sjekker om brukeren allerede er logget inn med isLoggedIn
funksjon og vil omdirigere
ham til /dashboard
rute, hvis ikke vil den ganske enkelt returnere en { suksess: true }
svar, blir påloggingssiden gjengitt.
Den LoginRoute
gjengir et skjema med e-post og passord og en innsendingsknapp, og som du kan se, er det ingen stat
variabler eller en onSubmit
hendelsesbehandler i komponenten vår, er det fordi hver rute i remix kan eksportere en handling
og når et skjema sendes inn med en POST
metoden vil handlingen bli kalt og vil håndtere den hendelsen.
Når skjemaet blir sendt inn, vil handling
funksjonen vil få
FormData fra Forespørsel objekt const formData = await request.formData()
, så konstruerer vi verdier
objektet med en e-postadresse og passord, kan formData.get('e-post')
vil se etter det første matchende feltet i skjemaet vårt med en name="e-post"
egenskapen og returnerer verdien. Vi kontrollerer om legitimasjonen er riktig med verifyLogin
funksjon, her kan du bruke et hvilket som helst av dine favorittbibliotek for JS-skjemavalidering og gjøre en hente
til din egendefinerte backend for å sjekke om innloggingsdataene er riktige, hvis så er tilfelle omdirigere
brukeren til /dashboard
rute, ellers returnerer vi en json
svar med feilobjektet og en HTTP-statuskode 400
, den useActionData
kroken vil returnere dette feilobjektet hvis det finnes noen, og vi gjengir feilmeldingen som i {actionData?.errors?.email && <div>{actionData.errors.email}</div>}
.
Den useTransition
kroken forteller oss alt om sidens overgangstilstand, med isSubmitting
variabelen sjekker vi når en innsending skjer, hvis det er noen, vil vi deaktivere
send-knappen og vise Innlogging....
i stedet for Logg inn
kan vi også vise brukeren en lastespinner eller en annen indikasjon i stedet.
Den json
funksjon er bare en snarvei for å opprette application/json
svarobjekter. De useLoaderData
kroken returnerer JSON-parsede data fra ruten din laster
, den useActionData
returnerer ruten handling
analyserte data.
Hver rute kan også eksportere en meta
funksjon som er ansvarlig for å angi metakoder for Html-dokumentet ditt, på denne måten kan du angi en tittel
og en beskrivelse
for hver rute og legge til Open Graph eller andre metatagger du ønsker.
export const meta = () => {
const title = 'Min fantastiske side';
const description = "Superkjempeflott side";
return {
charset: 'utf-8',
title,
description,
keywords: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': tittel,
'twitter:description': description,
};
};
export default function AwesomeRoute() {
return
Awesome Route
;
}
```
Vi har bare tatt for oss toppen av isfjellet om Remix, det er så mye mer å vite, her er noen nyttige lenker:
Det som er bra med Remix er at ved å bli bedre med det, blir du bedre på grunnleggende webkunnskaper, som du har sett, peker mange av lenkene i denne artikkelen til Mozilla-dokumenterDet er dette som menes med at Remix er fokusert på grunnleggende webkunnskap. Det bruker web-API-er som Response- og Request-objektet for å gi brukerne en flott brukeropplevelse, og du kan fortsatt bruke alle dine React vanlige teknikker og favorittbiblioteker.
Vi har ikke snakket om alle de flotte funksjonene som Remix tilbyr i denne artikkelen, for eksempel Nestede ruter, Feilgrenser, Remix Stacks men denne artikkelen bør likevel gi deg en god idé om filosofien bak Remix.