diff --git a/docs/static-pages.md b/docs/static-pages.md index 08f9ad04..8ac165a6 100644 --- a/docs/static-pages.md +++ b/docs/static-pages.md @@ -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 ``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 `About` element to `` 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 @@ -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