In this episode of Weekly code quickies we will take a look at Remix the New, Free and Open source JavaScript Framework, and React Router V6
Watch it on YouTube:
Remix
What is remix?
Slide 2 – What is remix?
Remix is a New, Free and Open source JavaScript Framework,that promises to be faster, by loading data in parallel on the server and sending a fully formed HTML document.
Slide 3 – What is remix?
It is a full stack web framework, created by team behind React Router. They promise to provides snappy page loads and instant transitions with seamless server and browser runtime by leveraging distributed systems and native browser features. Built on the Web Fetch API (instead of Node) it can run anywhere.
Remix renders on the server
Slide 4 – Server-side rendering
Remix only dose Server Side Rendering (SSR) and it dose NOT do Static Site Generation (SSG) or Incremental Static Regeneration (ISR) like Next.js or Gatsby do.
Slide 5 – JAM Stack
Aldo (ISR) Incremental Static Regeneration are extremely popular with JAM Stack Applications witch are used to build fast and Easy to deploy web applications, they also have 1 disadvantage, witch is that the site needs to rebuild when ever there is new data or the data changes.
What are the benefits of Remix
Slide 6 – Benefits of Remix
What would be the benefits of using Remix. Because it is server side rendered it benefits from fast handeling of dynamic date witch in return will result in much faster page load. But because it is havely focused on server side rendering it will also need a server witch could be a drowback !
Slide 7 – What are the use case of Remix
Now you are probably asking your self what the use case of Remix is. Because of its server side focus, it is best suited for Applications that work havely with a lot of Requests and responses to and from a server. Having excellent dynamic data management it could easily load multi page applications. Going back an forth from the server with new data being constelty requested. But it would be most surtenly overkill for just a blog!
How to get Started with Remix
If you wish to check out Remix, then just had on over to remix.run or follow the link in the Show notes witch is down below.
here on there home page you will be greeted with a excelptional landing page where you can go through there documentation or click on Get Started witch will send you to there tutorial page where you can also check out there Joke App.
Slide 8 – React Router V6
Ok, that’s it for Remix now lets move on to our second topic witch is…
Slide 9 – What is React Router ?
React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering!
Until now the current version was version 5 but with the newest version V6 cumming out I fhtought it is time to create a short reminder on what react router is and what the changes for version 6.
Slide 10 – How to set up React Router 6
Assuming that you have your React App installed using npx create-react-app my-app, now in order to get started with react router, you will first need to add it as a dev dependence to your package.json using npm install react-router-dom@6 of yarn add react-router-dom@6. This will install the last stable version of react router!
Now that you installed React Router as a dependency, you will need to import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";. And I will go through each one of them shortly. Then wrap your app in a <Router> witch is actually the BrowserRouter!
Slide 11 – What is New to React Router 6 ?
The are actually just a couple of changes that a need to know about in order to use Version 6.
First is the upgrade <Routes> element instead of the <Switch> elements.
React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful. The main advantages of Routes over Switch are:
All <Route>s and <Link>s inside a <Routes> are relative. This leads to leaner and more predictable code in <Route path> and <Link to>
Routes may be nested in one place instead of being spread out in different components.
In order to use v6, you’ll need to convert all your <Switch> elements to <Routes>.