mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-26 06:47:17 +10:00
Update static pages doc
Fix a few typos and rephrase here and there.
This commit is contained in:
Hannu Lyytikäinen
Hannu Lyytikainen
parent
cc8c685c32
commit
63eb8ebe91
1 changed files with 22 additions and 22 deletions
|
|
@ -3,12 +3,12 @@
|
|||
If you want to create simple pages that just show static content without need for data fetches,
|
||||
you can create a static page.
|
||||
|
||||
Steps to do 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-javascript-file)
|
||||
3) [Create a new CSS file using the same name.](#3-creating-css-file)
|
||||
4) [Write the content to 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-creating-the-css-file)
|
||||
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)
|
||||
|
||||
|
|
@ -16,17 +16,17 @@ Steps to do a static page:
|
|||
|
||||
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 JavaScript file
|
||||
## 2. Creating a JavaScript file
|
||||
|
||||
Create a new JavaScript file using the folder name. (Path should look like `src/containers/AboutPage/AboutPage.js`.)
|
||||
Create a new JavaScript file using the folder name. The path should look like `src/containers/AboutPage/AboutPage.js`.
|
||||
|
||||
## 3. Creating CSS file
|
||||
## 3. Creating a CSS file
|
||||
|
||||
Create a new CSS file using the folder name. (Path should look like `src/containers/AboutPage/AboutPage.css`.)
|
||||
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 single column static page (AboutPage.js):
|
||||
Template for a single column static page (AboutPage.js):
|
||||
(We'll go through this line-by-line below.)
|
||||
|
||||
```jsx
|
||||
|
|
@ -83,14 +83,14 @@ 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, That's what happening in the first line.
|
||||
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`: it helps you to create static pages
|
||||
- `TopbarContainer`: this creates our Topbar component and fetches the date it needs.
|
||||
- `StaticPage`: helps in creating static pages
|
||||
- `TopbarContainer`: creates our Topbar component and fetches the data it needs.
|
||||
|
||||
```jsx
|
||||
import { StaticPage, TopbarContainer } from '../../containers';
|
||||
|
|
@ -99,7 +99,7 @@ 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 Starter app.
|
||||
- `NamedLink` makes it easier to point to different pages inside Starter app
|
||||
- `ExternalLink` can be used to link outside of Starter app. 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`.
|
||||
|
|
@ -151,7 +151,7 @@ In the template above we are using StaticPage component with some attributes:
|
|||
- `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.
|
||||
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>
|
||||
|
|
@ -174,7 +174,7 @@ Inside StaticPage component we define layout (LayoutSingleColumn) and add other
|
|||
|
||||
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. Creating the CSS file
|
||||
## 5. Adding some styles to the CSS file
|
||||
|
||||
Here's an example what your AboutPage.css file could look like:
|
||||
```css
|
||||
|
|
@ -193,16 +193,16 @@ Here's an example what your AboutPage.css file could look like:
|
|||
|
||||
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 `import { AboutPage } from '../../components'`.
|
||||
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 Starter apps routing. This can be done in `src/routeConfiguration.js.
|
||||
As a last step you need to add the newly created static page to Starter apps routing. This can be done in `src/routeConfiguration.js`.
|
||||
|
||||
Inside routeConfiguration function you should add URL path, page name (it should not conflicting with other pages), and component itself.
|
||||
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 first to the imported pages in alphabetical order (2nd line):
|
||||
Add it as first to the list of imported pages in alphabetical order (2nd line):
|
||||
```jsx
|
||||
import {
|
||||
AboutPage,
|
||||
|
|
@ -211,7 +211,7 @@ import {
|
|||
```
|
||||
|
||||
and after that add the route configuration to your newly created page:
|
||||
(In this example we created about page. '/about' would work well as a path.)
|
||||
(In this example we created about page so '/about' would work well as a path.)
|
||||
```javascript
|
||||
{
|
||||
path: '/about',
|
||||
|
|
@ -222,7 +222,7 @@ and after that add the route configuration to your newly created page:
|
|||
|
||||
## Read more
|
||||
|
||||
We are using several libraries in this example. If you want to hear more, here's some pointers:
|
||||
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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue