ページへ戻る
印刷
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入
をテンプレートにして作成 ::
シンクリッジ
xpwiki
:技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入 をテンプレートにして作成
開始行:
VisualStudioでのフロントエンド開発で React が使えるように...
[[技術系備忘録/TypeScript/VisualStudioでのフロントエンド...
ココでは React の導入を扱ってますが、他のモジュールについ...
*** 注意事項
- ココで記載している手順は TypeScript2.0 を前提にしていま...
-- TypeScript2.0 から npm 単体で型定義ファイルの取得が出...
2.0 未満の場合、tsd か typings などを使うことになりますが...
- VisualStudio2013 では TypeScript2.0 plugin は提供されな...
- 今時点の TypeScript2.0 はまだベータ版(RCなのかな?)です...
* 手順
** react.js をインストール
プロジェクトのカレントディレクトリをコマンドプロンプトで...
+ npm で react と react-dom をインストールします。
> npm install --save react
> npm install --save react-dom
** 型定義ファイルをインストール
プロジェクトのカレントディレクトリをコマンドプロンプトで...
+ npm @types で react と react-dom の型定義ファイルをイン...
> npm install --save @types/react
> npm install --save @types/react-dom
- これで package.json に情報が追記されているので、> npm i...
- TypeScript2.0 未満ではこの方法は使えませんので、ご注意...
* とりあえずサンプルコード
+ プロジェクトのコンテキストメニュー [追加]-[TypeScript J...
-- 中身は以下のようにします。
#prettify{{
import * as React from 'react';
export default class ReactTest extends React.Component<{}...
{
render(){
return (
<h1>React Test!</h1>
);
}
}
}}
+ app.ts を編集します。
++ 先頭付近に以下を追記します。
#prettify{{
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactTest from "./reacttest";
}}
++ window.onload = () => { の中に以下を追記します。
#prettify{{
window.onload = () => {
・・・
ReactDOM.render(
React.createElement( ReactTest, {} ),
document.getElementById('reacttest')
);
};
}}
+ index.html を編集します。
#prettify{{
<body>
・・・
<div id="reacttest"></div> <!-- 追加 -->
</body>
}}
+ 以上で完了です。F5キーを押してブラウザで正しく表示され...
* React 本体は結合させない方法
上記では、自身のコードの他に React.js 本体のコードも結合...
それで問題ない場合も多々あると思いますが、react.js は別フ...
そういう場合には、webpack の設定で結合対象から react を外...
+ webpack.config.js を編集し、以下を追記します。
#prettify{{
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
}}
+ index.html で react.js を明示的に読み込むように編集しま...
#prettify{{
・・・
<script src="node_modules/react/dist/react.js"></script>...
<script src="node_modules/react-dom/dist/react-dom.js"><...
<script src="bundle.js"></script>
・・・
}}
--↑のように自身で抱えてもいいですが、世間様のCDNサイトを...
+ 以上で完了です。ビルドして出来上がった bundle.js ファイ...
&ref(ReactTest.png,mw:480,mh:360);
* よもやま
- TypeScript2.0 の @types はとても便利です。環境構築の手...
@types はマイクロソフト様が用意してくれているっぽい(らし...
- 現在提供されている React の型定義ファイルのバージョンは...
終了行:
VisualStudioでのフロントエンド開発で React が使えるように...
[[技術系備忘録/TypeScript/VisualStudioでのフロントエンド...
ココでは React の導入を扱ってますが、他のモジュールについ...
*** 注意事項
- ココで記載している手順は TypeScript2.0 を前提にしていま...
-- TypeScript2.0 から npm 単体で型定義ファイルの取得が出...
2.0 未満の場合、tsd か typings などを使うことになりますが...
- VisualStudio2013 では TypeScript2.0 plugin は提供されな...
- 今時点の TypeScript2.0 はまだベータ版(RCなのかな?)です...
* 手順
** react.js をインストール
プロジェクトのカレントディレクトリをコマンドプロンプトで...
+ npm で react と react-dom をインストールします。
> npm install --save react
> npm install --save react-dom
** 型定義ファイルをインストール
プロジェクトのカレントディレクトリをコマンドプロンプトで...
+ npm @types で react と react-dom の型定義ファイルをイン...
> npm install --save @types/react
> npm install --save @types/react-dom
- これで package.json に情報が追記されているので、> npm i...
- TypeScript2.0 未満ではこの方法は使えませんので、ご注意...
* とりあえずサンプルコード
+ プロジェクトのコンテキストメニュー [追加]-[TypeScript J...
-- 中身は以下のようにします。
#prettify{{
import * as React from 'react';
export default class ReactTest extends React.Component<{}...
{
render(){
return (
<h1>React Test!</h1>
);
}
}
}}
+ app.ts を編集します。
++ 先頭付近に以下を追記します。
#prettify{{
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactTest from "./reacttest";
}}
++ window.onload = () => { の中に以下を追記します。
#prettify{{
window.onload = () => {
・・・
ReactDOM.render(
React.createElement( ReactTest, {} ),
document.getElementById('reacttest')
);
};
}}
+ index.html を編集します。
#prettify{{
<body>
・・・
<div id="reacttest"></div> <!-- 追加 -->
</body>
}}
+ 以上で完了です。F5キーを押してブラウザで正しく表示され...
* React 本体は結合させない方法
上記では、自身のコードの他に React.js 本体のコードも結合...
それで問題ない場合も多々あると思いますが、react.js は別フ...
そういう場合には、webpack の設定で結合対象から react を外...
+ webpack.config.js を編集し、以下を追記します。
#prettify{{
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
}}
+ index.html で react.js を明示的に読み込むように編集しま...
#prettify{{
・・・
<script src="node_modules/react/dist/react.js"></script>...
<script src="node_modules/react-dom/dist/react-dom.js"><...
<script src="bundle.js"></script>
・・・
}}
--↑のように自身で抱えてもいいですが、世間様のCDNサイトを...
+ 以上で完了です。ビルドして出来上がった bundle.js ファイ...
&ref(ReactTest.png,mw:480,mh:360);
* よもやま
- TypeScript2.0 の @types はとても便利です。環境構築の手...
@types はマイクロソフト様が用意してくれているっぽい(らし...
- 現在提供されている React の型定義ファイルのバージョンは...
ページ名: