Blog

React is a very popular library for front-end development. It makes it easy to build state driven views and it efficiently handles DOM updates. React is component-based and in this blog post we are going to explore how to wrap Ext Gantt as a reusable React component.

reactdone

Prerequisites

In this guide we will use React with JSX. We are going to load React and Babel from unpkg.com (a CDN) and Ext Gantt from bryntum.com (our trial version), so no installation is required.

Add index.html

We are going to create a React app and as stated in the Prerequisites above we need to load some external libraries. Start by creating an index.html file with the following contents:

We now have an empty page that includes both React + Babel and ExtJS + Ext Gantt. It is time to wrap the Gantt chart as a React component, which will make it easy to use in React apps.

Create a React component

To keep the code clean we are going to create the component in a separate file. Create a file named gantt.jsx and include it in index.html below the div tag:

Add the following to gantt.jsx:

The code above defines a React component called Gantt. It renders a div to the page (in the render() method which React calls to display the component). The div is then used as a container for our gantt chart, which is created in componentDidMount() (called by React after render).

The gantt chart includes some basic configurations for width, height etc. as well as also two stores which loads data from json files (in the zip if you download the example). In case we need to access the gantt chart later, it is stored in the React components state using setState().

Create a React app

Lets make a simple React app to try our new Gantt component out. Start by adding a script tag using Babel to index.html, below the script tag for gantt.jsx:

Now add the following lines to the script tag:

GanttDemoApp is a React component that at this point only contains a Gantt component (our gantt chart). It is rendered to the page using ReactDom.render(). If you open the index.html file in a browser on a web server, you should see the following:

reactpart

Configuration using Props

All settings in the Gantt component above are hard coded. In React you use Props to allow components to be configured from the outside. Let’s add a few simple Props to the Gantt component, you can of course add more later. First add the following to the top of the Gantt component, just below React.createClass():

The Props with isRequired at the end have to be specified by the user when using the component, others are optional. Now we use the Props as settings in the gantt chart by changing the following lines:

To:

Props can now be set on our Gantt tag to easily configure the component. Change the tag to:

Interacting with the Gantt component

We are going to try two kinds of interactions:

  • Relaying events from the gantt chart to React
  • Exposing functions on our React component
Relaying events

Ext Gantt is based on ExtJS that has its own event system. We want to be able to take action on those events in our React app and therefore need to relay them somehow. A simple solution is to use callbacks as Props and then call them from an internal event listener. Lets try it out, add the following listener to the bottom of the config object in componentDidMount() in Gantt:

What we added is an event listener for the gantt chart event taskclick. When the event is fired we check if we have a callback (onTaskSelect()) in Props and the call it with information about the task that was clicked. Now add the prop to the React apps Gantt tag (in bold below) and a function to handle the event to the app (also in bold):

Exposing functions

When creating the Gantt component we stored the gantt chart in the React state, which we can access from the outside to manually reach Ext Gantt member functions. But a better approach is to add functions to the Gantt component which does that for us, making it easier to use. As an example let’s add a function to add new tasks, put the following code before render() in the Gantt component:

To be able to access it from our React app we are going to add a ref to the Gantt component. Refs give us easy access to child components. At the same time let’s add a button to trigger the function. Modify the tag to match this (new in bold):

Now add a handleAddClick() method to the React app, above the render method :

That’s it, clicking the button calls handleAddClick() which uses refs to get the instance of the Gantt component and then calls addTask() on it.

Taking it further

Please download the example and check the source to see some more Props and also how to create a Column component used as a child to our Gantt component for configuring which columns to show. Feel free to extend it with the Props, events and functions you need for your app.

View live example: http://www.bryntum.com/playpen/react
Download source: http://www.bryntum.com/playpen/react/react.zip
Learn about React: http://facebook.github.io/react/

Happy coding!


Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>