Remix JS for Beginners: 3 Key Concepts

Explore the fundamental building blocks of Remix JS in this beginner-friendly article. Discover 3 introductory concepts that will help you get started with Remix JS, a powerful framework for web development. Learn about these key concepts to gain a better understanding of how Remix works and how it can benefit your projects.

Remix logo

Concept 1: The All-in-one Folder

Traditional web development often involves separating your backend and frontend code into different folders and structures. If you are similar to me, you probably started off using React JS as a client side library with Nodejs and Express on the backend. Your folder structure probably looked like the below.

client/
server/

In Remix, both the backend and frontend code coexist harmoniously within a single folder. When using Remix, remember! The backend and frontend code is kept inside a single folder.

app/

Concept 2: Filesystem-based routing

Routing is at the heart of every web application, and Remix knows how to make it a breeze. It leverages the power of React Router 6 as its foundation, and the result? Creating page routes has never been easier!

Imagine this: You have a bunch of different pages and routes to handle in your web app. In many frameworks, setting up these routes can be a bit of a headache. You might need to configure complex route files, manually map URLs to components, or wrestle with a bunch of routing code. But not with Remix!

With Remix, it's as simple as organizing your files. Just drop your files into the designated "routes" folder like below.

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── dashboard.profile.tsx
└── root.tsx

Below is a table illustrating the URL routes and their corresponding matched route files in a web application.

| URL                 | Matched Routes         |
|---------------------|------------------------|
| /                   | _index.tsx             |
| /about              | about.tsx              |
| /dashboard/profile  | dashboard.profile.tsx  |

Concept 3: Backend and Frontend Code Coexist in the Same File

When you use Remix, it grants you the power to craft server-only functions right inside the same file as your page components. Wow! If you value visual clarity, this is where the real magic happens! Lets have a deeper look into the two types of server-only functions that Remix makes available to handle your data on the server.

  1. Loader function
    • The loader function provides the means to fetch and return data. You can then access this data directly in your component with a useLoaderData hook. Each route can define a "loader" function that provides data to the route when rendering. This function is only ever run on the server.
  2. Action function
    • Like loader, action is a server-only function to handle data mutations and other actions. If a non-GET request is made to your route (POST, PUT, PATCH, DELETE) then the action is called before the loaders. This function is also only ever run on the server.

A Peek at the Loader Function Providing Data to the Page Component

To illustrate this concept, let's take a look at a simple example of a Remix application:

import { LoaderFunction } from '@remix-run/node';
import { useLoaderData } from "@remix-run/react";

// Frontend code
function Page() {
// Data is made available in component via using this hook
  const data = useLoaderData();
  return (
    <div>
      <h1>My name is {data.name}</h1>
		
    </div>
  );
}

// Backend code
export let loader: LoaderFunction = async () => {
  return { name: "Dionne Chelini" }
};

export default MyPage;

In this example, you can see both frontend and backend code coexist harmoniously within the same file.

A Peek at the Action Function Providing Data to the Page Component

To illustrate this concept, let's take a look at a simple example of a Remix application:

import { ActionFunction } from '@remix-run/node';
import { Form, useActionData } from "@remix-run/react";

// Frontend code
function Page() {
// Data is made available in component via using this hook
  const data = useActionData();
  return (
   return (
    <Form method="post">
      <p>
        <label>
          What is your name?
          <input type="text" name="visitorsName" />
        </label>
      </p>
      <p>{data ? data.message : "Waiting..."}</p>
    </Form>
  );
  );
}

// Backend code
export async function action({ request }: ActionArgs) {
  const body = await request.formData();
  const name = body.get("visitorsName");
  return json({ message: `Hello, ${name}` });
}

export default MyPage;

Again, in this example, you can see both frontend and backend code coexist harmoniously within the same file.

In Conclusion: Exploring the Power of Remix JS

In this article, we've delved into three fundamental concepts that define the remarkable Remix JS framework. As you embark on your journey with Remix, keep these key ideas in mind to fully grasp how Remix can revolutionize your web development projects.

  1. Concept 1: The All-in-one Folder
  2. Concept 2: Filesystem-based Routing
  3. Concept 3: Backend and Frontend Code Coexist

As you dive deeper into Remix, these concepts will serve as your guiding principles, unlocking the full potential of this powerful framework. Whether you're a beginner exploring the basics or an advanced user pushing the boundaries, Remix JS has the tools to elevate your web development projects to new heights.

Continue your Remix journey with our articles tailored for intermediate and advanced users, and discover the endless possibilities Remix has to offer. Happy coding! 🚀🌐