diff --git a/docusaurus/docs/adding-a-css-modules-stylesheet.md b/docusaurus/docs/adding-a-css-modules-stylesheet.md index 5b2f7ceba18..e7c90f85b67 100644 --- a/docusaurus/docs/adding-a-css-modules-stylesheet.md +++ b/docusaurus/docs/adding-a-css-modules-stylesheet.md @@ -1,6 +1,7 @@ --- id: adding-a-css-modules-stylesheet -title: Adding a CSS Modules Stylesheet +title: Adding A CSS Modules Stylesheet +sidebar_label: Adding CSS Modules --- > Note: this feature is available with `react-scripts@2.0.0` and higher. diff --git a/docusaurus/docs/adding-a-router.md b/docusaurus/docs/adding-a-router.md index 70dfcb63b6e..65f82ff4476 100644 --- a/docusaurus/docs/adding-a-router.md +++ b/docusaurus/docs/adding-a-router.md @@ -1,6 +1,6 @@ --- id: adding-a-router -title: Adding a Router +title: Adding A Router --- Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one. diff --git a/docusaurus/docs/adding-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md index cd3e3d6c2ef..e4e6940c830 100644 --- a/docusaurus/docs/adding-a-sass-stylesheet.md +++ b/docusaurus/docs/adding-a-sass-stylesheet.md @@ -1,6 +1,7 @@ --- id: adding-a-sass-stylesheet -title: Adding a Sass Stylesheet +title: Adding A Sass Stylesheet +sidebar_label: Adding Sass Stylesheets --- > Note: this feature is available with `react-scripts@2.0.0` and higher. diff --git a/docusaurus/docs/adding-a-stylesheet.md b/docusaurus/docs/adding-a-stylesheet.md index 7155e584f2d..b74dd814311 100644 --- a/docusaurus/docs/adding-a-stylesheet.md +++ b/docusaurus/docs/adding-a-stylesheet.md @@ -1,6 +1,7 @@ --- id: adding-a-stylesheet -title: Adding a Stylesheet +title: Adding A Stylesheet +sidebar_label: Adding Stylesheets --- This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**: diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 62ff6a0260d..f9a462b7005 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -1,6 +1,7 @@ --- id: adding-custom-environment-variables title: Adding Custom Environment Variables +sidebar_label: Environment Variables --- > Note: this feature is available with `react-scripts@0.2.3` and higher. diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index c481d96c75d..87f276f097d 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -1,6 +1,6 @@ --- id: adding-images-fonts-and-files -title: Adding Images, Fonts, and Files +title: Adding Images, Fonts, And Files --- With Webpack, using static assets like images and fonts works similarly to CSS. diff --git a/docusaurus/docs/alternatives-to-ejecting.md b/docusaurus/docs/alternatives-to-ejecting.md index 1bbc066c3bf..e353adf3488 100644 --- a/docusaurus/docs/alternatives-to-ejecting.md +++ b/docusaurus/docs/alternatives-to-ejecting.md @@ -1,6 +1,6 @@ --- id: alternatives-to-ejecting -title: Alternatives to Ejecting +title: Alternatives To Ejecting --- [Ejecting](/docs/available-scripts#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682). diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md index 9c18be20045..ce175e085d6 100644 --- a/docusaurus/docs/analyzing-the-bundle-size.md +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -1,7 +1,7 @@ --- id: analyzing-the-bundle-size title: Analyzing the Bundle Size -sidebar_label: Analyzing bundle size +sidebar_label: Analyzing Bundle Size --- [Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index 8f6ec40ceee..fa438459f13 100644 --- a/docusaurus/docs/available-scripts.md +++ b/docusaurus/docs/available-scripts.md @@ -1,7 +1,7 @@ --- id: available-scripts title: Available Scripts -sidebar_label: Available scripts +sidebar_label: Available Scripts --- In the project directory, you can run: diff --git a/docusaurus/docs/changing-the-page-title.md b/docusaurus/docs/changing-the-page-title.md deleted file mode 100644 index 3bbf7c35dd6..00000000000 --- a/docusaurus/docs/changing-the-page-title.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -id: changing-the-page-title -title: Changing the ---- - -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 wouldn’t edit files in the `public` folder very often. For example, [adding a stylesheet](/docs/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](/docs/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](/docs/pre-rendering-into-static-html-files). diff --git a/docusaurus/docs/debugging-in-the-editor.md b/docusaurus/docs/debugging-in-the-editor.md deleted file mode 100644 index 7ce53f9eb80..00000000000 --- a/docusaurus/docs/debugging-in-the-editor.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: debugging-in-the-editor -title: Debugging in the Editor ---- - -**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).** - -Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. - -## Visual Studio Code - -You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. - -Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory. - -```json -{ - "version": "0.2.0", - "configurations": [ - { - "name": "Chrome", - "type": "chrome", - "request": "launch", - "url": "http://localhost:3000", - "webRoot": "${workspaceRoot}/src", - "sourceMapPathOverrides": { - "webpack:///src/*": "${webRoot}/*" - } - } - ] -} -``` - -> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration). - -Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. - -Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting). - -## WebStorm - -You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed. - -In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. - -> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration). - -Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. - -The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 79ee41b2a66..93da201a9f6 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/docusaurus/docs/debugging-tests.md @@ -1,7 +1,7 @@ --- id: debugging-tests title: Debugging Tests -sidebar_label: Debugging tests +sidebar_label: Debugging Tests --- There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and [Visual Studio Code](https://code.visualstudio.com/). diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index 4c42844e5de..6260c9953db 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -456,3 +456,6 @@ When asked about the project path, make sure to specify the `build` folder, for Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing). +## Publishing Components To npm + +Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 1f4be53614f..ac38b7a71a1 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -1,6 +1,6 @@ --- id: developing-components-in-isolation -title: Developing Components in Isolation +title: Developing Components In Isolation --- Usually, in an app, you have a lot of UI components, and each of them has many different states. diff --git a/docusaurus/docs/documentation-intro.md b/docusaurus/docs/documentation-intro.md index 00225ef48e0..f428aaac340 100644 --- a/docusaurus/docs/documentation-intro.md +++ b/docusaurus/docs/documentation-intro.md @@ -1,7 +1,15 @@ --- id: documentation-intro -title: Welcome to the Documentation -sidebar_label: About the docs +title: Welcome To The Documentation +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) + +## Feedback + +We are always open to [your feedback](https://github.com/facebook/create-react-app/issues). diff --git a/docusaurus/docs/fetching-data-with-ajax-requests.md b/docusaurus/docs/fetching-data-with-ajax-requests.md index cf539830aaa..8dff9f8ce58 100644 --- a/docusaurus/docs/fetching-data-with-ajax-requests.md +++ b/docusaurus/docs/fetching-data-with-ajax-requests.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. diff --git a/docusaurus/docs/folder-structure.md b/docusaurus/docs/folder-structure.md index 74ef1fc9e0c..e8564b493f3 100644 --- a/docusaurus/docs/folder-structure.md +++ b/docusaurus/docs/folder-structure.md @@ -1,6 +1,6 @@ --- id: folder-structure -title: Folder structure +title: Folder Structure --- After creation, your project should look like this: diff --git a/docusaurus/docs/formatting-code-automatically.md b/docusaurus/docs/formatting-code-automatically.md deleted file mode 100644 index 763b71efc18..00000000000 --- a/docusaurus/docs/formatting-code-automatically.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: formatting-code-automatically -title: Formatting Code Automatically -sidebar_label: Formatting code ---- - -Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). - -To format our code whenever we make a commit in git, we need to install the following dependencies: - -```sh -npm install --save husky lint-staged prettier -``` - -Alternatively you may use `yarn`: - -```sh -yarn add husky lint-staged prettier -``` - -- `husky` makes it easy to use githooks as if they are npm scripts. -- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8). -- `prettier` is the JavaScript formatter we will run before commits. - -Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root. - -Add the following field to the `package.json` section: - -```diff -+ "husky": { -+ "hooks": { -+ "pre-commit": "lint-staged" -+ } -+ } -``` - -Next we add a 'lint-staged' field to the `package.json`, for example: - -```diff - "dependencies": { - // ... - }, -+ "lint-staged": { -+ "src/**/*.{js,jsx,json,css}": [ -+ "prettier --single-quote --write", -+ "git add" -+ ] -+ }, - "scripts": { -``` - -Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. - -Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. diff --git a/docusaurus/docs/generating-dynamic-meta-tags-on-the-server.md b/docusaurus/docs/generating-dynamic-meta-tags-on-the-server.md deleted file mode 100644 index e40c8f64211..00000000000 --- a/docusaurus/docs/generating-dynamic-meta-tags-on-the-server.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: generating-dynamic-meta-tags-on-the-server -title: Generating Dynamic `<meta>` Tags on the Server ---- - -Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this: - -```html -<!doctype html> -<html lang="en"> - <head> - <meta property="og:title" content="__OG_TITLE__"> - <meta property="og:description" content="__OG_DESCRIPTION__"> -``` - -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. diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index 20e8e85aa3f..4e046fb1635 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -1,10 +1,9 @@ --- id: getting-started -title: Getting started -sidebar_label: Getting started +title: Getting Started --- -Create React App is an officially supported way to create single-page React +Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. ## Quick Start diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 52767005c08..9ad0a25e5ab 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -1,6 +1,6 @@ --- id: importing-a-component -title: Importing a Component +title: Importing A Component --- This project setup supports ES6 modules thanks to Webpack.<br> diff --git a/docusaurus/docs/injecting-data-from-the-server-into-the-page.md b/docusaurus/docs/injecting-data-from-the-server-into-the-page.md deleted file mode 100644 index ab428a627d0..00000000000 --- a/docusaurus/docs/injecting-data-from-the-server-into-the-page.md +++ /dev/null @@ -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.** diff --git a/docusaurus/docs/installing-a-dependency.md b/docusaurus/docs/installing-a-dependency.md index 6e356315ab2..909c56cfa6b 100644 --- a/docusaurus/docs/installing-a-dependency.md +++ b/docusaurus/docs/installing-a-dependency.md @@ -1,6 +1,6 @@ --- id: installing-a-dependency -title: Installing a Dependency +title: 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`: diff --git a/docusaurus/docs/integrating-with-an-api-backend.md b/docusaurus/docs/integrating-with-an-api-backend.md index 450198d509a..339215160f7 100644 --- a/docusaurus/docs/integrating-with-an-api-backend.md +++ b/docusaurus/docs/integrating-with-an-api-backend.md @@ -1,6 +1,7 @@ --- id: integrating-with-an-api-backend -title: 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, diff --git a/docusaurus/docs/lint-output-in-the-editor.md b/docusaurus/docs/lint-output-in-the-editor.md deleted file mode 100644 index 8e24a1ecd36..00000000000 --- a/docusaurus/docs/lint-output-in-the-editor.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: lint-output-in-the-editor -title: Displaying Lint Output in the Editor -sidebar_label: In-editor linting ---- - -> Note: this feature is available with `react-scripts@0.2.0` and higher.<br> -> It also only works with npm 3 or higher. - -Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. - -They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. - -You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root: - -```js -{ - "extends": "react-app" -} -``` - -Now your editor should report the linting warnings. - -Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. - -If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 2fe93f4bac1..ae8de4e5240 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -1,6 +1,6 @@ --- id: making-a-progressive-web-app -title: Making a Progressive Web App +title: Making A Progressive Web App --- The production build has all the tools necessary to generate a first-class diff --git a/docusaurus/docs/pre-rendering-into-static-html-files.md b/docusaurus/docs/pre-rendering-into-static-html-files.md index 268feab9cf8..0ce53c6180f 100644 --- a/docusaurus/docs/pre-rendering-into-static-html-files.md +++ b/docusaurus/docs/pre-rendering-into-static-html-files.md @@ -1,6 +1,7 @@ --- id: 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 --- 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. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index fb6b41c8e07..7d932229348 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -1,7 +1,7 @@ --- id: proxying-api-requests-in-development -title: Proxying API Requests in Development -sidebar_label: Proxying in development +title: Proxying API Requests In Development +sidebar_label: Proxying In Development --- > Note: this feature is available with `react-scripts@0.2.3` and higher. diff --git a/docusaurus/docs/publishing-components-to-npm.md b/docusaurus/docs/publishing-components-to-npm.md deleted file mode 100644 index f436a7eb9e5..00000000000 --- a/docusaurus/docs/publishing-components-to-npm.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: publishing-components-to-npm -title: Publishing components to npm -sidebar_label: Publishing to npm ---- -Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index f5b5efde0c5..3a6181d775c 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -1,7 +1,6 @@ --- id: running-tests title: Running Tests -sidebar_label: Running tests --- > Note: this feature is available with `react-scripts@0.3.0` and higher.<br> diff --git a/docusaurus/docs/sending-feedback.md b/docusaurus/docs/sending-feedback.md deleted file mode 100644 index 8fd0e223c43..00000000000 --- a/docusaurus/docs/sending-feedback.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: sending-feedback -title: Sending feedback -sidebar_label: Feedback ---- - -We are always open to [your feedback](https://github.com/facebook/create-react-app/issues). diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md new file mode 100644 index 00000000000..937ed1d77bd --- /dev/null +++ b/docusaurus/docs/setting-up-your-editor.md @@ -0,0 +1,133 @@ +--- +id: setting-up-your-editor +title: Setting Up Your Editor +sidebar_label: Editor Setup +--- + +Create React App comes with a bunch of tools that improve the editing experience - if configured correctly. Here's a few tips to maximize your productivity: + +## Syntax highlighting + +To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered. + +## Displaying Lint Output in the Editor + +> Note: this feature is available with `react-scripts@0.2.0` and higher.<br> +> It also only works with npm 3 or higher. + +Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. + +They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. + +You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root: + +```js +{ + "extends": "react-app" +} +``` + +Now your editor should report the linting warnings. + +Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. + +If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. + +## Debugging in the Editor + +**This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) and [WebStorm](https://www.jetbrains.com/webstorm/).** + +Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools. + +### Visual Studio Code + +You would need to have the latest version of [VS Code](https://code.visualstudio.com) and VS Code [Chrome Debugger Extension](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) installed. + +Then add the block below to your `launch.json` file and put it inside the `.vscode` folder in your app’s root directory. + +```json +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Chrome", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000", + "webRoot": "${workspaceRoot}/src", + "sourceMapPathOverrides": { + "webpack:///src/*": "${webRoot}/*" + } + } + ] +} +``` + +> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration). + +Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. + +Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting). + +### WebStorm + +You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetBrains IDE Support](https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed. + +In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration. + +> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](/docs/advanced-configuration). + +Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm. + +The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. + +## Formatting Code Automatically + +Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). + +To format our code whenever we make a commit in git, we need to install the following dependencies: + +```sh +npm install --save husky lint-staged prettier +``` + +Alternatively you may use `yarn`: + +```sh +yarn add husky lint-staged prettier +``` + +- `husky` makes it easy to use githooks as if they are npm scripts. +- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8). +- `prettier` is the JavaScript formatter we will run before commits. + +Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root. + +Add the following field to the `package.json` section: + +```diff ++ "husky": { ++ "hooks": { ++ "pre-commit": "lint-staged" ++ } ++ } +``` + +Next we add a 'lint-staged' field to the `package.json`, for example: + +```diff + "dependencies": { + // ... + }, ++ "lint-staged": { ++ "src/**/*.{js,jsx,json,css}": [ ++ "prettier --single-quote --write", ++ "git add" ++ ] ++ }, + "scripts": { +``` + +Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. + +Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. diff --git a/docusaurus/docs/something-missing.md b/docusaurus/docs/something-missing.md deleted file mode 100644 index 8201eab4f71..00000000000 --- a/docusaurus/docs/something-missing.md +++ /dev/null @@ -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) diff --git a/docusaurus/docs/supported-browsers.md b/docusaurus/docs/supported-browsers.md deleted file mode 100644 index dc4fa063d40..00000000000 --- a/docusaurus/docs/supported-browsers.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: supported-browsers -title: Supported Browsers ---- - -By default, the generated project supports all modern browsers.<br> -Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). diff --git a/docusaurus/docs/supported-language-features.md b/docusaurus/docs/supported-language-features.md index 2bdb27a6a44..2d320ce3144 100644 --- a/docusaurus/docs/supported-language-features.md +++ b/docusaurus/docs/supported-language-features.md @@ -1,8 +1,16 @@ --- -id: supported-language-features -title: Supported Language Features +id: supported-browsers-features +title: Supported Browsers And Features +sidebar_label: Browsers & Features --- +## Supported Browsers + +By default, the generated project supports all modern browsers.<br> +Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). + +## Supported Language Features + This project supports a superset of the latest JavaScript standard.<br> In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports: diff --git a/docusaurus/docs/syntax-highlighting-in-the-editor.md b/docusaurus/docs/syntax-highlighting-in-the-editor.md deleted file mode 100644 index 5e017e71d60..00000000000 --- a/docusaurus/docs/syntax-highlighting-in-the-editor.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: syntax-highlighting-in-the-editor -title: Syntax highlighting in the editor -sidebar_label: Syntax highlighting ---- - -To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered. diff --git a/docusaurus/docs/title-and-meta-tags.md b/docusaurus/docs/title-and-meta-tags.md new file mode 100644 index 00000000000..f8be44c0bee --- /dev/null +++ b/docusaurus/docs/title-and-meta-tags.md @@ -0,0 +1,46 @@ +--- +id: title-and-meta-tags +title: Title And Meta Tags +sidebar_label: Title & Meta Tags +--- + +## 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. + +Note that normally you wouldn’t edit files in the `public` folder very often. For example, [adding a stylesheet](/docs/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](/docs/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](/docs/pre-rendering-into-static-html-files). + +## Generating Dynamic `<meta>` Tags on the Server + +Since Create React App doesn’t support server rendering, you might be wondering how to make `<meta>` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this: + +```html +<!doctype html> +<html lang="en"> + <head> + <meta property="og:title" content="__OG_TITLE__"> + <meta property="og:description" content="__OG_DESCRIPTION__"> +``` + +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.** diff --git a/docusaurus/docs/updating-to-new-releases.md b/docusaurus/docs/updating-to-new-releases.md index 825832464c8..b106673bc89 100644 --- a/docusaurus/docs/updating-to-new-releases.md +++ b/docusaurus/docs/updating-to-new-releases.md @@ -1,6 +1,6 @@ --- id: updating-to-new-releases -title: Updating to New Releases +title: Updating To New Releases --- Create React App is divided into two packages: diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md index 64b7bf217a8..465ca6e942a 100644 --- a/docusaurus/docs/using-https-in-development.md +++ b/docusaurus/docs/using-https-in-development.md @@ -1,6 +1,7 @@ --- id: using-https-in-development -title: Using HTTPS in Development +title: Using HTTPS In Development +sidebar_label: HTTPS In Development --- > Note: this feature is available with `react-scripts@0.4.0` and higher. diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md index 2d8b0ba36fc..e6a973c45d6 100644 --- a/docusaurus/docs/using-the-public-folder.md +++ b/docusaurus/docs/using-the-public-folder.md @@ -1,6 +1,6 @@ --- id: using-the-public-folder -title: Using the `public` Folder +title: Using The public Folder --- > Note: this feature is available with `react-scripts@0.5.0` and higher. diff --git a/docusaurus/website/core/Footer.js b/docusaurus/website/core/Footer.js index 246bf3a3521..ba617e64aed 100644 --- a/docusaurus/website/core/Footer.js +++ b/docusaurus/website/core/Footer.js @@ -40,9 +40,6 @@ class Footer extends React.Component { <a href={this.docUrl('documentation-intro', this.props.language)}> Documentation </a> - <a href={this.docUrl('doc3.html', this.props.language)}> - API Reference (or other categories) - </a> </div> <div> <h5>Community</h5> diff --git a/docusaurus/website/i18n/en.json b/docusaurus/website/i18n/en.json index 2e9f00cab6d..8a1ad0a38c5 100644 --- a/docusaurus/website/i18n/en.json +++ b/docusaurus/website/i18n/en.json @@ -6,28 +6,32 @@ "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" + "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" }, "adding-images-fonts-and-files": { - "title": "Adding Images, Fonts, and Files" + "title": "Adding Images, Fonts, And Files" }, "adding-relay": { "title": "Adding Relay" @@ -36,133 +40,102 @@ "title": "Advanced Configuration" }, "alternatives-to-ejecting": { - "title": "Alternatives to Ejecting" + "title": "Alternatives To Ejecting" }, "analyzing-the-bundle-size": { "title": "Analyzing the Bundle Size", - "sidebar_label": "Analyzing bundle size" + "sidebar_label": "Analyzing Bundle Size" }, "available-scripts": { "title": "Available Scripts", - "sidebar_label": "Available scripts" + "sidebar_label": "Available Scripts" }, "can-i-use-decorators": { "title": "Can I Use Decorators?" }, - "changing-the-page-title": { - "title": "Changing the <title />" - }, "code-splitting": { "title": "Code Splitting" }, - "debugging-in-the-editor": { - "title": "Debugging in the Editor" - }, "debugging-tests": { "title": "Debugging Tests", - "sidebar_label": "Debugging tests" + "sidebar_label": "Debugging Tests" }, "deployment": { "title": "Deployment", "sidebar_label": "Deployment" }, "developing-components-in-isolation": { - "title": "Developing Components in Isolation" + "title": "Developing Components In Isolation" }, "documentation-intro": { - "title": "Welcome to the Documentation", - "sidebar_label": "About the docs" + "title": "Welcome To The Documentation", + "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" - }, - "formatting-code-automatically": { - "title": "Formatting Code Automatically", - "sidebar_label": "Formatting code" - }, - "generating-dynamic-meta-tags-on-the-server": { - "title": "Generating Dynamic `<meta>` Tags on the Server" + "title": "Folder Structure" }, "getting-started": { - "title": "Getting started", - "sidebar_label": "Getting started" + "title": "Getting Started" }, "importing-a-component": { - "title": "Importing a Component" - }, - "injecting-data-from-the-server-into-the-page": { - "title": "Injecting Data from the Server into the Page" + "title": "Importing A Component" }, "installing-a-dependency": { - "title": "Installing a Dependency" + "title": "Installing A Dependency" }, "integrating-with-an-api-backend": { - "title": "Integrating with an API Backend" - }, - "lint-output-in-the-editor": { - "title": "Displaying Lint Output in the Editor", - "sidebar_label": "In-editor linting" + "title": "Integrating With An API Backend", + "sidebar_label": "Integrating With An API" }, "making-a-progressive-web-app": { - "title": "Making a Progressive Web App" + "title": "Making A Progressive Web App" }, "post-processing-css": { "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", - "sidebar_label": "Proxying in development" - }, - "publishing-components-to-npm": { - "title": "Publishing components to npm", - "sidebar_label": "Publishing to npm" - }, - "README": { - "title": "README" + "title": "Proxying API Requests In Development", + "sidebar_label": "Proxying In Development" }, "running-tests": { - "title": "Running Tests", - "sidebar_label": "Running tests" - }, - "sending-feedback": { - "title": "Sending feedback", - "sidebar_label": "Feedback" - }, - "something-missing": { - "title": "Something missing?", - "sidebar_label": "Something missing?" + "title": "Running Tests" }, - "supported-browsers": { - "title": "Supported Browsers" + "setting-up-your-editor": { + "title": "Setting Up Your Editor", + "sidebar_label": "Editor Setup" }, - "supported-language-features": { - "title": "Supported Language Features" + "supported-browsers-features": { + "title": "Supported Browsers And Features", + "sidebar_label": "Browsers & Features" }, - "syntax-highlighting-in-the-editor": { - "title": "Syntax highlighting in the editor", - "sidebar_label": "Syntax highlighting" + "title-and-meta-tags": { + "title": "Title And Meta Tags", + "sidebar_label": "Title & Meta Tags" }, "troubleshooting": { "title": "Troubleshooting", "sidebar_label": "Troubleshooting" }, "updating-to-new-releases": { - "title": "Updating to New Releases" + "title": "Updating To New Releases" }, "using-global-variables": { "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": { @@ -174,9 +147,12 @@ "Welcome": "Welcome", "Getting Started": "Getting Started", "Development": "Development", - "How-to": "How-to", + "Styles and Assets": "Styles and Assets", + "Building your App": "Building your App", "Testing": "Testing", + "Back-End Integration": "Back-End Integration", "Deployment": "Deployment", + "Advanced Usage": "Advanced Usage", "Support": "Support" } }, diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index cbeb4788cd1..e774b26e8d4 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -4,56 +4,54 @@ "documentation-intro" ], "Getting Started": [ - "getting-started", - "folder-structure", + "getting-started", + "folder-structure", "available-scripts", - "supported-browsers", - "supported-language-features" + "supported-browsers-features", + "updating-to-new-releases" ], "Development": [ - "syntax-highlighting-in-the-editor", - "lint-output-in-the-editor", - "debugging-in-the-editor", - "formatting-code-automatically", - "proxying-api-requests-in-development", + "setting-up-your-editor", "developing-components-in-isolation", - "analyzing-the-bundle-size" + "analyzing-the-bundle-size", + "using-https-in-development" ], - "How-to": [ - "changing-the-page-title", - "installing-a-dependency", - "importing-a-component", - "code-splitting", + "Styles and Assets": [ "adding-a-stylesheet", "adding-a-css-modules-stylesheet", "adding-a-sass-stylesheet", "post-processing-css", "adding-images-fonts-and-files", "using-the-public-folder", + "code-splitting" + ], + "Building your App": [ + "installing-a-dependency", + "importing-a-component", "using-global-variables", "adding-bootstrap", "adding-flow", "adding-relay", "adding-a-router", "adding-custom-environment-variables", - "can-i-use-decorators", + "making-a-progressive-web-app" + ], + "Testing": ["running-tests", "debugging-tests"], + "Back-End Integration": [ + "proxying-api-requests-in-development", "fetching-data-with-ajax-requests", "integrating-with-an-api-backend", - "using-https-in-development", - "generating-dynamic-meta-tags-on-the-server", + "title-and-meta-tags" + ], + "Deployment": ["deployment"], + "Advanced Usage": [ + "can-i-use-decorators", "pre-rendering-into-static-html-files", - "injecting-data-from-the-server-into-the-page", - "making-a-progressive-web-app", "advanced-configuration", "alternatives-to-ejecting" ], - "Testing": ["running-tests", "debugging-tests"], - "Deployment": ["publishing-components-to-npm", "deployment"], "Support": [ - "troubleshooting", - "updating-to-new-releases", - "sending-feedback", - "something-missing" + "troubleshooting" ] } } diff --git a/docusaurus/website/siteConfig.js b/docusaurus/website/siteConfig.js index cbaf69d0395..5c59bc8ab47 100644 --- a/docusaurus/website/siteConfig.js +++ b/docusaurus/website/siteConfig.js @@ -60,7 +60,7 @@ const siteConfig = { */ // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. - copyright: `Copyright © ${new Date().getFullYear()} Facebook`, + copyright: `Copyright © ${new Date().getFullYear()} Facebook Inc.`, highlight: { // Highlight.js theme to use for syntax highlighting in code blocks. diff --git a/docusaurus/website/static/css/custom.css b/docusaurus/website/static/css/custom.css index 85626861f9b..faec652e6bf 100644 --- a/docusaurus/website/static/css/custom.css +++ b/docusaurus/website/static/css/custom.css @@ -15,6 +15,10 @@ color: inherit; } +.post a { + text-decoration: underline; +} + @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { }