React

SpreadJSでは、JavaScriptライブラリの1つであるReactがサポートされます。Reactを使用すると、MVCフレームワークのビュー層を処理することで、Webアプリケーションおよびモバイルアプリケーションのユーザーインタフェースを構築できます。

Reactでは、ページをリロードせずにデータを変更できるだけでなく、再利用可能なコンポーネントや大規模なアプリケーションを作成できます。

メモ： SpreadJS は React バージョン16、17 および 18をサポートしています。

SpreadJSでは、次の2つの方法でReactを使用できます。

npmパッケージの使用
従来のHTMLの使用

npmパッケージの使用

Reactアプリを作成する
コマンドプロンプトウィンドウを開き、次のコマンドを入力します。コマンドを実行すると、ディレクトリ内の指定の場所にReactプロジェクトが作成されます。Reactプロジェクトの詳しい作成方法については、https://reactjs.org/docs/add-react-to-a-new-app.htmlを参照してください。
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start
Spread.Sheetsモジュールをインストールする
Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。
npm install @grapecity/spread-sheets-react
npm install @grapecity/spread-sheets-resources-ja
スタイルをインポートする
index.jsファイルで、スタイルファイルをインポートします。
import'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

ReactアプリでSpread.Sheetsを使用する

src\App.jsファイルで、次のサンプルコードを使います。

import React from 'react';
import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets-resources-ja';

function App() {
  const spreadBackColor = 'aliceblue';
  const sheetName = 'Goods List';
  const hostStyle =
  {
    width: '800px',
    height: '600px'
  };

  const data = [{Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart'},{Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other'},{Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other'},{Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart'},{Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart'},{Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store'}];
  const columnWidth = 100;

  return (
    <div>
      <SpreadSheets backColor={spreadBackColor}hostStyle= {hostStyle}>
        <Worksheet name={sheetName} dataSource={data}>
          <Column dataField='Name' width={300}></Column>
          <Column dataField='Category' width={columnWidth}></Column>
          <Column dataField='Price' width={columnWidth} formatter="$#.00"></Column>
          <Column dataField='Shopping Place' width={columnWidth}></Column>
        </Worksheet>
      </SpreadSheets>
  </div>
  );
}

export default App;

従来のHTMLの使用

この方法には、次の2つの手順があります。

React HTMLテンプレートのダウンロード
React HTMLテンプレートをダウンロードするには、リンクhttps://reactjs.org/docs/try-react.htmlを使用します。
HTMLテンプレートへのSpread.SheetsおよびReact - Spread.Sheetsの追加
gc.spread.sheets.all....min.js、gc.spread.sheets....css、および gc.spread.sheets.react...*.js ファイルへの参照を、HTMLテンプレート（index.htmlファイル）に追加します。

ReactアプリケーションでのSpread.Sheetsの使用

これで、Spread.SheetsをReactアプリケーション内で使用できるようになりました。例として、次のサンプルコードを使用します。

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8" />
     <title>Hello World</title>
     <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
     <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
     <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
class App extends React.Component{
    render(){
      return(
         <div style={{width: '800px',height: '600px'}}>
           <SpreadSheets>
            <Worksheet name='first'>
            <Column dataField="Name"/>
             </Worksheet>
             </SpreadSheets>
             </div>
             )
         }
     }
     ReactDOM.render(
             <App/>,
         document.getElementById('root')
          );
</script>
</body>
</html>

SpreadSheets、Worksheet、およびColumnは、タグ階層での基本要素です。他の要素は、それぞれ設定して使用します。主なタグ階層は次のとおりです。

<SpreadSheets>
  <Worksheet>
    <Column></Column>
    ...
  </Worksheet>
  ...
</SpreadSheets>

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。