Posted on Jun 29, 2024 • Edited on Jul 5, 2024

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