In React

React Gantt sample.

Import the react libraries and the "GanttControl" component from its desired path like this, 'RQSrc/React_Components/GanttControl.jsx'.

import * as React from "react";

import * as ReactDOM from "react-dom";

import GanttControl from 'RQSrc/React_Components/GanttControl.jsx';

import './GanttControlSkeleton.css';

export default class GanttControlSkeleton extends React.Component{

constructor(){

super();

this.anchorTime = new Date("2014-02-01T00:00:00-00:00");

}

GanttChartTemplateApplied(sender, args) {

var $GanttChart = args.element;

$GanttChart.GanttChart({ AnchorTime: this.anchorTime });

}

render(){

var height =

{

height: '495px'

};

return(

{/* passing Url,ProjectStartDate,GanttChartTemplateApplied as a props of GanttControl */}

<GanttControl Url= './DataSource/GanttControlSkeleton.json'

ProjectStartDate={this.anchorTime}

GanttChartTemplateApplied={(sender, args) => this.GanttChartTemplateApplied(sender, args)}/>

</div>

);

}

ReactDOM.render(<GanttcontrolSkeleton />, document.getElementById('container'));

GanttcontrolSkeleton.jsx

The ReactDOM.render method can render the "GanttcontrolSkeleton" component into the DOM. Here, the second argument "container" specifies the mount element. Mount element defined inside the "index.html".

This is illustrated in the following path:

In React : \PlatformSamples\React\Samples\GanttcontrolSkeleton\GanttcontrolSkeleton.jsx.