Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Full Stack Web Development with Remix
  • Table Of Contents Toc
  • Feedback & Rating feedback
Full Stack Web Development with Remix

Full Stack Web Development with Remix

By : Andre Landgraf
5 (14)
close
close
Full Stack Web Development with Remix

Full Stack Web Development with Remix

5 (14)
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)
close
close
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

Using route parameters for dynamic routing

URLs often include parameters such as identifiers to specify associated resources. This allows the application to retrieve the right data for the request. In this section, you will learn how to work with URL parameters in Remix.

So far, we have created a route module for a hardcoded expenses details page (/dashboard.expenses.1.tsx). The number 1 in the URL refers to the expense with the expense identifier 1. However, the goal is to create a dynamic route module capable of handling variable identifiers. Luckily, Remix provides a convention for how to define a parameterized route segment.

Parameterized route segments

In Remix, dynamic segments of the URL are referred to as parameterized segments. We use the $ symbol to declare a route parameter. This turns the URL segment into a parameter that we can access and use to fetch data.

Let’s see how we can use a parameterized segment in BeeRich for the expenses details route:

...
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Full Stack Web Development with Remix
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon