Componentの作成

では、Componentを作成していきます。

srcの中にUserDetail.tsxというファイルを作成しましょう。tsxという拡張子は、TypeScript XMLの略称で、TypeScriptにてタグを使用する際に、tsxと拡張子をつけます。

Componentを作成する方法として、Class ComponentとFunctional Componentがあります。現在ではFunctional Componentが主流ですので、Functional Componentにて説明します。

Functional ComponentでComponentを作成するには、const UserDetailのようにパスカルケースにて関数名を定義します。そして関数内の処理として、htmlを返却するようにします。

このComponentを別ファイルにて呼び出すためには、exportする必要がありますので、関数前にexportを記述します。

UserDetail.tsx

export const UserDetail = () => {
    return (
        <div>
            <p>太郎</p>
            <p>25歳</p>
        </div>
    )
}

ファイル最後にexport default UserDetailとするのもいいですが、その場合importするときにimport Hoge from "./UserDetail"のように関数名を変えることができてしまうので、個人的に関数前にexportをつけます。

では大元のComponentのApp.tsxファイルにて呼び出してみましょう。元々の記述を消して、以下のように記述しましょう。

Componentを呼び出す際は、<UserDetail />のようにHTMLタグのような形で呼び出します。

App.tsx

import { UserDetail } from "./UserDetail";

const App = () => {
  return (
    <div>
      <UserDetail />
    </div>
  )
};

export default App;

npm run devにてアプリを起動した状態でhttp://localhost:5173 にて以下のように表示されるかと思います。

Component内では変数を埋め込むことができ、HTML内にて{変数}とすることで埋め込むことができます。

UserDetail.tsx◎

export const UserDetail = () => {
    const age = 25

    return (
        <div>
            <p>太郎</p>
            <p>{age}歳</p>
        </div>
    )
}