Primeros pasos con Remix Framework

Sí, este es otro JS pero quédese un poco más, ya que este marco está hecho por Michael Jackson y Ryan Florence los tipos listos detrás Enrutador React. Espero haber captado su atención, así que veamos qué tiene de bueno el Marco de remezclas.

Detalles técnicos

Remix es un marco de trabajo del lado del servidor construido sobre la plataforma API de obtención web y Enrutador Reactcada ruta en remix tiene tres exportaciones principales a cargador, an acción y un valor por defecto componente exportación. En cargador será llamada en el servidor antes de la renderización para proporcionar datos a la ruta, la función acción es responsable de la mutación de datos, la exportación por defecto es el componente que se renderizará en esa ruta. La dirección cargador y acción sólo se ejecutan en el lado del servidor y deben devolver un valor Respuesta el objeto por defecto La exportación se ejecuta tanto en el servidor como en el cliente.

Primeros pasos

Para inicializar un nuevo Remix proyecto:

npx create-remix@latest

IMPORTANTE: Elija "Sólo lo básico" y, a continuación, "Remix App Server" cuando se le solicite.

cd [cualquiera que sea el nombre del proyecto]
npm run dev
```

Abrir http://localhost:3000. la crear-remix obtendrá una plantilla de inicio con la siguiente estructura:

• En aplicación contendrá todas las rutas de su aplicación y código.
• En app/entry.client.jsx es el primer fragmento de código que se ejecuta en el navegador y se utiliza para hidrato los componentes React.
• En app/entry.server.jsx es la primera pieza de código que se ejecuta cuando una solicitud llega al servidor, este archivo renderiza nuestra aplicación React a una cadena/flujo y envía eso como nuestra respuesta al cliente.
• En app/root.jsx es donde va el componente raíz.
• En app/rutas/ es donde irán todos sus módulos de ruta, remix utiliza un enrutamiento basado en el sistema de archivos.
• En público es donde van tus activos estáticos (imágenes/fonts/etc).
• En remix.config.js es donde se puede establecer la configuración de la remezcla.

Menos charla, enséñame el código

Comprobemos un login.jsx ejemplo de ruta dentro de una aplicación 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>

);
}
```

Lo primero que ocurre aquí es la cargador para comprobar si el usuario ya ha iniciado sesión con la contraseña isLoggedIn y se redirigir él a la /tablero si no, simplemente devolverá un { éxito: verdadero } se genera la página de inicio de sesión.

En Ruta de acceso muestra un formulario con una dirección de correo electrónico, una contraseña y un botón de envío. estado variables ni un onSubmit en nuestro componente, es porque en remix cada ruta puede exportar un acción y cuando se envía un formulario con POST la acción será llamada y manejará ese evento.

Cuando se envía el formulario, el acción obtendrá el
FormData del Solicitar objeto const formData = await request.formData()entonces estamos construyendo el valores con una dirección de correo electrónico y una contraseña, el objeto formData.get('email') buscará el primer campo coincidente dentro de nuestro formulario con un carácter name="correo electrónico" y devolver su valor. Estamos comprobando si las credenciales son correctas con la propiedad verifyLogin aquí podrías usar cualquiera de tus librerías de validación de esquemas JS favoritas y hacer un buscar a su backend personalizado para comprobar si los datos de acceso son correctos, si es así redirigir el usuario a la /tablero si no, devolvemos un json con el objeto de errores y una respuesta Código de estado HTTP 400El useActionData devolverá este objeto de errores si hay alguno y, condicionalmente, mostrará el mensaje de error como en {actionData?.errors?.email &amp;&amp; <div>{actionData.errors.email}</div>}.

En useTransition nos dice todo sobre el estado de transición de la página, con el hook isSubmitting variable estamos comprobando cuando se está produciendo un envío, si lo hay vamos a desactivar el botón de enviar y mostrar Inicio de sesión.... en lugar de Inicio de sesióntambién podríamos mostrar al usuario un spinner de carga o cualquier otra indicación en su lugar.

En json es sólo un atajo para crear application/json objetos de respuesta. La dirección useLoaderData devuelve los datos JSON analizados de su ruta cargadorEl useActionData devuelve la ruta acción datos analizados.

SEO amigable

Cada ruta también puede exportar un meta responsable de establecer las etiquetas meta para su documento Html, de esta forma puede establecer una función título y un descripción para cada ruta y añada cualquier metaetiqueta Open Graph o de otro tipo que desee.

export const meta = () => {
const title = 'Mi página super impresionante';
const description = 'Página super impresionante';

return {
charset: 'utf-8',
título,
descripción,
palabras clave: 'Remix,Awesome',
'twitter:image': 'https://awesome-page.com/awesome.png',
'twitter:card': 'summarylargeimage',
'twitter:creator': '@awesome',
'twitter:site': '@awesome',
'twitter:title': título,
'twitter:description': descripción,
};
};

export default function AwesomeRoute() {
devuelve

Ruta impresionante

;
}
```

Enlaces útiles

Sólo hemos abordado la punta del iceberg sobre Remix, hay mucho más que saber, aquí tienes algunos enlaces útiles:

• Documentación
• Github
• Carpeta de ejemplos
• Lista de reproducción en Youtube
• Servidor Discord

Resumen

Lo bueno de Remix es que mejorando con él mejorarás en fundamentos web, como has visto muchos de los enlaces de este artículo apuntan al Documentación de MozillaEsto es lo que significa que Remix esté centrado en los fundamentos de la web, ya que utiliza APIs web como los objetos Response y Request para proporcionar a los usuarios una gran experiencia de usuario, además de que puedes seguir utilizando todas tus técnicas y librerías favoritas.

En este artículo no hemos hablado de todas las fantásticas funciones que ofrece Remix, como por ejemplo Rutas anidadas, Límites de error, Remezcla de pilas pero aun así, este artículo debería darte una buena idea de la filosofía que hay detrás de Remix.