Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Sample App React-Spectrum

Urs_Boller
Community Advisor
Community Advisor

I started using the example app, but I'm having a hard time to get navigation up and running.

Is there any example about a simple app with a "header" (top navigation with a few sample entries) and some components (as routes for the header nav?

would save me a lot of time to start with a simple template instead trying to figure out how react-spectrum should be used (especially the state change)....

remark: no need for big contents in the components, some simple text pages is far enough. it's more about the handling of the spa router together with authentication...

1 Accepted Solution
StephanAdobe
Correct answer by
Employee
Employee

Hi @Urs_Boller 

 

I recommend to use react-router to handle navigation in your app. Here is a simple working example that shows how to set up navigation.

 

Also if you plan to use TypeScript + React JSX, you should add a tsconfig.json file under your web-src folder with the following config:

 

{
  "compilerOptions": {
    "jsx": "react"
  }
}

 

See https://en.parceljs.org/typeScript.html#when-using-react for more information.

 

Regards,

Stephan

View solution in original post

5 Replies
sarahxxu
Level 2
Level 2

Hi @Urs_Boller 

I think we do have some sample applications (see "Code Labs" on this page https://www.adobe.io/apis/experienceplatform/project-firefly/docs.html#!AdobeDocs/project-firefly/ma...). However, I don't think we have one showing top nav and route mapping like the one you are asking for. I can share the feedback with our enablement team and see if they have anything ready to share!

In the meantime -- perhaps some existing React tutorials around routing would help?

Sarah

 

Urs_Boller
Community Advisor
Community Advisor

Hi @sarahxxu

Looking at React is what I'm doing currently. but as far as I understand, React Spectrum is just "similar" but not the same. and the docs are "under construction".... 

would love to see some simple example which help to get into React Spectrum more easely...

StephanAdobe
Correct answer by
Employee
Employee

Hi @Urs_Boller 

 

I recommend to use react-router to handle navigation in your app. Here is a simple working example that shows how to set up navigation.

 

Also if you plan to use TypeScript + React JSX, you should add a tsconfig.json file under your web-src folder with the following config:

 

{
  "compilerOptions": {
    "jsx": "react"
  }
}

 

See https://en.parceljs.org/typeScript.html#when-using-react for more information.

 

Regards,

Stephan

View solution in original post

Urs_Boller
Community Advisor
Community Advisor

Hi @StephanAdobe 
Thanks for the links and description. In fact I already implemented the React Routing as a first idea, but was not sure if this is the best way. mainly because in the sample app (App.js) there is a function which logs any URL changes:

this.props.runtime.on('history', ({ type, path }) => {
  console.log('history change', { type, path })
})

So I was wondering if this is already the setup to handle the desired routing, eg. by adding a function to replace the content/load component by path... 

StephanAdobe
Employee
Employee

You can use the Hash Router which plays well in the Unified Shell see https://reacttraining.com/react-router/web/api/HashRouter. The code you referenced is related to the Unified Shell history handling. Every time the Unified Shell detects a change in the history, it passes it down to your App e.g. so that you can change its hash router see https://github.com/AdobeDocs/project-firefly/blob/master/guides/exc_app/overview.md#history.