React Samples

You can find the React Samples in the following path,

<install path>/PlatformSamples/React/Samples.

NOTE: You can also find the optional React Visual Studio project or solution in the following path,

<install path>/PlatformSamples/React/GanttInReact.csproj.

How to run the React Sample

You can run the React Gantt sample using NPM(cmd), Visual Studio 2017 versions or Visual Studio Code. For all these 3 approaches, you need to first use npm to install the dependent 'node_modules' as in the steps below. (The 'node_modules' package dependencies are already specified in 'package.json' file.)

Also, make sure to update your npm to latest version(Use "npm version" to determine your version). To update to the latest, use cmd line: "npm install npm@latest -g".

Steps to run the React sample using NPM:

1. Browse to the project directory (..\PlatformSamples\React) in command prompt using "Run as administrator" option.

2. Type "npm install". This will install the dependant modules in the node_modules folder.

3. Run "npm start".

4. The sample automatically runs in default browser. Otherwise, copy the port and paste in any browser.

Steps to run the React sample using Visual Studio 2017:

1. Install webpack and webpack-cli globally by using the "npm install webpack -g" and "npm install webpack-cli -g".

2. Install 'node_modules' package (Step 1 and Step 2 from NPM step above)

3. Then open '.csproj' with Visual Studio 2017 from project directory and run it as usual.

Steps to run the React sample using Visual Studio Code:

1. Open Visual Studio Code IDE

2. Import React gantt project using File --> Open Folder

3. Open command window using View --> Integrated Terminal and select TERMINAL tab

4. Then follow the Steps 2 to 4 from NPM step above.

React Gantt Structure and Installation

The React Gantt package is available in <install path>/PlatformSamples/React

Create your project directory and structure it as you need. Ours looks like this,

├── Src

│ ├── ResourceStrings

│ ├── Scripts

│ │ ├── jquery-ui-1.12.1

│ │ │ └── jquery-ui.min.js

│ │ ├── Utils

│ │ │ └── date.js

│ │ ├── jquery-3.2.1.min.js

│ │ ├── jquery.layout-latest.min.js

│ │ ├── VW.Grid.1.min.js

│ │ └── RadiantQ-jQuery.Gantt.7.0.trial.min.js

│ ├── Styles

│ │ ├── External

│ │ ├── Images

│ │ ├── jQuery-ui-themes

│ │ ├── VW.Grid.css

│ │ └── radiantq.gantt.default.css

│ └── React_Components

| ├── GanttControl.jsx

| └── FlexyGantt.jsx

├── index.html

├── package.json

├── SampleBrowser

├── Samples

├── DataSource

└── webpack.config.js.

The React Gantt files can be listed as follows.

package.json.
Index.html.
webpack.config.js.
Src folder.
Samples folder.
DataSource folder.

package.json

The 'package.json' file specifies the project name, description and React, Webpack and Babel packages which can be installed during npm installation.

Configuring Webpack

Here, we set up webpack for our React Gantt by adding desired config in webpack.config.js file.

const path = require('path');

const webpack = require('webpack');

module.exports = {

entry: {

// Here, Webpack to start bundling our app at following paths.

GanttControlSkeleton: './Samples/GanttControlSkeleton/GanttControlSkeleton',

FlexyGanttSkeleton: './Samples/FlexyGanttSkeleton/FlexyGanttSkeleton.jsx'

output: {

// Output our app to the dist/ directory with Sample name. (eg: dist/SampleBrowser.js)

path: path.resolve(__dirname, 'dist'),

filename: '[name].js',

publicPath: 'dist/'

devServer: {

inline: true,

port: 3000

// devtool enhances the debugging process

devtool: 'inline-source-map',

resolve: {

// add alias for application code directory

alias: {

RQSrc: path.resolve(__dirname, 'Src'),

Samples: path.resolve(__dirname, 'Samples'),

//Webpack uses loaders to translate the file before bundling them.

module: {

rules: [

{

test: /.jsx?$/,

loader: 'babel-loader',

exclude: /node_modules/,

//Configuring babel

query: {

presets: ['es2015', 'react']

}

{

test: /\.css$/,

use: [

"style-loader",

"css-loader"

]

{

test: /\.(png|jp(e*)g|svg)$/,

use: [{

loader: 'url-loader',

options: {

limit: 8000,

name: 'images/[hash]-[name].[ext]'

}

}]

};

webpack.config.js

To know more about webpack please refer the following link Webpack .

'Src' folder

The 'Src' folder contains the source files which requires to run our gantt such as ResourceStrings, Scripts, Styles and it also includes 'React_components' folder, which contains the "GanttControl.jsx" and "FlexyGantt.jsx", these components are exported their functionality and it can be used anywhere by importing the Component.

'Samples' folder

It contains the samples to illustrate our features and usage.

Samples

├── FlexyGanttSkeleton

│ ├── FlexyGanttSkeleton.jsx

│ └── FlexyGanttSkeleton.css

├── GanttControlSkeleton

│ ├── GanttControlSkeleton.jsx

│ └── GanttControlSkeleton.css

├── GanttControlCustomBinding

└── ResourceLoadView

It was briefly discussed in :-