1. Developing with Oracle Content Management As a Headless CMS
  2. Starter Site CLI for React Development
  3. Structure of the React JS Site Template

Structure of the React JS Site Template

The StarterSite.zip site template is used to create a site by default. This template comes with the CLI.

You can find it here:

  • Windows:

    C:\Users\<userid>\AppData\Roaming\npm\node_modules\cecss-cli\data

  • Mac

    /usr/local/lib/node_modules/cecss-cli/data

Description of react_template.png follows
Description of the illustration react_template.png

In the template:

  • index.html is the page template.

  • index.js is the JavaScript entry point.

  • Constants.js is where constants are defined.

  • app/App.js is a React component that is the main parent component of the Simple Page App. The React router is used to decide which component to show and which to hide.

  • assets/app.css is the css used by the site.

  • {{types}}/{{name}}.js is a placeholder. React components will be generated for each content type to render the content item, content list, or search result of this content type, based on parameters

  • common/ContentItem.js is a React component that will render an item with passed-in layout, and will also be responsible for kicking off the item query.

  • common/ContentList.js is a React component that will render the content list with passed-in layout, and will also be responsible for kicking off the items query.

  • common/ItemMultiValues.js is a React component that will render an item's field with multiple values.

  • common/queryItems.js contains JavaScript APIs that create Redux actions to fetch an item or items.

  • common/queryReducer.js is the reducer that saves the query result into the Redux store when it receives the fetch success action. It'll also set a loading flag to true when the fetch begins, and false when it finishes or fails.

  • common/Searchbar.js is a React component that will render the search field, and also be responsible for kicking off the search for content items.

After a site is created, all the source code is under <site name>/SRC/.


Description of starter-site-code.png follows
Description of the illustration starter-site-code.png

In the SRC directory:

  • content is the folder that contains the Oracle Content Management content.

  • Starter_Blog_Author/Starter_Blog_Author.js contains React components generated based on the placeholder in the site template for the content type Starter_Blog_Author.

  • Starter_Blog_Post/Starter_Blog_Post.js contains React components generated based on the placeholder in the site template for the content type Starter_Blog_Post.