Building a Modern Blog with Remix and React Router
Tags: react, remixrun, webdev, javascript
Published: 2024-06-29 18:46:48

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:

1. **Install Remix**: Create a new Remix project with this command:
   ```bash
   npx create-remix@latest
   ```

2. **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`

```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`

```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`

```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:

```jsx
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 ❤️