Remix for Beginners

Photo by Markus Spiske on Unsplash

Why I Love Remix for Those Learning to Code

First, Remix vs ……

One of the things I have noticed is that there is a lot of comparison between Remix and Nextjs. There are also a few haters on Remix because they hate React and don’t think anything remotely related to React could be good/enjoyable.

For context, I got labeled as having Stockholm Syndrome for React because I was invested in Remix before it was open source. Like, can we not be interested in things anymore 🤷‍♂️

In one sense comparisons are natural. It is how we understand a new thing or just a thing in general. We try to match it up to something else. This is why Remix is compared to Svelte and Next. All of them are great. The Remix team would tell you that.

I don’t think comparison from a ‘what does this framework do that this other framework does not do’ is the fairest way to examine. I think philosophies are far more valuable. So I will start with that philosophy, share what Remix does, and then bookend with my thoughts on Remix for those beginning to learn web development.

Quick note: I am sharing as someone who has only been in this industry a little over a year. I believe that Remix is a good choice for anyone beyond the beginner level as well. My perspective on this is that I just learned to code and my mindset is very much set towards helping those entering this field learn in the best way.

Remix for Beginners

This will just be a list of things I like and appreciate.

Let me start with a quote from Remix’s documentation on their philosophy for and why Remix.

If you get good at Remix, you will accidentally get good at web development in general.

If you are just beginning because Remix is built on Web fundamentals/standards/best practices, Remix will help you get good as you build. The educator heart and spirit of Ryan, Michael, and their team is why using Remix will get you where you want to go. This is the most important reason, in my opinion, Remix is optimal for beginners.

• ‘loader’ functions — If you are fetching anything, use a loader. The name is intuitive. For a beginner, you can easily discern that if I need to ‘load’ some data, use a loader.
• ‘action’ functions — If you need to add, update, or delete some data, you need to ‘act’ on the data. For a beginner, you can easily discern that if I need to do something with data, it is an action.
• Routes — This could be a long post on its own. But each file in your routes folder, is a route. You can nest routes based off of parent routes. For instance, say you have a ‘About’ page for your company. You might want a ‘team’ members nested page. In that page you might want a nested individual member page. Things like that. You can do all of this by creating an about.js file and then an about folder with the different nested pages inside that folder.
• Layouts — Much like the routes, because layouts and routes tend to go together, you can have nested layouts.
• React Simplified — the only thing you really need to know about React is how to write html from a function. This is really simple. This is called jsx, but within Remix, it is basically html. You can still get all the goodies of props, state, and passing data into the html, but simply put, just know how to write html within a function and you are good to go. Below is an example.

export default function Page() {
   return (

     <div>
       Some page content here
     </div>

  )
}

• Meta tags — This is kind of a small thing, but I never cared to write meta tags because it seemed kind of convoluted for me. But writing a function that returns those things is really straightforward.
• Styling — For a beginner, most likely they are learning traditional CSS or potentially tailwind. Remix handles styles a little differently by making each pages CSS its own unique url. The hidden benefit of this to a beginner is that you will not have the frustration of styles mixing and changing things on other pages. If you have ever had two different html files with different CSS but named some class the same or had different styles for the same elements, you have probably run into a CSS issue. No more!

I want beginners who are already on a really difficult path of changing careers and taking that risk to be able to choose things that ‘work for them’ by teaching them not only the skills that will help them get a job, but also the standards behind what they are learning and working towards.

I like Remix for beginners because they will learn skills and be able to get a job. But more than that I like that it is built from educators. I like that you get good at things you didn’t expect because when you move into a career, if you have that foundational web development knowledge, not just skills, you can really go anywhere.

Thanks Remix Team!