Die Grundlagen von Remix

Sie haben vielleicht viel über den neuesten Rahmen des Remix gehört. Überraschenderweise wurde es 2019 ins Leben gerufen, war jedoch zunächst nur als abonnementbasiertes bezahltes Framework erhältlich. Im Jahr 2021 erhöhte der Gründer Saatgutfonds und öffnete das Framework, damit Benutzer Remix kostenlos verwenden können. Die Schleusen wurden geöffnet und jeder schien darüber zu sprechen, zum Guten oder Schlechten. Lassen Sie uns in einige der Grundlagen von Remix graben.

Remix ist ein JavaScript-Framework, das die Server-Seite (Rand) priorisiert. Derzeit verwendet es React als Front-End und priorisiert serverseitige Rendering-Anwendungen am Rand. Die Plattform kann den serverseitigen Code aufnehmen und ihn als serverlose oder Kantenfunktion ausführen, was billiger ist als ein herkömmlicher Server und näher an Ihren Benutzern. Remix -Gründer nennen es gerne das Framework "Center Stack", da es Anforderungen und Antworten zwischen Servern und Clients basierend auf der Plattform anpasst.

Remix bereitstellen

Da Remix einen Server benötigt, diskutieren wir, wie Sie ihn bereitstellen. Remix selbst bietet keinen Server an - Sie müssen ihn selbst zur Verfügung stellen -, um ihn in einer beliebigen Node.js- oder Deno -Umgebung auszuführen, einschließlich Netlify Edge und Digitalocean App -Plattform. Remix selbst ist ein Compiler , ein Programm, das Plattformanforderungen in seine laufende Plattform umwandelt. Dieser Prozess verwendet ESBuild, um Handler für Serveranforderungen zu erstellen. Die von ihr verwendeten HTTP -Handler basieren auf der Web -A -API und werden auf dem Server ausgeführt, indem sie sie so einstellen, dass sie an die Plattform entspricht, für die sie bereitgestellt werden soll.

Remix-Stack

Remix-Stack ist ein Projekt, das einige gemeinsame Tools vorbereitet hat. Das Remix -Team unterhält drei offizielle Stapel, die alle nach dem Musikgenre benannt sind. Darüber hinaus gibt es viele Community-Remix-Stacks, darunter den K-Pop-Stack, der vom Netlify-Vorlagenteam erstellt wurde. Dieser Stapel ist leistungsfähig, einschließlich Supabase-Datenbank und Authentifizierung, Rückenwind für die Stileinstellung, Cypress-End-to-End-Tests, hübscherer Code-Formatierung, Eslint-Code-Überprüfung und statischer Typ-Überprüfung von TypeScript. Schauen Sie sich den Beitrag von Tara Manicsic zum Bereitstellen des K-Pop-Stacks an.

zwischengespeichertes Routing

Remix kann JamStack immer noch durch Cache -Routing nutzen. Die statische Site oder die statische Site -Generierung (SSG) ist, wenn alle Ihre Inhalte zur Bauzeit gerendert werden und bis zum nächsten Wiederaufbau static bleibt. Der Inhalt ist vorgeneriert und kann auf eine CDN platziert werden. Dies bietet viele Vorteile und schnelle Ladegeschwindigkeiten für Endbenutzer. Remix macht jedoch keine typische SSG wie andere beliebte React -Frameworks, einschließlich Next.js und Gatsby. Um einige der Vorteile von SSG zu erzielen, können Sie die native Cache-Kontroll-HTTP-Header in der Funktion Remix Headers verwenden, um spezifische Routen zu lagern, oder sie direkt in der Datei root.tsx-Datei zwischenspeichern.

 <code> [[Header]] für = "/build/*" [Headers.Values] "Cache-Control" = "public, max-ag. Dies wird für eine Stunde zwischengespeichert:  <code> Exportfunktionsheader () {return {"Cache-Control": "public, s-maxage = 360",}; Dies ist eine Technik, bei der ein angegebener Ordner verwendet wird, um die Anwendungsrouting zu definieren. Sie haben normalerweise eine spezielle Syntax für die Deklarierung dynamischer Routing und Endpunkte. Der größte Unterschied zwischen Remix und anderen beliebten Frameworks ist die Fähigkeit, verschachteltes Routing zu verwenden.  <p> Jede Remix -Anwendung startet mit der Datei root.tsx. Hier werden die Grundlagen der gesamten Anwendung gerendert. Hier finden Sie einige gängige HTML -Layouts, wie das <code>  </code> Tag, das <code> <kopf> </kopf></code> und dann das <code>  </code> Tag und die Komponenten, die Sie benötigen, um Ihre Anwendung zu rendern. Eine Sache, die hier hinweist, ist, dass die Komponente <code> <script> </script></code> JavaScript auf der Website ermöglicht. Die Datei root.tsx fungiert als übergeordnetes Layout von allem im Routes -Verzeichnis, und alles in Routen wird wiedergegeben, wo sich die Komponente <code> <outlet> </outlet> </code> in root.tsx befindet. Dies ist die Grundlage für verschachteltes Routing im Remix. #### Nested Router </p> <p> Remix wird nicht nur von einigen Mitgliedern des React -Router -Teams erstellt, sondern auch React -Router verwendet. Tatsächlich bringen sie einige der Vorteile von Remix zurück zum React -Router. Ein komplexes Problem, das das Wartungspersonal von Next.js und Sveltekit derzeit an der Lösung von Lösen betrifft. </p> <p> verschachteltes Routing unterscheidet sich von herkömmlichem Routing. Traditionelles Routing bringt Benutzer zu einer neuen Seite, und jede verschachtelte Route ist ein separater Teil derselben Seite. Es ermöglicht die Trennung von Bedenken, indem es die Geschäftslogik nur mit Dateien verbindet, die dies erfordern. Remix ist in der Lage, Fehler zu behandeln, die auf den Teil der Seite beschränkt sind, auf dem sich die verschachtelten Routen befinden. Andere Routen auf der Seite sind weiterhin verfügbar, und die beschädigte Route kann einen Kontext im Zusammenhang mit dem Fehler liefern, ohne dass die gesamte Seite zum Absturz gebracht wird. </p> <p> Remix erledigt dies, wenn die Root -Datei in App/Routes denselben Namen wie das Dateiverzeichnis in der Basisdatei hat. Die Stammdatei wird zum Layout der Datei im Verzeichnis mithilfe der Komponente <code> <outlet> </outlet> </code>, um Remix zu untersuchen, wo andere Routen geladen werden sollen. </p> <h4> Outlet -Komponente </h4> <p> <code> <outlet> </outlet> </code> Die Komponente ist ein Signal aus dem Remix, das angibt, wo sie den Inhalt für verschachtelte Routen rendern soll. Es befindet sich in einer Datei im Stammverzeichnis des App/Routes -Verzeichnisses und der Name entspricht der verschachtelten Route. Der folgende Code befindet sich in der App/Routes/About.tsx-Datei und enthält den Ausgang der Datei in der App/Routen/über den Ordner: </p> <pre class="brush:php;toolbar:false"> <code> importieren {outlet} aus "@remix-run/react". Verzeichnis genannt, wird hier gehen. */} <outlet></outlet> )} </code> 

Dateistruktur

jede Datei im Verzeichnis

App/Routen/Verzeichnis wird zur Route zu ihrer Namens -URL. Sie können auch ein Verzeichnis mit der Index.tsx -Datei hinzufügen.

App/├── Routen/│ │ │ └── Blog | | Layoutdatei der Dateien im Verzeichnis, und in der Layout -Datei müssen die verschachtelten Routen eine Auslasskomponente platzieren. <pre class="brush:php;toolbar:false">&lt;code&gt;app/ ├── routes/ │ │ │ └── about │ ├── index.tsx │ ├── about.tsx ## this is a layout for /about/index.tsx │ ├── index.tsx │ ├── index.tsx └── root.tsx&lt;/code&gt;</pre> <p>You can also create a layout by adding double underscore (__) before the layout file name. </p> <pre class="brush:php;toolbar:false"> &lt;code&gt; app/├── Routen/│ │ │ └└ └ │ │ ├ ├ ├ ├ ├ ├ ├ │ │ ├ ├ ├ └ │ ├ ├ ├ ├ about └ │ ├ ├├ ├ ├ ├ ├ __ __blog.tsx # # ist auch ein Layout. href = &quot;https://www.php.cn/link/232a03118725240918c5a4a0ab3e9b3&quot;&gt; https://www.php.cn/link/232a03118725240918c5a4a4a0Ab33333333333333 SX -Datei, rendert aber auch die Komponente &lt;code&gt; &lt;outlet&gt; &lt;/outlet&gt;&lt;/code&gt;, in der sich die Komponente in der App/Routes/über.tsx -Tag befindet. &lt;h4&gt; Dynamisches Routing &lt;/h4&gt; &lt;p&gt; Dynamisches Routing ist eine Route, die sich basierend auf den Informationen in der URL ändert. Dies könnte der Name oder die Kunden -ID des Blog -Beitrags sein, aber was auch immer es ist, die $ syntax, die dem Routen signalisiert, Remix ist dynamisch. Der Name spielt keine Rolle außer dem $ Präfix. &lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;code&gt; app/├── Routen/│ │ │ └ └── Über │ ├── $ id.tsx │ ├ ├── index.tsx │ ├ ├ ├ über. &lt;p&gt; Da Remix alle Daten auf dem Server rendert, gibt es keine Möglichkeit, im Remix viel zu erkennen, was in React -Anwendungen, wie z. Da die Daten auf dem Server ausgewertet wurden, wird die Notwendigkeit eines Client -Status verringert. &lt;/p&gt; &lt;p&gt; Es spielt keine Rolle, welchen Servertyp Sie verwenden sollen, um die Daten zu erhalten. Da sich Remix zwischen Anfragen und Antworten befindet und sie angemessen konvertiert, können Sie die Standard -Web -Fetch -API verwenden. Remix erledigt dies in einer Loader -Funktion nur auf dem Server und rendert Daten in der Komponente mithilfe des UseloaderData () -Hakens. Dies ist ein Beispiel für zufällige Katzenbilder mithilfe der Katze als Service -API. &lt;/p&gt; &lt;pre return&gt; &lt;img alt=&quot;Eine zufällige Katze&quot; . src=&quot;%7B%60https://cataas.com/cat/%24&quot;&gt; &lt;outlet&gt;&lt;/outlet&gt; )} </pre>

Routing -Parameter

Bei dynamischen Routing, die mit $ zugreifen müssen, um mit $ zu greifen, um mit $ zu greifen, um mit $ zu greifen. Die Loader -Funktion kann diese Parameter über den Parameter Params zugreifen.

 Der URL -Parameter ist {params.tag}. } 

Andere Remixfunktionen

Remix Es gibt einige andere Helferfunktionen, die den normalen HTML -Elementen und -attributen in der Routing -Modul -API zusätzliche Funktionen hinzufügen. Jede Route kann diese Funktionen ihres eigenen Typs definieren.

Aktionsfunktion

Mit der Aktionsfunktion können Sie zusätzliche Funktionen hinzufügen, um Operationen mithilfe der Standard -Webformata -API zu bilden.

 <code> Asynchramm -Aktion ({Request}) {const body = act request.FormData (); > Jeder HTTP -Standard -Header kann in die Headerfunktion platziert werden. Da jede Route einen Kopfball haben kann, um Konflikte mit verschachtelten Routen zu vermeiden, gewinnen die tiefsten Routen - oder URLs mit den am stärksten vorwärts gerichteten Schrägstrichen (/) -. Sie können auch die übergebenen Header, ActionHeader, LoaderHeader oder ParentsHeader  <code> Exportfunktionsheader ({Actionheaders, Loaderheaders, Parentheaders,}) {return {"cache-control": loaderHeader.get ("cache-control") Das HTML -Dokument. Standardmäßig wird eine in der Datei root.tsx festgelegt, kann jedoch für jede Route aktualisiert werden.  <pre class="brush:php;toolbar:false"> <code> Exportfunktion meta () {return {title: "Ihr Seitentitel", Beschreibung: "Eine neue Beschreibung für jede Route",}; Mit der Funktion der Links (nicht mit den Komponenten <code> <link> </code> zu verwechseln) können Sie Inhalte nur in den Routen importieren, die sie erfordern. So können beispielsweise CSS -Dateien nur in Routen gescopt und importiert werden, die diese spezifischen Dateien erfordern. Das Link -Element wird als Array von Objekten aus der Funktion links () zurückgegeben, die der htmllinkDescriptor der Link -API oder der PagelinkDescriptor der Seitendaten sein kann, mit denen die Seitendaten vorgegeben werden können.  <pre class="brush:php;toolbar:false"> <code> Exportfunktion Links () {return [// ein Favicon {rel: "icon", href: "/favicon }. ]} </code> 

Die Verbindung zwischen den Routen

Remix bietet eine Komponente, die zwischen verschiedenen Routen einer Anwendung springt, namens <link> . Um das Client -Routing zu erhalten, verwenden Sie die <link zu=""> anstelle von <a href=">%20name%20</a>%20.%20Die%20Komponente%20%20<Link>%20%20enth%C3%A4lt%20au%C3%9Ferdem%20eine%20Vorab%20-Eigenschaft,%20die%20standardm%C3%A4%C3%9Fig%20keine%20akzeptiert.%20

%20%20<h3>%20Weiter%20</h3>%20<p>%20Jetzt,%20da%20Sie%20die%20Grundlagen%20von%20Remix%20haben,%20sind%20Sie%20bereit,%20Ihre%20Bewerbung%20tats%C3%A4chlich%20zu%20erstellen?%20Remix%20bietet%20eine%20Witz%20-App%20und%20ein%20Blog%20-Tutorial,%20mit%20dem%20Sie%20mit%20diesen%20Grundlagen%20beginnen%20k%C3%B6nnen.%20Sie%20k%C3%B6nnen%20auch%20eine%20brandneue%20Remix%20-Anwendung%20von%20Grund%20auf%20neu%20erstellen.%20Oder,%20wenn%20Sie%20bereit%20sind,%20tiefer%20zu%20graben,%20versuchen%20Sie%20es%20mit%20dem%20K-Pop-Stapel.%20Ich%20habe%20Remix%20wirklich%20genossen%20und%20seinen%20Fokus%20auf%20Webstandards%20und%20seine%20R%C3%BCckkehr%20zu%20den%20Grundlagen%20geliebt.%20Jetzt%20sind%20Sie%20an%20der%20Reihe,%20anfangen%20zu%20erstellen!%20</p>"></a></code></p></code>

Das obige ist der detaillierte Inhalt vonDie Grundlagen von Remix. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!