React+JSX tutorial
How to use our JavaScript based Gantt chart components in a React app with JSX support.
Introduction
DlhSoft has developed Gantt Chart Hyper Library using pure JavaScript (and has also introduced TypeScript definitions for its components later.) That means the components can also be used when building Web apps using higher level frameworks, such as React (at the time of writing this text — version 16), and we have defined wrapper components to help you out reaching this goal.
A small part of this tutorial (hosting the Web app for local testing) assumes that you are fine with having Python3 or Node.js and other Web tools installed on your system. If you're running even newer versions of the referrenced software (that may have been recently published), don't worry, most probably all the commands will continue to run with very little or no changes at all. Also note that commands presented in this tutorial are for Windows based development systems, but macOS and Linux can also be used (and differences are indicated wherever they matter.)
Setting up your React app
In this tutorial we'll show how you can create a React app and then integrate DlhSoft Gantt chart components in its code. If you already have a React app and experience with the tools, see technical documentation instead.
Note that a React app can be created using a npx command (npx create-react-app my-app), but here we'll simply create an app folder and some files in a more manual way.
-
Create an app folder
Create a folder to host the files of your app, running the mkdir command below in Command prompt (or Terminal) after you changed the path to your root projects folder (whichever you choose.)
Copy
cd projects mkdir my-app
-
Create index.html and app.jsx files
Use your preferred text editor to create the following files in the folder of your application.
Index.html
Copy
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GanttChartView sample</title> <!-- React. When deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <!-- In-browser Babel transformer, for demo purposes only. In production you should use JSX preprocessing instead of text/babel scripts. --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script> <script>var exports = {}, require = ()=>React;</script> <!-- Main app component --> <script type="text/babel" src="app.jsx"></script> </head> <body style="font-family: Roboto;"> <h1>GanttChartView sample</h1> <div id="app"></div> <script type="text/babel"> ReactDOM.render(<App/>, document.getElementById('app')); </script> </body> </html>
app.jsx
Copy
function App() { return <div>…</div> }
This is a very simple React app that would simply displays "…" on screen. Note that React apps can use JSX scripts that combine JavaScript and markup, and that they require Babel preprocessing. Using in-browser preprocessing (using babel-standalone, exports/require initializations as workaround to support import/exports in JSX files, and text/babel MIME type scripts) is fine for creating proof-of-concept apps like our sample, but you should use local preprocessing tools running on your computer upon building a professional app, i.e. set up a toolchain (see React documentation.)
-
Host and test the app
If you simply open index.html file in your browser from the local system (using file:// protocol), it will probably not work, i.e. you could see security related exceptions in the console (F12/dev tools.)
However, it should work well when the app is hosted on a Web server (and accessed with http:// or https:// protocol). To easily get and run a Web server for your app on your machine you can use Python3 or http-server tool for Node.js as indicated below. You'll then be able to access your app at http://localhost:8080 or http://localhost:8000, respectively.
Note, though, that since React and Babel libraries are loaded from external Web servers themselves, you will also need to have a running Internet connection at the time of starting the app. (The obvious alternative is to download and host those files locally as well.)
Copy
python3 -m http.server
Copy
npm install -g http-server http-server
Get DlhSoft components
Our pure JavaScript components are not enclosed in a high level package — but they are available for download as .zip or .tar files. This means that they will not update automatically, but this is, in our opinion, a more generic approach. You can surely download the most up to date archive file whenever you need to use a more recent build, however, and we encourage you to subscribe to our core product news feed to know when new features arrive.
-
Download libraries
You can either download DlhSoft components directly as a .zip file (as stated above) and extract it yourself wherever you'd like (to be saved for further reference), or you can use npm to get them into an node_modules subfolder as you may be doing with your other packages. The difference is that you point npm to an URL rather than a package name.
Copy
npm install @dlhsoft/ganttcharthyperlibrary
-
Determine which scripts you need
Open the extracted folder. In Windows, you can use explorer command, while on macOS and Linux open command should be used to view the contents of the destination folder. (Alternatively, you can run dir or ls commands to view the results directly in your Command Prompt or Terminal window; note that on macOS and Linux you should use slash / character to separate path parts, rather than backslash \.)
On Windows:
Copy
dir "node_modules/@dlhsoft/ganttcharthyperlibrary"
On macOS and Linux:
Copy
ls node_modules/@dlhsoft/ganttcharthyperlibrary
The files below are available for you to use in your React app. The appropriate core .js (and optionally .d.ts - TypeScript definition) files are needed for the React extension components to work. Other files are also available inside the folder, but you can safely ignore them.
Category Details Files Core JavaScript components Gantt chart, schedule chart, load chart
PERT chart, network diagramDlhSoft.ProjectData.GanttChart.HTML.Controls.js, .d.ts
DlhSoft.ProjectData.PertChart.HTML.Controls.js, .d.tsOptional UI enhancers Date-time picker, multi-selector combo box DlhSoft.Data.HTML.Controls.js, .d.ts Optional XML import/export Project serializer DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js, .d.ts React extensions Gantt chart, schedule chart, load chart
PERT chart, network diagramDlhSoft.ProjectData.GanttChart.React.Components.jsx
DlhSoft.ProjectData.PertChart.React.Components.jsx -
Copy the necessary files
The files in extracted folder may not be immediately available to use in your React app. You need to copy the files you need into one of your app's main folders, first. (We admit that if we'd have defined a JSON package files for our product this step would have been easier, but as previously indicated, we wanted to go with a more generic approach that wouldn't depend on any specific metadata in the archives to make things work.)
The most simple approach is to host DlhSoft files under the root app's folder. Copy the files using either Explorer or Finder, or at the command line prompt.
On Windows:
Copy
copy node_modules\@DlhSoft\GanttChartHyperLibrary\DlhSoft.ProjectData.GanttChart.HTML.Controls.js .\ copy node_modules\@DlhSoft\GanttChartHyperLibrary\DlhSoft.ProjectData.PertChart.HTML.Controls.js .\ copy node_modules\@DlhSoft\GanttChartHyperLibrary\DlhSoft.Data.HTML.Controls.js .\ copy node_modules\@DlhSoft\GanttChartHyperLibrary\DlhSoft.ProjectData.GanttChart.React.Components.jsx .\ copy node_modules\@DlhSoft\GanttChartHyperLibrary\DlhSoft.ProjectData.PertChart.React.Components.jsx .\
On macOS and Linux:
Copy
cp node_modules/@dlhsoft/ganttcharthyperlibrary/DlhSoft.ProjectData.GanttChart.HTML.Controls.js ./ cp node_modules/@dlhsoft/ganttcharthyperlibrary/DlhSoft.ProjectData.PertChart.HTML.Controls.js ./ cp node_modules/@dlhsoft/ganttcharthyperlibrary/DlhSoft.Data.HTML.Controls.js ./ cp node_modules/@dlhsoft/ganttcharthyperlibrary/DlhSoft.ProjectData.GanttChart.React.Components.jsx ./ cp node_modules/@dlhsoft/ganttcharthyperlibrary/DlhSoft.ProjectData.PertChart.React.Components.jsx ./
-
Reference core and extension scripts
Update index.html file (previously created in the root folder of your React project), referencing the DlhSoft core and extension script files that you need (in the HTML's head, after React library references, and just above the app.jsx reference.) Make sure that jsx script references are marked as having text/babel type.
Copy
<head> … <!-- DlhSoft Gantt Chart Hyper Library core --> <script src="DlhSoft.Data.HTML.Controls.js"></script> <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.js"></script> <script src="DlhSoft.ProjectData.PertChart.HTML.Controls.js"></script> <!-- DlhSoft Gantt Chart Hyper Library extensions --> <script type="text/babel" src="DlhSoft.ProjectData.GanttChart.React.Components.jsx"></script> <script type="text/babel" src="DlhSoft.ProjectData.PertChart.React.Components.jsx"></script> … </head>
-
Use DlhSoft components in your markup
To use Dlhsoft React components you simply need to place appropriately named elements in your markup/script files (defining the user interface of your screens), and set up the properties — items, settings, license, change — to the data you will also need to prepare for them in code. For example, replace App function in app.jsx file that you have previously created.
Copy
function App() { … return ( <GanttChartView items={items} settings={settings} license={license} change={onItemChanged} style={{minHeight: '388px'}}> … </GanttChartView> ); }
The elements that can be used are listed below, mapped to the specific components they reference.
Component Element Details GanttChartView GanttChartView Singe bar per row, e.g. project with tasks ScheduleChartView ScheduleChartView Multiple bars per row, e.g. tasks assigned to resources LoadChartView LoadChartView Allocations over time, e.g. resource load percents PertChartView PertChartView PERT diagram, e.g. tasks displayed as arrows NetworkDiagramView NetworkDiagramView Network diagram, e.g. PERT methodology -
Set up data
As mentioned in the previous step, you will need to also set up data for the component's properties in your code, e.g. as App function's preparation steps (or similarly, in the code of any other container component in your project.) To set up the items and settings, use the fields supported by the core component, as detailed in core product's technical reference.
Copy
function App() { var item1 = { content: 'My summary task' }; var item2 = { content: 'My standard task', indentation: 1, start: new Date(2012, 8, 2, 8, 0, 0), finish: new Date(2012, 8, 7, 16, 0, 0), completedFinish: new Date(2012, 8, 5, 16, 0, 0), assignmentsContent: 'My resource' }; var items = [ item1, item2 ]; var item3 = { content: 'My milestone', indentation: 1, start: new Date(2012, 8, 7, 16, 0, 0), isMilestone: true }; items.push(item3); … var settings = { … }; var license = "…"; // upon purchasing a product license from DlhSoft function onItemChanged(item, propertyName, isDirect, isFinal) { console.log(propertyName + ' changed for ' + item.content + '.'); } return …; }
Properties that you may provide values for (applying to all components) are listed below.
Property Details items Actual data to be presented (e.g. task or resource items, depending on the specific component, see technical reference) settings Customizations for the appearance and behavior of the component (see technical reference) license String value generated by DlhSoft License Manager tool upon purchasing a product license (to remove nag screens) change Function that would be called upon client side changes
In production
For production purposes you might (and should) decide to use an alternative (better) way to set up your project. You may start with a project folder generated with npx create-react-app in the command line interface. Pre-processing Babel scripts (JSX) is enabled by default in this case and to build and host the Web app you should simply run npm start command (and to test it, go to localhost:8000 in your browser.)
Note, however, that a project folder created this way has index.html file generated within public subfolder and since they should not be compiled as React, the core DlhSoft.*.js files should be also placed in that subfolder and referenced from the HTML file directly, while DlhSoft.*.jsx extensions should be imported from app.js and placed within src folder:
Copy<html>
<head>
…
<script src="./DlhSoft.ProjectData.GanttChart.HTML.Controls.js"></script>
</head>
…
</html>
Copyimport {GanttChartView} from './DlhSoft.ProjectData.GanttChart.React.Components';
…
return <GanttChartView …>…</GanttChartView>
TypeScript considerations
If you use TypeScript (such as by having created your project using npx create-react-app my-app --template typescript) you can use DlhSoft React component extensions by following these steps:
- Define Props interfaces for each component you need to use;
- Create props objects of appropriate Props type for each component instance you need to setup;
- Use {...props} syntax to initialize component instances in markup.
Copyinterface GanttChartViewProps extends RefAttributes {
items: any; settings: any;
license?: any;
change?: any; style?: any;
children?: any;
}
…
var props: GanttChartViewProps = {
items: items, settings: settings,
style: { height: '388px' }
};
return <GanttChartView {...props}>…</GanttChartView>