VisualStudioでのフロントエンド開発で React が使えるようにインストールします。
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境[1] からの続きで書いてますので、まずはそっちを復習ってもらうとスムーズです。
ココでは React の導入を扱ってますが、他のモジュールについても(型定義ファイル等が提供されているものであれば)ほぼ同じです。
プロジェクトのカレントディレクトリをコマンドプロンプトで開きます。
> npm install --save react > npm install --save react-dom
プロジェクトのカレントディレクトリをコマンドプロンプトで開きます。
> npm install --save @types/react > npm install --save @types/react-dom
import * as React from 'react'; export default class ReactTest extends React.Component<{}, {}> { render(){ return ( <h1>React Test!</h1> ); } }
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import ReactTest from "./reacttest";
window.onload = () => { ・・・ ReactDOM.render( React.createElement( ReactTest, {} ), document.getElementById('reacttest') ); };
<body> ・・・ <div id="reacttest"></div> <!-- 追加 --> </body>
上記では、自身のコードの他に React.js 本体のコードも結合された巨大な js ファイルが出来上がることになります。
それで問題ない場合も多々あると思いますが、react.js は別ファイルにしておきたいとか、CDN に任せたいとかあると思います。
そういう場合には、webpack の設定で結合対象から react を外すことが可能です。
externals: { 'react': 'React', 'react-dom': 'ReactDOM', },
・・・ <script src="node_modules/react/dist/react.js"></script> <!-- 追加 --> <script src="node_modules/react-dom/dist/react-dom.js"></script> <!-- 追加 --> <script src="bundle.js"></script> ・・・
(This host) = https://thinkridge.com