mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-01-12 22:46:30 +08:00
Combine even more pages
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.**
|
||||
@@ -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,
|
||||
|
||||
@@ -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 you’re 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.
|
||||
|
||||
@@ -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)
|
||||
@@ -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 doesn’t 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.**
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user