# Using Wijmo with React

Learn how to use Wijmo components in React using this QuickStart Tutorial

## Content

Wijmo *components* for React allow you to use Wijmo *controls* in React JSX syntax. A Wijmo React *component* is a wrapper for the Wijmo *control* it represents. *Component* creates a Wijmo *control* behind the scenes, and provides a reference to the control instance via the **control** property. *Component* allows you to bind to the *control* properties and events declaratively in the React JSX syntax.

**Note** We highly recommend that you [download the Wijmo dev kit](https://developer.mescius.com/download/wijmo-enterprise) in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.

## Installation

Wijmo React components are shipped as a set of npm packages, one package per core library package, with the "react" word in their names. For example, "wijmo.react.grid" package represents components for controls from the core "wijmo.grid" package. The packages can be installed separately, or all together using the "@mescius/wijmo.react.all" group package:

```auto
npm install @mescius/wijmo.react.all
```

## Importing Wijmo components

With this setup, you can import Wijmo React modules and use the components they contain. For example, this code adds a FlexGrid component to App component's JSX:

```javascript
import * as React from 'react';
import * as wjcGrid from '@mescius/wijmo.react.grid';

const App: React.FC = () => {
  const [data, setData] = React.useState(getData());

  return <wjcGrid.FlexGrid itemsSource={data} />
}
```

## Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo css styles into
your application. The styles are shipped in the **@mescius/wijmo.styles** npm package.

You can load styles in your application's .jsx/.js root file, using this ESM import statement:

```javascript
import '@mescius/wijmo.styles/wijmo.css';
```

## More React Instrucitons

Refer to the [React Components](/wijmo/docs/GettingStarted/React-Components) topic for more details on using Wijmo in React applications.