typescriptをコンパイルしてReactを動かすまでの ただのメモ書き
playframework プロジェクトの作成
activator new
でプロジェクトを作成
gulp インストール
npm install gulp
typescript インストール
npm install -g typescript
gulpfile.js 作成
var gulp = require('gulp');
var typescript = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('typescript-compile', function() {
gulp.src('./frontend/react/*.tsx')
.pipe(typescript({ target: "ES6", removeComments: true, sortOutput: true, jsx: 'preserve' }))
.js
.pipe(gulp.dest('./public/javascripts/'))
})
gulp.task('default', ['typescript-compile'], function() {
console.log('typescript-compile run...')
})
もろもろ インストール
npm install gulp-typescript
npm install gulp-sourcemaps
npm install react
npm install react-dom
npm install browserify
npm install babelify
npm install vinyl-source-stream
npm install babel-preset-es2015
タスクを走らせてみる
frontend\react\main.tsx(1,24): error TS2307: Cannot find module 'react'.
ぐぐってみると・・・
http://staxmanade.com/2015/08/playing-with-typescript-and-jsx/
どうやら tsd というものが必要らしい
tsd インストール
https://github.com/DefinitelyTyped/tsd
に記載の通り
npm install tsd -g
します
tsd init
react インストール
tsd install react --save
tsd install react-dom --save
もう一度 gulp を走らせる
が、エラーになるので
tsdファイルの先頭に
/// <reference path="./typings/react/react.d.ts" />
を加えてやる
コンパイルが通る形
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
ハマリポイント
scriptの読み込みを一番最後にしないと
Target container is not a DOM element
で怒られる。