ReactXPでHello World

エンジニアの原です。

今日はReactXPで遊んでみます。

ReactXPとは？

ReactXPとはMicrosoftが開発しているリポジトリで、ReactNativeをベースにWebとWindowsPlatform(Windows 10, 10mobile, Xbox)でのアプリ開発ができるようにしたマルチプラットフォーム対応のフレームワークです。

XP...?

XP means X-Platform Share most of your code between the web, iOS, Android, and Windows.

間違ってもあっちのXPじゃありません。

ReactNativeではJavaScriptを使って開発をしますが、ReactXPはTypeScriptです。

サンプルを動かしてみる

github.com

公式のリポジトリにsamplesというフォルダがあります。この中のhello-worldをコピーして使いましょう。

package.jsonを覗いてみる

{
  "name": "rxp-hello-world",
  "version": "1.0.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "web-watch": "webpack --progress --colors --watch",
    "rn-watch": "tsc --watch",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "node node_modules/react-native/local-cli/cli.js run-android",
    "ios": "node node_modules/react-native/local-cli/cli.js run-ios"
  },
  "devDependencies": {
    "@types/node": "^7.0.12",
    "@types/webpack": "^2.2.14",
    "awesome-typescript-loader": "3.1.2",
    "source-map-loader": "^0.1.6",
    "ts-node": "^3.2.1",
    "typescript": "2.4.1",
    "webpack": "2.2.1"
  },
  "dependencies": {
    "react": "16.0.0-rc.3",
    "react-dom": "16.0.0-rc.3",
    "react-native": "^0.46.0",
    "react-native-windows": "^0.33.0",
    "reactxp": "^0.46.2",
    "reactxp-imagesvg": "^0.2.7",
    "reactxp-navigation": "^1.0.14",
    "reactxp-video": "^0.2.2"
  }
}

Hello worldサンプルなので少ないですね。

とりあえずこれから分かることは、

  • WebはReact
  • iOS/AndroidはReact Native
  • Widnowsはreact-native-windows
  • Web版のビルドはweb-watch
  • TSのコンパイルはrn-watch
  • react-nativeのcli.jsを直接叩いてるだけ

ということが分かります（あたりまえか とりあえず動かしてみましょう。

ネイティブアプリを動かす

TSをコンパイルします

npm run rn-watch

react-nativeのお作法

npm run start // サーバーを起動
npm run ios // iOSアプリを起動

https://gyazo.com/89f374ea96f34703f5f75c75c2d0a855

動きました。

アニメーションがぬるっとしてる。Skypeっぽい。

https://gyazo.com/dd0c6d5c6845628756af4304dd59c647

デバッグモードも問題なく使えますね。

Webを動かしてみる

TSをコンパイルします

npm run rn-watch

Web用のbundle.jsを作成

npm run web-watch

webのエントリポイントはrootのindex.htmlです。 とりあえずBrowserにファイルパスを指定してみます。

https://gyazo.com/d47e5982b094340065ebb531dd50640f

動きましたね。

画面遷移もちゃんとアニメーションしてるのは意外でした。

ただ、サンプルの画面遷移はBrowserのヒストリには残らないようです。

Windows機無いのでWindowsPlatformsの確認は出来ません。

です。

react-nativeの部分を見てみる

react-nativeはプロジェクトrootにios, androidというフォルダが作られ、その中身は純粋なiOS, Androidのプロジェクトになっています。 ReactXPもios, androidというフォルダがあるので中身がどう違うか見てみましたが、特に大きな変更点は見られませんでした。

MainActivity.java

package com.rxphelloworld;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RXApp";
    }
}

AppDeletege.m

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RXApp"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Webの部分を見てみる

Webのエントリポイントはrootのindex.htmlです。

<!doctype html>
<html>
<head>
  <title></title>
  <style>
    html, body, .app-container {
      width: 100%;
      height: 100%;
      padding: 0;
      border: none;
      margin: 0;
      font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
    }
    *:focus {
        outline: 0;
    }
  </style>
</head>
<body>
  <div class="app-container"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

簡素。

まとめ

ReactXPでHelloWorldしてみました。 まだガッツリ使う予定は無いのでまた暇があったら掘り下げます。