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
routesdirectory, 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 ❤️
Top comments (1)
very well 😉