Home
Blog
Company
TechMemo
Contact
メニュー
スタッフブログ
会社案内
技術系備忘録
お問い合わせ
旧ホームページ
ブログ更新履歴
2024/03/11
rlib-MML 機能追加しました
2023/12/16
rlib-MML アプリ ver1.0.6 公開しました
2023/11/13
rlib-MML 機能追加しました
2023/01/06
rlib-MML アプリ ver1.0.5 公開しました
2021/12/01
rlib-MML アプリ 更新しました
コンテンツ更新履歴
最新の30件
2022-10-24
技術系備忘録/Windows/接続されているモニタ以上の解像度でデスクトップ表示
2021-10-14
技術系備忘録/C++/小技/無名関数の再帰をローテクで
2021-08-10
技術系備忘録/C++/小技
2021-08-08
技術系備忘録/C++/小技/型で条件分岐
2021-06-10
技術系備忘録/Docker/サーバー死活監視スクリプト
2021-03-29
技術系備忘録/C++/Boost/boost.formatを使った文字列フォーマット。printf系関数を置き換え
2020-10-21
技術系備忘録/VMware/Ubuntu8.10にVMwareServer1.0をインストール
2020-10-14
技術系備忘録/VMware
技術系備忘録/VMware/CentOS7にVMwarePlayer12をインストール
2020-06-03
技術系備忘録/TypeScript/二分探索(binary search)
2020-06-01
技術系備忘録/Docker/SSLアクセラレータ&リバースプロキシ
2019-11-08
技術系備忘録/C++/OpenSSL/ビルド方法
2019-11-04
技術系備忘録/C++/VisualStudio/MSBuild.exeのパスを解決して実行
2019-10-02
MenuBar
2019-09-05
技術系備忘録/Docker
2019-09-04
技術系備忘録/Docker/LAMP環境構築
2019-07-16
会社案内/品質管理方針
2019-04-18
技術系備忘録/AWS/SoftEtherを使ってVPN接続
2019-02-18
技術系備忘録/C++/小技/std.set map系の比較関数の新機能
2018-05-25
技術系備忘録/データベース
技術系備忘録/データベース/SQLite
技術系備忘録/データベース/SQLite/WHERE IN で複数指定するクエリ
2018-05-20
会社案内/求人情報
2018-01-11
技術系備忘録/AWS/EC2 AmazonLinuxにSWAPを設定
技術系備忘録/AWS
2017-11-21
技術系備忘録/C++/Boost/インストール手順
2017-10-25
技術系備忘録/C++/Boost
技術系備忘録/C++/VisualStudio
技術系備忘録/C++/Boost/boost.asioコルーチン内で表コンテキストの処理を行う
2017-10-17
技術系備忘録/C++/VisualStudio/デバッガでstd.stringをUTF-8で表示
リンク
rlib-MML デモページ
MML (Music Macro Language) をコンパイルし、再生や標準MIDIファイル出力をブラウザ上で行える形にまとめています。
Magome
クラウドベースのMIDIシーケンサ
音楽制作に興味のある方を対象に、スタンドアロンでも使え、ネットならではの面白さも兼ね備えた音楽制作アプリの提供を目指しています。
twitter
Tweets by thinkridge
(有)シンクリッジは 技術者 を募集しております。
|
一覧
検索
最新
ヘルプ
ページへ戻る
履歴
印刷
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入
のソース
xpwiki
:
技術系備忘録
/
TypeScript
/
VisualStudioでのフロントエンド開発環境 React導入
のソース
差分
を表示
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入
へ行く。
VisualStudioでのフロントエンド開発で React が使えるようにインストールします。 [[技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境]] からの続きで書いてますので、まずはそっちを復習ってもらうとスムーズです。 ココでは React の導入を扱ってますが、他のモジュールについても(型定義ファイル等が提供されているものであれば)ほぼ同じです。 *** 注意事項 [#v3abc79d] - ココで記載している手順は TypeScript2.0 を前提にしています。そのため、TypeScript2.0 未満の環境だと、そのままでは動きません。 -- TypeScript2.0 から npm 単体で型定義ファイルの取得が出来るようになったようなので、それを利用しています。 2.0 未満の場合、tsd か typings などを使うことになりますが、それについてはココでは端折ります。 - VisualStudio2013 では TypeScript2.0 plugin は提供されないっぽいので、今のところ VisualStudio2015 + TypeScript2.0 plugin 縛りの情報です。 - 今時点の TypeScript2.0 はまだベータ版(RCなのかな?)ですが、そこは気にせず TypeScript 2.0.2 Beta for Visual Studio 2015 という plugin を使っています。 * 手順 [#h6081403] ** react.js をインストール [#da180d5e] プロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 + npm で react と react-dom をインストールします。 > npm install --save react > npm install --save react-dom ** 型定義ファイルをインストール [#r9235652] プロジェクトのカレントディレクトリをコマンドプロンプトで開きます。 + npm @types で react と react-dom の型定義ファイルをインストールします。 > npm install --save @types/react > npm install --save @types/react-dom - これで package.json に情報が追記されているので、> npm install で同じ環境が作れます。 - TypeScript2.0 未満ではこの方法は使えませんので、ご注意下さい。 * とりあえずサンプルコード [#w4e15eed] + プロジェクトのコンテキストメニュー [追加]-[TypeScript JSX ファイル] を選択し、ファイル名 [reacttest.tsx]で作成します。 -- 中身は以下のようにします。 #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 本体は結合させない方法 [#x5a4fd0e] 上記では、自身のコードの他に React.js 本体のコードも結合された巨大な js ファイルが出来上がることになります。 それで問題ない場合も多々あると思いますが、react.js は別ファイルにしておきたいとか、CDN に任せたいとかあると思います。 そういう場合には、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> <!-- 追加 --> <script src="bundle.js"></script> ・・・ }} --↑のように自身で抱えてもいいですが、世間様のCDNサイトを指定するでももちろんOKです。 + 以上で完了です。ビルドして出来上がった bundle.js ファイルが 4KB 程度で収まっていることと、ブラウザで正しく表示されることを確認して下さい。 &ref(ReactTest.png,mw:480,mh:360); * よもやま [#u3e925b9] - TypeScript2.0 の @types はとても便利です。環境構築の手間がだいぶシンプルになります。 @types はマイクロソフト様が用意してくれているっぽい(らしい。とどこかのサイトに書いてありました)ので、なんとなく安心です。 - 現在提供されている React の型定義ファイルのバージョンは v0.14 って書いてあります。一方 React.js は 15.3.x です。このあたりはどこかで追いついてくれるといいなぁと思いました。
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入 のバックアップソース(No. All)
現: 2016-09-22 (木) 20:23:03
takatsuka
ぺージ情報
ぺージ名 :
技術系備忘録/TypeScript/VisualStudioでのフロントエンド開発環境 React導入
ページ別名 :
未設定
ページ作成 :
takatsuka
閲覧可
グループ :
すべての訪問者
ユーザー :
すべての訪問者
編集可
グループ :
なし
ユーザー :
なし
Counter: 5822, today: 3, yesterday: 0