Load and Display Static Data with Remix loaders
The first thing you do is install Remix! In this course, you start with a barebones Remix set up. In many situations you will start with a Remix stack but this course starts from the beginning.
Installing Remix is easy though, so you will finish this lesson by being introduced to a core Remix feature: data loaders.
Remix loaders are functions that only run on the server so you are safe to connect to databases, make API calls, and anything else you’d expect to do on a server. The data you return from these functions will be received into your components through useLoaderData hooks.
We’ll see how to return static data from a loader and display it in a component. Along the way, TypeScript will complain about data that is coming into your component so we will fix that as well.
Instructor: [0:00] The first thing you want to do is initialize your remix project with the npx create-remix command, followed by the name of your project.
[0:10] After you execute the command, you will be asked to enter project information. Information like the template your app is going to use, where to deploy, whether or not to run npm install.
[0:29] Then, choose your preferred language, TypeScript or JavaScript. Now that you have Remix installed, you'll open up your project in VS Code.
[0:45] You can run the Remix development server with the command npm run dev in your console. Now that your server is running, go ahead and open your site in the browser at localhost:3000.
[1:03] Hop back into VS Code and you can get started on creating some of your own content. Open the index.tsx file inside of the app/routes folder. In this file, you should see the code for a default Remix project.
[1:20] In this next step, you're going to get into the meat of writing a Remix application. You'll kick things off by creating a LoaderFunction above the index component. You'll export const loader with the type of LoaderFunction returning an array with an object of title and body.
[1:45] Remix will run the LoaderFunction on the server, and any code executed here will be removed from the client-side bundle. You are returning a static array of post now, but in the future, the LoaderFunction is where you will connect to your database and make any other API calls you may need.
[2:06] Now, down in your component, you can call the useLoaderData hook to retrieve posts from your LoaderFunction that you just created. Inside of the JSX, delete the template code, and create a list item for each post in the post array.
[2:29] You'll type post.map, taking the post. For each post returning an LI where the key is post.title. Then a div with an h2 for the post title and a paragraph tag for the post body. Head over to your browser and you will see the post being rendered from the LoaderFunction.
[2:53] We're not quite done yet. In your code, notice the TypeScript error coming from the map function. TypeScript has no way of knowing what type your useLoaderData hook is returning. Squash that error by creating a post type.
[3:09] Create a type of post with an attribute title, which is a string and body, which is also a string. Now, pass that type to the useLoaderData hook. You just told TypeScript what type of data the useLoaderData hook is returning.
[3:29] When you hover the post, you can see its type is post. To review what you've learned, first, you created your application with npx create-remix. Next, you modified the route route file in your app folder by creating a LoaderFunction that returns static posts.
[3:52] Then, you rendered the posts inside of your index component, and created a post type to pass to your useLoaderData hook to tell TypeScript and VS Code what type of data is being loaded.