Here is a short "quick start" guide, hope it helps
Create a New React Project
Open your terminal and run the following command to initialize a new React application:
npx create-react-app my-app
cd my-app
Install the Gantt Package
Install the wx-react-gantt package using npm:
npm install wx-react-gantt
Update src/App.js
Open src/App.js in your code editor and modify it as follows:
import React from 'react';
import { Gantt, Willow } from 'wx-react-gantt';
import 'wx-react-gantt/dist/gantt.css';
const tasks = [
{ id: 1, text: 'Task 1', start: '2021-01-01', end: '2021-01-05' },
{ id: 2, text: 'Task 2', start: '2021-01-03', end: '2021-01-10' },
{ id: 3, text: 'Task 3', start: '2021-01-08', end: '2021-01-15' },
{ id: 4, text: 'Task 4', start: '2021-01-10', end: '2021-01-20' },
];
function App() {
return (
<Willow>
<Gantt tasks={tasks} />
</Willow>
);
}
export default App;
thats it, after that you can use npm start to run the app and see the gantt in the browser.
If you are using Gantt 1.3.0 ( latest React version on December 2024 ), then you can have a compatibility issue, if you will try to use it with React 19. The wx-react-gantt@1.3.0 package is designed for React 18 and due to breaking changes in react-dom can't be used with React 19
