{"id":42,"date":"2022-11-08T00:43:19","date_gmt":"2022-11-08T00:43:19","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/?p=42"},"modified":"2022-11-08T00:43:19","modified_gmt":"2022-11-08T00:43:19","slug":"remix-rules","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/2022\/11\/08\/remix-rules\/","title":{"rendered":"Remix Rules :)"},"content":{"rendered":"\n<p>In my limited time of front-end development \u2013 which is not a lot considering that I am mostly a back-end developer \u2013 I\u2019ve had a love hate relationship with React.\u00a0 Overall React can be confusing, but it is a very powerful front-end framework that allows for the componentization of things so that they can be reused.\u00a0 This is great because software engineers don\u2019t want to type more than they must.\u00a0 This also allows for single page websites to be created pretty quickly and allow for state to be handled on the fly.\u00a0 If you want to make a website that calls a lot of back-end sources, it is nice.<\/p>\n\n\n\n<p>The problem is that there is a strong emphasis on single page websites, which is not always what a developer wants to create.&nbsp; Routing of different pages is possible, but its long complicated, and you must deal with the previously mentioned state change functions from firing in every single page.&nbsp; For example, if you have a blogging website that uses a state function to get all the blogs for a page, it might end up trying to check the blogs on every page, even if you don\u2019t want that.&nbsp; This can be fixed, but you can see how this can become a tangled web fast.<\/p>\n\n\n\n<p>For example, below is a React route switch for different pages.\u00a0 This would serve up the Home component on route \/ and the Second component on route \/Second<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"230\" height=\"157\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5939\/files\/2022\/11\/Code_hRHjMVw4TD.png\" alt=\"\" class=\"wp-image-43\" \/><figcaption>Example of routing in React without having to deal with state.<\/figcaption><\/figure>\n\n\n\n<p>Now you could imagine that since this gets pretty annoying fast, there are libraries and tools out there to speed up this process, and make it less confusing.\u00a0 Which is where Remix comes in.\u00a0 Remix is a framework built off React that handles a lot of this routing for us.\u00a0 Below is an example of how Remix handles routing, routes are done at the folder level, so to get the main Jobs page in this example the route would be \/Jobs, where the index component is automatically served up.\u00a0 Any other components for the Jobs page are then pulled from the components folder.\u00a0 <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"231\" height=\"438\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5939\/files\/2022\/11\/Code_9LHZWO4FO2.png\" alt=\"\" class=\"wp-image-44\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5939\/files\/2022\/11\/Code_9LHZWO4FO2.png 231w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5939\/files\/2022\/11\/Code_9LHZWO4FO2-158x300.png 158w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/><figcaption>Example of routing in Remix with components<\/figcaption><\/figure>\n\n\n\n<p>This is more in line with normal website development methods where the pages are served up page by page, but combines it with everything good React has to offer. This means that we have the benefit of using React states without having to keep our site as a single page site. Because of this, we decided to use Remix for our Job Tracker application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my limited time of front-end development \u2013 which is not a lot considering that I am mostly a back-end developer \u2013 I\u2019ve had a love hate relationship with React.\u00a0 Overall React can be confusing, but it is a very powerful front-end framework that allows for the componentization of things so that they can be [&hellip;]<\/p>\n","protected":false},"author":12687,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/users\/12687"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":2,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/posts\/42\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/alyssacomstock\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}