{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2016/07/22/create-apps-with-no-configuration.html","result":{"data":{"markdownRemark":{"html":"<p><strong><a href=\"https://github.com/facebookincubator/create-react-app\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Create React App</a></strong> is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.</p>\n<h2 id=\"getting-started\"><a href=\"#getting-started\" aria-hidden class=\"anchor\"><svg 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>Getting Started </h2>\n<h3 id=\"installation\"><a href=\"#installation\" aria-hidden class=\"anchor\"><svg 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>Installation </h3>\n<p>First, install the global package:</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"gatsby-code-sh\"><code class=\"gatsby-code-sh\">npm install -g create-react-app</code></pre></div>\n<p>Node.js 4.x or higher is required.</p>\n<h3 id=\"creating-an-app\"><a href=\"#creating-an-app\" aria-hidden class=\"anchor\"><svg 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>Creating an App </h3>\n<p>Now you can use it to create a new app:</p>\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"gatsby-code-sh\"><code class=\"gatsby-code-sh\">create-react-app hello-world</code></pre></div>\n<p>This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder:</p>\n<p>\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 57.61904761904761%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACLklEQVQoz6WS224SURSGMU20yPlcQA4zlMMMFAYYYDiY9MJX8AU6ifEBfA2folwYvQZCidEIFrRp+goNl/oE1s1e/ntDufCmJk7yZa+1D/9e/9rjuP74/uWnq+mr66vl2c3Npf3921d7Mr+0R+OxPZ1O7dlsZo8Rj0YjezKZyHw+n9ur1cpeLpeCM8SvF4vFC4f4rE7rR/+5Qb1elU5Pq2RZVTJbTWo0mmSapqTRaFCzuc3vx3a7vafb7VK9Xv8sBVPpzG06naajo/idquZYJpNhWaCqKkskEgxrTFUUls/nmaKoLJvNshzWvF4v83g8gl+A3G73VApCed1qtcio1zeIOW7n5XKZG4YhqdVqHFVxsSZAtTyZTPJgMHgPi0QiFA6HL6Qgblx3LIsgumnCSqfTkViY6/f7NBgMxBqJPXpZp0KhQIqiEM5RHnHu+JjFYjGC8FYQybpmGFSpVDaokjRNg0CbDKOGuRPZv1JJI1QqEXkNa6hW9hMjE+dQ9VawWCyuRVNhb2Oa0vq++bqu00m1iv7KCoQtCoVCe8ScsByNRkV+sXuU9FrYM5vmplQqcU3XOWxxEcfjcY7+cAhxHJD8HQMmLtpbRhW3oje6rv1OpZ4xv9/PAoGABIf+hbud4PaVLavws98vULdXwEPkIKzCYkLaE6/3EGLfzvIXKXh46HzrdD59h/Hc5XINfX7/0OfzDfGf7ccHOMe+DxjfQO6R0DwAT8Dj/+QA7XL8Ad9mL5RHXJThAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"created folder\"\n        title=\"\"\n        src=\"/static/b5996203fe38b91567eaa57139964146/1e088/created-folder.png\"\n        srcset=\"/static/b5996203fe38b91567eaa57139964146/65ed1/created-folder.png 210w,\n/static/b5996203fe38b91567eaa57139964146/d10fb/created-folder.png 420w,\n/static/b5996203fe38b91567eaa57139964146/1e088/created-folder.png 840w,\n/static/b5996203fe38b91567eaa57139964146/705cc/created-folder.png 1071w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  </p>\n<h3 id=\"starting-the-server\"><a href=\"#starting-the-server\" aria-hidden class=\"anchor\"><svg 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>Starting the Server </h3>\n<p>Run <code class=\"gatsby-code-text\">npm start</code> to launch the development server. The browser will open automatically with the created app’s URL.</p>\n<p>\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 57.61904761904761%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAABeElEQVQoz6WRTU7CQBTHMSS64DN8tiQkFNoQ2bVQsCslYeEFvACTGA/gNTwFLkzcWUqoKFUDid16AsJSTyAOfb4ZiiEYiWKTX/7vzcdvJp3A+L5z4rwMTx/d57bt2GQ4HpL+XZ9YXYvYtk0GgwFP0zTJDWJZFun1ehzT7BLHcdqu656NRqNWgH36kfpqHB9Ao9mAelOHRqsO9UMdNFWDWq0G1WqVo2mLfh1d18EwDFBV9YELCwVpIpdkyOVyM1lWaKkk03w+TxVFocVikZbLZZ6Vyj7NZDI0FArRSCSyyjsC4XDY5kJJkqaCIEA2m52LougxsPYEQUQE3i8ThV4qlfLS6TRPH3YQJJPJWy7EySk2bGCeSCSAwfqfEgVf6dfUz4UQi6k/OV8u2sSqbKOQ3XB98S8P2Cj0tuCbcOIPfLDJLZix/fiP7aXwDR+GX5/lX2H7/Fd+4sJYLHaBXEWj0Q5yuQUd3H+NeY66HeYMInvI7j8JxuPxwCf4KRf7m9a2FAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"compiled successfully\"\n        title=\"\"\n        src=\"/static/be1531bce6379ad2d464c28ee4f8b857/1e088/compiled-successfully.png\"\n        srcset=\"/static/be1531bce6379ad2d464c28ee4f8b857/65ed1/compiled-successfully.png 210w,\n/static/be1531bce6379ad2d464c28ee4f8b857/d10fb/compiled-successfully.png 420w,\n/static/be1531bce6379ad2d464c28ee4f8b857/1e088/compiled-successfully.png 840w,\n/static/be1531bce6379ad2d464c28ee4f8b857/705cc/compiled-successfully.png 1071w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  </p>\n<p>Create React App uses both webpack and Babel under the hood.\nThe console output is tuned to be minimal to help you focus on the problems:</p>\n<p>\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 57.61904761904761%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACQ0lEQVQoz6WS244SQRCGMZvoFYc5wXAcGIYZ5gAsJ4eEdUXDur6AL7CTGB/A1/Ap3AsTLzmFJWtYg8ZgfIcNl/oErkOXVY2YvTDRxEm+VPV09V9dVR35Mjt/9uHzu+cfV5/Ori7mwdXlZTCdzYLJZBLM5/NgsVhwOxqNONPpNJjhPsWMx+NguVyerdfrF6vVahih7/iw9nXY68JxtwOnfhf67RYcNpvQIlotaLfb3DZvr3/5+7Xf82l/yQVdz7uumCZoxeKNaVbCRqMelkqlUFXVMJVKhclkEm2S+7Isc1Q1zf8TiqJ8x38Qi8XmXLBeb2w6nQ74/v3to+Epa3X6zPEcZts2My2LQ77ruswwDFYul1mtVmPVapVZtG+aYaVSAbzABRfEDJtSsQiCKG71egOKpgvZbA6KpRJoaRVyigxxUYJYPA6CkEAEiKOfSCT2hKIoArITxFI2uq6DJEnbfD4Htl0FvAk0sT8OWiMpQ06WIIvCsqKAhOVRiRjPfYTKpvVOUNO0jes4lHlLGdvtDgwGAxg+GcLjk4fgNzx4etSHkwdHYOcyYGICs5AHLBeslAKGpoVqOk3nd4K6Xt54nkcBW+qRZVWZ3+sxnB7DQTHDNJllO0wvG0yWJKbI8g5F2Vt+w98l4w2vM5kM5PP5H4VCgU+XpkhTFQUREULsHbdY1p+4oRag4Hzfw2+8Hwg1d98fspT5b1AcPh86854LRqPRVzi1N8hr5Pw2+Lb+BTr3Fu1LlLtDmgfIPeTuf3KAQ438BP5CJkB++sZSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"failed to compile\"\n        title=\"\"\n        src=\"/static/71717aaf13cf34cfdb4e6b7e6742fb64/1e088/failed-to-compile.png\"\n        srcset=\"/static/71717aaf13cf34cfdb4e6b7e6742fb64/65ed1/failed-to-compile.png 210w,\n/static/71717aaf13cf34cfdb4e6b7e6742fb64/d10fb/failed-to-compile.png 420w,\n/static/71717aaf13cf34cfdb4e6b7e6742fb64/1e088/failed-to-compile.png 840w,\n/static/71717aaf13cf34cfdb4e6b7e6742fb64/705cc/failed-to-compile.png 1071w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  </p>\n<p>ESLint is also integrated so lint warnings are displayed right in the console:</p>\n<p>\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 57.61904761904761%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACSElEQVQoz6WS3Y7SQBTHMZtg+KZ8FkoF2lIWs1BYWgqlGDZr9Al8gW1ifABfw6dwL0y8AyEskcUYjMF44xtsuNQncB3meGaQTVy9MTb55ZzMdP7nf86M7/Pi/MmHL5dPP35any0WM2+1uvQWb2feePzGu5jNvPl87s0wjkYjZOxNJhNvOp1y2D/L5fJsvV4/W61WD33sGz5ofn30uAunpz0YDjsYbTg5scGyLOh0OjwyTNP8K2yv1+tBq9V6xwVLpfKVomqQTKavRTFHFEUh+XyeBINB4vf7SSAQIKFQ6IZwOHyb75FIBDBecEGssnHdPrhud+s4NnWcHh0MXGp3OhgHtFqt0lwuRyVJoliI59lsloqiSEWMmUyGpNNpSKVScy6oquqmWtXRcmVbr2vQaDR5K4ZhgOP0WSugaRrous5RVQVQGGRZhkKhADnsCsWww+ROsFhMbJRyEg+ltnIhAeVyAg/EObqOeU6AWCwOghCHeFxA4pBIJJjAHu4Q13aCUkHayPdkwJa2rKKEsOqlUgnXmJMCd7SH7WHLXJQ5Q3532G63N41GDVvUts1mlZrmIW21DqltN2itVqZts037fZfibeKeSe1ul1o4X5wdRRH6h6Bt21fFYgbu17I/KlqGHB2JRFPTRFUkcnxsEMNokHq9TnCWxLQsUtF1nuM8iSAITOyaCaLj3S2j/W+7Cuym0jzu8x2p2zO7affX7QK6ZevvuSC+oRexWOwV8hI5/xei0SiDnXuN8TnK3WGaB8hdxP+fHOAL8P0E1DkogjoOIn0AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"compiled with warnings\"\n        title=\"\"\n        src=\"/static/29d85c69eb1a92345d129bd6354cfdd7/1e088/compiled-with-warnings.png\"\n        srcset=\"/static/29d85c69eb1a92345d129bd6354cfdd7/65ed1/compiled-with-warnings.png 210w,\n/static/29d85c69eb1a92345d129bd6354cfdd7/d10fb/compiled-with-warnings.png 420w,\n/static/29d85c69eb1a92345d129bd6354cfdd7/1e088/compiled-with-warnings.png 840w,\n/static/29d85c69eb1a92345d129bd6354cfdd7/705cc/compiled-with-warnings.png 1071w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  </p>\n<p>We only picked a small subset of lint rules that often lead to bugs.</p>\n<h3 id=\"building-for-production\"><a href=\"#building-for-production\" aria-hidden class=\"anchor\"><svg 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>Building for Production </h3>\n<p>To build an optimized bundle, run <code class=\"gatsby-code-text\">npm run build</code>:</p>\n<p>\n  <span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 840px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 57.61904761904761%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACP0lEQVQoz6WS22oTURSGKwUl5/PhImSOmUlmJk5MQkzailpqbXrvC3RAfABfw6doBMHrRFKQSCAmoLRqKt6WXOoTWHf2cq2dTMH20oGf9e/N7G+vw96Yj18/m87fP//x/fTo9Ms379PZuff567n38WzuDUZj791g4PX7fW84HHqj0cibzWbedDoVce2PML6YTCZ7G/Q93b/3s3vYgu5BCx482of7Dw+gvdeFrSeHUK/XodFo/KNWq3VDnU6H/v0ggJKkXNiWA4ZhXuIBpusaMwyDybIsvKZpzDRNpuBaVVWWSadZMBhkkUiEhcNh0m/0gHEogOVyedFsNqFWqy3xFk5yHIcXCgWuKAovFotckmQURUmss9ksT6fTPJPJkBiuIZVKnQigoioLFODhpazIUCoZoOs6YGaAl9G+8KVSSci2LMjlcpBMJgGhBGLreHKVIfXGxQwJQId1PIgtQBlQqVTEBeWyKeC0R/9jpj70GrBSWTze3YWt7e2lpqlgIpQg1WoVsGzAkoBKIvmeMiRPoBtA7M+CSpFkGYEaR89VVeOWZfF8Ps+j0ShPJBI8Ho/zWCwmou9pn0omOGa7AiLg4q7rgm3bf2i6rusy23EYDoZhC8S0cRhi2vivWNO0V16h7C7XGa6m3G5rv3Z2THxLJXBdB1TsIQ2pKBVFP/EwIPBqMNRH2vO93wYEjgUwEAi+Qr1BHeN76gUDgR6+s14oFOoFrnl/TfI9tuQYy3+L8SXibhFzE3UHdfs/tYm93fgLT+otfVcFvAQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n    >\n      <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;\"\n        alt=\"npm run build\"\n        title=\"\"\n        src=\"/static/a2138f74bd9969980c35c50936c6217d/1e088/npm-run-build.png\"\n        srcset=\"/static/a2138f74bd9969980c35c50936c6217d/65ed1/npm-run-build.png 210w,\n/static/a2138f74bd9969980c35c50936c6217d/d10fb/npm-run-build.png 420w,\n/static/a2138f74bd9969980c35c50936c6217d/1e088/npm-run-build.png 840w,\n/static/a2138f74bd9969980c35c50936c6217d/705cc/npm-run-build.png 1071w\"\n        sizes=\"(max-width: 840px) 100vw, 840px\"\n      />\n    </span>\n  </span>\n  </p>\n<p>It is minified, correctly envified, and the assets include content hashes for caching.</p>\n<h3 id=\"one-dependency\"><a href=\"#one-dependency\" aria-hidden class=\"anchor\"><svg 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>One Dependency </h3>\n<p>Your <code class=\"gatsby-code-text\">package.json</code> contains only a single build dependency and a few scripts:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token punctuation\">{</span>\n  <span class=\"token string\">\"name\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"hello-world\"</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">\"dependencies\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">\"react\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"^15.2.1\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"react-dom\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"^15.2.1\"</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">\"devDependencies\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">\"react-scripts\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"0.1.0\"</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">\"scripts\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token string\">\"start\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"react-scripts start\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"build\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"react-scripts build\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token string\">\"eject\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"react-scripts eject\"</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>We take care of updating Babel, ESLint, and webpack to stable compatible versions so you can update a single dependency to get them all.</p>\n<h3 id=\"zero-configuration\"><a href=\"#zero-configuration\" aria-hidden class=\"anchor\"><svg 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>Zero Configuration </h3>\n<p>It is worth repeating: there are no configuration files or complicated folder structures. The tool only generates the files you need to build your app.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"gatsby-code-text\"><code class=\"gatsby-code-text\">hello-world/\n  README.md\n  index.html\n  favicon.ico\n  node_modules/\n  package.json\n  src/\n    App.css\n    App.js\n    index.css\n    index.js\n    logo.svg</code></pre></div>\n<p>All the build settings are preconfigured and can’t be changed. Some features, such as testing, are currently missing. This is an intentional limitation, and we recognize it might not work for everybody. And this brings us to the last point.</p>\n<h3 id=\"no-lock-in\"><a href=\"#no-lock-in\" aria-hidden class=\"anchor\"><svg 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>No Lock-In </h3>\n<p>We first saw this feature in <a href=\"https://github.com/eanplatter/enclave\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Enclave</a>, and we loved it. We talked to <a href=\"https://twitter.com/EanPlatter\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ean</a>, and he was excited to collaborate with us. He already sent a few pull requests!</p>\n<p>“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.</p>\n<p>We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.</p>\n<h2 id=\"try-it-out\"><a href=\"#try-it-out\" aria-hidden class=\"anchor\"><svg 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>Try It Out! </h2>\n<p>You can find <a href=\"https://github.com/facebookincubator/create-react-app\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><strong>Create React App</strong></a> with additional instructions on GitHub.</p>\n<p>This is an experiment, and only time will tell if it becomes a popular way of creating and building React apps, or fades into obscurity.</p>\n<p>We welcome you to participate in this experiment. Help us build the React tooling that more people can use. We are always <a href=\"https://github.com/facebookincubator/create-react-app/issues/11\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">open to feedback</a>.</p>\n<h2 id=\"the-backstory\"><a href=\"#the-backstory\" aria-hidden class=\"anchor\"><svg 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>The Backstory </h2>\n<p>React was one of the first libraries to embrace transpiling JavaScript. As a result, even though you can <a href=\"https://github.com/facebook/react/blob/3fd582643ef3d222a00a0c756292c15b88f9f83c/examples/basic-jsx/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">learn React without any tooling</a>, the React ecosystem has commonly become associated with an overwhelming explosion of tools.</p>\n<p>Eric Clemmons called this phenomenon the “<a href=\"https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JavaScript Fatigue</a>”:</p>\n<blockquote>\n<p>Ultimately, the problem is that by choosing React (and inherently JSX), you’ve unwittingly opted into a confusing nest of build tools, boilerplate, linters, &#x26; time-sinks to deal with before you ever get to create anything.</p>\n</blockquote>\n<p>It is tempting to write code in ES2015 and JSX. It is sensible to use a bundler to keep the codebase modular, and a linter to catch the common mistakes. It is nice to have a development server with fast rebuilds, and a command to produce optimized bundles for production.</p>\n<p>Combining these tools requires some experience with each of them. Even so, it is far too easy to get dragged into fighting small incompatibilities, unsatisfied peerDependencies, and illegible configuration files.</p>\n<p>Many of those tools are plugin platforms and don’t directly acknowledge each other’s existence. They leave it up to the users to wire them together. The tools mature and change independently, and tutorials quickly get out of date.</p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\"><p lang=\"en\" dir=\"ltr\">Marc was almost ready to implement his &quot;hello world&quot; React app <a href=\"https://t.co/ptdg4yteF1\">pic.twitter.com/ptdg4yteF1</a></p>&mdash; Thomas Fuchs (@thomasfuchs) <a href=\"https://twitter.com/thomasfuchs/status/708675139253174273\">March 12, 2016</a></blockquote>\n<p>This doesn’t mean those tools aren’t great. To many of us, they have become indispensable, and we very much appreciate the effort of their maintainers. They already have too much on their plates to worry about the state of the React ecosystem.</p>\n<p>Still, we knew it was frustrating to spend days setting up a project when all you wanted was to learn React. We wanted to fix this.</p>\n<h2 id=\"could-we-fix-this\"><a href=\"#could-we-fix-this\" aria-hidden class=\"anchor\"><svg 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>Could We Fix This? </h2>\n<p>We found ourselves in an unusual dilemma.</p>\n<p>So far, <a href=\"/docs/design-principles.html#dogfooding\">our strategy</a> has been to only release the code that we are using at Facebook. This helped us ensure that every project is battle-tested and has clearly defined scope and priorities.</p>\n<p>However, tooling at Facebook is different than at many smaller companies. Linting, transpilation, and packaging are all handled by powerful remote development servers, and product engineers don’t need to configure them. While we wish we could give a dedicated server to every user of React, even Facebook cannot scale that well!</p>\n<p>The React community is very important to us. We knew that we couldn’t fix the problem within the limits of our open source philosophy. This is why we decided to make an exception, and to ship something that we didn’t use ourselves, but that we thought would be useful to the community.</p>\n<h2 id=\"the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr\"><a href=\"#the-quest-for-a-react-abbr-titlecommand-line-interfacecliabbr\" aria-hidden class=\"anchor\"><svg 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>The Quest for a React <abbr title=\"Command Line Interface\">CLI</abbr> </h2>\n<p>Having just attended <a href=\"http://embercamp.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">EmberCamp</a> a week ago, I was excited about <a href=\"https://ember-cli.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ember CLI</a>. Ember users have a great “getting started” experience thanks to a curated set of tools united under a single command-line interface. I have heard similar feedback about <a href=\"https://github.com/elm-lang/elm-reactor\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Elm Reactor</a>.</p>\n<p>Providing a cohesive curated experience is valuable by itself, even if the user could in theory assemble those parts themselves. Kathy Sierra <a href=\"http://seriouspony.com/blog/2013/7/24/your-app-makes-me-fat\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">explains it best</a>:</p>\n<blockquote>\n<p>If your UX asks the user to make <em>choices</em>, for example, even if those choices are both clear and useful, the act of <em>deciding</em> is a cognitive drain. And not just <em>while</em> they’re deciding… even <em>after</em> we choose, an unconscious cognitive background thread is slowly consuming/leaking resources, “Was <em>that</em> the right choice?”</p>\n</blockquote>\n<p>I never tried to write a command-line tool for React apps, and neither has <a href=\"https://twitter.com/vjeux\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Christopher</a>. We were chatting on Messenger about this idea, and we decided to work together on it for a week as a hackathon project.</p>\n<p>We knew that such projects traditionally haven’t been very successful in the React ecosystem. Christopher told me that multiple “React CLI” projects have started and failed at Facebook. The community tools with similar goals also exist, but so far they have not yet gained enough traction.</p>\n<p>Still, we decided it was worth another shot. Christopher and I created a very rough proof of concept on the weekend, and <a href=\"https://twitter.com/lacker\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Kevin</a> soon joined us.</p>\n<p>We invited some of the community members to collaborate with us, and we have spent this week working on this tool. We hope that you’ll enjoy using it! <a href=\"https://github.com/facebookincubator/create-react-app/issues/11\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Let us know what you think.</a></p>\n<p>We would like to express our gratitude to <a href=\"https://twitter.com/mxstbr\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Max Stoiber</a>, <a href=\"https://twitter.com/jbscript\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Jonny Buchanan</a>, <a href=\"https://twitter.com/eanplatter\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ean Platter</a>, <a href=\"https://github.com/tylermcginnis\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Tyler McGinnis</a>, <a href=\"https://github.com/kentcdodds\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Kent C. Dodds</a>, and <a href=\"https://twitter.com/ericclemmons\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Eric Clemmons</a> for their early feedback, ideas, and contributions.</p>","excerpt":"Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration. Getting Started  Installation  First, install the global package: Node.js 4.x or higher is required. Creating an App  Now you can use it to create a new app: This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder:  Starting the Server  Run  to launch the…","frontmatter":{"title":"Create Apps with No Configuration","next":null,"prev":null,"author":[{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}}]},"fields":{"date":"July 22, 2016","path":"content/blog/2016-07-22-create-apps-with-no-configuration.md","slug":"/blog/2016/07/22/create-apps-with-no-configuration.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2016/07/22/create-apps-with-no-configuration.html"}},"staticQueryHashes":[]}