Remix JS es un marco basado en Full Stack React que le permite generar código en el servidor, lo que tiende a generar un mejor rendimiento y optimización de motores de búsqueda en comparación con el uso de React en el lado del cliente. Pero Next Js ya proporciona representación del lado del servidor de cómo es diferente de Next Js. Remix Js solo admite la representación del lado del servidor. Carece de la capacidad de Next Js para la generación de sitios estáticos y la regeneración estática incremental. Proporciona un desarrollo más rápido en comparación con Next Js porque usa esbuild en lugar de webpack.
Características clave de Remix JS:
- Enrutamiento: admite el enrutamiento basado en estructuras de archivos, que se construye sobre React Router. También le permite crear rutas anidadas. En Remix Js, las rutas anidadas heredan su interfaz de usuario del componente de ruta principal. Es posible que reconozca este patrón si ha usado marcos como Angular o Ember.js.
- Obtención de datos: en cualquier ruta dada, exporta un componente React para su interfaz de usuario de front-end. Pero también puede definir una función de cargador que obtendrá datos en el servidor y los enviará al front-end. Su componente React podría acceder a los datos obtenidos mediante el gancho useLoaderData.
- Manejo de errores: Remix detecta automáticamente la mayoría de los errores en su código, en el servidor o en el navegador, y representa el límite de error más cercano a donde ocurrió el error.
- Fácil acceso a las etiquetas y documentos de <head>: cualquier módulo de ruta puede proporcionar un fácil acceso a las etiquetas de encabezado. En la etiqueta principal, puede agregar fácilmente metaetiquetas, descripciones y enlaces CSS.
- Compatibilidad con texto TypeScript: Obtiene texto TypeScript listo para usar, puede generar fácilmente su aplicación repetitiva con texto TypeScript.
- Soporte integrado para cookies: Remix proporciona una función integrada llamada createCookie para trabajar con cookies.
Pasos para instalar y ejecutar la aplicación Remix JS:
Paso 1: antes de crear la aplicación Remix, asegúrese de tener instalados node.js y npm. Puede instalar el Node js desde aquí . Confirme la instalación ejecutando estos comandos.
npm -v node -v
Paso 2: Ahora cree una nueva carpeta y navegue hasta ella en la terminal. Ejecute el siguiente comando para crear una aplicación Remix con su última versión.
npx create-remix@latest
Paso 3: a medida que avanza con la instalación, se le pedirá que seleccione un servidor. Continúe seleccionando un servidor con el que esté familiarizado.
Captura de pantalla de la terminal
Paso 4: Ingrese el lenguaje de programación que le gustaría usar (Javascript/TypeScript) y continúe con la instalación.
Captura de pantalla de la terminal
Paso 5: cuando abrimos nuestro proyecto en el editor de código, vemos una estructura de proyecto bastante sencilla. Por ahora, solo nos centraremos en la carpeta de aplicaciones, ya que contiene la mayoría de nuestras aplicaciones. Iremos un paso más allá agregando algunas rutas básicas a nuestro proyecto. Remix Js admite el enrutamiento basado en la estructura de archivos, lo que implica que se puede acceder a cualquier archivo en su directorio de rutas utilizando su ruta relativa al directorio de rutas. Cree una nueva carpeta llamada usuarios en el directorio de rutas y luego dos nuevos archivos en esa carpeta llamados index.jsx y $id.jsx.
Estructura del proyecto:
Ejemplo: aquí, el archivo index.jsx contendrá un componente que se representará cuando navegue a localhost:3000/users. Y $id.jsx es una ruta dinámica. Si está familiarizado con Next Js, es posible que sepa que para las rutas dinámicas, usamos el operador de subíndice en el nombre del archivo (p. ej.: [id].js). Es un poco diferente aquí. Si coloca un signo de $delante del nombre de la ruta ($id.jsx), se considerará una ruta dinámica. Y, para acceder a la identificación dinámica, Remix Js nos proporciona un gancho llamado useParams().
/app/routes/users/index.jsx archivo:
Javascript
const Users = () => {
return (
<h1>All Users</h1>
)
}
export default Users
/app/routes/users/$id.jsx archivo:
Javascript
import { useParams } from "remix";
const User = () => {
// To access all the parameters
// in the route
const params = useParams();
// Destructuring id from params.
const id = params.id;
return <h1>User with id : {id}</h1>;
};
export default User;
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por ksangtiani13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA