Create React App jQWidgets

This tutorial will show you how to use Create React App along with the React Components by jQWidgets.
Please, follow the instructions below:

I. Install the Create React App globally, so we can have it's commands available:

npm install -g create-react-app

II. Create an Create React App application:

npx create-react-app my-app --typescript

III. Navigate to the application:

cd my-app

IV. Install the jQWidgets dependency:

npm install jqwidgets-scripts --save--dev

V. Go to src folder, open App.tsx and replace it content with:

import * as React from 'react';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
 
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
 
class App extends React.PureComponent<{}, IBarGaugeProps> {
 
    constructor(props: {}) {
        super(props);
 
        this.state = {
            tooltip: {
                formatFunction(value?: number | string): string {
                    return 'Year: 2016 Price Index:' + value;
                },
                visible: true
            },
            values: [10, 20, 30, 40, 50]
        };
    }
 
    public render() {
        return (
            <JqxBarGauge 
                width={600} height={600} max={60} colorScheme={'scheme02'}
                values={this.state.values} tooltip={this.state.tooltip} 
            />
        );
    }
}
 
export default App;

VI. Run the Create React App development server:

npm start