How to use Ignite UI components with React

Ignite UI Team / Friday, November 4, 2016

Great news, folks! With the release of Ignite UI 2016.2 our toolkit is available to use in your React websites and applications! Combining the rich and powerful Ignite UI controls with the great performance of React will boost your productivity and will help you in building great user experience applications.

What is React?

React is an extremely popular library for creating user interfaces that has already conquered its place in the world of the modern-day web development, the main reason for that being the fast rendering of the updated components that React provides because of the way it manages its Virtual DOM. More info on why React was created and what makes it different than all the other libraries out there can be found in this article.

Using Ignite UI controls with React

If you want to use the Ignite UI controls in your React application, you should first add the references to React, jQuery and Ignite UI source files.

Doing this will allow you to use the Ignite UI components in your app.

Here is an example of using an igGrid inside a React app. First we create the data source that the igGrid will use:

Then we define a new igGrid React component using React.createClass. Inside the getInitialState function we can define the states that the igGrid will use:

Then, inside the render function, we initialize the igGrid component.

*Note: The values that are assigned to the options of the igGrid can be literals that are enclosed in quotation marks (‘primaryKey’ option in our example) or can be JavaScript values (‘dataSource’ option in our example).

As you can see, we are using JSX syntax. You can use React without JSX but we would recommend you to give JSX a try as this will make your code look simplified and more readable for your non-technical colleagues (designers, technical writers, etc.) and even customers. But there are also more serious reasons to use JSX. For example, JSX can prevent injection attacks as, by default, the React DOM is escaping any values embedded in JSX before rendering them. If you are new to JSX, we can recommend you this article where the guys at Facebook give a more detailed overview of the syntax extension.

Now let`s get back to the code. Maybe you`ve noticed something interesting in the last piece of it? While setting up the Selection feature of the igGrid we are using this.gridRowSelectionChanged but we haven`t defined such a function inside our code. We will place this function just below the render() function of our class. In our example, we will get the id of the selected row and will update the selectedRowId that we`ve defined in our getInitialState() function with it. Here is what our new function will look like:

At the end of our React.createClass helper we provide the main component which contains the igGrid as the first argument of the ReactDOM.render() method and the main element that you should have created inside the body of your document as the second argument.

After this step your application will be ready to use. You can run it inside your favorite browser and you should see the igGrid with Selection feature enabled.

You can find the code of the example that we went through together below this post. And if you want to go deeper and see some real life examples of how the different Ignite UI components can work together using React, you can check the more advanced samples.

React_Sample.html