https://create-react-app.dev/assets/js/935f2afb.776b5ce8.js

1"use strict";(self.webpackChunkcra_docs=self.webpackChunkcra_docs||[]).push([[53],{1109:function(e){e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"docs":[{"type":"category","collapsed":true,"collapsible":true,"label":"Welcome","items":[{"type":"link","label":"About Docs","href":"/docs/documentation-intro","docId":"documentation-intro"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Getting Started","items":[{"type":"link","label":"Getting Started","href":"/docs/getting-started","docId":"getting-started"},{"type":"link","label":"Folder Structure","href":"/docs/folder-structure","docId":"folder-structure"},{"type":"link","label":"Available Scripts","href":"/docs/available-scripts","docId":"available-scripts"},{"type":"link","label":"Supported Browsers and Features","href":"/docs/supported-browsers-features","docId":"supported-browsers-features"},{"type":"link","label":"Updating to New Releases","href":"/docs/updating-to-new-releases","docId":"updating-to-new-releases"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Development","items":[{"type":"link","label":"Editor Setup","href":"/docs/setting-up-your-editor","docId":"setting-up-your-editor"},{"type":"link","label":"Developing Components in Isolation","href":"/docs/developing-components-in-isolation","docId":"developing-components-in-isolation"},{"type":"link","label":"Analyzing Bundle Size","href":"/docs/analyzing-the-bundle-size","docId":"analyzing-the-bundle-size"},{"type":"link","label":"HTTPS in Development","href":"/docs/using-https-in-development","docId":"using-https-in-development"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Styles and Assets","items":[{"type":"link","label":"Adding Stylesheets","href":"/docs/adding-a-stylesheet","docId":"adding-a-stylesheet"},{"type":"link","label":"Adding CSS Modules","href":"/docs/adding-a-css-modules-stylesheet","docId":"adding-a-css-modules-stylesheet"},{"type":"link","label":"Adding Sass Stylesheets","href":"/docs/adding-a-sass-stylesheet","docId":"adding-a-sass-stylesheet"},{"type":"link","label":"Adding CSS Reset","href":"/docs/adding-css-reset","docId":"adding-css-reset"},{"type":"link","label":"Post-Processing CSS","href":"/docs/post-processing-css","docId":"post-processing-css"},{"type":"link","label":"Adding Images, Fonts, and Files","href":"/docs/adding-images-fonts-and-files","docId":"adding-images-fonts-and-files"},{"type":"link","label":"Loading .graphql Files","href":"/docs/loading-graphql-files","docId":"loading-graphql-files"},{"type":"link","label":"Using the Public Folder","href":"/docs/using-the-public-folder","docId":"using-the-public-folder"},{"type":"link","label":"Code Splitting","href":"/docs/code-splitting","docId":"code-splitting"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Building your App","items":[{"type":"link","label":"Installing a Dependency","href":"/docs/installing-a-dependency","docId":"installing-a-dependency"},{"type":"link","label":"Importing a Component","href":"/docs/importing-a-component","docId":"importing-a-component"},{"type":"link","label":"Using Global Variables","href":"/docs/using-global-variables","docId":"using-global-variables"},{"type":"link","label":"Adding Bootstrap","href":"/docs/adding-bootstrap","docId":"adding-bootstrap"},{"type":"link","label":"Adding Flow","href":"/docs/adding-flow","docId":"adding-flow"},{"type":"link","label":"Adding TypeScript","href":"/docs/adding-typescript","docId":"adding-typescript"},{"type":"link","label":"Adding Relay","href":"/docs/adding-relay","docId":"adding-relay"},{"type":"link","label":"Adding a Router","href":"/docs/adding-a-router","docId":"adding-a-router"},{"type":"link","label":"Environment Variables","href":"/docs/adding-custom-environment-variables","docId":"adding-custom-environment-variables"},{"type":"link","label":"Making a Progressive Web App","href":"/docs/making-a-progressive-web-app","docId":"making-a-progressive-web-app"},{"type":"link","label":"Measuring Performance","href":"/docs/measuring-performance","docId":"measuring-performance"},{"type":"link","label":"Creating a Production Build","href":"/docs/production-build","docId":"production-build"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Testing","items":[{"type":"link","label":"Running Tests","href":"/docs/running-tests","docId":"running-tests"},{"type":"link","label":"Debugging Tests","href":"/docs/debugging-tests","docId":"debugging-tests"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Back-End Integration","items":[{"type":"link","label":"Proxying in Development","href":"/docs/proxying-api-requests-in-development","docId":"proxying-api-requests-in-development"},{"type":"link","label":"Fetching Data","href":"/docs/fetching-data-with-ajax-requests","docId":"fetching-data-with-ajax-requests"},{"type":"link","label":"Integrating with an API","href":"/docs/integrating-with-an-api-backend","docId":"integrating-with-an-api-backend"},{"type":"link","label":"Title & Meta Tags","href":"/docs/title-and-meta-tags","docId":"title-and-meta-tags"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Deployment","items":[{"type":"link","label":"Deployment","href":"/docs/deployment","docId":"deployment"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Advanced Usage","items":[{"type":"link","label":"Custom Templates","href":"/docs/custom-templates","docId":"custom-templates"},{"type":"link","label":"Can I Use Decorators?","href":"/docs/can-i-use-decorators","docId":"can-i-use-decorators"},{"type":"link","label":"Pre-Rendering Static HTML","href":"/docs/pre-rendering-into-static-html-files","docId":"pre-rendering-into-static-html-files"},{"type":"link","label":"Advanced Configuration","href":"/docs/advanced-configuration","docId":"advanced-configuration"},{"type":"link","label":"Alternatives to Ejecting","href":"/docs/alternatives-to-ejecting","docId":"alternatives-to-ejecting"}]},{"type":"category","collapsed":true,"collapsible":true,"label":"Support","items":[{"type":"link","label":"Troubleshooting","href":"/docs/troubleshooting","docId":"troubleshooting"}]}]},"docs":{"adding-a-css-modules-stylesheet":{"id":"adding-a-css-modules-stylesheet","title":"Adding a CSS Modules Stylesheet","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"adding-a-router":{"id":"adding-a-router","title":"Adding a Router","description":"Create React App doesn\'t prescribe a specific routing solution, but React Router is the most popular one.","sidebar":"docs"},"adding-a-sass-stylesheet":{"id":"adding-a-sass-stylesheet","title":"Adding a Sass Stylesheet","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"adding-a-stylesheet":{"id":"adding-a-stylesheet","title":"Adding a Stylesheet","description":"This project setup uses webpack for handling all assets. webpack offers a custom way of \u201cextending\u201d 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:","sidebar":"docs"},"adding-bootstrap":{"id":"adding-bootstrap","title":"Adding Bootstrap","description":"While you don\u2019t have to use any specific library to integrate Bootstrap with React apps, it\'s often easier than trying to wrap the Bootstrap jQuery plugins. React Bootstrap is the most popular option that strives for complete parity with Bootstrap. reactstrap is also a good choice for projects looking for smaller builds at the expense of some features.","sidebar":"docs"},"adding-css-reset":{"id":"adding-css-reset","title":"Adding a CSS Reset","description":"This project setup uses [PostCSS Normalize] for adding a [CSS Reset].","sidebar":"docs"},"adding-custom-environment-variables":{"id":"adding-custom-environment-variables","title":"Adding Custom Environment Variables","de

1scription":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"adding-flow":{"id":"adding-flow","title":"Adding Flow","description":"Flow is a static type checker that helps you write code with fewer bugs. Check out this introduction to using static types in JavaScript if you are new to this concept.","sidebar":"docs"},"adding-images-fonts-and-files":{"id":"adding-images-fonts-and-files","title":"Adding Images, Fonts, and Files","description":"With webpack, using static assets like images and fonts works similarly to CSS.","sidebar":"docs"},"adding-relay":{"id":"adding-relay","title":"Adding Relay","description":"Relay is a framework for building data-driven React applications powered by GraphQL. The current release of Relay works with Create React App projects out of the box using Babel Macros. Set up your project as shown in the Relay documentation, then make sure you have a version of the babel plugin providing the macro.","sidebar":"docs"},"adding-typescript":{"id":"adding-typescript","title":"Adding TypeScript","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"advanced-configuration":{"id":"advanced-configuration","title":"Advanced Configuration","description":"You can adjust various development and production settings by setting environment variables in your shell or with .env.","sidebar":"docs"}

1,"alternatives-to-ejecting":{"id":"alternatives-to-ejecting","title":"Alternatives to Ejecting","description":"Ejecting 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 covers how to do it in depth. You can find more discussion in this issue.","sidebar":"docs"},"analyzing-the-bundle-size":{"id":"analyzing-the-bundle-size","title":"Analyzing the Bundle Size","description":"Source map explorer analyzes","sidebar":"docs"},"available-scripts":{"id":"available-scripts","title":"Available Scripts","description":"In the project directory, you can run:","sidebar":"docs"},"can-i-use-decorators":{"id":"can-i-use-decorators","title":"Can I Use Decorators?","description":"Some popular libraries use decorators in their documentation.","sidebar":"docs"},"code-splitting":{"id":"code-splitting","title":"Code Splitting","description":"Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.","sidebar":"docs"},"custom-templates":{"id":"custom-templates","title":"Custom Templates","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"debugging-tests":{"id":"debugging-tests","title":"Debugging Tests","description":"There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and Visual Studio Code.","sidebar":"docs"},"deployment":{"id":"deployment","title":"Deployment","description":"npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.","sidebar":"docs"},"developing-components-in-isolation":{"id":"developing-components-in-isolation","title":"Developing Components in Isolation","description":"Usually, in an app, you have a lot of UI components, and each of them has many different states.","sidebar":"docs"},"documentation-intro":{"id":"documentation-intro","title":"About the Documentation","description":"Welcome to the Create React App documentation!","sidebar":"docs"},"fetching-data-with-ajax-requests":{"id":"fetching-data-with-ajax-requests","title":"Fetching Data with AJAX Requests","description":"React doesn\'t prescribe a specific approach to data fetching, but people commonly use either a library like axios or the fetch() API provided by the browser.","sidebar":"docs"},"folder-structure":{"id":"folder-structure","title":"Folder Structure","description":"After creation, your project should look like this:","sidebar":"docs"},"getting-started":{"id":"getting-started","title":"Getting Started","description":"Create React App is an officially supported way to create single-page React","sidebar":"docs"},"importing-a-component":{"id":"importing-a-component","title":"Importing a Component","description":"This project setup supports ES6 modules thanks to webpack.","sidebar":"docs"},"installing-a-dependency":{"id":"installing-a-dependency","title":"Installing a Dependency","description":"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:","sidebar":"docs"},"integrating-with-an-api-backend":{"id":"integrating-with-an-api-backend","title":"Integrating with an API Backend","description":"These tutorials will help you to integrate your app with an API backend running on another port,","sidebar":"docs"},"loading-graphql-files":{"id":"loading-graphql-files","title":"Loading .graphql Files","description":"To load .gql and .graphql files, first install the graphql and graphql.macro packages by running:","sidebar":"docs"},"making-a-progressive-web-app":{"id":"making-a-progressive-web-app","title":"Making a Progressive Web App","description":"The production build has all the tools necessary to generate a first-class","sidebar":"docs"},"measuring-performance":{"id":"measuring-performance","title":"Measuring Performance","description":"By default, Create React App includes a performance relayer that allows you to measure and analyze","sidebar":"docs"},"post-processing-css":{"id":"post-processing-css","title":"Post-Processing CSS","description":"This project setup minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer so you don\u2019t need to worry about it.","sidebar":"docs"},"pre-rendering-into-static-html-files":{"id":"pre-rendering-into-static-html-files","title":"Pre-Rendering into Static HTML Files","description":"If you\u2019re hosting your build with a static hosting provider you can use react-snapsh

1ot or react-snap to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or \u201chydrated\u201d, when the JavaScript bundle has loaded.","sidebar":"docs"},"production-build":{"id":"production-build","title":"Creating a Production Build","description":"npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.","sidebar":"docs"},"proxying-api-requests-in-development":{"id":"proxying-api-requests-in-development","title":"Proxying API Requests in Development","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"running-tests":{"id":"running-tests","title":"Running Tests","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"setting-up-your-editor":{"id":"setting-up-your-editor","title":"Setting Up Your Editor","description":"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:","sidebar":"docs"},"supported-browsers-features":{"id":"supported-browsers-features","title":"Supported Browsers and Features","description":"Supported Browsers","sidebar":"docs"},"title-and-meta-tags":{"id":"title-and-meta-tags","title":"Title and Meta Tags","description":"Changing the title tag","sidebar":"docs"},"troubleshooting":{"id":"troubleshooting","title":"Troubleshooting","description":"npm start doesn\u2019t detect changes","sidebar":"docs"},"updating-to-new-releases":{"id":"updating-to-new-releases","title":"Updating to New Releases","description":"Create React App is divided into two packages:","sidebar":"docs"},"using-global-variables":{"id":"using-global-variables","title":"Using Global Variables","description":"When you include a script in the HTML file that defines global variables and try to use one of these variables in the code, the linter will complain because it cannot see the definition of the variable.","sidebar":"docs"},"using-https-in-development":{"id":"using-https-in-development","title":"Using HTTPS in Development","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"},"using-the-public-folder":{"id":"using-the-public-folder","title":"Using the Public Folder","description":"Note: this feature is available with [email protected] and higher.","sidebar":"docs"}}}')}}]);