window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(funktion () { var w = vindue if (w.LeadBooster) { console.warn('LeadBooster findes allerede') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Kom godt i gang med Remix Framework - The Codest
Codest
  • Om os
  • Serviceydelser
    • Udvikling af software
      • Frontend-udvikling
      • Backend-udvikling
    • Staff Augmentation
      • Frontend-udviklere
      • Backend-udviklere
      • Dataingeniører
      • Cloud-ingeniører
      • QA-ingeniører
      • Andet
    • Det rådgivende
      • Revision og rådgivning
  • Industrier
    • Fintech og bankvirksomhed
    • E-commerce
    • Adtech
    • Sundhedsteknologi
    • Produktion
    • Logistik
    • Biler
    • IOT
  • Værdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leder af levering
  • Vores team
  • Casestudier
  • Ved hvordan
    • Blog
    • Møder
    • Webinarer
    • Ressourcer
Karriere Tag kontakt til os
  • Om os
  • Serviceydelser
    • Udvikling af software
      • Frontend-udvikling
      • Backend-udvikling
    • Staff Augmentation
      • Frontend-udviklere
      • Backend-udviklere
      • Dataingeniører
      • Cloud-ingeniører
      • QA-ingeniører
      • Andet
    • Det rådgivende
      • Revision og rådgivning
  • Værdi for
    • ADMINISTRERENDE DIREKTØR
    • CTO
    • Leder af levering
  • Vores team
  • Casestudier
  • Ved hvordan
    • Blog
    • Møder
    • Webinarer
    • Ressourcer
Karriere Tag kontakt til os
Pil tilbage GÅ TILBAGE
2022-04-12
Udvikling af software

Kom godt i gang med Remix Framework

Codest

Reda Salmi

React Udvikler

Remix er et full-stack webframework med fokus på webfundamentaliteter og moderne UX.

Ja, dette er endnu en JS men bliv hængende lidt længere, da dette framework er lavet af Michael Jackson og Ryan Florence de smarte fyre bag React Router. Jeg håber, at det fik din opmærksomhed, så lad os se, hvad der er godt ved Remix-rammeværk.

komisk JS-rammeværk med hjerne

Tekniske detaljer

Remix er en serverside-ramme, der er bygget oven på API til webhentning og React Routerhar hver rute i remix tre primære eksportvarer a læsser, en handling og en standard komponent eksport. Den læsser funktion vil blive kaldt på serveren før rendering for at levere data til ruten, vil handling er ansvarlig for datamutationen, er standardeksporten den komponent, der vil blive gengivet på den pågældende rute. Den læsser og handling funktioner køres kun på serversiden og skal returnere en Svar objektet, den standard eksport køres både på server- og klientsiden.

Kom godt i gang

Sådan initialiseres et nyt remix projekt:

npx create-remix@latest

VIGTIGT: Vælg "Just the basics" og derefter "Remix App Server", når du bliver bedt om det.

cd [det navn, du har givet projektet]
npm run dev
```

Åbn op http://localhost:3000. den skab-remix kommandoen giver dig en startskabelon med følgende struktur:

remix mappearkitektur - scr
  • Den app mappen vil indeholde alle dine programruter og Kode.
  • Den app/entry.client.jsx er det første stykke kode, der kører i browseren, og som bruges til at hydrat React-komponenterne.
  • Den app/entry.server.jsx er det første stykke kode, der kører, når en anmodning rammer serveren. Denne fil omdanner vores React-app til en streng/stream og sender den som vores svar til klienten.
  • Den app/root.jsx er der, hvor rodkomponenten skal hen.
  • Den app/routes/ er der, hvor alle dine rutemoduler skal hen, remix bruger en filsystem-baseret routing.
  • Den offentlig mappen er der, hvor dine statiske aktiver placeres (billeder/fonts/etc.).
  • Den remix.config.js er der, hvor remix-konfigurationen kan indstilles.

Mindre snak, vis mig koden

Lad os tjekke en login.jsx ruteeksempel inde 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, der sker her, er læsser funktion, der kontrollerer, om brugeren allerede er logget ind med erLoggetInd funktion og vil omdirigere ham til /dashboard rute, hvis ikke vil den blot returnere en { succes: true } svar, så bliver login-siden gengivet.

Den LoginRoute gengiver en formular med en e-mail- og adgangskodeindgang og en send-knap, som du kan se, er der ingen stat variabler eller en onSubmit i vores komponent, er det, fordi hver rute i remix kan eksportere en handling og når en formular indsendes med en POST metoden vil handlingen blive kaldt og vil håndtere den pågældende begivenhed.

Når formularen bliver sendt, vil handling funktion vil få den
FormData fra Anmodning objekt const formData = await request.formData(), så er vi ved at konstruere værdier objekt med en e-mail og adgangskodeegenskaber, kan formData.get('e-mail') vil lede efter det første matchende felt i vores formular med en name="e-mail" og returnere dens værdi. Vi kontrollerer, om legitimationsoplysningerne er korrekte med verifyLogin funktion, her kan du bruge et hvilket som helst af dine foretrukne JS-skemavalideringsbiblioteker og lave en Hent til din brugerdefinerede backend for at tjekke, om login-dataene er korrekte. omdirigere brugeren til /dashboard rute, ellers returnerer vi en json svar med fejlobjektet og en HTTP-statuskode 400, den useActionData hook returnerer dette fejlobjekt, hvis der er nogen, og vi gengiver betinget fejlmeddelelsen som i {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Den brug Overgang hook fortæller os alt om sidens overgangstilstand, med isSubmitting variabel kontrollerer vi, hvornår der sker en indsendelse, hvis der er nogen, vil vi deaktivere Send-knappen og vis Login.... i stedet for Loginkunne vi også vise brugeren en indlæsningsspinner eller en anden indikation i stedet.

Den json funktion er bare en genvej til at oprette applikation/json svarobjekter. De useLoaderData hook returnerer de JSON-parsede data fra din rute læsser, den useActionData returnerer ruten handling analyserede data.

SEO-venlig

Hver rute kan også eksportere en meta funktion, der er ansvarlig for at indstille metatags for dit Html-dokument, på denne måde kan du indstille en titel og en beskrivelse for hver rute og tilføj eventuelle Open Graph- eller andre metatags, du ønsker.

export const meta = () => {
const title = 'Min fantastiske side';
const description = 'Super fed 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': titel,
'twitter:description': beskrivelse,
};
};

export default function AwesomeRoute() {
return

Fantastisk rute

;
}
```

Nyttige links

Vi har kun taget fat på toppen af isbjerget om Remix, der er så meget mere at vide, her er nogle nyttige links:

  • Dokumentation
  • Github
  • Mappe med eksempler
  • Youtube-playliste
  • Discord-server

Sammenfatning

Det gode ved Remix er, at når du bliver bedre til det, bliver du også bedre til webfundamentet, og som du har set, peger mange af denne artikels links til Mozilla-dokumenterDet er det, der menes med, at Remix er fokuseret på webfundamentaliteter, det bruger web-API'er som Response- og Request-objektet til at give brugerne en fantastisk UX, og du kan stadig bruge alle dine React sædvanlige teknikker og yndlingsbiblioteker.

Vi har ikke talt om alle de fantastiske funktioner i Remix i denne artikel, f.eks. Indlejrede ruter, Grænser for fejl, Remix-stakke men alligevel burde denne artikel give dig en god idé om filosofien bag Remix.

Relaterede artikler

E-commerce

Dilemmaer i forbindelse med cybersikkerhed: Læk af data

Førjulsræset er i fuld gang. I jagten på gaver til deres kære er folk i stigende grad villige til at "storme" onlinebutikker

Codest
Jakub Jakubowicz CTO og medstifter
Udvikling af software

Fordele og ulemper ved React

Hvorfor er det værd at bruge React? Hvilke fordele har dette JavaScript-bibliotek? For at finde svarene skal du dykke ned i denne artikel og opdage de virkelige fordele ved at bruge React.

Codest
Cezary Goralski Software Engineer
Udvikling af software

React-nøgler, ja! Du har brug for dem, men hvorfor egentlig?

Det er ret ligetil at omdanne et array til en liste med elementer med React, for det eneste, du skal gøre, er at mappe arrayet og returnere det rigtige element for hver...

Przemysław Adamczyk
Udvikling af software

Hurtig guide til, hvordan man kører containere fra tests

Lær, hvordan du kører containertest i vores Java-relaterede artikel, hvor vores senior java-udvikler viser al magien.

Bartlomiej Kuczyński

Tilmeld dig vores vidensbase, og hold dig opdateret om ekspertisen fra it-sektoren.

    Om os

    The Codest - International softwareudviklingsvirksomhed med tech-hubs i Polen.

    Storbritannien - Hovedkvarter

    • Kontor 303B, 182-184 High Street North E6 2JA
      London, England

    Polen - Lokale teknologiske knudepunkter

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Kraków
    • Hjerneambassaden, Konstruktorska
      11, 02-673 Warszawa, Polen

      Codest

    • Hjem
    • Om os
    • Serviceydelser
    • Casestudier
    • Ved hvordan
    • Karriere
    • Ordbog

      Serviceydelser

    • Det rådgivende
    • Udvikling af software
    • Backend-udvikling
    • Frontend-udvikling
    • Staff Augmentation
    • Backend-udviklere
    • Cloud-ingeniører
    • Dataingeniører
    • Andet
    • QA-ingeniører

      Ressourcer

    • Fakta og myter om at samarbejde med en ekstern softwareudviklingspartner
    • Fra USA til Europa: Hvorfor beslutter amerikanske startups sig for at flytte til Europa?
    • Sammenligning af Tech Offshore-udviklingsknudepunkter: Tech Offshore Europa (Polen), ASEAN (Filippinerne), Eurasien (Tyrkiet)
    • Hvad er de største udfordringer for CTO'er og CIO'er?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Vilkår for brug af hjemmesiden

    Copyright © 2025 af The Codest. Alle rettigheder forbeholdes.

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