ウェブサイト検索

ReactとTypeScriptの使用

紹介

TypeScriptは素晴らしいです。Reactもそうです。両方を一緒に使いましょう！TypeScriptを使用することで、IntelliSenseの利点を得ることができ、さらにコードについて考えることも可能になります。また、TypeScriptを採用することは摩擦が少なく、ファイルを徐々にアップグレードしても、プロジェクト全体に問題を引き起こすことはありません。

前提条件

このガイドに従って進む場合は、次のものが必要です:

  • 非rootユーザーがsudo権限を持ち、ファイアウォールが有効なUbuntu 20.04サーバーが1台セットアップされています。これは、Ubuntu 20.04初期サーバーセットアップガイドに従って行うことができます。
  • Node.js と npm がインストールされました。これを NodeSource PPA を使って Apt で行うことができます。始めるには、Ubuntu 20.04 に Node.js をインストールする方法に関するガイドの オプション 2 に従ってください。

プロジェクトの設定：

必要なガイドに従って Node.js と npm をインストールしたと仮定して、新しいディレクトリを作成します。ここでは、これを react-typescript と呼びます:

  1. mkdir react-typescript

ターミナル内でこのディレクトリに移動してください:

  1. cd react-typescript/

次に、デフォルトで新しいnpmプロジェクトを初期化します:

  1. npm init -y



Wrote to /home/sammy/react-typescript/package.json:

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これが初期化されたら、次に適切なReactの依存関係をインストールします。

Reactの依存関係をインストールする

最初に、Reactの依存関係である react と react-dom をインストールします:

  1. sudo npm install react react-dom

次に、srcというフォルダを作成します:

  1. mkdir src

srcディレクトリに変更します:

  1. cd src/

次に、srcフォルダーに挿入するためのindex.htmlファイルを作成します。これは、好みのテキストエディターで行うことができます。ここでは、nanoを使用します:

  1. nano index.html

index.htmlファイルが開いたので、いくつかの編集を行い、以下の内容を追加できます:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>React + TypeScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="main"></div>
  <script type="module" src="./App.tsx"></script>
</body>
</html>

作業が完了したら、ファイルを保存して閉じてください。nanoを使用している場合は、CTRL + Xを押してから、YとENTERを押すことでこれを行うことができます。

私たちはバンドラーとしてParcelを使用しますが、希望する場合はwebpackや他のバンドラーを選択することもできます。また、Create React Appを使用することを好む場合は、このセクションを確認してください。まず、プロジェクトに追加するためにParcelをインストールしましょう:

  1. sudo npm install parcel

次に、TypeScriptをインストールします:

  1. sudo npm install --location=global typescript

次に、React と ReactDOM の型をインストールします:

  1. sudo npm install @types/react @types/react-dom

すべてがインストールされた後、二つのドットを使って親ディレクトリに戻ります:

  1. cd ..

開発サーバーの起動と運用

次に、package.jsonを更新して、開発サーバーを起動する新しいタスクを追加します。これを行うには、まずお好みのテキストエディタでファイルを作成して開きます:

  1. nano package.json

ファイルを開いたら、既存の内容を以下の内容に置き換えてください。

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "An example of how to use React and TypeScript with Parcel",
  "scripts": {
    "dev": "parcel src/index.html"
  },
  "keywords": [],
  "author": "Paul Halliday",
  "license": "MIT"
}

終わったら、ファイルを保存して閉じてください。

では、srcディレクトリに戻ってください:

  1. cd src/

ディレクトリに入ったら、基本的なカウンターを含むCounter.tsxファイルを作成して開いてください。

  1. nano Counter.tsx

次の内容をファイルに追加してください:

import * as React from 'react';

export default class Counter extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

完了したら、ファイルを保存して閉じてください。

次に、お好みのテキストエディタでApp.tsxファイルを作成します:

  1. nano App.tsx

ファイルが開いたので、カウンターを読み込むために次の情報を追加してください:

import * as React from 'react';
import { render } from 'react-dom';

import Counter from './Counter';

render(<Counter />, document.getElementById('main'));

コンテンツを追加したら、ファイルを保存して閉じてください。

次に、ポートトラフィックを許可するためにファイアウォールの設定を更新します: 1234:

  1. sudo ufw allow 1234

最後に、次のコマンドでプロジェクトを実行します:

  1. sudo npm run dev



> react-typescript@1.0.0 dev
> parcel src/index.html

Server running at http://localhost:1234
✨ Built in 3.84s

ブラウザでhttp://your_domain_or_IP_server:1234に移動して、すべてが正常に動作していることを確認してください。あなたのページには以下の増加および減少機能があるはずです:

増加および減少機能を持つウェブページ

あなたのサンプルプロジェクトは現在、無事に稼働しています。

Create React AppとTypeScript

プロジェクトを始めるために Create React App を使用したい場合、CRA が TypeScript をアウトオブボックスでサポートするようになったことを知って嬉しいでしょう。

create-react-app コマンドを実行する際に --typescript フラグを使用してください:

機能コンポーネント

ステートレスまたは関数コンポーネントは、TypeScriptで次のように定義できます。

import * as React from 'react';

const Count: React.FunctionComponent<{
  count: number;
}> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count;

私たちは React.FunctionComponent を使用し、期待される props のオブジェクト構造を定義しています。このシナリオでは、count という名前の1つの prop が渡されることを期待しており、インラインでそれを定義しています。他の方法でも定義することができ、Props のようなインターフェイスを作成することができます。

interface Props {
  count: number;
}

const Count: React.FunctionComponent<Props> = (props) => {
  return <h1>{props.count}</h1>;
};

クラスコンポーネント

クラスコンポーネントは、以下のようにTypeScriptで定義することもできます。

import * as React from 'react';

import Count from './Count';

interface Props {}

interface State {
  count: number;
};

export default class Counter extends React.Component<Props, State> {
  state: State = {
    count: 0
  };

  increment = () => {
    this.setState({
      count: (this.state.count + 1)
    });
  };

  decrement = () => {
    this.setState({
      count: (this.state.count - 1)
    });
  };

  render () {
    return (
      <div>
        <Count count={this.state.count} />
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

デフォルトのプロップス

デフォルトのプロパティを設定したい場合には、defaultPropsを定義することもできます。私たちはカウントの例を次のように更新することができます:

import * as React from 'react';

interface Props {
  count?: number;
}

export default class Count extends React.Component<Props> {
  static defaultProps: Props = {
    count: 10
  };

  render () {
    return <h1>{this.props.count}</h1>;
  }
}

私たちは、デフォルトのプロパティを書き換えてしまうので、Counterコンポーネントにthis.state.countを渡すのをやめる必要があります。

render () {
  return (
    <div>
      <Count />
      <button onClick={this.increment}>Increment</button>
      <button onClick={this.decrement}>Decrement</button>
    </div>
  )
}

これで、TypeScriptとReactを使用するように設定されたプロジェクトがあり、独自の関数型およびクラス型コンポーネントを作成するためのツールも揃っているはずです！

関連記事: