Building a Modern Blog with Remix and React Router

Hey everyone! 🎉

This weekend, I decided to roll up my sleeves and dive into something new: building a blog using Remix and React Router. As someone who loves staying hands-on with the latest tech, this was the perfect opportunity to explore what these tools have to offer.

Why Remix and React Router?

Remix and React Router are a powerful combo for modern web development. Remix is a full-stack framework that leverages the best of React and the web platform to create fast, slick, and scalable applications. React Router, as the go-to standard for routing in React apps, complements Remix perfectly.

The Project: What We Did with Remix

Setting Up the Project

Getting started with Remix is straightforward. Here's a quick rundown:

Install Remix: Create a new Remix project with this command:

   npx create-remix@latest

Set Up Your Routes: In Remix, routing is file-based. Just create files in the routes directory, and they automatically become routes in your app.

Here's a peek at my routes:

`app/routes/index.jsx`

import { Link } from "@remix-run/react";

export default function Index() {
  return (
    <div>
      <h1>Welcome to the Blog</h1>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/posts">Posts</Link></li>
        </ul>
      </nav>
    </div>
  );
}

This snippet shows off Nested Routing. The navigation links let users switch between different routes (/, /about, and /posts), rendering components within the main layout.

`app/routes/about.jsx`

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This blog is built with Remix and React Router, showcasing modern web development.</p>
    </div>
  );
}

`app/routes/posts.jsx`

import { Link, useLoaderData } from "@remix-run/react";

// Define the loader function to fetch data
export let loader = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await response.json();
  return posts;
};

export default function Posts() {
  const posts = useLoaderData();
  return (
    <div>
      <h1>Posts</h1>
      <Link to="new">Create New Post</Link>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

This part highlights Data Loading and Mutations. The loader function fetches data from an API endpoint (https://jsonplaceholder.typicode.com/posts), and the useLoaderData hook accesses this data within the component. It makes data fetching a breeze, integrating seamlessly into the component lifecycle.

Handling Layouts and Links

In Remix, you can define a root component (this is key ⭐️) to handle the layout, including meta tags, links, scripts, and live reload functionality. Here’s how my app/root.jsx looks:

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export const links = () => {
  return [
    { rel: "stylesheet", href: "/styles.css" }
  ];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <header>
          <h1>Welcome to the Blog</h1>
        </header>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/posts">Posts</a></li>
          </ul>
        </nav>
        <div className="container">
          <Outlet />
        </div>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

This setup shows off Progressive Enhancement and Nested Routing. The Links, Meta, and Scripts components ensure the app is well-structured, SEO-friendly, and progressively enhanced. The Outlet component is used for nested routing, rendering different child components within the main layout.

Lessons Learned

Working on this project, I faced some challenges with environment configuration and resolving module issues. But overcoming these hurdles wasn't tiring at all! Fun experience 😎

Conclusion

This project was more than just building a blog, it was about exploring the capabilities of Remix and React Router and keeping my technical skills sharp. It's a powerful tool that can enhance your development workflow significantly for sure!!

Stay tuned for more updates, and happy coding! 🚀

Sohini ❤️

Blog