{"componentChunkName":"component---node-modules-gatsby-theme-chronoblog-src-templates-post-js","path":"/react-part-1/","result":{"data":{"mdx":{"id":"485928f8-c10e-551e-8fe6-51e7c67e27b3","excerpt":"Fala, meus bruxos e bruxas da tecnologia! Hoje vamos introduzir o React e alguns conceitos muito importantes sobre seu ecossistema. Essa é a…","frontmatter":{"title":"React - Hello, React!","date":"2020-04-010","description":"~background indian song playing~ e aí, bora conhecer um pouco do ecossistema do React?","tags":["post","quarentena","react","jsx"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAYDBAUH/8QAFgEBAQEAAAAAAAAAAAAAAAAABgQH/9oADAMBAAIQAxAAAAHiTEp6OpnYC6KYP//EAB0QAAICAQUAAAAAAAAAAAAAAAECAwQABRITITH/2gAIAQEAAQUCqwCV9VoR1ztxPZGPIo6//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAITIf/aAAgBAwEBPwFmwof/xAAaEQABBQEAAAAAAAAAAAAAAAAAAQIDBBEh/9oACAECAQE/AYYNcnRKrcP/xAAeEAACAQMFAAAAAAAAAAAAAAABAkEAEBESISMxUv/aAAgBAQAGPwIDSwHuBSMnJtjAiwruLf/EABwQAQADAAIDAAAAAAAAAAAAAAEAESExQYGR8P/aAAgBAQABPyFhOINu3lyWEWKEMZeHj4hfqofdGPXAzMgR/9oADAMBAAIAAwAAABDf/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQMBAT8QEQkrb//EABgRAQADAQAAAAAAAAAAAAAAAAEAESFR/9oACAECAQE/EGeY5Ki2f//EABsQAQEBAAMBAQAAAAAAAAAAAAERIQAxQVFx/9oACAEBAAE/EAYmgIIEF0bP1JXGyETCBCO7BfW9WnCiFw+cCCCIolHfeL0FfXQEM8wzjDnP/9k=","aspectRatio":1.9021739130434783,"src":"/static/d6480779c22ed6b7c7ef86ecfe1ed704/d8002/image.jpg","srcSet":"/static/d6480779c22ed6b7c7ef86ecfe1ed704/bc111/image.jpg 192w,\n/static/d6480779c22ed6b7c7ef86ecfe1ed704/809c8/image.jpg 384w,\n/static/d6480779c22ed6b7c7ef86ecfe1ed704/d8002/image.jpg 700w","srcWebp":"/static/d6480779c22ed6b7c7ef86ecfe1ed704/89afa/image.webp","srcSetWebp":"/static/d6480779c22ed6b7c7ef86ecfe1ed704/ae504/image.webp 192w,\n/static/d6480779c22ed6b7c7ef86ecfe1ed704/fef30/image.webp 384w,\n/static/d6480779c22ed6b7c7ef86ecfe1ed704/89afa/image.webp 700w","sizes":"(max-width: 700px) 100vw, 700px","presentationWidth":700,"presentationHeight":368},"resize":{"src":"/static/d6480779c22ed6b7c7ef86ecfe1ed704/0c065/image.jpg"}}}},"fields":{"slug":"/react-part-1/"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"React - Hello, React!\",\n  \"date\": \"2020-04-010\",\n  \"cover\": \"./img/image.jpg\",\n  \"description\": \"~background indian song playing~ e aí, bora conhecer um pouco do ecossistema do React?\",\n  \"tags\": [\"post\", \"quarentena\", \"react\", \"jsx\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Fala, meus bruxos e bruxas da tecnologia!\"), mdx(\"p\", null, \"Hoje vamos introduzir o React e alguns conceitos muito importantes sobre seu ecossistema. Essa \\xE9 a primeira parte de uma s\\xE9rie de 3 postagens.\"), mdx(\"p\", null, \"Nesse post, em especial, vamos falar um pouco sobre:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Requisitos pra conseguir utilizar a biblioteca;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Utilizar um \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"runner\"), \" do npm para iniciar um projeto com algumas configura\\xE7\\xF5es prontas;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Entender a estrutura e os arquivos que ele cria para n\\xF3s;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Fazer algumas altera\\xE7\\xF5es e ver o reflexo em tempo real na aplica\\xE7\\xE3o;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dar uma olhada na sintaxe \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"diferente\"), \" do Javascript, que torna as intera\\xE7\\xF5es no DOM mais din\\xE2micas e descomplicadas.\")), mdx(\"p\", null, \"Bora comigo, ent\\xE3o!!\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"requisitos\"\n  }, \"./requisitos\"), mdx(\"p\", null, \"Basicamente, tudo que voc\\xEA precisa \\xE9 de uma vers\\xE3o mais recente do \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://nodejs.org/pt-br/\"\n  }), \"Node\"), \" instalada, seu editor de texto favorito e um terminal bem configurado.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"J\\xE1 falei de terminal e editores de texto em outro post, clica \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pedro-mello.netlify.com/terminal-ide-editor/\"\n  }), \"AQUI\"), \" pra ver l\\xE1.\")), mdx(\"p\", null, \"Eu utilizo uma distro baseada no Ubuntu, ent\\xE3o segui o passo a passo de acordo com meu caso. Para outras distros, segue esse \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/nodesource/distributions/blob/master/README.md\"\n  }), \"link\"), \" que \\xE9 sucesso.\"), mdx(\"p\", null, \"Se voc\\xEA utiliza Windows ou macOS, acessa a \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://nodejs.org/pt-br/download/\"\n  }), \"central de downloads\"), \" do site oficial.\"), mdx(\"p\", null, \"O passo a passo abaixo serve para quem vai instalar via linha de comando e possui um sistema operacional Unix baseado no Ubuntu/Debian.\"), mdx(\"p\", null, \"Eu digitei os seguintes comandos no meu terminal:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -\\n\\nsudo apt install -y nodejs\\n\\nsudo apt install gcc g++ make\\n\")), mdx(\"p\", null, \"Aproveitei para instalar o Yarn, mas esse passo \\xE9 opcional:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -\\n\\necho \\\"deb https://dl.yarnpkg.com/debian/ stable main\\\" | sudo tee /etc/apt/sources.list.d/yarn.list\\n\\nsudo apt update && sudo apt install yarn\\n\")), mdx(\"p\", null, \"Se tudo tiver dado certo, voc\\xEA deve ser capaz de digitar os comandos para checar as vers\\xF5es instaladas:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"node -v\\nnpm -v\\nyarn -v\\n\")), mdx(\"p\", null, \"Seu resultado provavelmente vai ser algo parecido com o meu aqui:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"281px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"71.53024911032028%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAOABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUI/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAc6waE+AW//EABkQAAIDAQAAAAAAAAAAAAAAAAIEARARA//aAAgBAQABBQJvcpjsBzX/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAXEQADAQAAAAAAAAAAAAAAAAABAhAh/9oACAECAQE/AVwT/8QAGRAAAgMBAAAAAAAAAAAAAAAAARACAyGB/9oACAEBAAY/AjlryBHX/8QAGRAAAwEBAQAAAAAAAAAAAAAAAREhEDFB/9oACAEBAAE/ITWRDWwn7pEIHd//2gAMAwEAAgADAAAAECgP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EDiM/8QAGxAAAgMAAwAAAAAAAAAAAAAAASEQETFBcZH/2gAIAQEAAT8QHokmsSRNmPqRC1QR6jZFPn2f/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"versions\",\n    \"title\": \"versions\",\n    \"src\": \"/static/66112e38ea078b2d90a661184eaf9488/1c5d0/versions.jpg\",\n    \"srcSet\": [\"/static/66112e38ea078b2d90a661184eaf9488/68731/versions.jpg 205w\", \"/static/66112e38ea078b2d90a661184eaf9488/1c5d0/versions.jpg 281w\"],\n    \"sizes\": \"(max-width: 281px) 100vw, 281px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"De agora em diante, o tutorial volta a ser o mesmo para todos. Independente do seu sistema operacional, voc\\xEA deve ser capaz de verificar as vers\\xF5es do Node e Npm/Yarn pelo seu terminal para prosseguir.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"hello-react\"\n  }, \"./hello-react\"), mdx(\"p\", null, \"A forma mais f\\xE1cil de iniciar um projeto em React \\xE9 utilizando o \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"package runner\"), \" NPX, que vem junto do NPM (nas vers\\xF5es 5.2+)\"), mdx(\"p\", null, \"Vou criar um projeto chamado \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"hello-react\"), \", portanto o comando fica assim: \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"npx create-react-app hello-react\\n\")), mdx(\"p\", null, \"O terminal exibir\\xE1 um log como esse, de inicio:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"820px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"17.222884386174016%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAADABQDASIAAhEBAxEB/8QAFwABAAMAAAAAAAAAAAAAAAAAAAMFCP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAcyxBYA//8QAGhAAAQUBAAAAAAAAAAAAAAAAAQACAwQSIv/aAAgBAQABBQKTo5CrtGf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAACAwAAAAAAAAAAAAAAAAAAARAhcf/aAAgBAQAGPwK4en//xAAZEAACAwEAAAAAAAAAAAAAAAAAATFRYfD/2gAIAQEAAT8ha0ZES4kf/9oADAMBAAIAAwAAABDwD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABgQAQEBAQEAAAAAAAAAAAAAAAEAIUFh/9oACAEBAAE/EEXGDl44Bgp//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"create-react-app\",\n    \"title\": \"create-react-app\",\n    \"src\": \"/static/8464d91d1b9f2d688341512b60dd005d/18d18/create-react-app.jpg\",\n    \"srcSet\": [\"/static/8464d91d1b9f2d688341512b60dd005d/68731/create-react-app.jpg 205w\", \"/static/8464d91d1b9f2d688341512b60dd005d/a7bf1/create-react-app.jpg 410w\", \"/static/8464d91d1b9f2d688341512b60dd005d/18d18/create-react-app.jpg 820w\", \"/static/8464d91d1b9f2d688341512b60dd005d/04d0e/create-react-app.jpg 1230w\", \"/static/8464d91d1b9f2d688341512b60dd005d/7f2a6/create-react-app.jpg 1640w\", \"/static/8464d91d1b9f2d688341512b60dd005d/78d47/create-react-app.jpg 1678w\"],\n    \"sizes\": \"(max-width: 820px) 100vw, 820px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Ele utilizou o yarn, nesse caso, pois eu fiz a instala\\xE7\\xE3o e \\xE9 uma prefer\\xEAncia minha. Se voc\\xEA estiver usando o npm, n\\xE3o tem problema nenhum e vai dar tudo certo :)\"), mdx(\"p\", null, \"Todas as depend\\xEAncias do projeto ser\\xE3o instaladas automaticamente. Se n\\xE3o houver nenhum erro, o log final ser\\xE1 mais ou menos assim:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"704px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62.357954545454554%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAMABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQCAwUI/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAeaFL4IqaYv/xAAZEAADAQEBAAAAAAAAAAAAAAABAgMAEBP/2gAIAQEAAQUCowbE8pZlM3Yv5rv/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIhEJERMTL/2gAIAQEABj8CtI8x1imLmT2dH//EABsQAQADAAMBAAAAAAAAAAAAAAEAESExQXGB/9oACAEBAAE/IQLZ3ww8r4KLbxXkLlGQ8Wepfruf/9oADAMBAAIAAwAAABAHD//EABYRAAMAAAAAAAAAAAAAAAAAAAEQMf/aAAgBAwEBPxARf//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EAB0QAQADAAIDAQAAAAAAAAAAAAEAESFBYTGhweH/2gAIAQEAAT8QENgoqVfnm6m9zbPdtm1ToKIn8lM6z5HaAc/SKUCtVXZ//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"create-react-app\",\n    \"title\": \"create-react-app\",\n    \"src\": \"/static/84b730897da45defecb0e9b51fcd1757/f91f3/log-final.jpg\",\n    \"srcSet\": [\"/static/84b730897da45defecb0e9b51fcd1757/68731/log-final.jpg 205w\", \"/static/84b730897da45defecb0e9b51fcd1757/a7bf1/log-final.jpg 410w\", \"/static/84b730897da45defecb0e9b51fcd1757/f91f3/log-final.jpg 704w\"],\n    \"sizes\": \"(max-width: 704px) 100vw, 704px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"O comando \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create-react-app\"), \" vem com algumas pr\\xE9-configura\\xE7\\xF5es que s\\xE3o legais para quem ta come\\xE7ando, ou para quem n\\xE3o pretende personalizar muito as configura\\xE7\\xF5es do projeto. Se voc\\xEA quiser configurar TUDO na m\\xE3o e utilizar o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create-react-app\"), \" apenas para gerar os arquivos e estrutura iniciais, basta rodar o comando \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn eject\"), \". Por\\xE9m, tome cuidado! \\xC9 um procedimento irrevers\\xEDvel.\"), mdx(\"p\", null, \"Os outros comandos, em ordem, s\\xE3o:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn start\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Inicia o servidor de desenvolvimento.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn build\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Builda todos os arquivos para uma vers\\xE3o de produ\\xE7\\xE3o.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn test\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Executa o runner de teste (se estiver configurado).\")))), mdx(\"p\", null, \"Agora que j\\xE1 temos uma vis\\xE3o geral dos comandos que vem configurados por default, \\xE9 hora de entrar no diret\\xF3rio e abrir ele com seu editor de texto para verificar os arquivos que foram criados.\"), mdx(\"p\", null, \"Para isso, eu digitei no terminal:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"cd hello-react\\n\\ncode .\\n\")), mdx(\"p\", null, \"Utilizo o \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://code.visualstudio.com/\"\n  }), \"Visual Studio Code\"), \", e esse \\xFAltimo comando abre o diret\\xF3rio atual em uma nova janela do editor de texto. Se voc\\xEA utiliza outro editor ou uma IDE, verifique se ele possui algum atalho ou abra manualmente pela interface gr\\xE1fica do programa.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"estrutura-de-arquivos\"\n  }, \"./estrutura-de-arquivos\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"257px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"79.76653696498055%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAQABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUCAwQH/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAAB48nYYdprIjP/xAAZEAADAQEBAAAAAAAAAAAAAAABAgMABBL/2gAIAQEAAQUCF3PMW3o7msk1owZ9/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHBAAAQQDAQAAAAAAAAAAAAAAAQAQESECIkFR/9oACAEBAAY/Ahse1jcrxrRIEN//xAAbEAEAAgIDAAAAAAAAAAAAAAABABFRcSExQf/aAAgBAQABPyEhHaCFsL5iX1pHJKgwfb3qVIEZ/9oADAMBAAIAAwAAABBoH//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ECf/xAAXEQADAQAAAAAAAAAAAAAAAAAAASER/9oACAECAQE/EKoaz//EAB0QAQACAwADAQAAAAAAAAAAAAERIQAxQVFhwdH/2gAIAQEAAT8QItYsiQA0C7DvcfEppt9yR+Mk4ImyRpU+e8Ns9QAS+aDe9Ztn/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"estrutura-1\",\n    \"title\": \"estrutura-1\",\n    \"src\": \"/static/6ae72e62a92ba601e2e7d42517bbae6c/77eb1/estrutura-1.jpg\",\n    \"srcSet\": [\"/static/6ae72e62a92ba601e2e7d42517bbae6c/68731/estrutura-1.jpg 205w\", \"/static/6ae72e62a92ba601e2e7d42517bbae6c/77eb1/estrutura-1.jpg 257w\"],\n    \"sizes\": \"(max-width: 257px) 100vw, 257px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Essa \\xE9 a estrutura inicial do nosso projeto, ou seja, os arquivos e diret\\xF3rios que o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create-react-app\"), \" criou para n\\xF3s.\"), mdx(\"p\", null, \"Vamos entender, n\\xEDvel por n\\xEDvel, o que s\\xE3o cada uma dessas coisas.\"), mdx(\"hr\", null), mdx(\"h3\", {\n    \"id\": \"pasta-raiz\"\n  }, \"Pasta Raiz\"), mdx(\"p\", null, \"Dentro dessa pasta, temos os seguintes arquivos:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".gitignore\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Arquivo de texto que podemos listar os arquivos e diret\\xF3rios que ser\\xE3o ignorados pelo watcher do git (assunto para outro post espec\\xEDfico sobre Git)\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"package.json\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Arquivo que cont\\xE9m as informa\\xE7\\xF5es do projeto e as depend\\xEAncias dele. \\xC9 esse arquivo que o NPM e o YARN utilizam.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"README.md\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Arquivo formatado com \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"markdown\"), \", utilizado normalmente para descrever o projeto e suas depend\\xEAncias. Nos reposit\\xF3rios de Git, \\xE9 ele que faz a \\\"folha de rosto\\\" do projeto.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yarn.lock\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Arquivo de log relacionado ao \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"package.json\"))))), mdx(\"p\", null, \"\\xC9, tamb\\xE9m, na pasta raiz que temos acesso as demais pastas do nosso projeto.\"), mdx(\"hr\", null), mdx(\"h3\", {\n    \"id\": \"node_modules\"\n  }, \"node_modules\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"254px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"320.0787401574803%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABAABQDASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAQFAwIH/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgABBP/aAAwDAQACEAMQAAAB+T5jP6DYiZaUF0W5zB3RgvkVxBtCO/OV5Bv/xAAdEAACAgIDAQAAAAAAAAAAAAABAgA0ERQEEDEh/9oACAEBAAEFAl5raz8kZ2BBXPsWu3sFcvkQV2xmCszEdCu/sAOs31p//8QAFBEBAAAAAAAAAAAAAAAAAAAAMP/aAAgBAwEBPwEP/8QAGBEAAgMAAAAAAAAAAAAAAAAAAEEQESD/2gAIAQIBAT8BLFhR/8QAIhAAAAUDBAMAAAAAAAAAAAAAAAECEMEhMXIiM1FxMkGR/9oACAEBAAY/Ai0J49jYQn6NpILsVYuxcmTlAsycoFGTlA4ZOUOm/lANv//EACMQAAIBBAEDBQAAAAAAAAAAAAERABAhQVGxMWGRcaHB0fD/2gAIAQEAAT8hCuzJvKpA7hHhx9jP0mdu31oR2yoVl3fehMjD2oa9Zwlqsp7pwiPko1oO7ekLKhMXVrSE8fFDLKN0ekNjmn//2gAMAwEAAgADAAAAELAzw2g5A//EABkRAAMAAwAAAAAAAAAAAAAAAAABERAgMf/aAAgBAwEBPxBEFbou4//EABkRAAMBAQEAAAAAAAAAAAAAAAEQEQAxQf/aAAgBAgEBPxDgurGJ4in/xAAjEAEAAQMEAgIDAAAAAAAAAAABEQAhMRBBkcFRYYHRseHw/9oACAEBAAE/EGAIiCUAW2S80diKRhvu5X8f2qMs7Fl+em9psx+tJzqDRs38RRlNJuNk50JUS+Ht6rEV+Z0cnvlEnh7qdEoZVMvBpHKYIwPheqswsZkW/NKqrdb1Fdnu3fLejQFB4BH3oxCM5EZ9JHdKgIzjLT//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"node_modules\",\n    \"title\": \"node_modules\",\n    \"src\": \"/static/33c047c5137855546ceab6b0aafccce8/e52b0/node_modules.jpg\",\n    \"srcSet\": [\"/static/33c047c5137855546ceab6b0aafccce8/68731/node_modules.jpg 205w\", \"/static/33c047c5137855546ceab6b0aafccce8/e52b0/node_modules.jpg 254w\"],\n    \"sizes\": \"(max-width: 254px) 100vw, 254px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"\\xC9 a pasta que cont\\xE9m as depend\\xEAncias instaladas do nosso projeto. Pela imagem acima, conseguimos ter uma no\\xE7\\xE3o da quantidade de arquivos e do tamanho que ela deve ter.\"), mdx(\"p\", null, \"Justamente por isso que existe o arquivo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \", que cont\\xE9m as informa\\xE7\\xF5es de todas essas depend\\xEAncias para serem instaladas em diferentes computadores.\"), mdx(\"p\", null, \"J\\xE1 imaginou se a gente tivesse que passar o projeto para outra pessoa por pendrive por causa da limita\\xE7\\xE3o de espa\\xE7o em um servidor git?\"), mdx(\"p\", null, \"Quando executamos um \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm install\"), \" ou \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn install\"), \" no diret\\xF3rio que cont\\xE9m um arquivo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"package.json\"), \", o \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"runner\"), \" vai ler esse arquivo e instalar automaticamente o projeto com suas depend\\xEAncias. Gra\\xE7as a isso, \\xE9 poss\\xEDvel que v\\xE1rias pessoas trabalhem simultaneamente com o mesmo projeto, sem se preocuparem, pois basta subir uma altera\\xE7\\xE3o para o servidor git e todos que tem acesso ao projeto ter\\xE3o o c\\xF3digo e as depend\\xEAncias atualizadas.\"), mdx(\"p\", null, \"Um dia eu volto com uma postagem detalhando melhor o funcionamento desses gerenciadores, mas por hora essa explica\\xE7\\xE3o deve servir.\"), mdx(\"hr\", null), mdx(\"h3\", {\n    \"id\": \"public\"\n  }, \"public\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"250px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAMABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQFB//EABYBAQEBAAAAAAAAAAAAAAAAAAACA//aAAwDAQACEAMQAAAB4zFoQ7TID//EABsQAAEEAwAAAAAAAAAAAAAAAAQAAQIDERMz/9oACAEBAAEFAhneVZENdiDhmsrsv//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ASf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAcEAAABgMAAAAAAAAAAAAAAAAAARARITECUXH/2gAIAQEABj8CaykNRI/RkWoT/8QAHBABAAEEAwAAAAAAAAAAAAAAAREAECFBUWGx/9oACAEBAAE/IXrnSz1QqCQkLE20+Ck8RwxFv//aAAwDAQACAAMAAAAQqD//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QWk//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEh/9oACAECAQE/EKR2P//EABwQAQACAgMBAAAAAAAAAAAAAAERITFBABBRcf/aAAgBAQABPxBz5oRokinHIRYXqMb+PTxUj4EpTI+8ndGoikToPXr/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"public\",\n    \"title\": \"public\",\n    \"src\": \"/static/ed50c6fcf83980527ad83cfc7913ef1a/965da/public.jpg\",\n    \"srcSet\": [\"/static/ed50c6fcf83980527ad83cfc7913ef1a/68731/public.jpg 205w\", \"/static/ed50c6fcf83980527ad83cfc7913ef1a/965da/public.jpg 250w\"],\n    \"sizes\": \"(max-width: 250px) 100vw, 250px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Nesse diret\\xF3rio est\\xE3o os arquivos que ser\\xE3o lidos pelo navegador. O \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"favicon.ico\"), \", por exemplo, \\xE9 o \\xEDcone que fica na aba que o site est\\xE1 aberto.\"), mdx(\"p\", null, \"A estrutura do \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" tem a refer\\xEAncia que precisamos para nosso c\\xF3digo React funcionar: um \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"id\"), \" na tag do body que ser\\xE1 lido no React para implantar o que desenvolvermos.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"utf-8\\\" />\\n    <link rel=\\\"icon\\\" href=\\\"%PUBLIC_URL%/favicon.ico\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\" />\\n    <meta name=\\\"theme-color\\\" content=\\\"#000000\\\" />\\n    <meta\\n      name=\\\"description\\\"\\n      content=\\\"Web site created using create-react-app\\\"\\n    />\\n    <link rel=\\\"apple-touch-icon\\\" href=\\\"%PUBLIC_URL%/logo192.png\\\" />\\n    <!--\\n      manifest.json provides metadata used when your web app is installed on a\\n      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\\n    -->\\n    <link rel=\\\"manifest\\\" href=\\\"%PUBLIC_URL%/manifest.json\\\" />\\n    <!--\\n      Notice the use of %PUBLIC_URL% in the tags above.\\n      It will be replaced with the URL of the `public` folder during the build.\\n      Only files inside the `public` folder can be referenced from the HTML.\\n\\n      Unlike \\\"/favicon.ico\\\" or \\\"favicon.ico\\\", \\\"%PUBLIC_URL%/favicon.ico\\\" will\\n      work correctly both with client-side routing and a non-root public URL.\\n      Learn how to configure a non-root public URL by running `npm run build`.\\n    -->\\n    <title>React App</title>\\n  </head>\\n  <body>\\n    <noscript>You need to enable JavaScript to run this app.</noscript>\\n    <div id=\\\"root\\\"></div>\\n    <!--\\n      This HTML file is a template.\\n      If you open it directly in the browser, you will see an empty page.\\n\\n      You can add webfonts, meta tags, or analytics to this file.\\n      The build step will place the bundled scripts into the <body> tag.\\n\\n      To begin the development, run `npm start` or `yarn start`.\\n      To create a production bundle, use `npm run build` or `yarn build`.\\n    -->\\n  </body>\\n</html>\\n\")), mdx(\"p\", null, \"Voltaremos nessa parte mais tarde para explicar mais profundamente como o c\\xF3digo em React \\xE9 passado para nosso browser. Mas j\\xE1 pode adiantar um pouco lendo minha postagem sobre DOM, nesse link \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pedro-mello.netlify.com/dom-not-doom/\"\n  }), \"aqui\"), \".\"), mdx(\"hr\", null), mdx(\"h3\", {\n    \"id\": \"src\"\n  }, \"src\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"256px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"76.171875%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAUDB//EABYBAQEBAAAAAAAAAAAAAAAAAAMBAv/aAAwDAQACEAMQAAAB4zMsz0mIbP8A/8QAGhAAAgMBAQAAAAAAAAAAAAAAAQIDBDEREv/aAAgBAQABBQKvx4nHlkyohMNmIROmf//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQIBAT8BHZ//xAAaEAACAwEBAAAAAAAAAAAAAAABIQAQESKx/9oACAEBAAY/AiC2YR5SfRmPS8r/xAAeEAACAQMFAAAAAAAAAAAAAAABESEAEEExYXGBkf/aAAgBAQABPyEWuqATGKlwFHhYNiCKXQ3qVMgGg9sf/9oADAMBAAIAAwAAABDkH//EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPxC4V//EABgRAAIDAAAAAAAAAAAAAAAAAAABETFx/9oACAECAQE/EFS1io//xAAbEAEBAAMBAQEAAAAAAAAAAAABEQAhMXFRYf/aAAgBAQABPxAY6BZICIB9uOuqDtH4UHXM6+43VNYQd7w8cZiwwwRZEVzr7n//2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"src\",\n    \"title\": \"src\",\n    \"src\": \"/static/8808e7d9aff5f402f90c7ca90c35bf5f/8f7a7/src.jpg\",\n    \"srcSet\": [\"/static/8808e7d9aff5f402f90c7ca90c35bf5f/68731/src.jpg 205w\", \"/static/8808e7d9aff5f402f90c7ca90c35bf5f/8f7a7/src.jpg 256w\"],\n    \"sizes\": \"(max-width: 256px) 100vw, 256px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Nosso c\\xF3digo React mora aqui (pelo menos \\xE0 princ\\xEDpio, rs).\"), mdx(\"p\", null, \"A estrutura inicial do nosso c\\xF3digo \\xE9 bem b\\xE1sica, existem v\\xE1rias a\\xE7\\xF5es que podemos adotar, visando boas pr\\xE1ticas no nosso c\\xF3digo.\"), mdx(\"p\", null, \"Vamos focar em fazer algumas altera\\xE7\\xF5es em arquivos para ver como reflete no nosso servidor local de desenvolvimento.\"), mdx(\"p\", null, \"Antes de mais nada, roda um \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"yarn start\"), \" ou \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npm start\"), \" a\\xED no terminal, dentro do diret\\xF3rio do projeto. Se o browser n\\xE3o abrir automaticamente, verifica o log no terminal ou acessa \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:3000/\"\n  }), \"http://localhost:3000/\"), \" .\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"820px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.87365911799762%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQH/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQP/2gAMAwEAAhADEAAAAcPsjXkA/wD/xAAXEAEAAwAAAAAAAAAAAAAAAAADAAQg/9oACAEBAAEFApYIzz//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAQUAAAAAAAAAAAAAAAABAhEAEyAhMf/aAAgBAQAGPwKktuXkbkcOP//EABoQAAICAwAAAAAAAAAAAAAAAAEQABEhMWH/2gAIAQEAAT8hgrcHE4Mm1//aAAwDAQACAAMAAAAQWC//xAAWEQEBAQAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QRUdn/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxAcSo//xAAcEAEAAQQDAAAAAAAAAAAAAAABEQAQITFRceH/2gAIAQEAAT8QhcBK6KRYr72Dny6QlWMEurf/2Q==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"react\",\n    \"title\": \"react\",\n    \"src\": \"/static/843f8c864d30700f8a19c96fa2a502f1/18d18/react.jpg\",\n    \"srcSet\": [\"/static/843f8c864d30700f8a19c96fa2a502f1/68731/react.jpg 205w\", \"/static/843f8c864d30700f8a19c96fa2a502f1/a7bf1/react.jpg 410w\", \"/static/843f8c864d30700f8a19c96fa2a502f1/18d18/react.jpg 820w\", \"/static/843f8c864d30700f8a19c96fa2a502f1/04d0e/react.jpg 1230w\", \"/static/843f8c864d30700f8a19c96fa2a502f1/7f2a6/react.jpg 1640w\", \"/static/843f8c864d30700f8a19c96fa2a502f1/78d47/react.jpg 1678w\"],\n    \"sizes\": \"(max-width: 820px) 100vw, 820px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Tu deve estar vendo a logo do React girando e esses escritos abaixo. Certo? Vamos fazer algumas altera\\xE7\\xF5es e deixar a coisa mais legal.\"), mdx(\"p\", null, \"Primeiro vamos ver de qual arquivo ta vindo isso.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"App.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport logo from './logo.svg';\\nimport './App.css';\\n\\nfunction App() {\\n  return (\\n    <div className=\\\"App\\\">\\n      <header className=\\\"App-header\\\">\\n        <img src={logo} className=\\\"App-logo\\\" alt=\\\"logo\\\" />\\n        <p>\\n          Edit <code>src/App.js</code> and save to reload.\\n        </p>\\n        <a\\n          className=\\\"App-link\\\"\\n          href=\\\"https://reactjs.org\\\"\\n          target=\\\"_blank\\\"\\n          rel=\\\"noopener noreferrer\\\"\\n        >\\n          Learn React\\n        </a>\\n      </header>\\n    </div>\\n  );\\n}\\n\\nexport default App;\\n\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"COMO ASSIM TEM C\\xD3DIGO HTML E JAVASCRIPT JUNTO?\"), mdx(\"blockquote\", {\n    parentName: \"blockquote\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Calma, que no pr\\xF3ximo t\\xF3pico eu vou te explicar...\"))), mdx(\"p\", null, \"Vamos come\\xE7ar trocando a logo do React por algo mais legal, e trocar os escritos.\"), mdx(\"p\", null, \"Deixa o seu c\\xF3digo como o meu aqui:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport logo from './logo.svg';\\nimport './App.css';\\n\\nfunction App() {\\n  return (\\n    <div className=\\\"App\\\">\\n      <header className=\\\"App-header\\\">\\n        <img src={logo} className=\\\"App-logo\\\" alt=\\\"logo\\\" />\\n        <p>\\n          Arebaba!\\n        </p>\\n      </header>\\n    </div>\\n  );\\n}\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"Salva o arquivo e corre no navegador. Mudou, n\\xE9? Esse \\xE9 um recurso do \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"create-react-app\"), \" para atualizar o c\\xF3digo em tempo real, assim que alguma altera\\xE7\\xE3o \\xE9 efetuada e salva.\"), mdx(\"p\", null, \"Agora vamos trocar esse logo do React rodando na tela. Vai no arquivo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.css\"), \" e deixa ele como o meu:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), \".App {\\n  text-align: center;\\n}\\n\\n.App-logo {\\n  height: 40vmin;\\n  pointer-events: none;\\n}\\n\\n.App-header {\\n  background-color: #282c34;\\n  min-height: 100vh;\\n  display: flex;\\n  flex-direction: column;\\n  align-items: center;\\n  justify-content: center;\\n  font-size: calc(10px + 2vmin);\\n  color: white;\\n}\\n\\n.App-link {\\n  color: #61dafb;\\n}\\n\")), mdx(\"p\", null, \"Se tu voltar no navegador, a logo parou de girar.\"), mdx(\"p\", null, \"Agora vamos trocar a logo. Salva essa imagem aqui:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"480px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"100%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADNklEQVQ4y+WUXUiUaRTH/+d933lHx5l5x0xpaC9ykyi8sA+XIoxqCNpgW2mX8KaIEIqWhaWLootKiFbZr8xto41NwXQ3zTGTUJtxKMdyTBs/2GoodkvrIhTNupi1nPfj9JCDRVux7MLedODHeR+e8/zfc3HOH/gfgv4jb450J2jeHNDSbFDBAtDqRaA1C0Gf5IG+8oF2rAJtWgLkZAGpdkCWXnnsTgN5M4At60DNZZBiJ2EbPgll6EfIfccgNdeAKitB5Y3AylPA+p2gkq2gc/sgR8uhRL+Fsrcw2Z1dBXz5oO0b39HuP4zPPnpN4/eKXCURlheZAey2LuAbwQnDT7+xH83ciBajntqsOoSsWgTMKmo2q6VqswE/CL6In4J3RuhZGDlT3Vq2FaYK6xKNcLvCHJKYg2AOC4Iqc8DG3Cm+A4JGQb3AL+gg5kg6my0fFs4ITkTyXH+dwVwj7NhmtuKG6UdcPw6dq5CInfDqdSWr9frSFUasIdPgHhiJdkGTJ5Goy4onzmIgcaO4Qh8LLJ4RfHgedn2otMa6/90k//HlFN87aPForWU8CFoNv3RYxZ83cfHms3yuJsjW+DWLn8Ysno5RQa3gA55kz1h8VH0hWNb9p5K8YJPZeioY5nGOxof46K/3ePmmDl5aeJ4PV7dw50S/1TYVsn5+fJwPjR2YOvao/EnJyJ4j4WeXcsXj1OkWW5Hy8Z3lRb6B/Me+SL65rHe+nnlTMbwPZCMrmGs4v99gOMvWGu46r+G5CD21CTq6MYkehBGFD12Ygz14OYlamNY4roLVfrDtMtgeArvE2TUouAN2D6rsHlBZi4E1UeMZAM+6KXPGLWVi9m21au6wKyfzrj1nRtAVwnzPVenr9Cvy6fSA3OppkyJaO/rEjwa1TopqEfQIurQuateuw6/1osrdh1L3LRS4ryPNsViFsyvZofrp3wdaETvp9EJ2r4PsylakVKwQNWfePtGOpIYrmdUiSGmVkB1HISsr374xsxhwloMcJZBFvc3xE2TbBhBlCLyvmoMMknNFEgagiPVRCkApu0CeXrHnFwSB6ey5DaTsByRhFnC+223oDfb1by3ufRN8DtpPcScPWpPGAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"india-flag\",\n    \"title\": \"india-flag\",\n    \"src\": \"/static/31aedcc002795204ac005978c246ad49/bfa7f/india-flag.png\",\n    \"srcSet\": [\"/static/31aedcc002795204ac005978c246ad49/13e7c/india-flag.png 205w\", \"/static/31aedcc002795204ac005978c246ad49/34aa6/india-flag.png 410w\", \"/static/31aedcc002795204ac005978c246ad49/bfa7f/india-flag.png 480w\"],\n    \"sizes\": \"(max-width: 480px) 100vw, 480px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Salva ela como \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"logo.png\"), \" na pasta src:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"254px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"85.03937007874016%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAARABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQIH/8QAFgEBAQEAAAAAAAAAAAAAAAAAAgAD/9oADAMBAAIQAxAAAAHxfP1KOphcFaUIFSCP/8QAHhAAAQQBBQAAAAAAAAAAAAAAAgEDBBIAERMhMTL/2gAIAQEAAQUCjohtmNTtxFQtp9qha5G6les//8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFREBAQAAAAAAAAAAAAAAAAAAARD/2gAIAQIBAT8BGE//xAAfEAACAQIHAAAAAAAAAAAAAAAAASEQMQISQXGBscH/2gAIAQEABj8CaczqNdUcxm8HYscmHan/xAAcEAEAAwACAwAAAAAAAAAAAAABABEhEDFRccH/2gAIAQEAAT8h0eWxZVeJtA1AAFdSxCLyqvaRnLRcB2ArpO/2+c5//9oADAMBAAIAAwAAABCAwIP/xAAXEQADAQAAAAAAAAAAAAAAAAABEBEx/9oACAEDAQE/EJDiK//EABkRAAMAAwAAAAAAAAAAAAAAAAABERAxcf/aAAgBAgEBPxClSKzZ9x//xAAgEAEAAgEDBQEAAAAAAAAAAAABABEhMVFhEEGBkfDB/9oACAEBAAE/EADocsihxTW83fiZrSzRA4pzLZbFKOuV/YuilCjvPWJZ9t0VukABR3Vn19o+Dnp//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"logo-india\",\n    \"title\": \"logo-india\",\n    \"src\": \"/static/e7b5b4197be12f58c2be06ecc48f3ed5/e52b0/logo-india.jpg\",\n    \"srcSet\": [\"/static/e7b5b4197be12f58c2be06ecc48f3ed5/68731/logo-india.jpg 205w\", \"/static/e7b5b4197be12f58c2be06ecc48f3ed5/e52b0/logo-india.jpg 254w\"],\n    \"sizes\": \"(max-width: 254px) 100vw, 254px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Agora volta no seu arquivo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"App.js\"), \", remove a importa\\xE7\\xE3o da logo antiga e coloca a nova. Seu c\\xF3digo deve ficar igual o meu:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from 'react';\\nimport logo from './logo.png';\\nimport './App.css';\\n\\nfunction App() {\\n  return (\\n    <div className=\\\"App\\\">\\n      <header className=\\\"App-header\\\">\\n        <img src={logo} className=\\\"App-logo\\\" alt=\\\"logo\\\" />\\n        <p>\\n          Arebaba!\\n        </p>\\n      </header>\\n    </div>\\n  );\\n}\\n\\nexport default App;\\n\")), mdx(\"p\", null, \"O resultado final \\xE9 algo parecido com isso aqui:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"820px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53.965414430530714%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAALABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQH/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwAB/9oADAMBAAIQAxAAAAHD7YimG3//xAAYEAACAwAAAAAAAAAAAAAAAAAAAwIEIP/aAAgBAQABBQIsrRDP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFhEBAQEAAAAAAAAAAAAAAAAAERAh/9oACAECAQE/ATWf/8QAHBAAAQMFAAAAAAAAAAAAAAAAAgMREgABEyAi/9oACAEBAAY/AqDCqar26kEW1//EABsQAAAHAQAAAAAAAAAAAAAAAAABESAhMUFh/9oACAEBAAE/IRosLdyTVv8A/9oADAMBAAIAAwAAABAAL//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABoRAAICAwAAAAAAAAAAAAAAAAERECFBcZH/2gAIAQIBAT8QJEGIWKvdPij/xAAaEAADAQADAAAAAAAAAAAAAAABESExACBR/9oACAEBAAE/EDhVPEIiwQghcG2YPZ0//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"arebaba\",\n    \"title\": \"arebaba\",\n    \"src\": \"/static/a857cb00bf956f4e54aed7594b55fd98/18d18/arebaba.jpg\",\n    \"srcSet\": [\"/static/a857cb00bf956f4e54aed7594b55fd98/68731/arebaba.jpg 205w\", \"/static/a857cb00bf956f4e54aed7594b55fd98/a7bf1/arebaba.jpg 410w\", \"/static/a857cb00bf956f4e54aed7594b55fd98/18d18/arebaba.jpg 820w\", \"/static/a857cb00bf956f4e54aed7594b55fd98/04d0e/arebaba.jpg 1230w\", \"/static/a857cb00bf956f4e54aed7594b55fd98/7f2a6/arebaba.jpg 1640w\", \"/static/a857cb00bf956f4e54aed7594b55fd98/fc8b7/arebaba.jpg 1677w\"],\n    \"sizes\": \"(max-width: 820px) 100vw, 820px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \"), mdx(\"p\", null, \"Pode parecer bobagem isso que fizemos, mas vamos recapitular o processo todo:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Criamos um projeto com o \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"runner\"), \" \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"NPX\"), \", atrav\\xE9s do comando \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"npx create-react-app nome-da-aplica\\xE7\\xE3o\"), \";\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Conhecemos a estrutura de arquivos que o \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"create-react-app\"), \" cria;\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Identificamos cada pasta e seu significado;\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Fizemos algumas altera\\xE7\\xF5es e presenciamos o reflexo autom\\xE1tico na nossa aplica\\xE7\\xE3o.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Vimos um c\\xF3digo estranho, com HTML e Javascript junto\"))), mdx(\"p\", null, \"E \\xE9 sobre esse \\xFAltimo ponto que vamos falar agora, pra encerrar o conte\\xFAdo de hoje.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"jsx\"\n  }, \"./jsx\"), mdx(\"p\", null, \"Essa estranha sintaxe, misturando Javascript e HTML no mesmo arquivo \\xE9 chamada de JSX.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Na verdade, o HTML nos arquivos Javascript n\\xE3o \\xE9 exatamente HTML...\"), mdx(\"blockquote\", {\n    parentName: \"blockquote\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"WTF COMO ASSIM??\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"MINDBLOWING!!!\")), mdx(\"img\", {\n    \"src\": \"https://media.giphy.com/media/Um3ljJl8jrnHy/giphy.gif\",\n    \"alt\": \"mindblowing\"\n  }), mdx(\"p\", null, \"Essa \\xE9 uma extens\\xE3o de sintaxe do Javascript, que permite escrever elementos do React atrav\\xE9s do DOM.\"), mdx(\"p\", null, \"O JSX caiu como uma luva para quem queria deixar a renderiza\\xE7\\xE3o mais din\\xE2mica e centralizada em um arquivo s\\xF3. No mesmo arquivo Javascript \\xE9 poss\\xEDvel ter a l\\xF3gica (Javascript), os elementos UI (HTML) e a estiliza\\xE7\\xE3o (CSS). Talvez pare\\xE7a complicado nesse primeiro momento\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Lembra do DOM? Artigo nesse link \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pedro-mello.netlify.com/dom-not-doom/\"\n  }), \"aqui\"), \".\")), mdx(\"p\", null, \"Se voc\\xEA ainda est\\xE1 confuso sobre o JSX ou n\\xE3o se sente seguro sobre o funcionamento dele, vou deixar essa palestra (em ingl\\xEAs) que a pr\\xF3pria doc do React recomenda.\"), mdx(\"a\", {\n    \"href\": \"http://www.youtube.com/watch?v=x7cQ3mrcKaY\"\n  }, mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"src\": \"http://img.youtube.com/vi/x7cQ3mrcKaY/0.jpg\",\n    \"alt\": \"React: Rethinking best practices\"\n  }))), mdx(\"hr\", null), mdx(\"p\", null, \"Na pr\\xF3xima postagem dessa s\\xE9rie, vou explicar melhor como funciona a renderiza\\xE7\\xE3o do React (Virtual DOM) e aprofundar um pouco mais nos conceitos que j\\xE1 vimos at\\xE9 agora.\"), mdx(\"p\", null, \"Espero que tenham gostado e espero que tenham entendido pelo menos um pouco do que eu quis passar aqui.\"), mdx(\"p\", null, \"Qualquer d\\xFAvida ou coment\\xE1rios adicionais, me chamem em uma das minhas redes.\"), mdx(\"p\", null, \"Um grande abra\\xE7o para todos, devs e !devs que acompanham e sempre tem um carinho enorme comigo. Nos vemos daqui uns dias.\"), mdx(\"p\", null, \"Lembrando: \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"#FiqueEmCasa\"), \" e \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"#EstudeComigo\"), \".\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\\o/\")), mdx(\"p\", null, \"Doc oficial do React (traduzida pela comunidade): \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pt-br.reactjs.org/docs/getting-started.html\"\n  }), \"https://pt-br.reactjs.org/docs/getting-started.html\")), mdx(\"p\", null, \"Doc do W3Schools: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.w3schools.com/react/default.asp\"\n  }), \"https://www.w3schools.com/react/default.asp\")), mdx(\"p\", null, \"Reposit\\xF3rio oficial do React, mantido pelo Facebook: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/facebook/react\"\n  }), \"https://github.com/facebook/react\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"485928f8-c10e-551e-8fe6-51e7c67e27b3"}}}