Remix, A full-stack web framework
Remix is a full-stack web framework built on top of react-router.
Remix-
Remix is a full-stack web framework built on top of react-router. It provides server-side rendering in a similar fashion as next.js. Most of the things are similar to next.js like file-system-based routing, access of head/meta tags across components. It also provides built-in support for cookies and sessions.
In this post-
- Will learn how to setup remix project
- File-System Based Routing
- How can consume external API data
- Styling of pages/routes
Setup remix project
npm install -g create-remix@latest
Then
create-remix your-project-name
After project setup/installation done
cd your-project-name
npm run dev
Understanding folder setup
remix.config.js — This file will serve details like-
root.tsx/root.jsx
It will be like the main file from where your application will run. You can set your base layout/document/Html here.
import {Links,LiveReload,Meta,Outlet,Scripts,ScrollRestoration} from "remix";
import type { MetaFunction } from "remix";
import globalStyleUrl from "~/styles/global.css";
import Layout from "./components/Layout";
export const links = () => [{rel: "stylesheet", href: globalStyleUrl}];
export const meta: MetaFunction = () => {
const description = "Learning module india Blog";
const title = "Learning module india Blog";
const keywords = "remix, react, javascript";
return {
title,
description,
keywords,
};
};
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/><Meta />
<Links />
</head>
<body>
<Layout>
<Outlet />
</Layout><ScrollRestoration />
<Scripts />
{process.env.NODE_ENV === "development" && <LiveReload />}</body></html>);}
Layout file -
import React from "react";
import Header from "~/components/Header";
const Layout= ({children}) => {
return (
<>
<div className="container">{children}</div>
</>
);
};
export default Layout;
routes Folder and File-System Based Routing-
“routes” is the folder inside “the app” folder where you will create your pages
When you run commnad
npm run dev
it will start listen on port and on root index.js file will serve
For Creating new pages
You should create a folder with that page name
As here in above image for users page, I created a folder users and inside that i created index.jsx or index.tsx(if you are working with typescript)
and access users page on browser like
localhost:3000/users
users/index.tsx file
const userList = () => {
let userList = useLoaderData();
return (
<>
<h1>User List</h1>
</>
);
};
export default userList;
How can consume external API data?
For consuming API data, Remix provides some loader functions like useLoaderData
Import below import in your file import {useLoaderData} from “remix”;
create a loader function inside your file
export async function loader() {
let res = await fetch("ApiURL");
return res.json();
}
- Now inside your component get return data from the above function like
let userList = useLoaderData();
The full code of the user file will look like
import {useLoaderData} from "remix";
export async function loader() {
let res = await fetch("https://jsonplaceholder.typicode.com/users");
return res.json();
}
const userList = () => {
let userList = useLoaderData();
return (
<>
<h1>User List</h1>
{userList.map((user: User) => (
<h2 key={user.id} user={user.name}> </h2>
))}
</>
);
};
export default userList;
Styling of pages/routes
To style/add CSS to your pages, create a folder named styles inside the app folder.
inside the “styles ” folder create your CSS files as below.
Now once your CSS file is ready now add ref of this file inside your page.
So inside your page create links function as below
import styles from "~/styles/users.css";
export const links = () => {
return [{rel: "stylesheet", href: styles}];
};
Now, your CSS will get applied.
users.tsx or users.jsx will look like
import type {LinksFunction} from "remix";
import {useLoaderData} from "remix";
import styles from "~/styles/users.css";
export const links: LinksFunction = () => {
return [{rel: "stylesheet", href: styles}];
};
export async function loader() {
let res = await fetch("https://jsonplaceholder.typicode.com/users");
return res.json();
}
const userList = () => {
let userList = useLoaderData();
return (
<>
<h1>User List</h1>
{userList.map((user: User) => (
<h2 key={user.id} user={user.name}> </h2>
))}
</>
);
};
export default userList;
This is all for the basic/starter kit for Remix.
Happy learning 👏👏👏👏….