kintone-React自習 1日目「既存のウェブサイトに React を追加する」

2022年1月30日 10:30

「既存のウェブサイトに React を追加する」

Reactのチュートリアル「既存のウェブサイトに React を追加する」をkintoneのカスタマイズビューに表示します。
https://ja.reactjs.org/docs/getting-started.html#add-react-to-a-website
https://ja.reactjs.org/docs/add-react-to-a-website.html

環境

kintone-react の環境は Goqoo on kintone を利用して構築しています。
Goqoo on kintone は https://github.com/goqoo-on-kintone/goqoo からセットアップできます。

ステップ 3：React コンポーネントを作成する

サンプルコードをコピーして、like_button.jsとして保存します。

サンプルコードを下記の通り修正します。

import type { IndexEvent } from 'types'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
'use strict';
・・・
class LikeButton extends React.Component <any, any> {

  constructor(props: any) {
・・・
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

kintone.events.on('app.record.index.show', async (event: IndexEvent<any>) => {
  const container = document.getElementById('react-sample-container')
  ReactDOM.render(e(LikeButton), container);
  return event
})

index.tsを下記の通り修正。

import { goqoo } from 'goqoo'

goqoo('app', () => {
  require('./like_button')
})

kintoneアプリ作成

kintoneアプリを作成して、カスタマイズビューを作成します。
下記の通り、HTML欄にReactが描画する際の要素を設定します。

<div id='react-sample-container'></div>

npx goqoo start

goqoo のstartコマンドで開発用のビルドを生成します。
npx goqoo start で表示される、localhostのリンクをkintoneアプリに設定します。
アプリを更新して動作を確認します。
JSのファイルを修正すると、その場で再読み込みされて、修正した箇所が反映されることを確認します。