{"id":889,"date":"2021-11-06T14:52:00","date_gmt":"2021-11-06T06:52:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=889"},"modified":"2022-02-23T14:50:22","modified_gmt":"2022-02-23T06:50:22","slug":"%e5%ae%89%e8%a3%85create-react-app","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=889","title":{"rendered":"\u5b89\u88c5create-react-app"},"content":{"rendered":"\n<p>\u524d\u4e9b\u5929\u5728\u5b66react\uff0c\u6309\u7167\u5b98\u7f51\u8def\u7ebf\u5b89\u88c5create-react-app\uff0c\u5b89\u88c5\u8fc7\u7a0b\u4e2d\u987a\u5229\uff0c\u8fd0\u884c\u65f6\u5019\u7ed3\u679c\u4e0d\u5982\u4eba\u610f\uff0c\u4ee5\u4e0b\u8bb0\u5f55\u907f\u514d\u4e0b\u6b21\u518d\u6b21\u9047\u5230\u540c\u6837\u95ee\u9898<\/p>\n\n\n\n<p>\u5b98\u7f51\u5730\u5740<a href=\"https:\/\/react.docschina.org\/docs\/create-a-new-react-app.html\">https:\/\/react.docschina.org\/docs\/create-a-new-react-app.html<\/a><\/p>\n\n\n\n<h3 id=\"create-react-app\">Create React App<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\" target=\"_blank\" rel=\"noreferrer noopener\">Create React App<\/a>&nbsp;\u662f\u4e00\u4e2a\u7528\u4e8e<strong>\u5b66\u4e60 React<\/strong>&nbsp;\u7684\u8212\u9002\u73af\u5883\uff0c\u4e5f\u662f\u7528 React \u521b\u5efa<strong>\u65b0\u7684<a href=\"https:\/\/react.docschina.org\/docs\/glossary.html#single-page-application\">\u5355\u9875<\/a>\u5e94\u7528<\/strong>\u7684\u6700\u4f73\u65b9\u5f0f\u3002<\/p>\n\n\n\n<p>\u5b83\u4f1a\u914d\u7f6e\u4f60\u7684\u5f00\u53d1\u73af\u5883\uff0c\u4ee5\u4fbf\u4f7f\u4f60\u80fd\u591f\u4f7f\u7528\u6700\u65b0\u7684 JavaScript \u7279\u6027\uff0c\u63d0\u4f9b\u826f\u597d\u7684\u5f00\u53d1\u4f53\u9a8c\uff0c\u5e76\u4e3a\u751f\u4ea7\u73af\u5883\u4f18\u5316\u4f60\u7684\u5e94\u7528\u7a0b\u5e8f\u3002\u4f60\u9700\u8981\u5728\u4f60\u7684\u673a\u5668\u4e0a\u5b89\u88c5&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\">Node &gt;= 8.10 \u548c npm &gt;= 5.6<\/a>\u3002\u8981\u521b\u5efa\u9879\u76ee\uff0c\u8bf7\u6267\u884c\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-app\ncd my-app\nnpm start<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u6ce8\u610f<\/p><p>\u7b2c\u4e00\u884c\u7684&nbsp;<code>npx<\/code>&nbsp;\u4e0d\u662f\u62fc\u5199\u9519\u8bef \u2014\u2014 \u5b83\u662f&nbsp;<a href=\"https:\/\/medium.com\/@maybekatz\/introducing-npx-an-npm-package-runner-55f7d4bd282b\" target=\"_blank\" rel=\"noreferrer noopener\">npm 5.2+ \u9644\u5e26\u7684 package \u8fd0\u884c\u5de5\u5177<\/a>\u3002<\/p><\/blockquote>\n\n\n\n<p>Create React App \u4e0d\u4f1a\u5904\u7406\u540e\u7aef\u903b\u8f91\u6216\u64cd\u7eb5\u6570\u636e\u5e93\uff1b\u5b83\u53ea\u662f\u521b\u5efa\u4e00\u4e2a\u524d\u7aef\u6784\u5efa\u6d41\u6c34\u7ebf\uff08build pipeline\uff09\uff0c\u6240\u4ee5\u4f60\u53ef\u4ee5\u4f7f\u7528\u5b83\u6765\u914d\u5408\u4efb\u4f55\u4f60\u60f3\u4f7f\u7528\u7684\u540e\u7aef\u3002\u5b83\u5728\u5185\u90e8\u4f7f\u7528&nbsp;<a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Babel<\/a>&nbsp;\u548c&nbsp;<a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">webpack<\/a>\uff0c\u4f46\u4f60\u65e0\u9700\u4e86\u89e3\u5b83\u4eec\u7684\u4efb\u4f55\u7ec6\u8282\u3002<\/p>\n\n\n\n<p>\u5f53\u4f60\u51c6\u5907\u597d\u90e8\u7f72\u5230\u751f\u4ea7\u73af\u5883\u65f6\uff0c\u6267\u884c\u00a0<code>npm run build<\/code>\u00a0\u4f1a\u5728\u00a0<code>build<\/code>\u00a0\u6587\u4ef6\u5939\u5185\u751f\u6210\u4f60\u5e94\u7528\u7684\u4f18\u5316\u7248\u672c\u3002\u4f60\u80fd<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/facebookincubator\/create-react-app#create-react-app--\" target=\"_blank\">\u4ece\u5b83\u7684 README<\/a>\u00a0\u548c<a rel=\"noreferrer noopener\" href=\"https:\/\/facebook.github.io\/create-react-app\/\" target=\"_blank\">\u7528\u6237\u6307\u5357<\/a>\u4e86\u89e3 Create React App \u7684\u66f4\u591a\u4fe1\u606f\u3002<\/p>\n\n\n\n<p>React\u9879\u76ee\u521b\u5efa\uff1a<br>1. \u4e0b\u8f7d\u5b89\u88c5\u811a\u624b\u67b6<br>yarn global add create-react-app<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>2. \u521b\u5efa\u9879\u76ee\n    create-react-app \u9879\u76ee\u540d(\u9879\u76ee\u540d\u53ca\u8def\u5f84\u4e0d\u80fd\u6709\u4e2d\u6587)\n\n3. \u542f\u52a8\u9879\u76ee(react\u670d\u52a1\u5668\u7aef\u53e3\u9ed8\u8ba43000)\n    cd \u9879\u76ee\u540d\n    yarn start ||  npm run start<\/code><\/pre>\n\n\n\n<h3 id=\"nextjs\">\u6309\u7167\u4e0a\u9762\u6b65\u9aa4\u5b89\u88c5\u540e\u8fd0\u884c npm start\u65f6\u62a5\u9519\u4e86\uff0c<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>start: `react-scripts start`<\/code><\/pre>\n\n\n\n<p>\u89e3\u51b3\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<p>\u9879\u76ee\u6839\u76ee\u5f55,\u521b\u5efa\u4e00\u4e2a .env \u6587\u4ef6;<\/p>\n\n\n\n<p>\u7136\u540e\u6dfb\u52a0\u4ee3\u7801:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>SKIP_PREFLIGHT_CHECK=true<\/code><\/pre>\n\n\n\n<p>\u518d\u6b21\u6267\u884c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cnpm start<\/code><\/pre>\n\n\n\n<p>bug\u89e3\u51b3\u5df2\u7ecf\u80fd\u8fd0\u884c\u4e86<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2021\/11\/image.png\" alt=\"\" class=\"wp-image-893\" width=\"174\" height=\"157\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2021\/11\/image.png 946w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2021\/11\/image-300x272.png 300w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2021\/11\/image-768x697.png 768w\" sizes=\"(max-width: 174px) 100vw, 174px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u4e9b\u5929\u5728\u5b66react\uff0c\u6309\u7167\u5b98\u7f51\u8def\u7ebf\u5b89\u88c5create-react-app\uff0c\u5b89\u88c5\u8fc7\u7a0b\u4e2d\u987a\u5229\uff0c\u8fd0\u884c\u65f6\u5019\u7ed3\u679c\u4e0d\u5982\u4eba\u610f\uff0c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[40,1],"tags":[39],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/889"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=889"}],"version-history":[{"count":4,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/889\/revisions"}],"predecessor-version":[{"id":896,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/889\/revisions\/896"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=889"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}