kylefang/create-react-app
1
0
Fork 0
mirror of https://github.com/zhigang1992/create-react-app.git synced 2026-06-11 07:43:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Deploy website

Browse Source 
Deploy website version based on 7fae307aef
This commit is contained in:
Ian Sutherland
2019-10-02 22:19:47 -06:00
parent dcbf7cb8e6
commit f82a7593bc
16 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/adding-flow.html
View File

@@ -70,10 +70,10 @@ You can optionally enable an extension for your IDE, such as <a href="https://gi
<p>If you'd like to use <a href="/docs/importing-a-component#absolute-imports">absolute imports</a> with Flow,
make sure to add the following line to your <code>.flowconfig</code> to make Flow aware of it:</p>
<pre><code class="hljs css language-diff"> [options]
<span class="hljs-addition">+ module.name_mapper='^\(.*\)$' -&gt; '&lt;PROJECT_ROOT&gt;/src/\1'</span>
<span class="hljs-addition">+ module.name_mapper='^\([^\.].*\)$' -&gt; '&lt;PROJECT_ROOT&gt;/src/\1'</span>
</code></pre>
<p>To learn more about Flow, check out <a href="https://flow.org/">its documentation</a>.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/16/2019 by Federico Zivolo</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-bootstrap"><span class="arrow-prev">← </span><span>Adding Bootstrap</span></a><a class="docs-next button" href="/docs/adding-typescript"><span class="function-name-prevnext">Adding TypeScript</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/25/2019 by Federico Zivolo</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-bootstrap"><span class="arrow-prev">← </span><span>Adding Bootstrap</span></a><a class="docs-next button" href="/docs/adding-typescript"><span class="function-name-prevnext">Adding TypeScript</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/adding-flow/index.html
View File

@@ -70,10 +70,10 @@ You can optionally enable an extension for your IDE, such as <a href="https://gi
<p>If you'd like to use <a href="/docs/importing-a-component#absolute-imports">absolute imports</a> with Flow,
make sure to add the following line to your <code>.flowconfig</code> to make Flow aware of it:</p>
<pre><code class="hljs css language-diff"> [options]
<span class="hljs-addition">+ module.name_mapper='^\(.*\)$' -&gt; '&lt;PROJECT_ROOT&gt;/src/\1'</span>
<span class="hljs-addition">+ module.name_mapper='^\([^\.].*\)$' -&gt; '&lt;PROJECT_ROOT&gt;/src/\1'</span>
</code></pre>
<p>To learn more about Flow, check out <a href="https://flow.org/">its documentation</a>.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 8/16/2019 by Federico Zivolo</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-bootstrap"><span class="arrow-prev">← </span><span>Adding Bootstrap</span></a><a class="docs-next button" href="/docs/adding-typescript"><span class="function-name-prevnext">Adding TypeScript</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/25/2019 by Federico Zivolo</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-bootstrap"><span class="arrow-prev">← </span><span>Adding Bootstrap</span></a><a class="docs-next button" href="/docs/adding-typescript"><span class="function-name-prevnext">Adding TypeScript</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/adding-images-fonts-and-files.html
View File

@@ -97,9 +97,9 @@ An alternative way of handling static assets is described in the next section.</
</code></pre>
<p>This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The <code>ReactComponent</code> import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.</p>
<blockquote>
<p><strong>Tip:</strong> The imported SVG React Component accepts a <code>title</code> prop along with other props that a <code>svg</code> element accepts. Use this prop to add an accessbile title to your svg component.</p>
<p><strong>Tip:</strong> The imported SVG React Component accepts a <code>title</code> prop along with other props that a <code>svg</code> element accepts. Use this prop to add an accessible title to your svg component.</p>
</blockquote>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 7/15/2019 by Sudhir Mitharwal</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/post-processing-css"><span class="arrow-prev">← </span><span>Post-Processing CSS</span></a><a class="docs-next button" href="/docs/loading-graphql-files"><span>Loading .graphql Files</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#adding-svgs">Adding SVGs</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/30/2019 by Tomer Cohen</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/post-processing-css"><span class="arrow-prev">← </span><span>Post-Processing CSS</span></a><a class="docs-next button" href="/docs/loading-graphql-files"><span>Loading .graphql Files</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#adding-svgs">Adding SVGs</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/adding-images-fonts-and-files/index.html
View File

@@ -97,9 +97,9 @@ An alternative way of handling static assets is described in the next section.</
</code></pre>
<p>This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The <code>ReactComponent</code> import name is special and tells Create React App that you want a React component that renders an SVG, rather than its filename.</p>
<blockquote>
<p><strong>Tip:</strong> The imported SVG React Component accepts a <code>title</code> prop along with other props that a <code>svg</code> element accepts. Use this prop to add an accessbile title to your svg component.</p>
<p><strong>Tip:</strong> The imported SVG React Component accepts a <code>title</code> prop along with other props that a <code>svg</code> element accepts. Use this prop to add an accessible title to your svg component.</p>
</blockquote>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 7/15/2019 by Sudhir Mitharwal</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/post-processing-css"><span class="arrow-prev">← </span><span>Post-Processing CSS</span></a><a class="docs-next button" href="/docs/loading-graphql-files"><span>Loading .graphql Files</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#adding-svgs">Adding SVGs</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/30/2019 by Tomer Cohen</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/post-processing-css"><span class="arrow-prev">← </span><span>Post-Processing CSS</span></a><a class="docs-next button" href="/docs/loading-graphql-files"><span>Loading .graphql Files</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#adding-svgs">Adding SVGs</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/adding-typescript.html
View File

@@ -82,7 +82,7 @@ yarn create react-app my-app --typescript
yarn add typescript @types/node @types/react @types/react-dom @types/jest
</code></pre>
<p>Next, rename any file to be a TypeScript file (e.g. <code>src/index.js</code> to <code>src/index.tsx</code>) and <strong>restart your development server</strong>!</p>
<p>Type errors will show up in the same console as the build one.</p>
<p>Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, <a href="/docs/advanced-configuration">see here</a>.</p>
<p>To learn more about TypeScript, check out <a href="https://www.typescriptlang.org/">its documentation</a>.</p>
<blockquote>
<p><strong>Note:</strong> If your project is not created with TypeScript enabled, npx may be using a cached version of <code>create-react-app</code>.
@@ -101,7 +101,7 @@ You are allowed to edit the generated TypeScript configuration.</p>
<blockquote>
<p><strong>Note:</strong> Constant enums and namespaces are not supported.</p>
</blockquote>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/30/2019 by Chris Shaffer</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-flow"><span class="arrow-prev">← </span><span>Adding Flow</span></a><a class="docs-next button" href="/docs/adding-relay"><span>Adding Relay</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/1/2019 by Kyle Bebak</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-flow"><span class="arrow-prev">← </span><span>Adding Flow</span></a><a class="docs-next button" href="/docs/adding-relay"><span>Adding Relay</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/adding-typescript/index.html
View File

@@ -82,7 +82,7 @@ yarn create react-app my-app --typescript
yarn add typescript @types/node @types/react @types/react-dom @types/jest
</code></pre>
<p>Next, rename any file to be a TypeScript file (e.g. <code>src/index.js</code> to <code>src/index.tsx</code>) and <strong>restart your development server</strong>!</p>
<p>Type errors will show up in the same console as the build one.</p>
<p>Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, <a href="/docs/advanced-configuration">see here</a>.</p>
<p>To learn more about TypeScript, check out <a href="https://www.typescriptlang.org/">its documentation</a>.</p>
<blockquote>
<p><strong>Note:</strong> If your project is not created with TypeScript enabled, npx may be using a cached version of <code>create-react-app</code>.
@@ -101,7 +101,7 @@ You are allowed to edit the generated TypeScript configuration.</p>
<blockquote>
<p><strong>Note:</strong> Constant enums and namespaces are not supported.</p>
</blockquote>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/30/2019 by Chris Shaffer</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-flow"><span class="arrow-prev">← </span><span>Adding Flow</span></a><a class="docs-next button" href="/docs/adding-relay"><span>Adding Relay</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/1/2019 by Kyle Bebak</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/adding-flow"><span class="arrow-prev">← </span><span>Adding Flow</span></a><a class="docs-next button" href="/docs/adding-relay"><span>Adding Relay</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

3
docs/advanced-configuration.html
View File

@@ -79,9 +79,10 @@
<tr><td style="text-align:left">INLINE_RUNTIME_CHUNK</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, Create React App will embed the runtime script into <code>index.html</code> during the production build. When set to <code>false</code>, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.</td></tr>
<tr><td style="text-align:left">IMAGE_INLINE_SIZE_LIMIT</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.</td></tr>
<tr><td style="text-align:left">EXTEND_ESLINT</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, ESLint configs that extend <code>eslint-config-react-app</code> will be used by <code>eslint-loader</code>. Any rules that are set to <code>&quot;error&quot;</code> will stop the application from building.</td></tr>
<tr><td style="text-align:left">TSC_COMPILE_ON_ERROR</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 7/16/2019 by Brody McKee</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pre-rendering-into-static-html-files"><span class="arrow-prev">← </span><span>Pre-Rendering Static HTML</span></a><a class="docs-next button" href="/docs/alternatives-to-ejecting"><span>Alternatives to Ejecting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/1/2019 by Kyle Bebak</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pre-rendering-into-static-html-files"><span class="arrow-prev">← </span><span>Pre-Rendering Static HTML</span></a><a class="docs-next button" href="/docs/alternatives-to-ejecting"><span>Alternatives to Ejecting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

3
docs/advanced-configuration/index.html
View File

@@ -79,9 +79,10 @@
<tr><td style="text-align:left">INLINE_RUNTIME_CHUNK</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, Create React App will embed the runtime script into <code>index.html</code> during the production build. When set to <code>false</code>, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.</td></tr>
<tr><td style="text-align:left">IMAGE_INLINE_SIZE_LIMIT</td><td style="text-align:center">🚫 Ignored</td><td style="text-align:center">✅ Used</td><td style="text-align:left">By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images.</td></tr>
<tr><td style="text-align:left">EXTEND_ESLINT</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, ESLint configs that extend <code>eslint-config-react-app</code> will be used by <code>eslint-loader</code>. Any rules that are set to <code>&quot;error&quot;</code> will stop the application from building.</td></tr>
<tr><td style="text-align:left">TSC_COMPILE_ON_ERROR</td><td style="text-align:center">✅ Used</td><td style="text-align:center">✅ Used</td><td style="text-align:left">When set to <code>true</code>, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 7/16/2019 by Brody McKee</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pre-rendering-into-static-html-files"><span class="arrow-prev">← </span><span>Pre-Rendering Static HTML</span></a><a class="docs-next button" href="/docs/alternatives-to-ejecting"><span>Alternatives to Ejecting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/1/2019 by Kyle Bebak</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pre-rendering-into-static-html-files"><span class="arrow-prev">← </span><span>Pre-Rendering Static HTML</span></a><a class="docs-next button" href="/docs/alternatives-to-ejecting"><span>Alternatives to Ejecting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/available-scripts.html
View File

@@ -64,7 +64,7 @@
<p>Launches the test runner in the interactive watch mode. See the section about <a href="/docs/running-tests">running tests</a> for more information.</p>
<h2><a class="anchor" aria-hidden="true" id="npm-run-build"></a><a href="#npm-run-build" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>npm run build</code></h2>
<p>Builds the app for production to the <code>build</code> folder. It correctly bundles React in production mode and optimizes the build for the best performance.</p>
<p>The build is minified and the filenames include the hashes. See the <a href="/docs/production-build">production build</a> section for more information.</p>
<p>The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the <a href="/docs/production-build">production build</a> section for more information.</p>
<p>Your app is ready to be deployed! See the section about <a href="/docs/deployment">deployment</a> for more information about deploying your application to popular hosting providers.</p>
<h2><a class="anchor" aria-hidden="true" id="npm-run-eject"></a><a href="#npm-run-eject" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>npm run eject</code></h2>
<p><strong>Note: this is a one-way operation. Once you <code>eject</code>, you can’t go back!</strong></p>
@@ -73,7 +73,7 @@
<p>In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in <code>package.json</code> as you see fit.</p>
<p>All of the commands except <code>eject</code> will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.</p>
<p>You don’t have to ever use <code>eject</code>. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/3/2019 by Mike Perry Y Attara</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/folder-structure"><span class="arrow-prev">← </span><span>Folder Structure</span></a><a class="docs-next button" href="/docs/supported-browsers-features"><span>Supported Browsers and Features</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#npm-start"><code>npm start</code></a></li><li><a href="#npm-test"><code>npm test</code></a></li><li><a href="#npm-run-build"><code>npm run build</code></a></li><li><a href="#npm-run-eject"><code>npm run eject</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/2/2019 by Jacob M-G Evans</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/folder-structure"><span class="arrow-prev">← </span><span>Folder Structure</span></a><a class="docs-next button" href="/docs/supported-browsers-features"><span>Supported Browsers and Features</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#npm-start"><code>npm start</code></a></li><li><a href="#npm-test"><code>npm test</code></a></li><li><a href="#npm-run-build"><code>npm run build</code></a></li><li><a href="#npm-run-eject"><code>npm run eject</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/available-scripts/index.html
View File

@@ -64,7 +64,7 @@
<p>Launches the test runner in the interactive watch mode. See the section about <a href="/docs/running-tests">running tests</a> for more information.</p>
<h2><a class="anchor" aria-hidden="true" id="npm-run-build"></a><a href="#npm-run-build" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>npm run build</code></h2>
<p>Builds the app for production to the <code>build</code> folder. It correctly bundles React in production mode and optimizes the build for the best performance.</p>
<p>The build is minified and the filenames include the hashes. See the <a href="/docs/production-build">production build</a> section for more information.</p>
<p>The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the <a href="/docs/production-build">production build</a> section for more information.</p>
<p>Your app is ready to be deployed! See the section about <a href="/docs/deployment">deployment</a> for more information about deploying your application to popular hosting providers.</p>
<h2><a class="anchor" aria-hidden="true" id="npm-run-eject"></a><a href="#npm-run-eject" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>npm run eject</code></h2>
<p><strong>Note: this is a one-way operation. Once you <code>eject</code>, you can’t go back!</strong></p>
@@ -73,7 +73,7 @@
<p>In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in <code>package.json</code> as you see fit.</p>
<p>All of the commands except <code>eject</code> will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.</p>
<p>You don’t have to ever use <code>eject</code>. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/3/2019 by Mike Perry Y Attara</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/folder-structure"><span class="arrow-prev">← </span><span>Folder Structure</span></a><a class="docs-next button" href="/docs/supported-browsers-features"><span>Supported Browsers and Features</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#npm-start"><code>npm start</code></a></li><li><a href="#npm-test"><code>npm test</code></a></li><li><a href="#npm-run-build"><code>npm run build</code></a></li><li><a href="#npm-run-eject"><code>npm run eject</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/2/2019 by Jacob M-G Evans</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/folder-structure"><span class="arrow-prev">← </span><span>Folder Structure</span></a><a class="docs-next button" href="/docs/supported-browsers-features"><span>Supported Browsers and Features</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#npm-start"><code>npm start</code></a></li><li><a href="#npm-test"><code>npm test</code></a></li><li><a href="#npm-run-build"><code>npm run build</code></a></li><li><a href="#npm-run-eject"><code>npm run eject</code></a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

8
docs/production-build.html
View File

@@ -66,7 +66,7 @@
<ul>
<li>These files can either be <em>vendor</em> code, or <a href="/docs/code-splitting">code splitting chunks</a>. <em>Vendor</em> code includes modules that you've imported from within <code>node_modules</code>. One of the potential advantages with splitting your <em>vendor</em> and <em>application</em> code is to enable <a href="#static-file-caching">long term caching techniques</a> to improve application loading performance. Since <em>vendor</em> code tends to change less often than the actual <em>application</em> code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.</li>
</ul>
<p><code>runtime~main.[hash].js</code></p>
<p><code>runtime-main.[hash].js</code></p>
<ul>
<li>This is a small chunk of <a href="https://webpack.js.org/configuration/optimization/#optimization-runtimechunk">webpack runtime</a> logic which is used to load and run your application. The contents of this will be embedded in your <code>build/index.html</code> file by default to save an additional network request. You can opt out of this by specifying <code>INLINE_RUNTIME_CHUNK=false</code> as documented in our <a href="/docs/advanced-configuration">advanced configuration</a>, which will load this chunk instead of embedding it in your <code>index.html</code>.</li>
</ul>
@@ -75,7 +75,11 @@
<p>Each file inside of the <code>build/static</code> directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses">aggressive caching techniques</a> to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different.</p>
<p>To deliver the best performance to your users, it's best practice to specify a <code>Cache-Control</code> header for <code>index.html</code>, as well as the files within <code>build/static</code>. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what <code>Cache-Control</code> does, see <a href="https://jakearchibald.com/2016/caching-best-practices/">this article</a> for a great introduction.</p>
<p>Using <code>Cache-Control: max-age=31536000</code> for your <code>build/static</code> assets, and <code>Cache-Control: no-cache</code> for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated <code>index.html</code> file, and will cache all of the <code>build/static</code> files for one year. Note that you can use the one year expiration on <code>build/static</code> safely because the file contents hash is embedded into the filename.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/13/2019 by bakuzan</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/making-a-progressive-web-app"><span class="arrow-prev">← </span><span>Making a Progressive Web App</span></a><a class="docs-next button" href="/docs/running-tests"><span>Running Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#static-file-caching">Static File Caching</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
<h2><a class="anchor" aria-hidden="true" id="profiling"></a><a href="#profiling" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Profiling</h2>
<p>ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small
additional overhead it is opt-in for production mode. You can opt-in by using the <code>--profile</code> flag. Use <code>npm run build -- --profile</code> or <code>yarn build --profile</code> to enable profiling in the production build. See the <a href="https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler">React docs</a> for details about profiling
using the React DevTools.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/2/2019 by Jacob M-G Evans</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/making-a-progressive-web-app"><span class="arrow-prev">← </span><span>Making a Progressive Web App</span></a><a class="docs-next button" href="/docs/running-tests"><span>Running Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#static-file-caching">Static File Caching</a></li><li><a href="#profiling">Profiling</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

8
docs/production-build/index.html
View File

@@ -66,7 +66,7 @@
<ul>
<li>These files can either be <em>vendor</em> code, or <a href="/docs/code-splitting">code splitting chunks</a>. <em>Vendor</em> code includes modules that you've imported from within <code>node_modules</code>. One of the potential advantages with splitting your <em>vendor</em> and <em>application</em> code is to enable <a href="#static-file-caching">long term caching techniques</a> to improve application loading performance. Since <em>vendor</em> code tends to change less often than the actual <em>application</em> code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.</li>
</ul>
<p><code>runtime~main.[hash].js</code></p>
<p><code>runtime-main.[hash].js</code></p>
<ul>
<li>This is a small chunk of <a href="https://webpack.js.org/configuration/optimization/#optimization-runtimechunk">webpack runtime</a> logic which is used to load and run your application. The contents of this will be embedded in your <code>build/index.html</code> file by default to save an additional network request. You can opt out of this by specifying <code>INLINE_RUNTIME_CHUNK=false</code> as documented in our <a href="/docs/advanced-configuration">advanced configuration</a>, which will load this chunk instead of embedding it in your <code>index.html</code>.</li>
</ul>
@@ -75,7 +75,11 @@
<p>Each file inside of the <code>build/static</code> directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses">aggressive caching techniques</a> to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different.</p>
<p>To deliver the best performance to your users, it's best practice to specify a <code>Cache-Control</code> header for <code>index.html</code>, as well as the files within <code>build/static</code>. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what <code>Cache-Control</code> does, see <a href="https://jakearchibald.com/2016/caching-best-practices/">this article</a> for a great introduction.</p>
<p>Using <code>Cache-Control: max-age=31536000</code> for your <code>build/static</code> assets, and <code>Cache-Control: no-cache</code> for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated <code>index.html</code> file, and will cache all of the <code>build/static</code> files for one year. Note that you can use the one year expiration on <code>build/static</code> safely because the file contents hash is embedded into the filename.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 4/13/2019 by bakuzan</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/making-a-progressive-web-app"><span class="arrow-prev">← </span><span>Making a Progressive Web App</span></a><a class="docs-next button" href="/docs/running-tests"><span>Running Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#static-file-caching">Static File Caching</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
<h2><a class="anchor" aria-hidden="true" id="profiling"></a><a href="#profiling" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Profiling</h2>
<p>ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small
additional overhead it is opt-in for production mode. You can opt-in by using the <code>--profile</code> flag. Use <code>npm run build -- --profile</code> or <code>yarn build --profile</code> to enable profiling in the production build. See the <a href="https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler">React docs</a> for details about profiling
using the React DevTools.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 10/2/2019 by Jacob M-G Evans</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/making-a-progressive-web-app"><span class="arrow-prev">← </span><span>Making a Progressive Web App</span></a><a class="docs-next button" href="/docs/running-tests"><span>Running Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#static-file-caching">Static File Caching</a></li><li><a href="#profiling">Profiling</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

11
docs/running-tests.html
View File

@@ -242,7 +242,16 @@ Run <code>npm test -- --coverage</code> (note extra <code>--</code> in the middl
<li><a href="https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array"><code>collectCoverageFrom</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string"><code>coverageReporters</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#coveragethreshold-object"><code>coverageThreshold</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#extraglobals-array-string"><code>extraGlobals</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#globalsetup-string"><code>globalSetup</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#globalteardown-string"><code>globalTeardown</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#modulenamemapper-object-string-string"><code>moduleNameMapper</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#resetmocks-boolean"><code>resetMocks</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#resetmodules-boolean"><code>resetModules</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string"><code>snapshotSerializers</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object"><code>transform</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string"><code>transformIgnorePatterns</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#watchpathignorepatterns-array-string"><code>watchPathIgnorePatterns</code></a></li>
</ul>
<p>Example package.json:</p>
<pre><code class="hljs css language-json">{
@@ -338,7 +347,7 @@ Run <code>npm test -- --coverage</code> (note extra <code>--</code> in the middl
<h2><a class="anchor" aria-hidden="true" id="editor-integration"></a><a href="#editor-integration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Editor Integration</h2>
<p>If you use <a href="https://code.visualstudio.com">Visual Studio Code</a>, there is a <a href="https://github.com/orta/vscode-jest">Jest extension</a> which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.</p>
<p><img src="https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png" alt="VS Code Jest Preview"></p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/9/2019 by Weyert de Boer</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/production-build"><span class="arrow-prev">← </span><span>Creating a Production Build</span></a><a class="docs-next button" href="/docs/debugging-tests"><span>Debugging Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#filename-conventions">Filename Conventions</a></li><li><a href="#command-line-interface">Command Line Interface</a></li><li><a href="#version-control-integration">Version Control Integration</a></li><li><a href="#writing-tests">Writing Tests</a></li><li><a href="#testing-components">Testing Components</a><ul class="toc-headings"><li><a href="#option-1-shallow-rendering">Option 1: Shallow Rendering</a></li><li><a href="#src-setuptestsjs"><code>src/setupTests.js</code></a></li><li><a href="#option-2-react-testing-library">Option 2: React Testing Library</a></li></ul></li><li><a href="#using-third-party-assertion-libraries">Using Third Party Assertion Libraries</a></li><li><a href="#initializing-test-environment">Initializing Test Environment</a><ul class="toc-headings"><li><a href="#src-setuptestsjs-1"><code>src/setupTests.js</code></a></li></ul></li><li><a href="#focusing-and-excluding-tests">Focusing and Excluding Tests</a></li><li><a href="#coverage-reporting">Coverage Reporting</a><ul class="toc-headings"><li><a href="#configuration">Configuration</a></li></ul></li><li><a href="#continuous-integration">Continuous Integration</a></li><li><a href="#on-ci-servers">On CI servers</a><ul class="toc-headings"><li><a href="#travis-ci">Travis CI</a></li><li><a href="#circleci">CircleCI</a></li></ul></li><li><a href="#on-your-own-environment">On your own environment</a></li><li><a href="#disabling-jsdom">Disabling jsdom</a></li><li><a href="#snapshot-testing">Snapshot Testing</a></li><li><a href="#editor-integration">Editor Integration</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/27/2019 by neilbryson</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/production-build"><span class="arrow-prev">← </span><span>Creating a Production Build</span></a><a class="docs-next button" href="/docs/debugging-tests"><span>Debugging Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#filename-conventions">Filename Conventions</a></li><li><a href="#command-line-interface">Command Line Interface</a></li><li><a href="#version-control-integration">Version Control Integration</a></li><li><a href="#writing-tests">Writing Tests</a></li><li><a href="#testing-components">Testing Components</a><ul class="toc-headings"><li><a href="#option-1-shallow-rendering">Option 1: Shallow Rendering</a></li><li><a href="#src-setuptestsjs"><code>src/setupTests.js</code></a></li><li><a href="#option-2-react-testing-library">Option 2: React Testing Library</a></li></ul></li><li><a href="#using-third-party-assertion-libraries">Using Third Party Assertion Libraries</a></li><li><a href="#initializing-test-environment">Initializing Test Environment</a><ul class="toc-headings"><li><a href="#src-setuptestsjs-1"><code>src/setupTests.js</code></a></li></ul></li><li><a href="#focusing-and-excluding-tests">Focusing and Excluding Tests</a></li><li><a href="#coverage-reporting">Coverage Reporting</a><ul class="toc-headings"><li><a href="#configuration">Configuration</a></li></ul></li><li><a href="#continuous-integration">Continuous Integration</a></li><li><a href="#on-ci-servers">On CI servers</a><ul class="toc-headings"><li><a href="#travis-ci">Travis CI</a></li><li><a href="#circleci">CircleCI</a></li></ul></li><li><a href="#on-your-own-environment">On your own environment</a></li><li><a href="#disabling-jsdom">Disabling jsdom</a></li><li><a href="#snapshot-testing">Snapshot Testing</a></li><li><a href="#editor-integration">Editor Integration</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

11
docs/running-tests/index.html
View File

@@ -242,7 +242,16 @@ Run <code>npm test -- --coverage</code> (note extra <code>--</code> in the middl
<li><a href="https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array"><code>collectCoverageFrom</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string"><code>coverageReporters</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#coveragethreshold-object"><code>coverageThreshold</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#extraglobals-array-string"><code>extraGlobals</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#globalsetup-string"><code>globalSetup</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#globalteardown-string"><code>globalTeardown</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#modulenamemapper-object-string-string"><code>moduleNameMapper</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#resetmocks-boolean"><code>resetMocks</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#resetmodules-boolean"><code>resetModules</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string"><code>snapshotSerializers</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#transform-object-string-pathtotransformer-pathtotransformer-object"><code>transform</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string"><code>transformIgnorePatterns</code></a></li>
<li><a href="https://jestjs.io/docs/en/configuration.html#watchpathignorepatterns-array-string"><code>watchPathIgnorePatterns</code></a></li>
</ul>
<p>Example package.json:</p>
<pre><code class="hljs css language-json">{
@@ -338,7 +347,7 @@ Run <code>npm test -- --coverage</code> (note extra <code>--</code> in the middl
<h2><a class="anchor" aria-hidden="true" id="editor-integration"></a><a href="#editor-integration" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Editor Integration</h2>
<p>If you use <a href="https://code.visualstudio.com">Visual Studio Code</a>, there is a <a href="https://github.com/orta/vscode-jest">Jest extension</a> which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates.</p>
<p><img src="https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png" alt="VS Code Jest Preview"></p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/9/2019 by Weyert de Boer</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/production-build"><span class="arrow-prev">← </span><span>Creating a Production Build</span></a><a class="docs-next button" href="/docs/debugging-tests"><span>Debugging Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#filename-conventions">Filename Conventions</a></li><li><a href="#command-line-interface">Command Line Interface</a></li><li><a href="#version-control-integration">Version Control Integration</a></li><li><a href="#writing-tests">Writing Tests</a></li><li><a href="#testing-components">Testing Components</a><ul class="toc-headings"><li><a href="#option-1-shallow-rendering">Option 1: Shallow Rendering</a></li><li><a href="#src-setuptestsjs"><code>src/setupTests.js</code></a></li><li><a href="#option-2-react-testing-library">Option 2: React Testing Library</a></li></ul></li><li><a href="#using-third-party-assertion-libraries">Using Third Party Assertion Libraries</a></li><li><a href="#initializing-test-environment">Initializing Test Environment</a><ul class="toc-headings"><li><a href="#src-setuptestsjs-1"><code>src/setupTests.js</code></a></li></ul></li><li><a href="#focusing-and-excluding-tests">Focusing and Excluding Tests</a></li><li><a href="#coverage-reporting">Coverage Reporting</a><ul class="toc-headings"><li><a href="#configuration">Configuration</a></li></ul></li><li><a href="#continuous-integration">Continuous Integration</a></li><li><a href="#on-ci-servers">On CI servers</a><ul class="toc-headings"><li><a href="#travis-ci">Travis CI</a></li><li><a href="#circleci">CircleCI</a></li></ul></li><li><a href="#on-your-own-environment">On your own environment</a></li><li><a href="#disabling-jsdom">Disabling jsdom</a></li><li><a href="#snapshot-testing">Snapshot Testing</a></li><li><a href="#editor-integration">Editor Integration</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/27/2019 by neilbryson</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/production-build"><span class="arrow-prev">← </span><span>Creating a Production Build</span></a><a class="docs-next button" href="/docs/debugging-tests"><span>Debugging Tests</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#filename-conventions">Filename Conventions</a></li><li><a href="#command-line-interface">Command Line Interface</a></li><li><a href="#version-control-integration">Version Control Integration</a></li><li><a href="#writing-tests">Writing Tests</a></li><li><a href="#testing-components">Testing Components</a><ul class="toc-headings"><li><a href="#option-1-shallow-rendering">Option 1: Shallow Rendering</a></li><li><a href="#src-setuptestsjs"><code>src/setupTests.js</code></a></li><li><a href="#option-2-react-testing-library">Option 2: React Testing Library</a></li></ul></li><li><a href="#using-third-party-assertion-libraries">Using Third Party Assertion Libraries</a></li><li><a href="#initializing-test-environment">Initializing Test Environment</a><ul class="toc-headings"><li><a href="#src-setuptestsjs-1"><code>src/setupTests.js</code></a></li></ul></li><li><a href="#focusing-and-excluding-tests">Focusing and Excluding Tests</a></li><li><a href="#coverage-reporting">Coverage Reporting</a><ul class="toc-headings"><li><a href="#configuration">Configuration</a></li></ul></li><li><a href="#continuous-integration">Continuous Integration</a></li><li><a href="#on-ci-servers">On CI servers</a><ul class="toc-headings"><li><a href="#travis-ci">Travis CI</a></li><li><a href="#circleci">CircleCI</a></li></ul></li><li><a href="#on-your-own-environment">On your own environment</a></li><li><a href="#disabling-jsdom">Disabling jsdom</a></li><li><a href="#snapshot-testing">Snapshot Testing</a></li><li><a href="#editor-integration">Editor Integration</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/using-the-public-folder.html
View File

@@ -79,7 +79,7 @@ This mechanism provides a number of benefits:</p>
<p>However there is an <strong>escape hatch</strong> that you can use to add an asset outside of the module system.</p>
<p>If you put a file into the <code>public</code> folder, it will <strong>not</strong> be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the <code>public</code> folder, you need to use a special variable called <code>PUBLIC_URL</code>.</p>
<p>Inside <code>index.html</code>, you can use it like this:</p>
<pre><code class="hljs css language-html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"shortcut icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"%PUBLIC_URL%/favicon.ico"</span>&gt;</span>
<pre><code class="hljs css language-html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"%PUBLIC_URL%/favicon.ico"</span>&gt;</span>
</code></pre>
<p>Only files inside the <code>public</code> folder will be accessible by <code>%PUBLIC_URL%</code> prefix. If you need to use a file from <code>src</code> or <code>node_modules</code>, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.</p>
<p>When you run <code>npm run build</code>, Create React App will substitute <code>%PUBLIC_URL%</code> with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.</p>
@@ -107,7 +107,7 @@ The <code>public</code> folder is useful as a workaround for a number of less co
<li>Some library may be incompatible with Webpack and you have no other option but to include it as a <code>&lt;script&gt;</code> tag.</li>
</ul>
<p>Note that if you add a <code>&lt;script&gt;</code> that declares global variables, you also need to read the next section on using them.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 2/10/2019 by Ian Schmitz</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/loading-graphql-files"><span class="arrow-prev">← </span><span>Loading .graphql Files</span></a><a class="docs-next button" href="/docs/code-splitting"><span>Code Splitting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#changing-the-html">Changing the HTML</a></li><li><a href="#adding-assets-outside-of-the-module-system">Adding Assets Outside of the Module System</a></li><li><a href="#when-to-use-the-public-folder">When to Use the <code>public</code> Folder</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/20/2019 by Lewis Llobera</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/loading-graphql-files"><span class="arrow-prev">← </span><span>Loading .graphql Files</span></a><a class="docs-next button" href="/docs/code-splitting"><span>Code Splitting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#changing-the-html">Changing the HTML</a></li><li><a href="#adding-assets-outside-of-the-module-system">Adding Assets Outside of the Module System</a></li><li><a href="#when-to-use-the-public-folder">When to Use the <code>public</code> Folder</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;

4
docs/using-the-public-folder/index.html
View File

@@ -79,7 +79,7 @@ This mechanism provides a number of benefits:</p>
<p>However there is an <strong>escape hatch</strong> that you can use to add an asset outside of the module system.</p>
<p>If you put a file into the <code>public</code> folder, it will <strong>not</strong> be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the <code>public</code> folder, you need to use a special variable called <code>PUBLIC_URL</code>.</p>
<p>Inside <code>index.html</code>, you can use it like this:</p>
<pre><code class="hljs css language-html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"shortcut icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"%PUBLIC_URL%/favicon.ico"</span>&gt;</span>
<pre><code class="hljs css language-html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"%PUBLIC_URL%/favicon.ico"</span>&gt;</span>
</code></pre>
<p>Only files inside the <code>public</code> folder will be accessible by <code>%PUBLIC_URL%</code> prefix. If you need to use a file from <code>src</code> or <code>node_modules</code>, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.</p>
<p>When you run <code>npm run build</code>, Create React App will substitute <code>%PUBLIC_URL%</code> with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.</p>
@@ -107,7 +107,7 @@ The <code>public</code> folder is useful as a workaround for a number of less co
<li>Some library may be incompatible with Webpack and you have no other option but to include it as a <code>&lt;script&gt;</code> tag.</li>
</ul>
<p>Note that if you add a <code>&lt;script&gt;</code> that declares global variables, you also need to read the next section on using them.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 2/10/2019 by Ian Schmitz</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/loading-graphql-files"><span class="arrow-prev">← </span><span>Loading .graphql Files</span></a><a class="docs-next button" href="/docs/code-splitting"><span>Code Splitting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#changing-the-html">Changing the HTML</a></li><li><a href="#adding-assets-outside-of-the-module-system">Adding Assets Outside of the Module System</a></li><li><a href="#when-to-use-the-public-folder">When to Use the <code>public</code> Folder</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 9/20/2019 by Lewis Llobera</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/loading-graphql-files"><span class="arrow-prev">← </span><span>Loading .graphql Files</span></a><a class="docs-next button" href="/docs/code-splitting"><span>Code Splitting</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#changing-the-html">Changing the HTML</a></li><li><a href="#adding-assets-outside-of-the-module-system">Adding Assets Outside of the Module System</a></li><li><a href="#when-to-use-the-public-folder">When to Use the <code>public</code> Folder</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/logo.svg" alt="Create React App" width="66" height="58"/></a><div><h5>Docs</h5><a href="/docs/getting-started">Get Started</a><a href="https://reactjs.org/" target="_blank" rel="noreferrer noopener">Learn React</a></div><div><h5>Community</h5><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noreferrer noopener">Stack Overflow</a><a href="https://spectrum.chat/create-react-app" target="_blank" rel="noreferrer noopener">Spectrum</a><a href="https://twitter.com/reactjs" target="_blank" rel="noreferrer noopener">Twitter</a><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noreferrer noopener">Contributor Covenant</a></div><div><h5>More</h5><a href="https://www.github.com/facebook/create-react-app">GitHub</a><a class="github-button" href="https://github.com/facebook/create-react-app" data-icon="octicon-star" data-count-href="/facebook/create-react-app/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;