Create Sitecore JSS App using React JS

Prerequisite

Create a React App

  1. Open the Node JS command prompt.
  2. 2. Run the following command to create the JSS App.
jss create <appName> react
Create React App
cd <appName>
Jss start

Delete Default Created Files

  1. Delete all folders and files under “/src/components/” folder
  2. Delete all files under folder “/sitecore/definitions/components/
  3. Delete all files under folder “/sitecore/definitions/templates/
  4. Delete all files and folders under folder “/data/component-content/
  5. Delete all files and folders under folder “/data/content/
  6. Delete all files and folders “/data/routes/except en.yml

Update App Files

  1. Open the Package.json file and add two placeholders named jss-header and jss-footer
  1. Open the Layout.js located in src folder and update it to include the placeholders.
  1. Open the file “placeholders.sitecore.js” under “/sitecore/definitions/” and add the Header and Footer placeholders.

Create App’s API key

  1. Login to Sitecore instance and open the content editor.
  2. Navigate to “/sitecore/system/Settings/Services/API Keys/” and create a new Api key.

Create New Component

  1. Use command jss scaffold <ComponentName> to create a new component. Here I am creating a PageContent component which will display current page title, content and image.
export default function(manifest) {
manifest.addComponent({
name: ‘PageContent’,
icon: SitecoreIcon.DocumentTag,
fields: [
{ name: ‘pageTitle’, type: CommonFieldTypes.SingleLineText },
{ name: ‘content’, type: CommonFieldTypes.RichText },
{ name: ‘image’, type: CommonFieldTypes.Image },

],
/*If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder, register it here, or components added to that placeholder will not be returned by Sitecore: placeholders: [‘exposed-placeholder-name’] */
placeholders: [‘jss-main’]
});

Update App Route Template

Update default App Route template

Update en.yml File

  1. Open the en.yml under “/data/route” folder.
  2. Remove the default component, its fields and data.
  3. Add the “PageContent” in it.
will

Deploy the App

Analyze the Content Tree and Verify Output

  1. You will see there is a new node created with name of app in the content tree.
Newly Created App
App Home Page

What’s Next

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Component Lifecycle methods

TypeScript Will Make You Suffer.

String

Vue.js + Tailwind CSS & UI

Creating a treasury proposal — Step by Step guide

React project setup — without any boilerplates

Functions + Game

Things I learned today

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alok Kumar

Alok Kumar

More from Medium

Built Cult.fit Clone using React !!

Using Axios in ReactJS

React Marvel API Project with Source Code

How to Create Stepped Area Chart (Google Chart) in React JS

Stepped Area Chart in React JS