### Start the Demo

Source: https://github.com/clientio/joint-plus-tutorial-react/blob/main/README.md

Run this command to start the local development server and view the demo.

```bash
npm start
```

--------------------------------

### Install Dependencies

Source: https://github.com/clientio/joint-plus-tutorial-react/blob/main/README.md

Install the necessary Node.js dependencies for the project.

```bash
npm install
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/clientio/joint-plus-tutorial-react/blob/main/README.md

Change into the cloned repository's directory to proceed with the setup.

```bash
cd joint-plus-tutorial-react
```

--------------------------------

### Clone the Repository

Source: https://github.com/clientio/joint-plus-tutorial-react/blob/main/README.md

Use this command to clone the tutorial repository to your local machine.

```bash
git clone git@github.com:clientIO/joint-plus-tutorial-react.git
```

--------------------------------

### Configure JointJS+ Paper View for Rendering

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

Set up a `dia.Paper` instance to visually render the graph. Configure background, frozen state for batch operations, async rendering, and sorting. Remember to unfreeze and remove the paper when done.

```typescript
import { dia, shapes } from '@joint/plus';

const paper = new dia.Paper({
  model: graph,                           // Link to the graph data model
  background: {
    color: '#F8F9FA',                     // Canvas background color
  },
  frozen: true,                           // Start frozen for batch operations
  async: true,                            // Enable async rendering for performance
  sorting: dia.Paper.sorting.APPROX,      // Use approximate sorting algorithm
  cellViewNamespace: shapes               // Namespace for cell views
});

// After adding elements, unfreeze to render
paper.unfreeze();

// Cleanup when component unmounts
paper.remove();
```

--------------------------------

### Set Up PaperScroller for Diagram Navigation

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

Wrap the paper with `ui.PaperScroller` to enable panning, zooming, and auto-resizing. Mount the scroller to the DOM, center the view, and use zoom controls. Ensure cleanup by removing the scroller.

```typescript
import { ui } from '@joint/plus';

const scroller = new ui.PaperScroller({
  paper,
  autoResizePaper: true,    // Automatically resize paper to fit content
  cursor: 'grab'            // Cursor style when panning
});

// Mount scroller to DOM and center the view
const canvasElement = document.getElementById('canvas');
canvasElement.appendChild(scroller.el);
scroller.render().center();

// Zoom controls
scroller.zoom(0.2, { max: 2, min: 0.2 });     // Zoom in
scroller.zoom(-0.2, { max: 2, min: 0.2 });    // Zoom out
scroller.zoomToFit({ padding: 20 });          // Fit content to view

// Cleanup
scroller.remove();
```

--------------------------------

### Create and Configure JointJS+ Graph Instance

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

Initialize a `dia.Graph` instance with a cell namespace and add elements. Handles graph events for cell additions and removals.

```typescript
import { dia, shapes } from '@joint/plus';

// Create a new graph instance with the shapes namespace
const graph = new dia.Graph({}, { cellNamespace: shapes });

// Add cells to the graph
const rect = new shapes.standard.Rectangle({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    label: {
      text: 'Hello World'
    }
  }
});

graph.addCell(rect);

// Graph events
graph.on('add', (cell) => console.log('Cell added:', cell.id));
graph.on('remove', (cell) => console.log('Cell removed:', cell.id));
```

--------------------------------

### Create and Customize Standard JointJS+ Shapes

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

Instantiate standard shapes like rectangles and circles from `shapes.standard`. Customize their appearance using the `attrs` object for body and label styles. Add multiple shapes to the graph at once.

```typescript
import { shapes } from '@joint/plus';

// Create a rectangle shape
const rect = new shapes.standard.Rectangle({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    body: {
      fill: '#2196F3',
      stroke: '#1565C0',
      strokeWidth: 2,
      rx: 5,           // Border radius
      ry: 5
    },
    label: {
      text: 'Hello World',
      fill: '#FFFFFF',
      fontSize: 14,
      fontFamily: 'Arial'
    }
  }
});

// Create a circle shape
const circle = new shapes.standard.Circle({
  position: { x: 250, y: 100 },
  size: { width: 60, height: 60 },
  attrs: {
    body: { fill: '#4CAF50' },
    label: { text: 'Node' }
  }
});

// Add shapes to graph
graph.addCell([rect, circle]);
```

--------------------------------

### SCSS for Full-Viewport Diagram Canvas

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

SCSS configuration to style the diagram canvas for full-viewport display. Ensures JointJS+ CSS is imported and applied correctly.

```scss
@import "~@joint/plus/joint-plus.css";

#root {
  height: 100vh;
  width: 100vw;

  .canvas {
    width: 100%;
    height: 100%;

    .joint-paper {
      border: 1px solid #A0A0A0;
    }
  }
}
```

--------------------------------

### Complete React Functional Component with JointJS+

Source: https://context7.com/clientio/joint-plus-tutorial-react/llms.txt

A complete React functional component for integrating JointJS+. It uses `useRef` for DOM references and `useEffect` for JointJS+ instance lifecycle management, including cleanup.

```typescript
import React, { useEffect, useRef } from 'react';
import { dia, shapes, ui } from '@joint/plus';
import '@joint/plus/joint-plus.css';

function DiagramEditor() {
  const canvas = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Initialize graph
    const graph = new dia.Graph({}, { cellNamespace: shapes });

    // Initialize paper
    const paper = new dia.Paper({
      model: graph,
      background: { color: '#F8F9FA' },
      frozen: true,
      async: true,
      sorting: dia.Paper.sorting.APPROX,
      cellViewNamespace: shapes
    });

    // Initialize scroller
    const scroller = new ui.PaperScroller({
      paper,
      autoResizePaper: true,
      cursor: 'grab'
    });

    // Mount to DOM
    canvas.current!.appendChild(scroller.el);
    scroller.render().center();

    // Add initial shape
    const rect = new shapes.standard.Rectangle({
      position: { x: 100, y: 100 },
      size: { width: 100, height: 50 },
      attrs: { label: { text: 'Hello World' } }
    });
    graph.addCell(rect);

    // Unfreeze to render
    paper.unfreeze();

    // Cleanup on unmount
    return () => {
      scroller.remove();
      paper.remove();
    };
  }, []);

  return <div className="canvas" ref={canvas} />;
}

export default DiagramEditor;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.