window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } 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 }) }, } } })() Remix Frameworkin käytön aloittaminen - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2022-04-12
Ohjelmistokehitys

Remix Frameworkin käytön aloittaminen

Codest

Reda Salmi

React Kehittäjä

Remix on täysimittainen web-kehys, joka keskittyy webin perusteisiin ja moderniin UX:ään.

Kyllä, tämä on jälleen yksi JS kehys, mutta pysy vain hieman kauemmin, koska tämä kehys on tehty Michael Jackson ja Ryan Florence fiksut kaverit takana React Reititin. Toivottavasti tämä sai huomionne, joten katsotaanpa, mitä hyvää on Remix-kehys.

sarjakuva JS framwork aivojen kanssa

Tekniset tiedot

Remix on palvelinpuolen kehys, joka on rakennettu päälle Web Fetch API ja React Reititin, jokaisella remixin reitillä on kolme ensisijaista vientituotetta a kuormaaja, an toiminta ja oletusarvo komponentti vienti. . kuormaaja funktiota kutsutaan palvelimella ennen renderöintiä tietojen toimittamiseksi reitille. toiminta toiminto vastaa tietojen mutaatiosta, oletusvienti on komponentti, joka renderöidään kyseisellä reitillä. Osoite kuormaaja ja toiminta funktiot suoritetaan vain palvelinpuolella ja niiden on palautettava arvoksi Vastaus objekti, oletus vienti suoritetaan sekä palvelin- että asiakaspuolella.

Aloittaminen

Uuden Remixin alustaminen projekti:

npx create-remix@latest

TÄRKEÄÄ: Valitse "Vain perusasiat" ja sitten "Remix App Server", kun sinua pyydetään.

cd [mikä tahansa nimesi projektille]
npm run dev
```

Avaa http://localhost:3000. create-remix komennolla saat aloituspohjan, jonka rakenne on seuraava:

remix-kansion arkkitehtuuri - scr
  • The sovellus kansio sisältää kaikki sovellusreitit ja koodi.
  • The app/entry.client.jsx on ensimmäinen selaimessa suoritettava koodinpätkä, jota käytetään selaimen hydratoi React-komponentit.
  • The app/entry.server.jsx on ensimmäinen osa koodia, joka suoritetaan, kun pyyntö saapuu palvelimelle, tämä tiedosto renderöi React-sovelluksemme merkkijonoksi/virraksi ja lähettää sen vastauksena asiakkaalle.
  • The app/root.jsx on juurikomponentin paikka.
  • The app/routes/ on paikka, jonne kaikki reittimoduulisi menevät, remix käyttää tiedostojärjestelmään perustuvaa reititystä.
  • The julkinen kansioon laitetaan staattiset aineistosi (kuvat/fonit/jne).
  • The remix.config.js voidaan asettaa remix-konfiguraatio.

Vähemmän puhetta, näytä minulle koodi

Tarkistetaan login.jsx reittiesimerkki Remix-sovelluksen sisällä:

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>

);
}
```

Ensimmäinen asia, joka tässä tapahtuu, on kuormaaja funktio, joka tarkistaa, onko käyttäjä jo kirjautunut sisään tunnuksella isLoggedIn toiminto ja uudelleenohjaus hänet /dashboard reittiä, jos ei, se yksinkertaisesti palauttaa { success: true } vastaus, kirjautumissivu renderöidään.

The LoginRoute renderöi lomakkeen, jossa on sähköpostiosoite ja salasana sekä lähetä-painike, kuten näet, lomakkeessa ei ole yhtään valtio muuttujia eikä onSubmit tapahtumankäsittelijä komponentissamme, se johtuu siitä, että remixissä jokainen reitti voi viedä komponentin toiminta ja kun lomake lähetetään POST metodia kutsutaan ja se käsittelee kyseisen tapahtuman.

Kun lomake lähetetään toiminta funktio saa
FormData alkaen Pyyntö kohde const formData = await request.formData(), niin olemme rakentamassa arvot objekti, jolla on sähköpostiosoite ja salasanaominaisuudet, on formData.get('email') etsii lomakkeemme sisältä ensimmäistä vastaavaa kenttää, jossa on merkkijono name="email" ominaisuus ja palauttaa sen arvon. Tarkistamme, ovatko valtakirjat oikeat, ja käytämme verifyLogin funktiota, tässä voit käyttää mitä tahansa suosikkisi JS-skeeman validointikirjastoa ja tehdä nouto mukautettuun backendiin tarkistamaan, ovatko kirjautumistiedot oikein, jos näin on, me uudelleenohjaus käyttäjä /dashboard reittiä, muuten palautamme json vastaus, jossa on virheet-objekti ja HTTP-tilakoodi 400... useActionData koukku palauttaa tämän virheobjektin, jos sellainen on olemassa, ja me ehdollisesti renderöimme virheilmoituksen kuten seuraavassa {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

The useTransition koukku kertoo meille kaiken sivun siirtymätilasta, ja koukku isSubmitting muuttujan tarkistamme, kun lähetys tapahtuu, jos on olemassa me disable lähetä-painiketta ja näytä Kirjaudu sisään.... sen sijaan, että Kirjaudu sisään, voisimme sen sijaan näyttää käyttäjälle latauspinnerin tai jonkin muun merkin.

The json funktio on vain oikotie luotaessa application/json vastausobjektit. Osoite useLoaderData koukku palauttaa reitin JSON-parsittua dataa. kuormaaja... useActionData palauttaa reitin toiminta analysoidut tiedot.

SEO-ystävällinen

Jokainen reitti voi myös viedä meta funktio, joka vastaa metatunnisteiden asettamisesta Html-dokumenttiisi, tällä tavalla voit asettaa otsikko ja kuvaus jokaiselle reitille ja lisää haluamasi Open Graph- tai muut metatunnisteet.

export const meta = () => {
const title = 'Mahtava sivuni';
const description = 'Super mahtava sivu';

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': otsikko,
'twitter:description': kuvaus,
};
};

export default function AwesomeRoute() {
return

Mahtava reitti

;
}
```

Hyödyllisiä linkkejä

Olemme vasta käsitelleet jäävuoren huippua Remixistä, on niin paljon muuta tiedettävää, tässä on muutamia hyödyllisiä linkkejä:

  • Dokumentointi
  • Github
  • Esimerkit-kansio
  • Youtube-soittolista
  • Discord-palvelin

Yhteenveto

Mikä on hienoa Remix on saamalla paremmin sen kanssa saat paremmin web perusteet, kuten olet nähnyt monet tämän artikkelin linkit viittaavat siihen, että Mozillan asiakirjat, tätä tarkoitetaan sillä, että Remix on keskittynyt webin perusteisiin, se käyttää web-rajapintoja, kuten Response- ja Request-objekteja, tarjotakseen käyttäjille loistavan UX:n. Lisäksi voit silti käyttää kaikkia React tavallisia tekniikoita ja suosikkikirjastoja.

Emme puhuneet kaikista Remixin tarjoamista hienoista ominaisuuksista tässä artikkelissa, kuten Sisäkkäiset reitit, Virherajat, Remix pinot mutta silti tämän artikkelin pitäisi antaa sinulle hyvä käsitys Remixin filosofiasta.

Aiheeseen liittyvät artikkelit

E-commerce

Kyberturvallisuuden ongelmat: Tietovuodot

Joulua edeltävä kiire on täydessä vauhdissa. Ihmiset etsivät lahjoja läheisilleen ja ovat yhä useammin valmiita "ryntäämään" verkkokauppoihin.

Codest
Jakub Jakubowicz teknologiajohtaja ja toinen perustaja
Ohjelmistokehitys

React:n hyvät ja huonot puolet

Miksi kannattaa käyttää React:tä? Mitä etuja JavaScript-kirjastolla on? Saat vastaukset selville sukeltamalla tähän artikkeliin ja tutustumalla React:n käytön todellisiin etuihin.

Codest
Cezary Goralski Software Engineer
Ohjelmistokehitys

React-avaimet, kyllä! Tarvitset niitä, mutta miksi juuri niitä?

Joukon muuttaminen elementtiluetteloksi React:llä on melko suoraviivaista, periaatteessa sinun tarvitsee vain kartoittaa kyseinen joukko ja palauttaa oikea elementti jokaiselle...

Przemysław Adamczyk
Ohjelmistokehitys

Pikaopas konttien suorittamisesta testeistä käsin

Opi, miten konttien lomaketestit ajetaan Javaan liittyvässä artikkelissamme, jossa vanhempi java-kehittäjämme näyttää kaiken taikuuden.

Bartlomiej Kuczyński

Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

    Tietoa meistä

    The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

    Yhdistynyt kuningaskunta - pääkonttori

    • Toimisto 303B, 182-184 High Street North E6 2JA
      Lontoo, Englanti

    Puola - Paikalliset teknologiakeskukset

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Krakova
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsova, Puola

      Codest

    • Etusivu
    • Tietoa meistä
    • Palvelut
    • Tapaustutkimukset
    • Tiedä miten
    • Työurat
    • Sanakirja

      Palvelut

    • Se neuvoa-antava
    • Ohjelmistokehitys
    • Backend-kehitys
    • Frontend-kehitys
    • Staff Augmentation
    • Backend-kehittäjät
    • Pilvi-insinöörit
    • Tietoinsinöörit
    • Muut
    • QA insinöörit

      Resurssit

    • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
    • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
    • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
    • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Verkkosivuston käyttöehdot

    Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

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