Combine even more pages

This commit is contained in:
Kristofer Selbekk
2018-10-08 19:40:18 +02:00
parent 9f9f505efb
commit 25ed9b3719
9 changed files with 47 additions and 52 deletions

View File

@@ -5,3 +5,7 @@ sidebar_label: About the docs
---
Please navigate via the table of content for finding what you are looking for.
## Something Missing?
If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebook/create-react-app/issues) or [contribute some!](https://github.com/facebook/create-react-app/edit/master/packages/react-scripts/template/README.md)

View File

@@ -1,6 +1,7 @@
---
id: fetching-data-with-ajax-requests
title: Fetching Data with AJAX Requests
sidebar_label: Fetching Data
---
React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like [axios](https://github.com/axios/axios) or the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provided by the browser.

View File

@@ -1,17 +0,0 @@
---
id: injecting-data-from-the-server-into-the-page
title: Injecting Data from the Server into the Page
---
Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:
```js
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
```
Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.**

View File

@@ -1,6 +1,7 @@
---
id: integrating-with-an-api-backend
title: Integrating with an API Backend
sidebar_label: Integrating with an API
---
These tutorials will help you to integrate your app with an API backend running on another port,

View File

@@ -1,6 +1,7 @@
---
id: pre-rendering-into-static-html-files
title: Pre-Rendering into Static HTML Files
sidebar_label: Pre-Rendering Static HTML
---
If youre hosting your `build` with a static hosting provider you can use [react-snapshot](https://www.npmjs.com/package/react-snapshot) or [react-snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.

View File

@@ -1,7 +0,0 @@
---
id: something-missing
title: Something missing?
sidebar_label: Something missing?
---
If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebook/create-react-app/issues) or [contribute some!](https://github.com/facebook/create-react-app/edit/master/packages/react-scripts/template/README.md)

View File

@@ -4,7 +4,7 @@ title: Title and Meta Tags
sidebar_label: Title & Meta Tags
---
## Changing the <title /> tag
## Changing the title tag
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.
@@ -29,3 +29,18 @@ Since Create React App doesnt support server rendering, you might be wonderin
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
## Injecting Data from the Server into the Page
Similarly to the previous section, you can leave some placeholders in the HTML that inject global variables, for example:
```js
<!doctype html>
<html lang="en">
<head>
<script>
window.SERVER_DATA = __SERVER_DATA__;
</script>
```
Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data right before sending the response. The client code can then read `window.SERVER_DATA` to use it. **Make sure to [sanitize the JSON before sending it to the client](https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0) as it makes your app vulnerable to XSS attacks.**

View File

@@ -6,22 +6,26 @@
"tagline": "Create React apps with no build configuration.",
"docs": {
"adding-a-css-modules-stylesheet": {
"title": "Adding a CSS Modules Stylesheet"
"title": "Adding a CSS Modules Stylesheet",
"sidebar_label": "Adding CSS Modules"
},
"adding-a-router": {
"title": "Adding a Router"
},
"adding-a-sass-stylesheet": {
"title": "Adding a Sass Stylesheet"
"title": "Adding a Sass Stylesheet",
"sidebar_label": "Adding Sass Stylesheets"
},
"adding-a-stylesheet": {
"title": "Adding a Stylesheet"
"title": "Adding a Stylesheet",
"sidebar_label": "Adding stylesheets"
},
"adding-bootstrap": {
"title": "Adding Bootstrap"
},
"adding-custom-environment-variables": {
"title": "Adding Custom Environment Variables"
"title": "Adding Custom Environment Variables",
"sidebar_label": "Environment Variables"
},
"adding-flow": {
"title": "Adding Flow"
@@ -49,9 +53,6 @@
"can-i-use-decorators": {
"title": "Can I Use Decorators?"
},
"changing-the-page-title": {
"title": "Changing the <title />"
},
"code-splitting": {
"title": "Code Splitting"
},
@@ -71,14 +72,12 @@
"sidebar_label": "About the docs"
},
"fetching-data-with-ajax-requests": {
"title": "Fetching Data with AJAX Requests"
"title": "Fetching Data with AJAX Requests",
"sidebar_label": "Fetching Data"
},
"folder-structure": {
"title": "Folder structure"
},
"generating-dynamic-meta-tags-on-the-server": {
"title": "Generating Dynamic `<meta>` Tags on the Server"
},
"getting-started": {
"title": "Getting started",
"sidebar_label": "Getting started"
@@ -86,14 +85,12 @@
"importing-a-component": {
"title": "Importing a Component"
},
"injecting-data-from-the-server-into-the-page": {
"title": "Injecting Data from the Server into the Page"
},
"installing-a-dependency": {
"title": "Installing a Dependency"
},
"integrating-with-an-api-backend": {
"title": "Integrating with an API Backend"
"title": "Integrating with an API Backend",
"sidebar_label": "Integrating with an API"
},
"making-a-progressive-web-app": {
"title": "Making a Progressive Web App"
@@ -102,7 +99,8 @@
"title": "Post-Processing CSS"
},
"pre-rendering-into-static-html-files": {
"title": "Pre-Rendering into Static HTML Files"
"title": "Pre-Rendering into Static HTML Files",
"sidebar_label": "Pre-Rendering Static HTML"
},
"proxying-api-requests-in-development": {
"title": "Proxying API Requests in Development",
@@ -122,16 +120,16 @@
},
"setting-up-your-editor": {
"title": "Setting up your Editor",
"sidebar_label": "Setting up your Editor"
},
"something-missing": {
"title": "Something missing?",
"sidebar_label": "Something missing?"
"sidebar_label": "Editor setup"
},
"supported-browsers-features": {
"title": "Supported Browsers and Features",
"sidebar_label": "Browsers and Features"
},
"title-and-meta-tags": {
"title": "Title and Meta Tags",
"sidebar_label": "Title & Meta Tags"
},
"troubleshooting": {
"title": "Troubleshooting",
"sidebar_label": "Troubleshooting"
@@ -143,10 +141,11 @@
"title": "Using Global Variables"
},
"using-https-in-development": {
"title": "Using HTTPS in Development"
"title": "Using HTTPS in Development",
"sidebar_label": "HTTPS in Development"
},
"using-the-public-folder": {
"title": "Using the `public` Folder"
"title": "Using the public Folder"
}
},
"links": {

View File

@@ -40,8 +40,7 @@
"proxying-api-requests-in-development",
"fetching-data-with-ajax-requests",
"integrating-with-an-api-backend",
"title-and-meta-tags",
"injecting-data-from-the-server-into-the-page"
"title-and-meta-tags"
],
"Testing": ["running-tests", "debugging-tests"],
"Deployment": ["publishing-components-to-npm", "deployment"],
@@ -53,8 +52,7 @@
],
"Support": [
"troubleshooting",
"sending-feedback",
"something-missing"
"sending-feedback"
]
}
}