UI Components in the JSS React sample app

Current version: 19.x

UI components in an application built with the Sitecore JavaScript Rendering SDK (JSS) for React are no different from any other React component, except that they are dynamically added inside a Placeholder component that provides them with the fields property. For example:

The following is an example of a React component definition in a JSS application:

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

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

export default Welcome;

The Welcome component is written as a stateless functional component because there is no internal component state or need for lifecycle methods, but you can also use the ES6 class syntax and extend from React.Component. JSS does not place any limitations on the usage of normal React conventions.

Handling Sitecore field types

JSS for React provides helper components for handling Sitecore field types. Helper components are special components that render Sitecore field values and allow field editing in advanced Sitecore editors.

JSS for React includes components for displaying field types such as text, images, dates, rich text, and more.

Tip

Consult the Styleguide page in a JSS React sample application for live examples of all the available components.

Do you have some feedback for us?

If you have suggestions for improving this article,