Getting Started with a Remix App using React Components

This guide helps you create a simple Remix application using the React framework along with Syncfusion^® React components.

Prerequisites

System requirements for Syncfusion^® React UI components

Create Remix application

To set up a basic Remix app, run the following command:

npx create-react-router@latest

This create-react-router@latest command initializes a new Remix application using the latest available packages.

When you run this command, you'll be prompted to answer a few configuration questions:

dir     :  Where should we create your new project?
              quick-start

              ◼  Using default template See https://github.com/remix-run/react-router-templates for more
              ✔  Template copied

git     :  Initialize a new git repository?
              No

deps :  Install dependencies with npm?
              Yes

Then navigate to the project directory by running the following command:

cd quick-start

Add Syncfusion^® React packages

All the available Syncfusion^® React packages are published in npmjs.com public registry. To use the Numeric TextBox component, install the @syncfusion/react-inputs package:

npm install @syncfusion/react-inputs --save

The --save flag ensures that the Inputs package is added to the dependencies section of your package.json file.

Add CSS reference

To apply Syncfusion^® themes, import the necessary CSS files in the ~/app/routes/home.tsx file:

import '@syncfusion/react-base/styles/material.css';
import '@syncfusion/react-inputs/styles/material.css';

Add SSR configuration

To use Syncfusion^® packages with Server-Side Rendering (SSR) with Vite, you'll need to update the vite.config.ts file. This configuration ensures that Syncfusion^® packages are properly transpiled for compatibility with the server environment.

import { defineConfig } from "vite";

export default defineConfig({
  ...
  ssr: {
    noExternal: [/@syncfusion/]
  },
  ...
});

Add the Numeric Textbox component

You can now start using Syncfusion^® React components in your Remix application. To get started, add the React Numeric TextBox component to the ~/app/routes/home.tsx file using the following code:

import '@syncfusion/react-base/styles/material.css';
import '@syncfusion/react-inputs/styles/material.css';
import {  NumericTextBox } from "@syncfusion/react-inputs";

export const meta = () => {
  return [{
    title: "Syncfusion Numeric Textbox Remix",
    description: "Syncfusion Numeric Textbox with Remix",
  }];
};

export default function Index() {
  return (
    <div style={{ margin: '15rem' }}>
        <NumericTextBox
            placeholder="Enter value"
            width={250}
            defaultValue={20}
        />
    </div>
  );
}

Run the application

To run your Remix application in development mode, use the following command:

npm run dev

To prepare your app for deployment, build it for production using:

npm run build

Then run the app in production mode:

npm run start

The output will appear as follows: