Sample App React-Spectrum | Community
Skip to main content
Urs_Boller
Community Advisor
Urs_BollerCommunity Advisor
Community Advisor
May 27, 2020
Solved

Sample App React-Spectrum

  • May 27, 2020
  • 2 replies
  • 6523 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by StephanAdobe

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

2 replies

sarahxxu
Adobe Employee
sarahxxuAdobe Employee
Adobe Employee
May 27, 2020

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/master/resources.md). 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
    Urs_BollerCommunity AdvisorAuthor
    Community Advisor
    May 28, 2020

    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
    Adobe Employee
    StephanAdobeAdobe EmployeeAccepted solution
    Adobe Employee
    May 28, 2020

    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
    Community Advisor
    Urs_BollerCommunity AdvisorAuthor
    Community Advisor
    May 28, 2020

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

    Terms & ConditionsAccessibility statement

    Loading footer...