Come iniziare con il framework Remix

Sì, questo è un altro JS ma è necessario attendere ancora un po' perché questo framework è realizzato da Michael Jackson e Ryan Florence i ragazzi intelligenti dietro Router React. Spero di aver attirato la vostra attenzione, quindi vediamo cosa c'è di buono nella Struttura Remix.

Dettagli tecnici

Remix è un framework lato server costruito sulla base del framework API Web Fetch e Router React, ogni percorso in remix ha tre esportazioni primarie a caricatore, un azione e un valore predefinito componente esportazione. Il caricatore sarà richiamata sul server prima del rendering per fornire i dati alla rotta, la funzione azione è responsabile della mutazione dei dati, l'esportazione predefinita è il componente che sarà reso su quella rotta. La funzione caricatore e azione Le funzioni vengono eseguite solo sul lato server e devono restituire un oggetto Risposta l'oggetto predefinito L'esportazione viene eseguita sia sul lato server che sul lato client.

Per iniziare

Per inizializzare un nuovo Remix progetto:

npx crea-remix@ultimo

IMPORTANTE: Scegliere "Solo le basi" e poi "Remix App Server" quando richiesto.

cd [come avete chiamato il progetto]
npm run dev
```

Aprire http://localhost:3000. il creare-remix si otterrà un modello iniziale con la seguente struttura:

• Il app La cartella conterrà tutte le rotte dell'applicazione e codice.
• Il app/entry.client.jsx è il primo pezzo di codice che viene eseguito nel browser ed è usato per idrato i componenti dell'React.
• Il app/entry.server.jsx è il primo pezzo di codice che viene eseguito quando una richiesta arriva al server; questo file rende la nostra applicazione React in una stringa/stream e la invia come risposta al client.
• Il app/root.jsx è il punto in cui va il componente radice.
• Il app/route/ è il luogo in cui andranno tutti i moduli delle rotte, remix usa un instradamento basato sul file system.
• Il pubblico è la cartella in cui vanno le risorse statiche (immagini/fonts/ecc.).
• Il remix.config.js è dove si può impostare la configurazione del remix.

Meno chiacchiere, mostrami il codice

Controlliamo un login.jsx esempio di percorso all'interno di un'applicazione Remix:

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>

);
}
```

La prima cosa che accade qui è la caricatore che controlla se l'utente ha già effettuato l'accesso con l'opzione isLoggedIn e si reindirizzare lui al /casella altrimenti restituirà semplicemente un { success: true } e poi viene resa la pagina di login.

Il Percorso di accesso rende un modulo con un input per l'email e la password e un pulsante di invio. Stato né una variabile onSubmit nel nostro componente, è perché in remix ogni percorso può esportare un azione e quando un modulo viene inviato con un oggetto POSTA l'azione sarà richiamata e gestirà l'evento.

Quando il modulo viene inviato, il file azione otterrà la funzione
FormData dal Richiesta oggetto const formData = await request.formData(), allora stiamo costruendo il valori con un'email e una password, l'oggetto formData.get('email') cercherà il primo campo corrispondente all'interno del nostro modulo con un valore nome="email" e restituire il suo valore. Verifichiamo se le credenziali sono corrette con il metodo verifyLogin qui si può usare una qualsiasi libreria di validazione di schemi JS preferita e fare un'operazione di tipo recuperare al backend personalizzato per verificare se i dati di login sono corretti, in caso affermativo reindirizzare l'utente al /casella altrimenti restituiamo un percorso json con l'oggetto errors e un oggetto Codice di stato HTTP 400, il useActionData L'hook restituirà questo oggetto errors, se c'è, e condizionatamente renderà il messaggio di errore come in {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

Il usaTransizione ci dice tutto sullo stato di transizione della pagina, con l'opzione isSubmitting controlliamo quando si verifica un invio, se c'è un invio si disabilitare il pulsante di invio e mostrare Accesso.... invece di Accessopotremmo anche mostrare all'utente uno spinner di caricamento o qualsiasi altra indicazione.

Il json è solo una scorciatoia per creare applicazione/json oggetti di risposta. Il usaLoaderData restituisce i dati analizzati in JSON dalla rotta caricatore, il useActionData restituisce il percorso azione dati analizzati.

Amichevole per il SEO

Ogni rotta può anche esportare un file meta responsabile dell'impostazione dei meta tag per il documento Html, in questo modo è possibile impostare un tag titolo e un descrizione per ogni percorso e aggiungere qualsiasi Open Graph o altri meta tag desiderati.

esportare const meta = () => {
const title = 'La mia pagina fantastica';
const description = 'Pagina super fantastica';

return {
charset: 'utf-8',
titolo,
descrizione,
parole chiave: 'Remix,Awesome',
twitter:image': 'https://awesome-page.com/awesome.png',
twitter:card': 'summarylargeimage',
twitter:creator': '@awesome',
twitter:site': '@awesome',
'twitter:title': titolo,
'twitter:description': descrizione,
};
};

esportare la funzione predefinita AwesomeRoute() {
return

Rotta impressionante

;
}
```

Link utili

Abbiamo appena affrontato la punta dell'iceberg di Remix, c'è molto altro da sapere, ecco alcuni link utili:

• Documentazione
• Github
• Cartella di esempi
• Playlist di Youtube
• Server Discord

Sintesi

L'aspetto positivo di Remix è che, migliorando con esso, migliorerete anche nei fondamenti del web, come avete visto molti dei link di questo articolo puntano al Documenti di MozillaQuesto è ciò che si intende quando si dice che Remix è incentrato sui fondamenti del Web e utilizza API Web come gli oggetti Response e Request per fornire agli utenti un'ottima UX, oltre a poter utilizzare tutte le tecniche e le librerie React preferite.

In questo articolo non abbiamo parlato di tutte le fantastiche funzionalità offerte da Remix, come ad esempio Percorsi annidati, Limiti di errore, Pile Remix ma comunque questo articolo dovrebbe darvi una buona idea della filosofia che sta alla base di Remix.