Les bases du remix

vous avez peut-être beaucoup entendu sur le dernier cadre de Remix. Étonnamment, il a été lancé en 2019, mais n'était initialement disponible que comme cadre payant basé sur l'abonnement. En 2021, le fondateur a collecté des fonds de semences et a ouvert le cadre pour permettre aux utilisateurs de commencer à utiliser Remix gratuitement. Les vannes ont été ouvertes et tout le monde semblait en parler, pour le meilleur ou pour le pire. Faisons dans certaines des bases du remix.

remix est un framework JavaScript qui hiérarte le côté du serveur (Edge). Il utilise actuellement React comme frontal et priorise les applications de rendu côté serveur au bord. La plate-forme peut prendre le code côté serveur et l'exécuter en fonction de serveur ou de bord, ce qui est moins cher qu'un serveur traditionnel et plus proche de vos utilisateurs. Les fondateurs de Remix aiment l'appeler le framework "Center Stack" car il ajuste les demandes et les réponses entre les serveurs et les clients en fonction de la plate-forme qui l'exécute.

Déployer Remix

Étant donné que Remix nécessite un serveur, discutons de la façon de le déployer. Le remix lui-même ne fournit pas de serveur - vous devez le fournir vous-même - il est possible d'exécuter dans n'importe quel environnement Node.js ou Deno, y compris la plate-forme d'application Netlify Edge et DigitalOcean. Remix lui-même est un compilateur , un programme qui convertit la plate-forme demande en sa plate-forme de course. Ce processus utilise Esbuild pour créer des gestionnaires pour les demandes de serveur. Les gestionnaires HTTP qu'il utilise sont basés sur l'API Fetch Web et s'exécutent sur le serveur en les réglant pour s'adapter à la plate-forme à laquelle il doit être déployé.

Remix Stack

Remix Stack est un projet qui a des outils courants préconfigurés. L'équipe de remix maintient trois piles officielles, toutes nommées d'après le genre musical. De plus, il existe de nombreuses piles de remix communautaires, y compris la pile K-pop créée par l'équipe de modèle Netlify. Cette pile est puissante, y compris la base de données Supabase et l'authentification, le vent arrière pour le paramètre de style, les tests de bout en bout du cyprès, la mise en forme de code plus joli, la vérification du code Eslint et la vérification des types statiques de type. Consultez la publication de Tara Manicsic sur le déploiement de la pile K-pop.

Routing mis en cache

Le remix peut toujours profiter de Jamstack via le routage du cache. Le site statique ou la génération de sites statiques (SSG) est lorsque tout votre contenu est rendu au moment de la construction et reste statique jusqu'à la prochaine reconstruction. Le contenu est pré-généré et peut être placé sur un CDN. Cela offre de nombreux avantages et des vitesses de chargement de site rapides pour les utilisateurs finaux. Cependant, Remix ne fait pas de SSG typique comme les autres cadres réactifs populaires, y compris Next.js et Gatsby. Pour obtenir certains des avantages de SSG, vous pouvez utiliser l'en-tête HTTP de contrôle de cache natif dans la fonction des en-têtes de remix pour mettre en cache des itinéraires spécifiques, ou les mener directement dans le fichier root.tsx.

 <code> [[en-têtes]] for = "/ build / *" [en-têtes.values] "Cache-Control" = "public, max-age = 31536000, s-maxage = 31536000" </code> 

puis ajoutez vos en-têtes à ajouter où vous en avez besoin. Cela se cache pendant une heure:

 <code> Exporter les en-têtes de fonction () {return {"Cache-Control": "public, s-maxage = 360",};}; Il s'agit d'une technique qui utilise un dossier spécifié pour définir le routage des applications. Ils ont généralement une syntaxe spéciale pour déclarer le routage dynamique et les points de terminaison. La plus grande différence entre Remix et d'autres cadres populaires est la possibilité d'utiliser le routage imbriqué.  <p> Chaque application Remix commence par le fichier root.tsx. C'est là que les bases de l'ensemble de l'application sont rendues. Ici, vous trouverez quelques dispositions HTML courantes, telles que la balise <code>  </code>, la balise <code> <adread> </adread></code>, puis la balise <code>  </code> et les composants dont vous avez besoin pour rendre votre application. Une chose à souligner ici est que le composant <code> <cript> </cript></code> permet JavaScript sur le site Web; certaines choses fonctionnent sans elle, mais tout ne fonctionne pas. Le fichier root.tsx agit comme la disposition des parents de tout dans le répertoire des routes, et tout ce qui est dans les routes est rendu où le composant <code> <foundlet>  </foundlet></code> est situé dans root.tsx. C'est la base du routage imbriqué dans le remix. #### Router imbriqué </p> <p> Remix n'est pas seulement créé par certains membres de l'équipe React Router, mais il utilise également React Router. En fait, ils ramènent certains des avantages du remix pour réagir le routeur. Un problème complexe que le personnel de maintenance de Next.js et Sveltekit travaille actuellement sur la résolution est le routage imbriqué. </p> <p> Le routage imbriqué est différent du routage traditionnel. Le routage traditionnel amène les utilisateurs à une nouvelle page, et chaque itinéraire imbriqué est une partie distincte de la même page. Il permet la séparation des préoccupations en associant la logique commerciale uniquement aux fichiers qui l'exigent. Remix est capable de gérer les erreurs limitées à la partie de la page où se trouvent les itinéraires imbriqués. D'autres itinéraires de la page sont toujours disponibles et l'itinéraire corrompu peut fournir un contexte lié à l'erreur sans provoquer la plantation de la page entière. </p> <p> Remix fait cela lorsque le fichier racine dans App / Routes a le même nom que le répertoire de fichiers à charger dans le fichier de base. Le fichier racine devient la mise en page du fichier dans le répertoire en utilisant le composant <code> <foundlet>  </foundlet></code> pour indiquer à Remix où charger d'autres itinéraires. </p> <h4> Composant de sortie </h4> <p> <code> <fouette>  </fouette></code> Le composant est un signal de remix indiquant où il doit rendre le contenu pour les routes imbriquées. Il est placé dans un fichier dans le répertoire racine du répertoire App / Routes, et son nom est le même que l'itinéraire imbriqué. Le code suivant est situé dans le fichier App / Routes / À propos ory, ira ici. </p>
<h4> Structure de fichiers </h4> Tout fichier dans le <p> App / Routes / Directory devient l'itinéraire vers son URL de nom. Vous pouvez également ajouter un répertoire contenant le fichier index.tsx. </p> <pre class="brush:php;toolbar:false"> <code> App / ├fiques Les fichiers du répertoire, et le fichier de mise en page nécessite un composant de sortie pour placer les itinéraires imbriqués.  <pre class="brush:php;toolbar:false"> <code> app / ├── routes / │ │ │ └sé Avant le nom du fichier de mise en page.  <pre class="brush:php;toolbar:false"> <code> app / ├── Routes / │ │ │ └sé href = "https://www.php.cn/link/232a03118725240918c5a4a0ab33e9b3"> https://www.php.cn/link/232a03118725240918c5a4a0ab33e9b3 Le fichier x, mais rend également le composant <code> <ouvi> </ouvi></code> où le composant est situé dans la balise App / Routes / About.TSX.  <h4> Routing dynamique </h4> <p> Le routage dynamique est une voie qui change en fonction des informations de l'URL. Il peut s'agir du nom ou de l'ID client de l'article de blog, mais quoi qu'il en soit, la syntaxe $ a ajouté à l'avant du remix de signaux de route qu'il est dynamique. Le nom n'a pas d'importance sauf le préfixe $. </p> <pre class="brush:php;toolbar:false"> <code> app / ├── itinéraires / │ │ │ └sé  <p> Étant donné que Remix rend toutes les données sur le serveur, il n'y a aucun moyen de voir grand-chose dans Remix qui est devenu standard dans les applications REACT, telles que les crochets UseState () et UseEFFECT (). Comme les données ont été évaluées sur le serveur, la nécessité de l'état client est réduite. </p> <p> peu importe le type de serveur à utiliser pour obtenir les données. Étant donné que Remix est situé entre les demandes et les réponses et les convertit de manière appropriée, vous pouvez utiliser l'API Web Fetch standard. Remix le fait dans une fonction de chargeur exécutant uniquement sur le serveur et rend les données dans le composant à l'aide du crochet UseloaderData (). Ceci est un exemple de rendu des images de chats aléatoires utilisant le chat comme API de service. </p> <pre class="brush:php;toolbar:false"> <code> import {outlet, useloaderdata} de '@ remix-run / react' export aSync function loderer () {const Response = Await fetch ('https://cataas.com/cat') const data = await réponse.json () return {data}} exportation functionful return (<div> <img alt="un chat aléatoire." src="%7B%60https://cataas.com/cat/%24">  <outlet></outlet> </div>)} </code> 

Paramètres de routage

Dans la routage dynamique, les routes préfixées avec $ doivent être capables d'accéder aux paramètres d'Urle pour traiter les données qui doivent être préfixées avec $ pour avoir besoin de pouvoir accéder aux paramètres d'URL pour traiter les données qui doivent être préfixées avec $ pour avoir besoin pour accéder aux paramètres d'URL pour traiter les données qui doivent être préfixées avec $ pour avoir pour pouvoir accéder aux paramètres d'Url pour traiter les données qui doivent être préfixées avec $ pour avoir besoin pour accéder aux paramètres d'Urle pour traiter les données qui doivent être préfixées avec $ pour avoir besoin pour accéder aux paramètres d'URL pour traiter les données qui doivent être préfixées avec $. La fonction de chargeur peut accéder à ces paramètres via le paramètre Params.

 <code> Import {UseloaderData} à partir de '@ remix-run / react' Importer Type {Loderargs} depuis '@ remix-run / node' Export Async Function Loder ({params} return <p> Le paramètre d'URL est {params.tag}. </p>} </code>  pre> <h3> Autres fonctions de remix </h3> <p> remix Il existe d'autres fonctions d'assistance qui ajoutent des fonctionnalités supplémentaires aux éléments et attributs HTML normaux dans l'API du module de routage. Chaque itinéraire peut définir ces fonctions de son propre type. </p> <h4> Fonction d'action </h4> <p> La fonction d'action vous permet d'ajouter des fonctionnalités supplémentaires pour former des opérations à l'aide de l'API Web FormData standard. </p> <pre class="brush:php;toolbar:false"> <code> Exportation de la fonction asynchrone ({request}) {const body = waMait request.formData (); const toDo = wait faKeCreatoDo ({title: body.get ("title"),}); L'en-tête standard HTTP peut être placé dans la fonction d'en-têtes. Parce que chaque itinéraire peut avoir un en-tête, pour éviter les conflits avec les itinéraires imbriqués, les itinéraires les plus profonds - ou les URL avec les barres obliques les plus avancées (/) - gagnent. Vous pouvez également obtenir les en-têtes, ActionHeaders, chargeurs de chargement ou en-têtes de fonctions parentaux  <pre class="brush:php;toolbar:false"> <code> Exportation ({{ActionHeaders, chargeur, chargeurs de parent Le document HTML. Par défaut, on est défini dans le fichier root.tsx, mais ils peuvent être mis à jour pour chaque itinéraire.  <pre class="brush:php;toolbar:false"> <code> Fonction d'exportation meta () {return {title: "Titre de votre page", description: "Une nouvelle description pour chaque route.",};}; </code> 

LIENS FONCTION

Les éléments de liens HTML sont situés dans le TAGE

du document HTML, et ils sont importés dans le document CSS. La fonction Links (à ne pas confondre avec les composants <nkin> </nkin>) vous permet d'importer du contenu uniquement dans les itinéraires qui les nécessitent. Ainsi, par exemple, les fichiers CSS peuvent être étendus et importés uniquement dans des itinéraires qui nécessitent ces fichiers spécifiques. L'élément de liaison est renvoyé en tant que tableau d'objets de la fonction Links (), qui peut être le htmllikdescriptor de l'API de liaison ou le PageLinkDescripteur des données de page pouvant prédéfinir les données de la page.

 <code> Liens de fonction d'exportation () {return [// Ajouter un favicon {rel: "icon", href: "/favicon.png", type: "image / png" }, // Ajouter une feuille de style locale, {rel: "Stylesheet", href: styleshref}, // préfectez les données d'une page {page: "/ about / communauté"} ]} </code> 

Lien entre les routes

Remix fournit un composant pour sauter entre les différentes routes d'une application, appelée <ink> </ink>. Pour obtenir le routage client, utilisez le composant <link vers=""> link> au lieu de <a href=""> name </a> . Le composant <ink> </ink> est également livré avec une propriété préfective qui n'accepte aucune par défaut.

 <code> Importer {link} à partir de "@ remix-run / react"; <h3> Next </h3> <p> Maintenant que vous avez les bases de Remix, êtes-vous prêt à commencer à construire votre application? Remix fournit une application de blague et un tutoriel de blog pour vous aider à démarrer avec ces bases. Vous pouvez également créer une toute nouvelle application Remix à partir de zéro. Ou, si vous êtes prêt à creuser plus profondément, essayez d'utiliser la pile K-pop. J'ai vraiment aimé utiliser Remix et j'ai adoré sa concentration sur les normes Web et son retour aux bases. Maintenant, c'est à votre tour de commencer à créer! </p></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!