{"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> é a nova forma oficialmente suportada para criar aplicativos React de página única. Ele oferece um ambiente moderno sem configurações.</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>Começando </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>Instalação </h3>\n<p>Primeiro, instale o pacote global:</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 ou superior é nescessário.</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>Criando um App </h3>\n<p>Agora você pode usá-lo para criar um novo 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>Isso levará algum tempo, já que o npm instala as dependências transitivas, mas, depois de concluído, você verá uma lista de comandos que podem ser executados na pasta criada:</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=\"pasta criada\"\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>Iniciando o Servidor </h3>\n<p>Execute o <code class=\"gatsby-code-text\">npm start</code> para iniciar o servidor de desenvolvimento. O navegador será aberto automaticamente com a URL do aplicativo criado.</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=\"compilado com sucesso\"\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 usa tanto o webpack quanto o Babel por de baixo dos panos.\nA saída do console é ajustada para ser mínima para ajudá-lo a se concentrar nos problemas:</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=\"não conseguiu compilar\"\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>O ESLint também é integrado, de modo que os avisos de lint são exibidos diretamente no 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=\"compilado com avisos\"\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>Nós só escolhemos um pequeno subconjunto de regras de lint que muitas vezes levam a 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>Contruindo para Produção </h3>\n<p>Para construir um pacote otimizado, execute <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>Ele é minificado, montado corretamente e os recursos incluem hashes de conteúdo para armazenamento em cache.</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>Uma Dependência </h3>\n<p>Seu <code class=\"gatsby-code-text\">package.json</code> contém apenas uma única dependência de compilação e alguns 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>Nós cuidamos de atualizar o Babel, o ESLint e o Webpack para versões compatíveis estáveis, para que você possa atualizar uma única dependência para obter todas elas.</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>Configuração Zero </h3>\n<p>Vale a pena repetir: não há arquivos de configuração ou estruturas de pastas complicadas. A ferramenta gera apenas os arquivos necessários para você criar seu aplicativo.</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>Todas as configurações de criação são pré-configuradas e não podem ser alteradas. Alguns recursos, como testes, estão ausentes no momento. Esta é uma limitação intencional e reconhecemos que pode não funcionar para todos. E isso nos leva ao último ponto.</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>Sem Bloqueio </h3>\n<p>Nós vimos esse recurso pela primeira vez em <a href=\"https://github.com/eanplatter/enclave\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Enclave</a>, e nós adoramos. Nós conversamos com <a href=\"https://twitter.com/EanPlatter\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ean</a>, e ele estava animado para colaborar conosco. Ele já enviou alguns pull requests!</p>\n<p>“Ejetar” permite que você deixe o conforto da configuração do Create React App a qualquer momento. Você executa um único comando e todas as dependências, configurações e scripts de compilação são movidos diretamente para o seu projeto. Neste ponto, você pode personalizar tudo o que quiser, mas efetivamente você está bifurcando nossa configuração e seguindo seu próprio caminho. Se você tem experiência com ferramentas de construção e prefere ajustar tudo ao seu gosto, isso permite usar o Create React App como um gerador geral.</p>\n<p>Esperamos que, nos estágios iniciais, muitas pessoas “ejetem” por um motivo ou outro, mas à medida que aprendermos com elas, tornaremos a configuração padrão cada vez mais atraente, sem fornecer configuração.</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>Experimente! </h2>\n<p>Você pode encontrar o <a href=\"https://github.com/facebookincubator/create-react-app\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><strong>Create React App</strong></a> com instruções adicionais sobre o GitHub.</p>\n<p>Este é um experimento, e só o tempo dirá se ele irá se torna uma maneira popular de criar aplicativos React ou desaparecer na obscuridade.</p>\n<p>Convidamos você a participar desta experiência. Ajude-nos a construir o conjunto de ferramentas React que mais pessoas podem usar. Estamos sempre <a href=\"https://github.com/facebookincubator/create-react-app/issues/11\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">abertos ao 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>A História por Trás </h2>\n<p>O React foi uma das primeiras bibliotecas a adotar o JavaScript transpilado. Como resultado, mesmo que você possa <a href=\"https://github.com/facebook/react/blob/3fd582643ef3d222a00a0c756292c15b88f9f83c/examples/basic-jsx/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">aprender React sem qualquer ferramenta</a>, o ecossistema React se tornou comumente associado com uma esmagadora explosão de ferramentas.</p>\n<p>Eric Clemmons chamou esse fenômeno de ”<a href=\"https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">JavaScript fadiga</a>“:</p>\n<blockquote>\n<p>Em última análise, o problema é que, escolhendo React (e inerentemente JSX), você inadvertidamente optou por um ninho confuso de ferramentas de construção, boilerplate, linters e time-pinks para lidar antes mesmo de criar algo.</p>\n</blockquote>\n<p>É tentador escrever código no ES2015 e no JSX. É sensato usar um bundler para manter a base de código modular e um linter para capturar os erros comuns. É bom ter um servidor de desenvolvimento com reconstruções rápidas e um comando para produzir pacotes otimizados para produção.</p>\n<p>Combinar essas ferramentas requer alguma experiência com cada uma delas. Mesmo assim, é muito fácil ser arrastado para combater pequenas incompatibilidades, peerDependencies não-satisfeitas e arquivos de configuração ilegíveis.</p>\n<p>Muitas dessas ferramentas são plataformas de plugins e não reconhecem diretamente a existência umas das outras. Eles deixam para os usuários conectá-los juntos. As ferramentas amadurecem e mudam de forma independente, e os tutoriais ficam rapidamente desatualizados.</p>\n<blockquote class=\"twitter-tweet\" data-lang=\"pt\"><p lang=\"pt\" dir=\"ltr\"> Marc estava quase pronto para implementar o seu &quot;hello world&quot; Aplicativo React <a href=\"https://t.co/ptdg4yteF1\">pic.twitter.com/ptdg4yteF1</a></p> &mdash; Thomas Fuchs (@thomasfuchs) <a href=\"https://twitter.com/thomasfuchs/status/708675139253174273\"> 12 de março de 2016 </a></blockquote>\n<p>Isso não significa que essas ferramentas não sejam ótimas. Para muitos de nós, eles se tornaram indispensáveis, e nós apreciamos muito o esforço de seus mantenedores. Eles já têm muito em seus pratos para se preocupar com o estado do ecossistema React.</p>\n<p>Mesmo assim, sabíamos que era frustrante passar dias montando um projeto quando tudo que você queria era aprender React. Nós queríamos consertar isso.</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>Poderíamos Corrigir Isso? </h2>\n<p>Nós nos encontramos em um dilema incomum.</p>\n<p>Até agora, <a href=\"/docs/design-principles.html#dogfooding\">nossa estratégia</a> foi apenas liberar o código que estamos usando no Facebook. Isso nos ajudou a garantir que todos os projetos sejam testados em batalha e tenham um escopo e prioridades claramente definidos.</p>\n<p>No entanto, ferramentas no Facebook é diferente do que em muitas empresas menores. O linting, o transpilation e o empacotamento são todos gerenciados por poderosos servidores remotos de desenvolvimento, e os engenheiros de produtos não precisam configurá-los. Apesar de desejarmos dar um servidor dedicado a todos os usuários do React, mesmo o Facebook não pode escalar tão bem!</p>\n<p>A comunidade React é muito importante para nós. Sabíamos que não poderíamos resolver o problema dentro dos limites da nossa filosofia de código aberto. É por isso que decidimos abrir uma exceção e enviar algo que não usamos, mas achamos que seria útil para a comunidade.</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>A Busca por um React <abbr title=\"Interface de Linha de Comando\">CLI</abbr> </h2>\n<p>Tendo acabado de assistir a <a href=\"http://embercamp.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">EmberCamp</a> há uma semana, fiquei animado com <a href=\"https://ember-cli.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Ember CLI</a>. Os usuários da Ember têm uma ótima experiência de “introdução” graças a um conjunto de ferramentas unidas sob uma única interface de linha de comando. Eu ouvi comentários semelhantes sobre <a href=\"https://github.com/elm-lang/elm-reactor\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Elm Reactor</a>.</p>\n<p>Proporcionar uma experiência coesa e curada é valioso por si só, mesmo que o usuário possa, em teoria, montar essas partes. Kathy Sierra <a href=\"http://seriouspony.com/blog/2013/7/24/your-app-makes-me-fat\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">explica melhor</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>Eu nunca tentei escrever uma ferramenta de linha de comando para aplicativos React, e nem <a href=\"https://twitter.com/vjeux\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Christopher</a>. Estávamos conversando sobre o Messenger sobre essa ideia e decidimos trabalhar juntos por uma semana como um projeto de hackathon.</p>\n<p>Sabíamos que tais projetos tradicionalmente não tiveram muito sucesso no ecossistema React. Christopher me disse que vários projetos “React CLI” começaram e falharam no Facebook. As ferramentas da comunidade com objetivos similares também existem, mas até agora elas ainda não ganharam tração suficiente.</p>\n<p>Ainda assim, decidimos que valeria outra chance. Christopher e eu criamos uma prova de conceito muito difícil no fim de semana, e <a href=\"https://twitter.com/lacker\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Kevin</a> logo se juntou a nós.</p>\n<p>Convidamos alguns membros da comunidade para colaborar conosco e passamos essa semana trabalhando nessa ferramenta. Esperamos que você goste de usá-lo! <a href=\"https://github.com/facebookincubator/create-react-app/issues/11\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Deixe-nos saber o que você pensa.</a></p>\n<p>Gostaríamos de expressar nossa gratidão a <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> e <a href=\"https://twitter.com/ericclemmons\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Eric Clemmons</a> pelo feedback, ideias e contribuições iniciais.</p>","excerpt":"Create React App é a nova forma oficialmente suportada para criar aplicativos React de página única. Ele oferece um ambiente moderno sem configurações. Começando  Instalação  Primeiro, instale o pacote global: Node.js 4.x ou superior é nescessário. Criando um App  Agora você pode usá-lo para criar um novo app: Isso levará algum tempo, já que o npm instala as dependências transitivas, mas, depois de concluído, você verá uma lista de comandos que podem ser executados na pasta criada:  Iniciando o…","frontmatter":{"title":"Crie Apps Sem Configuração","next":null,"prev":null,"author":[{"frontmatter":{"name":"Dan Abramov","url":"https://twitter.com/dan_abramov"}}]},"fields":{"date":"22 de julho de 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":"React v17.0"},"fields":{"slug":"/blog/2020/10/20/react-v17.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Candidato à lançamento: Sem novas funcionalidades"},"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":"Construindo Ótimas Experiências de Usuário com Modo Concorrente e Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparando para o Futuro com as Prereleases React"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Apresentando o novo React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 e a atualização do Roadmap"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"O React já esta traduzido? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: O React com Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}}]}},"pageContext":{"slug":"/blog/2016/07/22/create-apps-with-no-configuration.html"}},"staticQueryHashes":[]}