React

This document shows you haw you can create an FlowChart JS React project.

1. Create a new project:

                  Copy
   npx create-react-app flowchart
                   

2. Go to the project root folder:

                  Copy
   cd flowchart
                   

3. Install FlowChart JS:
   
   • Download and extract the installation package.
   • Add flowchart.js in your project \src\ folder.
   
   
4. Create file mychart.js in the src folder with the following content:

                  Copy
   import React, { Component } from 'react';
   import FlowChart from "./flowchart.js";
   
   export default class Tree extends Component {
   
       constructor(props) {
           super(props);
           this.divRef = React.createRef();
       }
   
       shouldComponentUpdate() {
           return false;
       }
   
       componentDidMount() {
           this.chart = new FlowChart('#chart', {
           });
   
           this.chart.load(
               {
                   nodes: [
                       { id: 1, templateId: 'startEnd', x: 400, y: 150, text: "Start"},
                   ]
               }
           );
       }
   
       render() {
           return (
               <div id="chart" ref={this.divRef}></div>
           );
       }
   }
                   

5. Change app.js as follows:

                  Copy
   import React, { Component } from 'react';
   import FlowChart from './mychart';
   
   export default class App extends Component {
       render() {
           return (
                   <FlowChart />
           );
       }
   }
                   

6. Add the CSS in the index.css file:

                  Copy
   #chart {
       height: 700px;
       width: 700px;
   }
                   

7. Start the project:

                  Copy
   npm start