UI Components in the JSS React sample app

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:

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.