flex-template-web/docs/static-pages.md

Static pages

If you want to create simple pages that just show static content without need for data fetches, you can create a static page.

Steps for creating a static page:

1. Create a new folder under src/containers/
2. Create a new JavaScript file using the same name.
3. Create a new CSS file using the same name.
4. Write the content to a JavaScript file (i.e. AboutPage.js in our example).
5. Write the style rules to CSS file (i.e. AboutPage.css in our example).
6. Add the newly created page component to src/containers/index.js
7. Add the newly created page to src/routeConfiguration.js

1. Creating a new folder

Create a new folder under src/containers/ with the name of your static page. E.g. "about" page should be named as AboutPage.

2. Creating a JavaScript file

Create a new JavaScript file using the folder name. The path should look like src/containers/AboutPage/AboutPage.js.

3. Creating a CSS file

Create a new CSS file using the folder name. The path should look like src/containers/AboutPage/AboutPage.css.

4. Creating the component

Template for a single column static page (AboutPage.js): (We'll go through this line-by-line below.)

import React from 'react';
import { StaticPage, TopbarContainer } from '../../containers';
import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  NamedLink,
  ExternalLink,
} from '../../components';

import css from './AboutPage.css';
import image from './path/to/image.png';

const AboutPage = () => {
  return (
    <StaticPage
      className={css.root}
      title="About"
      schema={{
        '@context': 'http://schema.org',
        '@type': 'AboutPage',
        description: 'Description of this page',
        name: 'About page',
      }}
    >
      <LayoutSingleColumn>
        <LayoutWrapperTopbar>
          <TopbarContainer />
        </LayoutWrapperTopbar>
        <LayoutWrapperMain>
          <h1>Some content</h1>
          <img src={image} alt="My first ice cream." />
          <div>
            <NamedLink name="LandingPage">Go to home page</NamedLink> or
            <ExternalLink href="https://google.com">Go to Google</ExternalLink>
          </div>
        </LayoutWrapperMain>
        <LayoutWrapperFooter>
          <Footer />
        </LayoutWrapperFooter>
      </LayoutSingleColumn>
    </StaticPage>
  );
};

export default AboutPage;

We are using React and JSX to create components and pages. Therefore, we need to import React to our new component which is done in the first line.

import React from 'react';

In the second line we are importing two containers:

• StaticPage: helps in creating static pages
• TopbarContainer: creates our Topbar component and fetches the data it needs.

import { StaticPage, TopbarContainer } from '../../containers';

After that we need to import some components:

• LayoutSingleColumn and wrappers that it needs to position content
• Footer component (to be added inside LayoutWrapperFooter)
• NamedLink makes it easier to point to different pages inside the application
• ExternalLink can be used to link outside the application. It creates a normal <a>link with extra attributes target="_blank" rel="noopener noreferrer" that add some security to these outbound links.

LayoutSingleColumn (and other layouts like LayoutSideNavigation) need to understand what the content is about. Therefore, different parts of the page need to be wrapped with specific components - in this case: LayoutWrapperTopbar, LayoutWrapperMain, and LayoutWrapperFooter.

import {
  LayoutSingleColumn,
  LayoutWrapperTopbar,
  LayoutWrapperMain,
  LayoutWrapperFooter,
  Footer,
  NamedLink,
  ExternalLink,
} from '../../components';

Then we need to import styles and possible other files from current folder. With CSS we are using CSS Modules to tackle possible classhes of different class names. Read more.

import css from './AboutPage.css';

Then we also import an image which is used later (<img src={image} alt="My first ice cream." />).

import image from './path/to/image.png';

Then after all the imports we are finally getting into phase were we define the component. const AboutPage = props => { return <div></div>} defines a component called AboutPage with content defined in return part. This is a functional component.

In the template above we are using StaticPage component with some attributes:

    <StaticPage
      className={css.root}
      title="About"
      schema={{
        "@context": "http://schema.org",
        "@type": "AboutPage",
        "description": "Description of this page",
        "name": "About page",
      }}
    >

• className is JSX name for class attribute used in plain HTML.
• title="About" creates <title>About</title> element to <head> section of the page. (That title is also used in OpenGraph meta tags). You could also add description="This is about page description"
• Then we have schema tag that defines some data for search engines in JSON-LD format. Check schema.org for more information.

Inside StaticPage component we define layout (LayoutSingleColumn) and add other components inside semantic content wrappers so that the layout is able to understand where to render those blocks.

<LayoutSingleColumn>
  <LayoutWrapperTopbar>
    <TopbarContainer />
  </LayoutWrapperTopbar>
  <LayoutWrapperMain>
    <h1>Some content</h1>
    <img src={image} alt="My first ice cream." />
    <div>
      <NamedLink name="LandingPage">Go to home page</NamedLink> or
      <ExternalLink href="https://google.com">Go to Google</ExternalLink>
    </div>
  </LayoutWrapperMain>
  <LayoutWrapperFooter>
    <Footer />
  </LayoutWrapperFooter>
</LayoutSingleColumn>

And as a final step we need to export the component. export default AboutPage;. See more from babeljs.org

5. Adding some styles to the CSS file

Here's an example what your AboutPage.css file could look like:

@import '../../marketplace.css';

.root {
  padding: 24px;

  /* Use CSS variable imported from marketplace.css */
  background-color: var(--marketplaceColor);
}

6. Adding the component to the component directory

New component needs to be added to src/containers/index.js file or if it's a presentational component (not page or form) it should be inside components folder and therefore added to src/components/index.js

Inside that index.js you need to add line export { default as AboutPage } from './AboutPage/AboutPage';. This helps other parts of the app to import new components easily with import { AboutPage } from '../../components'.

7. Adding a route to the page

As a last step you need to add the newly created static page to the routing. This can be done in src/routeConfiguration.js.

Inside routeConfiguration function you should add a URL path, a page name (it should not conflicting with other pages), and the component itself.

Add it as first to the list of imported pages in alphabetical order (2nd line):

import {
  AboutPage,
  AuthenticationPage,
  CheckoutPage,

and after that add the route configuration to your newly created page: (In this example we created about page so '/about' would work well as a path.)

    {
      path: '/about',
      name: 'AboutPage',
      component: AboutPage,
    },

Read more

We are using several libraries in this example. If you want to read more, here's some pointers:

• ES2015: imports, exports, arrow functions
• React: for creating components
• JSX: for getting HTML-like markup syntax for own components
• CSS Modules
• React Router: routing inside the application.