TypescriptでのReactサービスの作り方 - dogecrypto/research_webservice_technology GitHub Wiki

方法

最近はtypescript利用してるケースが多いので調査

awesome react, typescript, electronあたりで調査するのもあり

有力なプロジェクトの調査するのもいいね

簡単な方法

create-react-appで--scripts-versionを指定するとよい

create-react-app my-app --scripts-version=react-scripts-ts

• https://github.com/Microsoft/TypeScript-React-Starter

  • ただ、最小限度なので他のセットアップがだるい

• https://github.com/rokoroku/react-redux-typescript-boilerplate

  • これはどうか？
  • redux, router対応。 400 star over
  • TODOMVC

• https://github.com/piotrwitek/react-redux-typescript-guide

  • よんどくとよい

node libraryの利用方法

definitelytypedを利用するとよい

• http://definitelytyped.org/

Electron対応方法

React, Reduxも対応してるとなお良い

boilerplate使うとよさげ？

• https://github.com/electron/electron-quick-start-typescript

  • 公式のboilerplateがあった
  • これベースでいい？
  • React, Redux設定めんどいな
  • ただのサンプルとみたほうがよさそう

• https://github.com/Microsoft/TypeScript-React-Starter

  • Reactだけの場合、これでOK
  • Reduxの使い方の説明とかもあってよし
  • てかデフォでRedux入ってるねこれ、React-Routerは別のアプリ参考にする？

• https://github.com/topics/electron?l=typescript

WebアプリとElectronアプリの両方対応

electron, web, react-native, hybridあたりで調べるかな

• むしろreactアプリにelectronサポートする考えの方がいいか

• MyCryptoとかのpackage.jsonみるに独自で頑張って対応してるっぽいな

  • MyCryptoはMyEtherWallet 4ベース
  • サーバー立ち上げコマンドとかを作って対応
  • webpack_configと関連ライブラリインストールしてスクリプトつくるとよさそう
  • create-react-app連携
  • libraryも都度連携必要

• 独自でテンプレート作ったりして対応しなければ

• MyCrypto

  • https://github.com/MyCryptoHQ/MyCrypto
  • https://github.com/MyCryptoHQ/MyCrypto/blob/develop/package.json
  • https://github.com/MyCryptoHQ/MyCrypto/commit/41b219a85334b14aca6b5c3e93efefac83d4b4ba#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

• Mewはあまり役にたたない

• https://github.com/electron-userland/electron-webpack

• https://webpack.electron.build/

  • ちとちがうな

• テンプレート意外とないね

• https://github.com/topics/electron から調査

• https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

  • https://github.com/csepulv/electron-with-create-react-app

• https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3

  • https://github.com/kitze/react-electron-example
  • 結構良さそう、typescriptでもOK

• https://github.com/jiahaog/nativefier

  • nativefier使えば良くない？という発想

• MyCryptoが一番良さそうだけどめんどう、calculatorのがいいかな？

• MyCrypto

  • electron関連のコードは分離、それ以外は共通といった構成

React-native対応方法

• https://github.com/vitalybe/ReactNativeUniversal

  • 多少参考になりそう

• 下のcalculatorのが良さそう

  • 今度試すか改造する

記事

• https://github.com/sindresorhus/awesome-electron

• https://github.com/dzharii/awesome-typescript

• https://github.com/enaqx/awesome-react

• https://electronjs.org/blog/typescript

• https://blog.scottlogic.com/2017/06/06/typescript-electron-webpack.html

• https://slack.engineering/building-hybrid-applications-with-electron-dc67686de5fb

  • slackの解説
  • libraryの紹介もしている

• https://slack.engineering/interops-labyrinth-sharing-code-between-web-electron-apps-f9474d62eccc

  • コード共有

• https://medium.com/@benoitvallon/a-mobile-desktop-and-website-app-with-the-same-code-dc84ef7677ee

  • electron, rn, web, same code
  • https://github.com/benoitvallon/react-native-nw-react-calculator
  • https://github.com/benoitvallon/react-native-nw-react-calculator/blob/master/package.json
  • これ参考にするか？ 4000スター超
  • react-native 対応してるのがよい
  • gh-pagesも対応している
  • 今度これで試してみるかな

• https://electronjs.org/docs/tutorial/application-architecture

• https://hackernoon.com/electron-the-bad-parts-2b710c491547

• https://brainhub.eu/blog/7-famous-desktop-apps-using-electron/

参考プロジェクト

• https://github.com/MyCryptoHQ/MyCrypto

  • typescript + electron

• https://github.com/bitpay/copay

  • typescript + Cordova

• https://github.com/Automattic/wp-calypso

• https://github.com/Automattic/wp-desktop

• https://github.com/trufflesuite/ganache

template

• https://github.com/electron/electron-quick-start-typescript

• https://github.com/iRath96/electron-react-typescript-boilerplate

• https://github.com/Microsoft/TypeScript-React-Starter