Book Image

Full Stack Web Development with Remix

By : Andre Landgraf
Book Image

Full Stack Web Development with Remix

By: Andre Landgraf

Overview of this book

We’re in an exciting era of web development marked by the rapid evolution of the JavaScript ecosystem. Remix offers the necessary abstractions to take advantage of the latest advancements in React and beyond. With this Remix book, you can elevate your skills from React development to full stack web development, unlocking the full potential of the latest technologies, such as edge functions, streaming, and the full stack of the web platform. This book guides you through Remix’s thoughtfully designed conventions, levers, and primitives to sharpen your web development skills. In this book, you’ll develop a personal finance management application—a dashboard that mimics both personal and enterprise use cases. Each chapter introduces new concepts, such as routing, data fetching, mutations, error handling, and state management, as well as advanced topics, such as real-time communication, edge deploys, and caching strategies to create a great user experience from end to end. As you apply each concept to the finance dashboard, you’ll discover how you can supercharge your React app with Remix. The final section of this book covers migration strategies, guiding you on how to transition an existing application to Remix. By the end of this book, you’ll have a comprehensive understanding of Remix and the experience of building a full stack web app from start to finish.
Table of Contents (23 chapters)
1
Part 1 – Getting Started with Remix
6
Part 2 – Working with Remix and the Web Platform
13
Part 3 – Advanced Concepts of Full Stack Web Development with Remix

Summary

Remix provides a convention-based file-based router. Arguably the most powerful feature of Remix’s router is nested routing. In Remix, you create routes (route modules) as part of a hierarchy. Remix’s router maps the pathname of the URL to a set of matching route modules. Route modules make up the pages of your Remix application.

In this chapter, you created your first routes in Remix. We started off by creating two standalone pages. You learned about the special role of index routes as the default children of their parent routes. You were also introduced to the exports available in Remix’s route modules.

Next, we created a nested route hierarchy for our dashboard. We used parent layout routes and the Outlet component to reuse styling and content across different child routes.

We also used a loader function and a route parameter to create routes for our income and expenses details views. You learned how to declare parameterized route modules using...