Spread.Sheets
Reactの使用
Spread.Sheets > 開発者の手引き > JavaScriptフレームワークの使用 > Reactの使用

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

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

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

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

npmパッケージの使用

  1. 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

  2. Spread.Sheetsモジュールをインストールする

    Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。

    npm install @grapecity/spread-sheets-react

  3. スタイルをインポートする

    index.jsファイルで、スタイルファイルをインポートします。

    import'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

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

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

    JavaScript
    コードのコピー
    import React, {Component} from 'react';
    import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
    import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016darkGray.css';
    import '@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js'

    class App extends Component {
      constructor(props)
      {
        super(props);
        this.spreadBackColor = 'aliceblue';
        this.sheetName = 'Goods List';
        this.hostStyle =
        {
          width: '800px',
          height: '600px'
        };

        this.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'}];
        this.columnWidth = 100;
      }

      render()

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

    export default App;

従来のHTMLの使用

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

  1. React HTMLテンプレートのダウンロード

    React HTMLテンプレートをダウンロードするには、リンクhttps://reactjs.org/docs/try-react.htmlを使用します。

  2. HTMLテンプレートへのSpread.SheetsおよびReact - Spread.Sheetsの追加

    gc.spread.sheets.all.*.*.*.min.js、gc.spread.sheets.*.*.*.css、およびgc.spread.sheets.react.*.*.*.jsファイルへの参照を、HTMLテンプレート（index.htmlファイル）に追加します。

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

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

    JavaScript
    コードのコピー
    <!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>

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

 

 

Copyright © 2016 GrapeCity inc. All rights reserved.