Remix Tutorial | Remix for Beginners

[Music] hey everyone i hope you're doing well so it's been a while since i've done a video i'm going to try to get back into it my my desk it's kind of half desk half baby training station so hopefully try it get back into it now and today we're going to be doing a video about remix uh just very very basic simple tutorial i'm still learning it myself so just trying to understand the the building blocks of remix and how it works uh if you enjoy this kind of content please consider subscribing and let's get right into it so i'm not gonna go into too much detail as to why i think anyone should use remix definitely one for me and one i'm going to be using in the future um i'll leave a link to a blog post by ken dodds he's got quite a good description of why you might use it and ultimately for me when i'm picking the tools just about basically does the tool make sense for me from a technical point of view 1890 of the tools out there will do the job it's just about which one makes sense for you which one feels intuitive uh which one provides the best developer experience for you um and yeah so that's that's basically what i want to cover in this video so i'm going to do a very simple tutorial you know the building blocks again i'm still learning it myself and if you ever want to dive deeper into any kind of specific area let me know in the comments below and we can do that so um yeah let's get started so to get started with remix we're going to do mpx create remix and we're going to do this in a directory called remix tutorial it is worth knowing that remix is a server-side rendered framework similar to next.js as opposed to a client-side one you know similar to create react app so the first thing it does is it gives you an option of you know how are you going to deploy this or where you're going to deploy it so they've got a few basically templates um that are already pre-built that allow you to get started straight away for now i'm going to start with the remix app server that's one you know that's uh remix's own server and it's just probably the easiest one to get started um yeah i won't type script and yeah you can run npm install so i'm going to give this a few seconds and then we'll get started cool so now that that's done i've opened it up in intellij and what we're going to do is we're very quickly going to have a look at the directory structure and then we'll go into all the basically the different components that make up a remix app so from the top level here the only kind of uh specific file you might want to pay attention to is this remix config and this is a configuration of the the application most you know most web frameworks will have this so this is kind of a familiar thing um we just configure things like the you know the the directories of the different um build paths etc and then the server port so we can basically leave it as is the rest of the the files here are pretty standard for kind of any any react app we then have a couple of directories that are important to look at which is the app and the public directories so build only comes once you of course built it the public one um is basically uh to provide any assets but you'll know here we don't have our kind of index html page and that's because the index.html is going to be handled within within the roots within the app and we'll show that in a moment but here by default they're just providing a favicon but this is where any additional assets go and basically the rest of your app is going to happen inside the app directory so within that directory we have an entry for the server entry for the client remember this is a server-side rendered application then we have the root route r-o-u-t-e so this is where the basic app starts the the main the main entry point and then we have all your routes um which i'll go inside here right so actually on the documentation a good place to start if you look at the navigation um these are the main things that you need to know about react so we have the roots again on directory we're going to go over loading data nested roots again that's just within the directory slash params actions and data updates and there's a couple of things here styling and meta that we can kind of quickly go over here so let's have a quick look at entry server and client but these are you know pretty standard if you're just getting started out probably just don't touch them you can just see here what it's doing it's just uh using reactdom server to render the reactor string you've got full access to the the headers et cetera which is quite powerful um same with the status code if you're used to client-side rendering you know that you know you usually want to always return a 200 but then you know change things on the on the client you've got full access so that's all this does here it returns a response um with the html and note that remix has this kind of philosophy of bringing back web fundamentals and you'll see this around remix a lot they have um they use kind of the web fundamental apis response is one of them here so if you go into the documentation here you'll notice this is not a um a remix specific thing this is a a a web fundamental thing this is you can go into the mdn web docs you can see the response you can see the request this is quite a big theme in in remix as well which is just in case you're wondering where all these objects come from so i don't want to go too much into the server that's pretty standard the client again pretty standard we're hydrating the the thing to focus on here is we're hydrating onto the the document we're not hydrating into a div uh you know with an ideal app and that's because the entire you know the template all the html is going to come from uh from jsx from react and we'll see that in the the root the root component here in a moment uh yeah so let's start at the root component so every file basically exports a default uh default function um which is basically going to be the component that comes out of that file right so the root one is a bit special because it happens outside of the roots directory this is basically the entry point but the rest of them will happen inside the roots and the way this works is basically using react router and you can see inside here if i just quickly show you you can see this outlet which is a react router thing which basically means if the url matches any other any other path you can just render it in here and the paths are going to be determined by the the naming conventions of the of the files and the directory structure so we'll look into that in a in a second so here we export uh default function app so this is basically what's going to be rendered and if we look at the the document here and this is what we mean by you know you have access to the full templates we're actually you know rendering the html ourselves we're rendering the the head tag the body um all the links everything is completely controlled here so we don't need to you know inject things at runtime using you know react helmet you know different dependencies it's all done within the um within the application here which is it's actually quite powerful um there are a few other things going on here from uh remix and this is basically ways to to collect all the additional meta tags and links from the the child components and we'll see those in a second and that's it i don't want to go too much details there um cool so let's have a look at basically a few things here um there are in remix there are basically a few functions that you can export and um these specific functions will be picked up by remix and this is basically how you you control the behavior in the state of the application right so the default function and these two here is basically this is what we want you to render from this from this file and that's in this case the root uh if it's an index inside the root that means it's just you know a slash the the default uh function is basically what we want you to render if your file then has um well i guess let's go through them if your file has a links function like this you're basically returning a list of styles that you want to add right and each different route can add its own styles and when that route is removed the styles are also removed and the styles are exposed like this in in this case it's just an array you have the um you can see here it's a style sheet and we've got the styles url which is just an import from a css file so that actually returns a url and then in terms of how does it actually come into the document you can see down here uh this links here is basically what goes in and fetches that similarly if you define a meta function i think there is one inside this index here if you define a meta function you're basically wanting to add meta tags when this root or when this file is loaded so in this case this is going to be loaded at localhost 3000 just a slash because it's an index therefore the meta will be um basically what you see here so actually i've i've actually got this running so let me just uh rerun this just so you can show you so you've got the scripts so i'm going to run remix dev to run this and we can actually have a look at these uh these meta tags while we're doing this so you can see here we're at slash you can see the remix starter which is this here and it's going to be a description there as well so that's fine so that's uh links that's we've looked at meta so next up basically we have uh loader which you can see here and this is basically a way to to fetch data and the most important thing to know about this loader function is it runs on the server not on the client so you when your request comes in for a specific page this loader function will get hit it executes anything you want here maybe you want to do a api fetch you want to access a database and then wherever you return here will be accessible to the um to your component right so the way it's accessible is by using this use loader data so we have a loader up here and whatever we return and this remember this is getting execute on the server basically will be accessible to your app through the user loader data function so we can see data here it's got the date which comes from the new date which is basically being rendered on the page just like that there's another one for actions which we'll go into in a moment when we create another route so they've not done that here by default and then the final two at the bottom here are basically error boundaries so what to do when your app uh when something goes wrong so either if i go into a page that doesn't exist so this is going to return off you know 404 so you can kind of see that on the on the network tab if i jump over to network here hopefully you can see that um this is returning a 404 let's just bring that up um there we go 404 so that is going to get caught in this catch boundary and then you can you can get access to the uh to the error details and then you can basically return wherever you want in this case we're again returning the full document we're updating the title the you know the page and then if there's something that you this is basically for anything that's an expected error if there's none except unexpected errors uh you know for example an internal server or something that you know it's completely broken or or basically anything that comes out of this switch statement as well for for the expected errors it's going to run into this error boundary and again you um yeah you just uh update the uh the jsx there with whatever you want you've got full access document and you just display that so um another thing to note here is this is at the root level but you can add one of these to any of your child or layouts or components so you know in this case if an error happens the whole page is going to go but you might only want you know the error happened to a specific component or a child route so that's all you know all of these can be exported in basically any any route that you have so one of the final things i want to do is let's add basically let's add a root uh a couple of roots and let's just have a look at the the actions and we'll see what one pretty cool thing about this so and to add a root let's say we wanted to add something called create right that doesn't exist yet so i'm going to go over to roots new file i'm just going to do create dot tsx and all we need to do is basically export a function so export default function create and let's just return create here there we go so you can see straight away let me just pop this all the way down you can see that the create page now exists um and all we have to do is yeah export a default function there so in this create so what if we wanted to do a mutation what if we wanted to send you know add a form send something to it to the server well let's do that here in fact let's do that in a child child root that might be a bit better so if you want to create child roots right what you would do is you would add the outlet component so outlet here basically saying let's just close this basically saying any child components of create create slash anything else and uh basically display here so right now we don't have anything which is fine but we're going to do in order to get that to work you're going to create a directory with the same name as the existing root so a create directory so this is the main create it has outlet for its nested components and all of those are going to live inside here so within here we're going to have an index tsx index tsx is basically just create slash right and um yeah this here is an example of the the uh the error boundary getting caught here and it's got quite nice error messages as well so it's telling you hey go add a component to this so let's add a default component to this let's call this create index um and then we're just going to say index here and hopefully that will see so we'll see our create from the top level and then we have the index from the one below so instead of this h1 here oops what we're going to do is we're just going to create a form here let's remove this guy so we're going to do a form and we're going to turn off autocomplete because that drives me crazy sometimes and um yeah we'll just keep at that for now let's just add a input of type text so do type text so we're going to add some text and we'll give it a name of let's just say we're adding a title for something and then we might want to add a button to submit it right so let's do type and submit and let's call this one submit there we go cool so we have a form right this is basically this is a very simple html form no no javascript nothing kind of fancy going on here um you know the the default behavior of the web when you have a form and you type in something and you hit enter you can see at the top the it actually it it refreshes the page it you know it redirects it and it adds it to the to the url so there's something kind of magical going on there the web i'm going to go too much detail but all you need to know is that it's basically redirecting to the in this case the same the same url but it's actually adding the data onto the to the url as url parameters if i basically change this to method is equal to post instead of adding it onto the url like we saw there it's just gonna add it as a body so if i do something here it's not going to add it to the url but if you looked at the the network tab if you look at the body and let's let's just do that for a moment just to see that it's all working so if i bring this out here take this up let's clear our existing logs let's do something enter you can see that there's a create here and this was a post and you can see the body at the bottom title is equal to something now we've done that and you can see there's a error here and that's because remix is basically expecting you to handle that it recognizes that hey there's an action that's happened there's a post action that's happened um in this create route but we haven't handled it um so you can see did not provide an action route and this is where the action function i was telling you about earlier on um so if we export a function called action and i think it's called action function that should hopefully create so so now that error is gone and basically what we get inside here we get a few things um one of the things we get is the request right and that request is basically exactly what we what we just saw so um what we can do usually what you do here is you return a redirect so you may redirect once you submit a form you might want to redirect somewhere you might redirect to the exact same page or you read it somewhere else so in this case let's just redirect to well actually let's redirect to the title so we can get this request is unknown again we're talking uh well let's see if we can jump into here we're talking the web fundamentals so this is just a function here that returns a promise with a response so here this function just gets a request also gets the parameters etc this request is just the web fundamentals request so we know exactly what that's going to look like and we can actually um we can await the we know that we can await the request text so we can do request dot text and we can actually wrap that in um we can basically wrap that in you know url search params we can do whatever we want with that let's turn this async now i think for now what we're going to do here is we can just do const title is equal to body dot get i think i do need to wrap that in a url search branch so new url search params wait text and then we can do body.get title so that's the title here so all i'm going to do is i'm going to redirect to the disk to the title right so if i now come back here and i do hello and i hit enter what it's done is it's redirected me to slash uh hello and if i i think if i just remove this title i wonder if it is relative let me just double check this title hello no okay so let me do slash create slash title so i'm going to redirect it to create slash hello or wherever it is um which of course there isn't a page and that's just to show you hey we can now just add another another route and because this isn't kind of a hardcoded route this is where we need to add a parameter and the way you do that is you add a dollar sign and then we can name this whatever so i'm going to do title dot tsx so no the dollar sign there basically means is that kind of a parameter going on here and we do the same as we usually do so we're going to export a default function so i'm going to call this uh create let's call this title let's take all this away um h1 title and how do you get the uh the parameter well if i just uh add this here well we can get it through our loader so if we go back to any loader that we have so let's just take this loader here and we add the loader in to this route the loader if you remember provides a few things params request contacts it provides the params here the parameter is going to be the title as noted by our directory or file system and we can just return in this case i'm actually going to return the parameters here i don't need to do anything fancy so i'm going to return the params which is basically going to return title an object with title and a value wherever this is going to be in this case hello so again we can just take the data or from use loader data there we go to make sure that this gets imported and if you are you know playing around with typescript of course you can type this so you can say title string and that way you can just uh destructure that so title and let's just add in title there we go so now hopefully here we're going to see hello this is a subroute of create the way we got here was from the create root we typed in something inside here we hit enter or we hit submit it posts it to the create file which is basically again all web fundamentals all html um going on here and then it redirects to this page because i've added a redirect with the title and we load that now i think that's basically the the fundamentals on most of the building blocks of remix at this point now there's a there's a lot of kind of intricate things going on here which is you know each thing in itself is actually quite quite exciting and then the implications of it is quite big but one of the things um yeah another thing for example one final thing i want to show is if i go back to the root here and this is uh one of the cool things i can basically remove this script tag and again because we're using the web fundamentals this script is basically what adds react as you know remix all the javascript on the client side at this point again i'm not doing anything fancy here so of course if you're building up a big application you're gonna have javascript but at this point um i don't need any javascript on the page usually you do when you're doing mutations because you know you might instead of just doing the the where is it the form uh if i go to create index the form you might have the on click and you had some javascript and you prevent the default behavior you're basically preventing the the fundamental behavior of the web and then you know you do things which has always made sense to everyone but basically instead of doing that we're using the fundamentals which means now if i clear this and i look at the network here um the same app is working right i can submit oops title and it all works but the main difference here is we're not actually loading any javascript at all so um this here is my uh it's my extension you can actually see if i go into the react developer tools it's not working it says hey there's no react on this page and that's because there isn't you know there is no react on this page i've removed the scripts this is purely html purely css all server side rendered so for things like blogs or static sites you know this is basically a great tool to have and if you want to then add you know a nicer developer experience you know add a few things there's still a few tricks up remixes sleeve to do that but of course you can then start adding javascript uh you know progressively for for progressive enhancement so um i think that's everything i wanted to cover and this is hopefully to you know cover the the building blocks and as you're looking at this you know when i when i see these things here it makes a lot of sense to me um i wonder if there's anything else you know i think i think that's everything i wanted to mention now this all makes sense to me um definitely a lot more than i've tried other things like you know gatsby and next and they didn't quite you know sit right with me this one definitely does but you know it's everyone you know it's your own choice whatever works for you so i definitely think this is one to look out for worth worth giving a go and it'll be available soon and it will be open source soon so hopefully a lot more more people will see it but yeah i think i'm gonna i'm gonna call it there so again if there's anything specific uh you wanna dive into let me know um but yeah thank you very much for watching have a good day and i will see you in the next one [Music] you

Channel: Redhwan Nacef

Views: 804

Keywords: Software engineer, software developer, how to, how to code, coding, programming, testing, java, javascript, learn to code, learn coding, learn programming, software, technology, computer science, YouTube, Redhwan Nacef, Remix, Remix Run

Id: N0sZzevVwn8

Length: 21min 38sec (1298 seconds)

Published: Tue Nov 16 2021