mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
258 lines
8.3 KiB
Markdown
258 lines
8.3 KiB
Markdown
# 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/`](#1-creating-a-new-folder)
|
|
2. [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file)
|
|
3. [Create a new CSS file using the same name.](#3-creating-a-css-file)
|
|
4. [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component)
|
|
5. [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file)
|
|
6. [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory)
|
|
7. [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page)
|
|
|
|
## 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.)
|
|
|
|
```jsx
|
|
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](https://reactjs.org/) and [JSX](https://reactjs.org/docs/introducing-jsx.html)
|
|
to create components and pages. Therefore, we need to import React to our new component which is
|
|
done in the first line.
|
|
|
|
```jsx
|
|
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.
|
|
|
|
```jsx
|
|
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`.
|
|
|
|
```jsx
|
|
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](https://github.com/css-modules/css-modules) to tackle possible classhes of different
|
|
class names. [Read more.](#5-creating-the-css-file)
|
|
|
|
```jsx
|
|
import css from './AboutPage.css';
|
|
```
|
|
|
|
Then we also import an image which is used later (`<img src={image} alt="My first ice cream." />`).
|
|
|
|
```jsx
|
|
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](https://reactjs.org/docs/components-and-props.html).
|
|
|
|
In the template above we are using StaticPage component with some attributes:
|
|
|
|
```jsx
|
|
<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](http://schema.org/docs/full.html) 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.
|
|
|
|
```jsx
|
|
<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](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules)
|
|
|
|
## 5. Adding some styles to the CSS file
|
|
|
|
Here's an example what your AboutPage.css file could look like:
|
|
|
|
```css
|
|
@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):
|
|
|
|
```jsx
|
|
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.)
|
|
|
|
```javascript
|
|
{
|
|
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](https://babeljs.io/learn-es2015/): imports, exports, arrow functions
|
|
* [React](https://reactjs.org/): for creating components
|
|
* [JSX](https://reactjs.org/docs/introducing-jsx.html): for getting HTML-like markup syntax for own
|
|
components
|
|
* [CSS Modules](https://github.com/css-modules/css-modules)
|
|
* [React Router](https://reacttraining.com/react-router/web/guides/philosophy): routing inside the
|
|
application.
|