Creating a Remix Project

In this tutorial, we will guide you through the process of creating your first Remix project using TypeScript. We'll start with setting up the project using npx, and then create a simple application that demonstrates the use of a Loader and an Action function in Remix.

1. First, let's create a new Remix project using the following command:

npx create-remix@latest

2. When prompted, choose the "TypeScript" option for the language and select the appropriate deployment target. For this tutorial, you can choose "Remix App Server".

3. Now, navigate to the created folder using:

cd your-project-folder

4. Install the necessary dependencies with:

npm install

5. Now, open the routes folder in your project directory, and create a new file called example.tsx. We'll create a simple form that takes user input and displays it on the page. Add the following code to the file:

// src/example.tsx
import * as React from 'react';
import { Form, useActionData, useLoaderData } from '@remix-run/react';
import { ActionFunction, json, LoaderFunction } from '@remix-run/node';

type LoaderData = {
  message: string;
};

type ActionData = {
  message: string;
};

export const loader: LoaderFunction = async () => {
  return json({ message: 'Hello, Remix!!!' });
};

export const action: ActionFunction = async ({
  request,
}: {
  request: Request;
}) => {
  const fd = await request.formData();
  const message = fd.get('message') ?? 'No message provided';
  console.log({ message });

  return json({ message });
};

const Example = () => {
  const data = useLoaderData<LoaderData>();
  const actionData = useActionData<ActionData>();

  return (
    <div>
      <h1>{data.message}</h1>
      <h3>{actionData?.message}</h3>
      <Form method="post">
        <input type="text" name="message" placeholder="Type a message..." />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
};

export default Example;

In this code, we're exporting a Loader function that returns the initial data for our component. We also have an Action function that handles form submissions and returns the new message.

6. Finally, start the development server with:

npm run dev

Now, open your browser and navigate to http://localhost:3000/example. You should see the initial message displayed, and you can type a new message into the input field and submit the form to update the message.

That's it! You've successfully created your first Remix project using TypeScript, complete with a Loader and an Action function. You can now continue building your application by adding more routes, components, and functionality.

Working Example

Simple Remix - StackBlitzStackBlitz