CINXE.COM

<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="generator" content="Docusaurus v2.0.0-beta.14"> <link rel="search" type="application/opensearchdescription+xml" title="Create React App" href="/opensearch.xml"><title data-react-helmet="true">Create React App is deprecated.</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:image" content="https://create-react-app.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image" content="https://create-react-app.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:url" content="https://create-react-app.dev/"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><meta data-react-helmet="true" name="robots" content="noindex"><meta data-react-helmet="true" name="description" content="Create React App is deprecated. Please see react.dev for modern options."><meta data-react-helmet="true" property="og:title" content="Create React App is deprecated."><meta data-react-helmet="true" property="og:description" content="Create React App is deprecated. Please see react.dev for modern options."><link data-react-helmet="true" rel="icon" href="/img/favicon/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://create-react-app.dev/"><link data-react-helmet="true" rel="alternate" href="https://create-react-app.dev/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://create-react-app.dev/" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://AUJYIQ70HN-dsn.algolia.net" crossorigin="anonymous"><script data-react-helmet="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/assets/css/styles.812ae0ae.css"> <link rel="preload" href="/assets/js/runtime~main.c20facdd.js" as="script"> <link rel="preload" href="/assets/js/main.bb13fc86.js" as="script"> </head> <body> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"> <div id="docusaurus-base-url-issue-banner-container"></div><div><a href="#" class="skipToContent_GxWn">Skip to main content</a></div><div class="announcementBar_eRQg" style="background-color:#20232a;color:#fff" role="banner"><div class="announcementBarContent_hd8n">Create React App is deprecated. <a target="_blank" rel="noopener noreferrer" href="https://react.dev/link/cra">Read more here</a>.</div></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="Create React App Logo" class="themedImage_hT0q themedImage--light_t77m"><img src="/img/logo.svg" alt="Create React App Logo" class="themedImage_hT0q themedImage--dark_lYkc"></div><b class="navbar__title">Create React App</b></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a href="https://reactjs.org/community/support.html" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Help<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><a href="https://www.github.com/facebook/create-react-app" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><div class="toggle_hhh4 toggle_o8XW toggleDisabled_TXua"><div class="toggleTrack_HbNd" role="button" tabindex="-1"><div class="toggleTrackCheck_IT5z"><span class="toggleIcon_PY39">🌜</span></div><div class="toggleTrackX_scPi"><span class="toggleIcon_PY39">🌞</span></div><div class="toggleTrackThumb_K2k9"></div></div><input type="checkbox" class="toggleScreenReader_ENkX" aria-label="Switch between dark and light mode"></div><div class="searchBox_9spw"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><div class="hero hero--dark heroBanner_4JBe"><div class="container"><img class="heroBannerLogo_hHiA margin-vert--md" alt="Create React App logo" src="/img/logo.svg"><h1 class="hero__title">Create React App</h1><p class="hero__subtitle">Create React App has been deprecated. Please visit react.dev for modern options.</p><div class="getStarted_CALW"><a class="button button--outline button--primary button--lg" href="/docs/getting-started">Get Started</a></div></div></div><div class="features_ENLn"><div class="container"><div class="row"><div class="col col--4"><h2>Less to Learn</h2><p>You don&#x27;t need to learn and configure many build tools. Instant reloads help you focus on development. When it&#x27;s time to deploy, your bundles are optimized automatically.</p></div><div class="col col--4"><h2>Only One Dependency</h2><p>Your app only needs one build dependency. We test Create React App to make sure that all of its underlying pieces work together seamlessly – no complicated version mismatches.</p></div><div class="col col--4"><h2>No Lock-In</h2><p>Under the hood, we use webpack, Babel, ESLint, and other amazing projects to power your app. If you ever want an advanced configuration, you can ”eject” from Create React App and edit their config files directly.</p></div></div></div></div><div class="gettingStartedSection_6aRe"><div class="container padding-vert--xl text--left"><div class="row"><div class="col col--4 col--offset-1"><h2>Get started in seconds</h2><p>Whether you’re using React or another library, Create React App lets you <strong>focus on code, not build tools</strong>.<br><br>To create a project called <i>my-app</i>, run this command:</p><div class="codeBlockContainer_Xn-l language-sh theme-code-block"><div class="codeBlockContent_cn14 sh"><pre tabindex="0" class="prism-code language-sh codeBlock_hf8G thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_Jgjh"><span class="token-line" style="color:#bfc7d5"><span class="token plain">npx create-react-app my-app</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_a5m3 clean-btn">Copy</button></div></div><br></div><div class="col col--5 col--offset-1"><img class="featureImage_fOUF" alt="Easy to get started in seconds" src="https://camo.githubusercontent.com/29765c4a32f03bd01d44edef1cd674225e3c906b/68747470733a2f2f63646e2e7261776769742e636f6d2f66616365626f6f6b2f6372656174652d72656163742d6170702f323762343261632f73637265656e636173742e737667"></div></div></div></div><div><div class="container padding-vert--xl text--left"><div class="row"><div class="col col--4 col--offset-1"><img class="featureImage_fOUF" alt="Easy to update" src="/img/update.png"></div><div class="col col--5 col--offset-1"><h2>Easy to Maintain</h2><p>Updating your build tooling is typically a daunting and time-consuming task. When new versions of Create React App are released, you can upgrade using a single command:</p><div class="codeBlockContainer_Xn-l language-sh theme-code-block"><div class="codeBlockContent_cn14 sh"><pre tabindex="0" class="prism-code language-sh codeBlock_hf8G thin-scrollbar" style="color:#bfc7d5;background-color:#292d3e"><code class="codeBlockLines_Jgjh"><span class="token-line" style="color:#bfc7d5"><span class="token plain">npm install react-scripts@latest</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_a5m3 clean-btn">Copy</button></div></div></div></div></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Get Started</a></li><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Learn React<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/create-react-app" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://github.com/facebook/create-react-app/discussions" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>GitHub Discussions<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://twitter.com/reactjs" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Contributor Covenant<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">Social</div><ul class="footer__items"><li class="footer__item"><a href="https://www.github.com/facebook/create-react-app" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_gzkf"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_hT0q themedImage--light_t77m footer__logo"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_hT0q themedImage--dark_lYkc footer__logo"></div><div class="footer__copyright">Copyright © 2025 Facebook, Inc.</div></div></div></footer></div> <script src="/assets/js/runtime~main.c20facdd.js"></script> <script src="/assets/js/main.bb13fc86.js"></script> </body> </html>

Pages： 1 2 3 4 5 6 7 8 9 10