Meteor + React + Typescriptで、Hello World

Meteorで遊んでいます。

Meteorとは

Webアプリ開発のフルスタックのライブラリです。JSだけで、フロントもバックも書けます。
何がすごいかというと、したいことがほとんどコマンド一つで出来てしまうこと。
クラウド上にデプロイするだけなら、コマンド一つでできちゃいます。
Githubのスターがすごいらしいので試してみました。

How to set up

せっかくJSですべて書けてしまうならということで、Typescript使いたいななんて気軽な気持ちで挑戦してみましたが、案外上手く行かなかったり、情報がWeb上にまとまって無かったりしたのでハックに残します。

Set up Meteor

$ meteor create app-name

Set up React + Typescript

// 1. install npm react package
$ meteor npm install --save react react-dom @types/react @types/react-dom

// 2. install typescript typings
$ npm install -g typescript
$ npm install -g typings

// 3. typings install type definition
$ typings install registry:env/meteor --global
$ typings install github:meteor-typings/react-meteor-data --global
$ typings install react
$ typings install react-dom

// 4. install compiler
$ meteor add meteortypescript:compiler

Replace Code

client/hello.tsx

import * as React from "react";
import { Meteor } from "meteor/meteor"
import { render } from "react-dom";

class Hello extends React.Component<{}, {}> {
    render() {
        return (
          <div>
            <h1>Hello World from Typescript!!</h1>
          </div> 
        );
    }
}

Meteor.startup(() => {
  render(<Hello />, document.getElementById('render-target'));
});

client/main.html

<head>
  <title>Sample App</title>
</head>

<body>
  <div id="render-target"></div>
</body>