How To: Add a Basic React Page to the Maps Site

Web Dev - Documentation Front End - Documentation
, , , , ,
1

Page Templates

Access this GitHub repo to access the basic templates for adding a new React page to the site:

reactPageTemplate

Steps to create a page:

  1. Populate one of the templates included in this repo
    1a. functional template: basic page without any state or lifecycle hooks
    1b. class template if you want your page to have dynamic state or build behaviour linked to its lifecycle (e.g. fire an event when page has reloaded)

  2. Import your component into the page where you want it located - import MyComponent from '/path/to/component' - then add it into the page’s render()/return statement like any other tag <MyComponent/>

  3. If you are importing into the page root app.js, it will be displayed everywhere on the site unless:
    3a. you wrap it inside a Route tag:
    <Route exact path="/desiredRoute" component={MyComponent} />
    3b. you then add a Link tag to link to the desired path (similar to an anchor tag but compatible with React), for example in the app Navbar:
    <Link to="/desiredRoute">Click Me</Link

URL in the Live Site

Your page will now appear at: https://fl-maps.publichappinessmovement.com/[the path you set]

Bringing your page into the Main Site (Docuss)

Open this Github page: fl-maps/dcs-website.json at master · focallocal/fl-maps · GitHub

To add your page at: https://fl-maps.publichappinessmovement.com/[the path you set]

Add [the path you set] only. You shouldn’t add ‘https://fl-maps.publichappinessmovement.com/’ to ‘url’ in the ‘pages’ section, then choose a name to define what url it will appear at in the main site.

Example:

  1. I want to bring this page into the Main Site: fl-maps/imports/client/ui/pages/WhitePaper/Why at master · focallocal/fl-maps · GitHub

  2. I can access it live here: https://fl-maps.publichappinessmovement.com/whitepaper/why

  3. I add this line { "name": "wp_why", "url": "/whitepaper" }, to the pages section in this page: fl-maps/dcs-website.json at master · focallocal/fl-maps · GitHub

  4. My page is now accessible live at: Public Happiness

  5. Its likely you will want to add Docuss links or balloons into it if you haven’t already so the community can engage with it. Here’s our Docuss Guide