React Remixed

Rate this content

React and the JavaScript ecosystem seems to be constantly changing. Wherever we look, there are new libraries and frameworks. These new tools always lead to learning concepts that are often non-transferable knowledge. What if I told you that by learning standard web APIs, relearning the web, and getting a bunch of transferable knowledge, you can also start using a fantastic new addition to the React ecosystem: Remix!

8 min
24 Oct, 2022


Sign in or register to post your comment.

AI Generated Video Summary

Remix is a full-stack web framework that embraces the server-client model and leverages browsers, HTTP, and HTML to deliver a fast user experience. It allows you to have a data layer and use the basics of browsers, HTTP, and JavaScript. Nested routing in Remix enables easy addition of nested sections to your application.

1. Introduction to React Remix

Short description:

Welcome to my talk called React Remix. This talk is about Webpages, APIs, HTML forms, form data objects, URL adders. Remix allows you to use these technologies that have been around for the past 20 years. Remix is a full-stack web framework that embraces the server-client model and the foundations of the web. It leverages browsers, HTTP, and HTML to deliver a fast and sleek user experience. With Remix, you have all the tools you need to make your application great.

Hello, everyone. Welcome to my talk called React Remix. So let me start by introducing myself. My name is Daniel Alfonso. I'm a developer advocate at OLX Group. I'm an IoT Ambassador, a GetIO Instructor, and you can find me on Twitter and Instagram. I'm also a social network at the handle, DanielJCAlfonso.

So what is this talk about? Well, this talk is actually about Webpages, APIs, HTML forms, form data objects, URL adders. Now, you might be wondering, isn't the title of the talk React Remix? Yeah, because these are all things that Remix allows you to use. Now, I know that we all might be a bit tiring and of new JavaScript frameworks always showing up. But bear with me because Remix makes something really good for you, which is when you learn Remix, you accidently learn the Web. Because by using Remix, you'll get leverage to all the things that have been around for around the past 20 years, something like that, which are working very, very well and we'll continue to use them.

Now, you might wonder, where did Remix come from? Remix was created by Michael Jackson and Ryan Florence. Remix is a full-stack web framework that lets you focus on the user interface while working back through web standards to deliver a fast, sleek, and resilient user experience. Now with Remix comes its main philosophy, which are actually three or four things. Let's start with the first one, which is embrace the server client model. Well, you cannot make a user network fast, but what you can do is you can make your server fast. Because of this, you can be allowed to reduce and decrease the amount of stuff you send over the network, and this is why Remix is super great, because it doesn't need to ship the Skeleton UI, all of it, because Remix will fetch, and you can even prefetch at certain scenarios, this amount of data before your page being rendered all on the server side. Remix also works with the foundations of the web by using browsers, HTTP and HTML. These are technologies that have been around for a long time, like I said, 20 years. So they are pretty solid. Remix will embrace them fully. And by combining stuff like HTTP caching, Remix focus on URL for assets, dynamic server rendering and HTML features like, for instance, the prefetch in the link, which can send link URL prefetch. You have all the tools that you need to make your application pretty great. So browsing in HTML got really good in the past 20 years. So Remix just leverages it fully. Using JavaScript to augment the user experience by emulating browser behavior. So most recent frameworks only have read APIs for data. Remix has both read and write. So by leveraging a small thing called HTML forms.

2. Introduction to Remix

Short description:

Remix is a full-stack web framework that allows you to have a data layer in your application. It enables you to use the basics and fundamentals of browsers, HTTP, and JavaScript. JavaScript in Remix is progressive enhancement, and it doesn't over abstract the underlying technologies.

So pretty much use what has been the basic for data mutation since the 90s. Remix uses the forms and embraces and augments that API. This will enable for you to have a data layer in your Remix application. With or without JavaScript on your page. And this is the amazing, amazing part of Remix. Which is you probably don't need JavaScript on your browser. By adding JavaScript this will allow Remix to do a couple of things. For instances, not downloading and evaluating JavaScript and CSS assets. And only fetching data for the parts of the layout that change. So JavaScript in Remix is what's called progressive enhancement. Finally part of the philosophy, Remix doesn't over abstract the underlying technologies. And this is why it's said that if you get good at Remix you get good at the web. Because Remix APIs make it convenient to use the basics and the fundamentals of browsers, HTTP and JavaScript in general. These technologies are not hidden from the developer, you can use them.

3. Nested Routing in Remix

Short description:

Nested routing in Remix allows you to couple segments of the URL to describe your component hierarchy in the UI. By triggering specific routes, only the corresponding nested parts will be rendered. This powerful feature enables you to easily add more nested sections to your application.

So let's go to the three basic things that you just need to start and writing code with Remix. So first thing, very important, is nested routing. So nested routing is pretty much the general idea that you can couple segments of the URL to describe your component hierarchy in the UI. So let's look at this example. Here we have two routes, a user profile and a user account one. Both UIs are very similar. In both of them we have the user, described with the name of the user, and two tabs, one for the profile and one for the account. How nested routing works is, whenever you trigger either the profile or the account route, it will render only the part that's specific inside of it. So, when you click on profile, the nested route responsible for the profile will be rendered inside of this part of the UI. And the same for the account. When you trigger the account, the nested account part will be rendered inside of this. And this is why nested routing is super powerful, because by only adding new sections of the URL, you can keep adding more and more and more nested parts of your application. So, this is one of the main fundamentals for Remix.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.

React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.
But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.
You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.
The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.
React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.

React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents
- The different kinds of React application tests, and where component tests fit in
- A mental model for thinking about the inputs and outputs of the components you test
- Options for selecting DOM elements to verify and interact with them
- The value of mocks and why they shouldn’t be avoided
- The challenges with asynchrony in RTL tests and how to handle them
- Familiarity with building applications with React
- Basic experience writing automated tests with Jest or another unit testing framework
- You do not need any experience with React Testing Library
- Machine setup: Node LTS, Yarn