React
TypescriptでのReactJSの使用
サーチ…
Typescriptで書かれたReactJSコンポーネント
実際、ReactJSのコンポーネントはTypescriptでfacebookの例のように使うことができます。 'jsx'ファイルの拡張子を 'tsx'に置き換えてください:
//helloMessage.tsx:
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
しかし、Typescriptの主な機能(静的型チェック)をフルに活用するためには、
1)React.createClassの例をES6に変換するクラス:
//helloMessage.tsx:
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);
2)次に、小道具と州のインターフェースを追加する:
interface IHelloMessageProps {
name:string;
}
interface IHelloMessageState {
//empty in our case
}
class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
constructor(){
super();
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
プログラマが小道具を渡すことを忘れた場合、Typescriptはエラーを表示します。または、インタフェースに定義されていない小道具を追加した場合。
Typescriptのステートレスなリアクションコンポーネント
それらの小道具の純粋な機能であり、内部状態を必要としない反応コンポーネントは、標準クラス構文を使用する代わりに、JavaScript関数として記述することができます。
import React from 'react' const HelloWorld = (props) => ( <h1>Hello, {props.name}!</h1> );
React.SFC
クラスを使ってReact.SFC
で同じことができます:
import * as React from 'react'; class GreeterProps { name: string } const Greeter : React.SFC<GreeterProps> = props => <h1>Hello, {props.name}!</h1>;
なお、名前React.SFC
別名ですReact.StatelessComponent
のいずれかを使用することができますので、。
インストールとセットアップ
ノード・プロジェクトでreactとtypescriptを使用するには、最初にnpmで初期化されたプロジェクト・ディレクトリーを持っていなければなりません。 npm init
ディレクトリを初期化するには
npmまたは糸での取り付け
次のようにしてnpmを使ってReactをインストールすることができます:
npm install --save react react-dom
FacebookはYarnという独自のパッケージマネージャをリリースしました。これはReactのインストールにも使用できます。 Yarnをインストールしたら、次のコマンドを実行するだけです:
yarn add react react-dom
Reactをnpm経由でインストールした場合とまったく同じ方法で、プロジェクトでReactを使用することができます。
Typescript 2.0以降での反応型定義のインストール
typescriptを使用してコードをコンパイルするには、npmまたはyarnを使用して型定義ファイルを追加またはインストールします。
npm install --save-dev @types/react @types/react-dom
または、糸を使用して
yarn add --dev @types/react @types/react-dom
Typescriptの古いバージョンでの反応型定義のインストール
tsdという別のパッケージを使用する必要があります
tsd install react react-dom --save
Typescript構成の追加または変更
JavaScriptとhtml / xmlを混在させたJSXを使用するには、typescriptコンパイラの設定を変更する必要があります。プロジェクトのtypescript設定ファイル(通常はtsconfig.json
というtsconfig.json
)に、JSXオプションを次のように追加する必要があります。
"compilerOptions": { "jsx": "react" },
そのコンパイラオプションは、基本的にtypescriptコンパイラに、コード内のJSXタグをjavascript関数呼び出しに変換するように指示します。
typescriptコンパイラがJSXをプレーンなjavascript関数呼び出しに変換するのを避けるには、
"compilerOptions": {
"jsx": "preserve"
},
ステートレスおよびプロパティレスコンポーネント
状態のない最も簡単な反応コンポーネントとプロパティは、次のように記述できます。
import * as React from 'react';
const Greeter = () => <span>Hello, World!</span>
しかし、そのコンポーネントはthis.props
アクセスすることができません。 this.props
、typescriptはそれが反応コンポーネントかどうかを知ることができないからです。その小道具にアクセスするには、以下を使用します。
import * as React from 'react';
const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>
コンポーネントに明示的にプロパティを定義していない場合でも、すべてのコンポーネントには本来子があるため、 props.children
アクセスできるようになりました。
ステートレスとプロパティレスのコンポーネントのもう1つの同様の優れた使い方は、単純なページテンプレートの使用です。次は、プロジェクト内に仮想のContainer
、 NavTop
、およびNavBottom
コンポーネントが既に存在すると仮定すると、単純なPage
コンポーネントのNavBottom
です。
import * as React from 'react';
const Page: React.SFC<{}> = props => () =>
<Container>
<NavTop />
{props.children}
<NavBottom />
</Container>
const LoginPage: React.SFC<{}> = props => () =>
<Page>
Login Pass: <input type="password" />
</Page>
この例では、 Page
コンポーネントは後で他の実際のページで基本テンプレートとして使用できます。