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

**URL:** https://publichappinessmovement.com/t/topic/1274
**Category:** Front End - Documentation
**Tags:** documentation, react, create-a-page, meteor, webdev, reactjs
**Created:** [3 June 2019 09:16 UTC](https://publichappinessmovement.com/t/topic/1274 "2019-06-03T09:16:57Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![ArtyS](https://publichappinessmovement.com/user_avatar/publichappinessmovement.com/artys/32/288_2.png) [@ArtyS](https://publichappinessmovement.com/u/ArtyS)
#### Post date: [3 June 2019 09:16 UTC](https://publichappinessmovement.com/t/topic/1274/1 "2019-06-03T09:16:57Z")

</div>

# Page Templates

[Access this GitHub repo to access the basic templates for adding a new React page to the site:](https://github.com/artysidorenko/reactPageTemplate)

[reactPageTemplate](https://github.com/artysidorenko/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/](https://fl-maps.publichappinessmovement.com/)[the path you set]

# Bringing your page into the Main Site (Docuss)

Open this Github page: [fl-maps/public/dcs-website.json at master · focallocal/fl-maps · GitHub](https://github.com/focallocal/fl-maps/blob/master/public/dcs-website.json)

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

Add [the path you set] only. You shouldn’t add ‘[https://fl-maps.publichappinessmovement.com/](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](https://github.com/focallocal/fl-maps/blob/master/imports/client/ui/pages/WhitePaper/Why)

2. I can access it live here: [https://fl-maps.publichappinessmovement.com/whitepaper/why](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/public/dcs-website.json at master · focallocal/fl-maps · GitHub](https://github.com/focallocal/fl-maps/blob/master/public/dcs-website.json)

4. My page is now accessible live at: [Public Happiness](https://publichappinessmovement.com/docuss/wp_why)

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](https://publichappinessmovement.com/t/topic/1144)