Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

Visual Studio上でTypeScript JSXを使ってReact.js「ローカルにreact.jsのファイルを抱え込もう」

$
0
0

先ほどは、CDN上のReactを読み込みましたが、手元にreactのjsファイルを持ってくる場合。

bowerを使いました。(Visual Studio関係ない)

npm install bower -g

と入力してbowerを入れます。bowerはgitを使うみたいなので、gitをインストールしてPATHを通しておきます。

TypeScriptのプロジェクトを作ってパッケージマネージャーコンソールでプロジェクトのディレクトリに移動して以下のコマンドを打ち込んで必要なファイルを仕入れます。

tsd install react --save
bower install react

これでtypingsフォルダとbower_componentsフォルダが作られた、そこにd.tsファイルやjsファイルが追加されます。ソリューションエクスプローラですべてのファイルを表示するモードにして、typingsとbower_componentsフォルダをプロジェクトに含めます。

プロジェクトでTypeScriptのJSXのコンパイルを有効にして以下のようなapp.tsxを用意してお試し。

/// <reference path="typings/tsd.d.ts" />

var reactElement = React.createElement('h1', { className: 'header' }, 'これはReactです');
ReactDOM.render(reactElement, document.getElementById('content'));

HTMLはこんな感じで

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8" /><title>TypeScript HTML App</title></head><body><divid="content"></div><scriptsrc="bower_components/react/react.min.js"></script><scriptsrc="bower_components/react/react-dom.min.js"></script><scriptsrc="bower_components/react/react-with-addons.min.js"></script><scriptsrc="app.js"></script></body></html>

これで、ローカルに全部必要なファイルを抱え込んだプロジェクトができました。


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>