Sample App React-Spectrum

[Urs_Boller]

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...

[sarahxxu]

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]

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 · Accepted solution]

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

[Urs_Boller]

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]

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.