Move changing the page title to its own file

This commit is contained in:
Kristofer Selbekk
2018-10-07 19:24:10 +02:00
parent 7452933216
commit b4b3581f5c
3 changed files with 13 additions and 11 deletions

View File

@@ -0,0 +1,12 @@
---
id: changing-the-page-title
title: Changing the `<title>`
---
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
Note that normally you wouldnt edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-rendering-into-static-html-files).

View File

@@ -11,7 +11,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
## Table of Contents
- [Changing the Page `<title>`](#changing-the-page-title)
- [Installing a Dependency](#installing-a-dependency)
- [Importing a Component](#importing-a-component)
- [Code Splitting](#code-splitting)
@@ -51,16 +50,6 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Advanced Configuration](#advanced-configuration)
- [Alternatives to Ejecting](#alternatives-to-ejecting)
## Changing the Page `<title>`
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
Note that normally you wouldnt edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
If you use a custom server for your app in production and want to modify the title before it gets sent to the browser, you can follow advice in [this section](#generating-dynamic-meta-tags-on-the-server). Alternatively, you can pre-build each page as a static HTML file which then loads the JavaScript bundle, which is covered [here](#pre-rendering-into-static-html-files).
## Installing a Dependency
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:

View File

@@ -16,6 +16,7 @@
"developing-components-in-isolation",
"analyzing-the-bundle-size"
],
"How-to": ["changing-the-page-title"],
"Testing": ["running-tests", "debugging-tests"],
"Deployment": ["publishing-components-to-npm", "deployment"],
"Support": [