Create React Kotlin App

ビルド構成をせずに React のアプリを Kotlin でコーディングすることができます。

これは 初期プレビュー版 です。

概要

先に進む前に JDK 8 がインストールされていることを確認してください。 Java 9 以降はまだサポートされていません.

プロジェクトの作成:

npx create-react-kotlin-app my-app

(npx にはnpm 5.2以降が付属しています。より古いnpmバージョンについてはインストールを参照してください。）

プロジェクトを動かす:

cd my-app/
npm start

次に http://localhost:3000/ を開いてアプリを動作させます

実際にビルドする準備が整ったら npm run build を使用して縮小バンドルを作成します。

Create React Kotlin App を使用するだけで、Kotlin,WebPack,IntelliJ IDEAの構成が行われます。それにより、あなたはコードを書くことだけに集中することができます。

プロジェクトを作成するだけで、全てが上手くいくでしょう。

入門

インストール

最初にグローバルにインストールします:

npm install -g create-react-kotlin-app

create-react-app がすでにインストールされているか、もしくは npx を利用している場合、この手順はステップでキます。

Node6以上が必要です。 nvm を使用すれば、プロジェクトごとに簡単にNodeバージョンを切り替えることができます。

このツールはサーバーサイドNode.jsを想定していません。 Nodeのインストールは、Create React Kotlin Appを動かすためにのみ必要です。

KotlinでReactを使う

React上でKotlinでアプリケーションを開発するには、 React用のKotlinラッパーが必要です。それのドキュメントと使用例はモジュールのリポジトリにあります。

Kotlin/JS パッケージを追加する

Create React Kotlin App をベースにしたパッケージを追加するための 設定は必要ありません。私達は開発者のためにこのことを重要視しています。 https://www.npmjs.com/package/kotlinx-coroutines-core サポートを追加するためには npm install kotlinx-coroutines-core を実行するか、 React Router DOMのラッパーを入れるために npm install @jetbrains/kotlin-react-router-dom を実行してください。

アプリを作る

新しいアプリを作るためには、次のコマンドを実行してください:

create-react-kotlin-app my-app
cd my-app

または create-react-app がすでにインストールされている場合は、次のコマンドを実行することができます:

create-react-app my-app --scripts-version react-scripts-kotlin
cd my-app

このコマンドは、現在のフォルダ内にmy-appというフォルダを生成します

このプロジェクトは、IntelliJ IDEA ですぐに開発できるように事前に設定されています。もし、intelliJ IDEAの.ideaフォルダを作成したくないのであれば、--no-idea オプションをつけてください。

初期のプロジェクト構造が作成され、依存関係がインストールされます:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    app/
      App.css
      App.kt
    index/
      index.css
      index.kt
    logo/
      kotlin.svg
      Logo.css
      Logo.kt
      react.svg
    ticker/
      Ticker.kt

アプリを開いてから経過した時間を表示する簡単なアプリです。インストールが完了したら、プロジェクトフォルダ内でいくつかのコマンドを実行できます:

`npm start` または `yarn start`

開発モードでアプリを起動します。ブラウザ上で表示するためには http://localhost:3000 にアクセスします。

ページを編集すると、自動的にページが更新されます。コンソールにはビルドエラーとlintの警告が表示されます。 Kotlin.defineModule is not a function というエラーが出た場合、npmのキャッシュを削除してみてください。

rm -rf node_modules/.cache

`npm run build` または `yarn build`

build フォルダにプロダクト用のアプリをビルドします。これは、Reactが本番環境用にバンドルされていることを約束し、パフォーマンスのために最適化されたものです。

ビルドは圧縮され、ファイル名にはキャッシュを管理するためのハッシュが含まれています、これでアプリをデプロイする準備が整いました。

アプリをデバッグする

内蔵のJavaScriptデバッガを使用して、IntelliJ IDEA Ultimateで実行中のアプリを直接デバッグできます。 IDEは新しくChromeを実行し、それにデバッガを接続します。

npm start でアプリを起動します。 Kotlinのコードにブレークポイントを入れます。次に、右上の実行/デバッグ設定の一覧から Debug in Chrome を選択し、緑色のアイコンをクリックするか、macOSの場合は ^D WindowsかLinuxの場合は F9 を押してデバッグを開始します。

現在、デバッグは IntelliJ IDEA Ultimate 2017.3 のみでサポートされています。

ブラウザの開発者ツールでデバッグを行うこともできます。

哲学

依存関係は一つだけ: ビルドの依存関係は一つだけです。これは、WebPackとその他の素晴らしいプロジェクトを使っていますが、それらの上でよりまとまりのある、精巧な体験を提供します。
設定不要: 何も設定する必要はありません。開発ビルドと本番ビルドの両方の素晴らしい設定があなたのためにされているので、あなたはコードを書くことだけに集中することができます。
ロックインがない: いつでもカスタム設定に「eject」できます。 1つのコマンドを実行すると、すべての設定とビルドの依存関係がプロジェクトに直接移動されるので、中断したところからすぐに再開できます。

何を内包しているか

生成されたプロジェクトは、以下のようなnpmモジュールを使用しています。:

Kotlin wrappers: @jetbrains/kotlin-react, @jetbrains/kotlin-react-dom, @jetbrains/kotlin-extensions
Kotlin DSL for HTML
Kotlin Compiler
webpack with webpack-dev-server, @jetbrains/kotlin-webpack-plugin, html-webpack-plugin and style-loader
その他

何故これを選ぶか

create-react-kotlin-app を使うと、KotlinとReactを使って新しいアプリケーションを素早く作成することができます。あなたの環境に、新しいKotlinアプリを構築するために必要なものがすべて揃得ることができます:

Kotlin と React の構文サポート。
KotlinのコードをJavaScriptに自動コンパイルするサーバー。
ソースマップを使って、本番用のJavaScript、CSS、および画像をバンドルするためのビルドスクリプト。

制限

このプロジェクトでは、単体テストは現在サポートされていません。現在Jest Kotlinラッパーに取り組んでいます。乞うご期待！

カスタムセットアップへの変換

カスタムセットアップ変換ツールから「eject」してボイラーテンプレートジェネレーターとして使用することができます。

npm run eject を実行すると、すべてのファイルと推移的な依存関係（webpack、Kotlin Compilerなど）がプロジェクトに直接コピーされるので、それらを完全にコントロールできます。 npm start や npm run build などのコマンドはまだ機能しますが、コピーされたスクリプトで実行するので、それらを細かく調整することができます。この時点で、あなたのプロジェクトはあなた自身のものです。

注意:これは不可逆的な操作です、「eject」した場合、もとに戻すことはできません