window.pipedriveLeadboosterConfig = { basis: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versie: 2, } ;(functie () { var w = venster als (w.LeadBooster) { console.warn('LeadBooster bestaat al') } anders { w.LeadBooster = { q: [], on: functie (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: functie (n) { this.q.push({ t: 't', n: n }) }, } } })() Aan de slag met Remix Framework - The Codest
The Codest
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Industrie
    • Fintech & Bankieren
    • E-commerce
    • Adtech
    • Gezondheidstechnologie
    • Productie
    • Logistiek
    • Automotive
    • IOT
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
Pijl terug KEREN TERUG
2022-04-12
Software Ontwikkeling

Aan de slag met Remix Framework

The Codest

Reda Salmi

React Ontwikkelaar

Remix is een full-stack webframework gericht op webfundamentals en moderne UX.

Ja, dit is weer een JS framework, maar blijf nog even hangen want dit framework is gemaakt door Michael Jackson en Ryan Florence de slimme jongens achter React router. Ik hoop dat dit je aandacht heeft getrokken, dus laten we eens kijken wat er goed is aan de Remix kader.

stripfiguur JS met hersenen

Technische details

Remix is een server-side framework gebouwd bovenop de Web API ophalen en React routerElke route in remix heeft drie primaire exports a voorladereen actie en een standaard component export. De voorlader functie wordt aangeroepen op de server vóór het renderen om gegevens aan de route te leveren, de actie functie verantwoordelijk is voor de gegevensmutatie, is de standaardexport de component die zal worden weergegeven op die route. De voorlader en actie functies worden alleen aan de serverkant uitgevoerd en moeten een Reactie object, de standaard export wordt zowel op de server als op de client uitgevoerd.

Aan de slag

Een nieuwe Remix initialiseren project:

npx maak-remix@laatste

BELANGRIJK: Kies "Alleen de basis" en dan "Remix App Server" wanneer daarom wordt gevraagd.

cd [hoe je het project ook genoemd hebt]
npm run dev
```

Openen http://localhost:3000. de maak-remix commando krijg je een startsjabloon met de volgende structuur:

remix map architectuur - scr
  • De app map bevat al je applicatieroutes en code.
  • De app/entry.client.jsx is het eerste stukje code dat in de browser wordt uitgevoerd en wordt gebruikt om hydrateren de React componenten.
  • De app/entry.server.jsx is het eerste stuk code dat wordt uitgevoerd wanneer een verzoek de server bereikt, dit bestand rendert onze React app naar een string/stream en stuurt dat als ons antwoord naar de client.
  • De app/root.jsx is waar de hoofdcomponent naartoe gaat.
  • De app/routes/ is waar al je routemodules naartoe gaan, remix gebruikt een bestandssysteemgebaseerde routing.
  • De openbaar map is waar je statische onderdelen (afbeeldingen/fonts/etc) in komen.
  • De remix.config.js is waar de remixconfiguratie kan worden ingesteld.

Minder praten, laat me de code zien

Laten we een login.jsx routevoorbeeld in een 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>

);
}
```

Het eerste wat hier gebeurt is de voorlader functie die controleert of de gebruiker al is ingelogd met de isLoggedIn functie en zal doorsturen hem naar de /dashboard route, zo niet dan zal het gewoon een {succes: true } antwoord, dan wordt de aanmeldpagina weergegeven.

De Aanmeldingsroute rendert een formulier met een e-mail en wachtwoordinvoer en een verzendknop, zoals je kunt zien zijn er geen staat variabelen noch een Verzenden event handler in onze component, komt dat omdat in remix elke route een actie en wanneer een formulier wordt verzonden met een POST methode wordt de actie aangeroepen en wordt die gebeurtenis afgehandeld.

Wanneer het formulier wordt verzonden, wordt de actie functie krijgt de
FormData van de Aanvraag object const formData = await request.formData()dan construeren we de waarden object met een e-mail en wachtwoordeigenschappen, de formulierData.get('e-mail') zoekt naar het eerste overeenkomende veld in ons formulier met een name="e-mail". eigenschap en de waarde ervan retourneren. We controleren of de referenties correct zijn met de verifyLogin functie, hier zou je een van je favoriete JS schema validatiebibliotheken kunnen gebruiken en een ophalen naar je aangepaste backend om te controleren of de inloggegevens correct zijn. Als dat zo is, kunnen we doorsturen de gebruiker naar de /dashboard route, anders retourneren we een json antwoord met het foutenobject en een HTTP-statuscode 400de useActionData hook retourneert dit foutenobject als er fouten zijn en we geven de foutmelding voorwaardelijk weer zoals in {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

De gebruikOvergang hook vertelt ons alles over de overgangstoestand van de pagina, met de isSubmitting variabele controleren we wanneer een indiening plaatsvindt, als er een is zullen we uitschakelen de verzendknop en toon Inloggen.... in plaats van InloggenWe kunnen de gebruiker ook een laadspinner of een andere indicatie laten zien.

De json functie is gewoon een snelkoppeling voor het maken van toepassing/json antwoordobjecten. De useLoaderData hook retourneert de JSON-geparseerde gegevens van je route voorladerde useActionData geeft de route actie geparseerde gegevens.

SEO vriendelijk

Elke route kan ook een meta functie die verantwoordelijk is voor het instellen van metatags voor je html-document, op deze manier kun je een titel en een beschrijving voor elke route en voeg Open Graph of andere metatags toe.

export const meta = () => {
const title = 'Mijn geweldige pagina';
const description = 'Super awesome pagina';

return {
karakterset: 'utf-8',
titel,
beschrijving,
trefwoorden: 'Remix,Awesome',
twitter:image": "https://awesome-page.com/awesome.png",
twitter:card": "summarylargeimage",
twitter:creator": "@awesome",
twitter:site": "@awesome",
twitter:title": titel,
twitter:description": description,
};
};

exportstandaardfunctie AwesomeRoute() {
teruggeven

Geweldige route

;
}
```

Nuttige links

We hebben slechts het topje van de ijsberg over Remix behandeld, er is nog zoveel meer te weten, hier zijn enkele nuttige links:

  • Documentatie
  • Github
  • Voorbeelden map
  • Youtube-afspeellijst
  • Discord server

Samenvatting

Het mooie van Remix is dat als je er beter mee wordt, je ook beter wordt in webfundamentals, zoals je hebt gezien wijzen veel van de links in dit artikel naar de Mozilla-documentenDit is wat wordt bedoeld met Remix is gericht op webfundamentals het gebruikt Web API's zoals het Response en Request object om de gebruikers te voorzien van een geweldige UX plus je kunt nog steeds al je React gebruikelijke technieken en favoriete bibliotheken gebruiken.

We hebben het in dit artikel niet gehad over alle geweldige functies van Remix, zoals Geneste routes, Foutgrenzen, Remix Stapels maar toch zou dit artikel je een goed idee moeten geven over de filosofie achter Remix.

Verwante artikelen

E-commerce

Cyberbeveiligingsdilemma's: Datalekken

De prekerstdrukte is in volle gang. Op zoek naar cadeaus voor hun geliefden, zijn mensen steeds vaker bereid om online winkels te "bestormen".

The Codest
Jakub Jakubowicz CTO & medeoprichter
Software Ontwikkeling

Voor- en nadelen van React

Waarom is het de moeite waard om React te gebruiken? Welke voordelen heeft deze JavaScript bibliotheek? Om de antwoorden te weten te komen, duik in dit artikel en ontdek de echte voordelen van het gebruik van React.

The Codest
Cezary Goralski Software Engineer
Software Ontwikkeling

React sleutels, ja! Je hebt ze nodig, maar waarom precies?

Het transformeren van een array naar een lijst van elementen met React is vrij eenvoudig. Eigenlijk hoef je alleen maar de array in kaart te brengen en het juiste element terug te geven voor elke...

Przemysław Adamczyk
Software Ontwikkeling

Snelle handleiding voor het uitvoeren van containers vanuit tests

Leer hoe je formuliertesten voor containers uitvoert in ons Java-gerelateerde artikel waarin onze senior Java-ontwikkelaar alle magie laat zien.

Bartlomiej Kuczyński

Abonneer je op onze kennisbank en blijf op de hoogte van de expertise uit de IT-sector.

    Over ons

    The Codest - Internationaal softwareontwikkelingsbedrijf met technische hubs in Polen.

    Verenigd Koninkrijk - Hoofdkantoor

    • Kantoor 303B, 182-184 High Street North E6 2JA
      Londen, Engeland

    Polen - Lokale technologieknooppunten

    • Fabryczna kantorenpark, Aleja
      Pokoju 18, 31-564 Krakau
    • Hersenambassade, Konstruktorska
      11, 02-673 Warschau, Polen

      The Codest

    • Home
    • Over ons
    • Diensten
    • Case Studies
    • Weten hoe
    • Carrière
    • Woordenboek

      Diensten

    • Het advies
    • Software Ontwikkeling
    • Backend ontwikkeling
    • Frontend ontwikkeling
    • Staff Augmentation
    • Backend ontwikkelaars
    • Cloud Ingenieurs
    • Gegevensingenieurs
    • Andere
    • QA ingenieurs

      Bronnen

    • Feiten en fabels over samenwerken met een externe partner voor softwareontwikkeling
    • Van de VS naar Europa: Waarom Amerikaanse startups besluiten naar Europa te verhuizen
    • Tech Offshore Ontwikkelingshubs Vergelijking: Tech Offshore Europa (Polen), ASEAN (Filippijnen), Eurazië (Turkije)
    • Wat zijn de grootste uitdagingen voor CTO's en CIO's?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Gebruiksvoorwaarden website

    Copyright © 2025 door The Codest. Alle rechten voorbehouden.

    nl_NLDutch
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish etEstonian elGreek nl_NLDutch