# Remix, A full-stack web framework
### 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-
**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 (
{process.env.NODE_ENV === "development" && });}
```
Layout file -
```
import React from "react";
import Header from "~/components/Header";
const Layout= ({children}) => {
return (
<>
{children}
);
};
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 (
<>
User List
);
};
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();
}
```
3. 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 (
<>
User List
{userList.map((user: User) => (
))}
);
};
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 (
<>
User List
{userList.map((user: User) => (
))}
);
};
export default userList;
```
This is all for the basic/starter kit for Remix.
[Full code is here](https://github.com/anilvermaspeaks/react-remix)
Happy learning 👏👏👏👏….