kintone-React自習 2日目「コード分割」

コンポーネントをファイルに分割します。

like_button.js

下記の通り変更。.jsは.jsxに変更。

import * as React from 'react'

'use strict';
・・・
  render() {
    if (this.state.liked) {
      return (<div>You liked this.</div>);
    }
    return (
      <div>
        <button onClick={() => this.setState({ liked: true })}>Like</button>
      </div>
    );
  }
・・・

export default LikeButton

App.jsx

App.jsxを新規に作成。

import type { IndexEvent } from 'types'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import LikeButton from './like_button'

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

index.ts

index.tsを下記の通り変更。

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