Remix, A full-stack web framework

Remix is a full-stack web framework built on top of react-router.

Anil Verma's photo
Anil Verma
·Jan 2, 2022·
Remix, A full-stack web framework

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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-

  1. Will learn how to setup remix project
  2. File-System Based Routing
  3. How can consume external API data
  4. 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-

image.png

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

image.png

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

  1. Import below import in your file import {useLoaderData} from “remix”;

  2. create a loader function inside your file

export async function loader() {
let res = await fetch("ApiURL");
return res.json();
}
  1. 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.

image.png

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.

Full code is here

Happy learning 👏👏👏👏….

 
Share this