Перейти к основному содержимому

Интеграция с React

совет

Прежде чем читать эту документацию, ознакомьтесь с базовыми концепциями и шаблонами React. Для обновления знаний обратитесь к документации React.

DHTMLX To Do List совместим с React. Приведённые ниже примеры показывают, как использовать их вместе. Полный проект доступен в примере на GitHub.

Создание проекта​

Создайте новый проект React и установите зависимости.

информация

Перед созданием нового проекта установите Vite (необязательно) и Node.js.

Создайте базовый проект React или используйте React с Vite. В примере ниже проект называется my-react-todo-app:

npx create-react-app my-react-todo-app

Установка зависимостей​

Перейдите в директорию созданного приложения:

cd my-react-todo-app

Установите зависимости и запустите сервер разработки с помощью менеджера пакетов.

Выполните следующие команды с yarn:

yarn
yarn start

Выполните следующие команды с npm:

npm install
npm start

Приложение запускается по адресу localhost (например, http://localhost:3000).

Создание To Do List​

Остановите приложение и установите пакет To Do List.

Шаг 1. Установка пакета​

Загрузите пробный пакет To Do List и следуйте инструкциям в файле README. Пробная версия доступна только 30 дней.

Шаг 2. Создание компонента​

Создайте React-компонент для добавления To Do List с Toolbar в приложение. В директории src/ создайте новый файл ToDo.jsx.

Импорт исходных файлов​

Откройте ToDo.jsx и импортируйте исходные файлы To Do List. Выберите один из двух путей импорта:

  • PRO-версия, установленная из локальной папки — импорт из dhx-todolist-package
  • пробная версия — импорт из @dhx/trial-todolist

Пример ниже импортирует из PRO-пакета:

ToDo.jsx
import { ToDo, Toolbar } from 'dhx-todolist-package';
import 'dhx-todolist-package/dist/todo.css';

В зависимости от пакета исходные файлы могут быть минифицированы. В таком случае импортируйте CSS-файл как todo.min.css.

Следующий фрагмент импортирует из пробного пакета:

ToDo.jsx
import { ToDo, Toolbar } from '@dhx/trial-todolist';
import "@dhx/trial-todolist/dist/todo.css";

В этом руководстве используется пробная версия.

Настройка контейнеров и добавление To Do List с Toolbar​

Чтобы отобразить To Do List с Toolbar на странице, создайте контейнеры для обоих компонентов и инициализируйте их с помощью конструкторов. Пример ниже рендерит оба контейнера и инициализирует компоненты внутри useEffect:

ToDo.jsx
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css"; // подключение стилей To Do List

export default function ToDoComponent(props) {
    let toolbar_container = useRef(); // инициализация контейнера для Toolbar
    let todo_container = useRef(); // инициализация контейнера для To Do List 

    useEffect(() => {
        // инициализация компонента To Do List
        const todo = new ToDo(todo_container.current, {});

        // инициализация компонента Toolbar
        const toolbar = new Toolbar(toolbar_container.current, {
            api: todo.api, // передача внутреннего API To Do List
            // другие свойства конфигурации
        });

        return () => {
            todo.destructor(); // уничтожение To Do List
            toolbar.destructor(); // уничтожение Toolbar
        };
    }, []);

    return  <div className="component_container">
                <div ref={toolbar_container}></div>
                <div ref={todo_container} className="widget"></div>
            </div>
}

Добавление стилей​

Настройте стили, чтобы To Do List отображался корректно. Используйте файл index.css для задания стилей To Do List и его контейнеров. Пример ниже определяет размеры макета страницы:

index.css
/* стили для начальной страницы */
html,
body,
#root {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #f7f7f7;
}

/* стили для контейнера To Do List и Toolbar */
.component_container {
    height: 100%; 
    max-width: 800px; 
    margin: 0 auto;
}

/* стили для контейнера To Do List */
.widget {
    height: calc(100% - 56px);
}

Загрузка данных​

Создайте файл data.js в директории src/ и добавьте в него данные. Следующий пример экспортирует функцию getData(), которая возвращает задачи, пользователей и проекты:

data.js
export function getData() {
    const tasks = [
        {
            id: "temp://1652991560212",
            project: "introduction",
            text: "Greetings, everyone! \u{1F44B} \nI'm DHTMLX To Do List.",
            priority: 1
        },
        {
            id: "1652374122964",
            project: "introduction",
            text: "You can assign task performers and due dates using the menu.",
            assigned: ["user_4", "user_1", "user_2", "user_3"],
            due_date: "2033-03-08T21:00:00.000Z",
            priority: 2
        },
        // ...
    ];
    const users = [
        {
            id: "user_1",
            label: "Don Smith",
            avatar:
                "https://snippet.dhtmlx.com/codebase/data/common/img/02/avatar_61.jpg"
        },
        // ...
    ];
    const projects = [
        {
            id: "introduction",
            label: "Introduction to DHTMLX To Do List"
        },
        {
            id: "widgets",
            label: "Our widgets"
        }
    ];
    return { tasks, users, projects };
}

Откройте App.js и импортируйте данные. Передайте данные в компонент <ToDo/> как props, как показано ниже:

App.js
import ToDo from "./ToDo";
import { getData } from "./data";

function App() {
    const { tasks, users, projects } = getData(); 
    return <ToDo tasks={tasks} users={users} projects={projects} />;
}

export default App;

Перейдите в ToDo.jsx и примените переданные props к объекту конфигурации To Do List. Фрагмент ниже передаёт данные пользователей, задач и проектов через конфигурацию:

ToDo.jsx
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";

export default function ToDoComponent(props) {
    let todo_container = useRef();
    let toolbar_container = useRef();

    useEffect(() => {
        const todo = new ToDo(todo_container.current, {
            users: props.users,
            tasks: props.tasks,
            projects: props.projects,
            // другие свойства конфигурации
        });

        const toolbar = new Toolbar(toolbar_container.current, {
            api: todo.api,
            // другие свойства конфигурации
        });

        return () => {
            todo.destructor();
            toolbar.destructor();
        };
    }, []);

    return  <div className="component_container">
                <div ref={toolbar_container}></div>
                <div ref={todo_container} className="widget"></div>
            </div>
}

Вы также можете использовать метод parse() внутри useEffect() для загрузки данных в To Do List. Пример ниже загружает данные с помощью parse() после инициализации:

ToDo.jsx
import { useEffect, useRef } from "react";
import { ToDo, Toolbar } from "@dhx/trial-todolist";
import "@dhx/trial-todolist/dist/todo.css";

export default function ToDoComponent(props) {
    let todo_container = useRef();
    let toolbar_container = useRef();

    let tasks = props.tasks;
    let users = props.users;
    let projects = props.projects;

    useEffect(() => {
        const todo = new ToDo(todo_container.current, {});

        const toolbar = new Toolbar(toolbar_container.current, {
            api: todo.api,
            // другие свойства конфигурации
        });
    
        todo.parse({ tasks, users, projects });

        return () => {
            todo.destructor();
            toolbar.destructor();
        };
    }, []);

    return  <div className="component_container">
                <div ref={toolbar_container}></div>
                <div ref={todo_container} className="widget"></div>
            </div>
}

Каждый вызов parse(data) заменяет текущий набор данных.

Теперь компонент отображает заполненный To Do List. Другие доступные свойства описаны в обзоре конфигурации.

Обработка событий​

Подпишитесь на события, чтобы реагировать на действия пользователя. Смотрите полный список событий.

Откройте ToDo.jsx и дополните метод useEffect(). Фрагмент ниже прикрепляет обработчик к событию add-task:

ToDo.jsx
// ...
useEffect(() => {
    const todo = new ToDo(todo_container.current, {});

    todo.api.on("add-task", (obj) => {
        console.log("A new task is added", obj);
    });
    
    return () => {
        todo.destructor();
    };
}, []);
// ...

Шаг 3. Добавление To Do List в приложение​

Чтобы добавить компонент в приложение, откройте App.js и замените код по умолчанию следующим фрагментом:

App.js
import ToDo from "./ToDo";
import { getData } from "./data";

function App() {
    const { tasks, users, projects } = getData();
    return <ToDo tasks={tasks} users={users} projects={projects} />;
}

export default App;

Запустите приложение — To Do List отобразится с тестовыми данными:

Инициализация To Do List

Полный проект доступен на GitHub.

Need more help?Contact Support