---
title: "JSS ReactサンプルアプリのUIコンポーネント"
slug: "ui-components-in-the-jss-react-sample-app"
abstract: "JSSで構築されたReactアプリのUIコンポーネントの簡単な概要"
---
# JSS ReactサンプルアプリのUIコンポーネント

Sitecore JavaScript Rendering SDK(JSS) for Reactで構築されたアプリケーション内のUIコンポーネントは、他のReactコンポーネントと何ら変わりませんが、fieldsプロパティを持つPlaceholderコンポーネント内に動的に追加されます。例えば:

以下はJSSアプリケーションにおけるReactコンポーネント定義の例です:

import React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';

const Welcome = ({ fields }) => (
 <View>
 <Text field={fields.title} />
 </View>
);

export default Welcome;

Welcomeコンポーネントは、内部コンポーネントの状態やライフサイクルメソッドの必要性がないため、ステートレス関数コンポーネントとして書かれていますが、ES6クラス構文を使い、そこから拡張することも可能ですReact.Component。JSS通常のReact慣例の使用に制限はありません。

## Sitecoreフィールドタイプの取り扱い

JSS for Reactは、Sitecoreフィールドタイプを扱うためのヘルパーコンポーネントを提供します。ヘルパーコンポーネントは、Sitecoreフィールド値をレンダリングし、高度なSitecoreエディタでのフィールド編集を可能にする特別なコンポーネントです。

JSS for Reactには [、テキスト、画像、日付、リッチテキストなどのフィールドタイプを表示するコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-components-for-rendering-sitecore-fields-in-react-applications.html "JSS components for rendering Sitecore fields in React applications")が含まれています。

> !ヒント利用可能なすべてのコンポーネントのライブ例については、JSS Reactサンプルアプリケーションのスタイルガイドページを参照してください。