# 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`を記述します。
{% code title="UserDetail.tsx" %}
```tsx
export const UserDetail = () => {
return (
)
}
```
{% endcode %}
ファイル最後に`export default UserDetail`とするのもいいですが、その場合`import`するときに`import Hoge from "./UserDetail"`のように関数名を変えることができてしまうので、個人的に関数前に`export`をつけます。
では大元のComponentの`App.tsx`ファイルにて呼び出してみましょう。元々の記述を消して、以下のように記述しましょう。
Componentを呼び出す際は、``のようにHTMLタグのような形で呼び出します。
{% code title="App.tsx" %}
```tsx
import { UserDetail } from "./UserDetail";
const App = () => {
return (
)
};
export default App;
```
{% endcode %}
`npm run dev`にてアプリを起動した状態で[http://localhost:5173](http://localhost:5173/) にて以下のように表示されるかと思います。
Component内では変数を埋め込むことができ、HTML内にて`{変数}`とすることで埋め込むことができます。
export const UserDetail = () => {
const age = 25
return (
<div>
<p>太郎</p>
<p>{age}歳</p>
</div>
)
}