Generate a React application

Preface

This topic provides an introduction to generating a React application using Ignite UI CLI and provides an overview of the components and features present in the generated codebase.

Creating Ignite UI for React applications

To create an application that is configured to use the Ignite UI for React controls, you need to provide the desired framework (--framework=react) you want, as well as the type of the project (--type=igr-ts). The following is an examples of how to use the new command to create an Ignite UI for React application:

Framework	Command
React	ig new newIgniteUIReact --framework=react --type=igr-ts To create a project using React components, be sure to type --type=igr-ts. Omitting this will create a project that uses the IgniteUI for Javascript React Wrappers.

After the project is generated, navigate to your project directory:

cd newIgniteUIReact

And install the project's dependencies using npm or Yarn:

npm i

yarn

You now have a basic React application set up with Ignite UI CLI. You can start exploring and customizing it according to your needs.

Using Vite

The React application generated by Ignite UI CLI utilizes Vite as the build tool. Vite offers fast development and production builds, providing an efficient development experience with features like hot module replacement (HMR) during development.

Exploring the generated app

Running the application

In order to run the application:

npm run start

Build and Deployment

In order to build the project:

npm run build

Testing

In order to run all tests:

npm run test

The Vitest test framework is used for testing. It shares the same config file as Vite (vite.config.js) with the test options configured as below:

test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
    deps: {
        inline: ['vitest-canvas-mock'],
    },
},

The config should also resolve the mainFields as module:

  // fix "require() of ES Module.." Error
  resolve: {
    mainFields: ['module'],
  },

For some tests a "window is not defined" error is thrown (https://github.com/vitest-dev/vitest/issues/1293#issuecomment-1560660670) as Vitest runs in nodee. Fixed by following definition in the vite.config.js:

define: process.env.VITEST ? {} : { global: 'window' }

The components are rendered in the tests by the render method of the React Testing Library.

In the setupTests.ts we need to import the ResizeObserver from the resize-observer-polyfill as the observer is not defined on a window: https://github.com/jsdom/jsdom/issues/3368. And also import the vitest-canvas-mock dev dependency. Otherwise canvas getContext() not implemented error is thrown (https://stackoverflow.com/questions/48828759/unit-test-raises-error-because-of-getcontext-is-not-implemented). Ultimately, the setup file looks like this:

import '@testing-library/jest-dom'
import 'vitest-canvas-mock'
import ResizeObserver from 'resize-observer-polyfill'
global.ResizeObserver = ResizeObserver

Routing

Routing in this app is achieved using React router. This approach is using a separate file routes.json to define the routes and their associated components and then dynamically load them.

[
  {
    "path": "/",
    "componentPath": "./views/home",
    "text": "Home"
  }
]

Vite Configuration

If you need to customize Vite's configuration for your project, you can do so by modifying the vite.config.js file. Refer to the Vite documentation for detailed information on configuration options.