{"componentChunkName":"component---node-modules-gatsby-theme-chronoblog-src-templates-post-js","path":"/react-part-2/","result":{"data":{"mdx":{"id":"49541b22-a56a-563f-8c2b-51ab9193049c","excerpt":"~ passadinha de álcool em gel na mão ~ Fala aí, internet! Tudo bem? Hoje trago a segunda parte dessa série de postagens introdutórias sobre…","frontmatter":{"title":"React - Virtual DOM, componentização e props!","date":"2020-06-008","description":"Parte 2 da série de React! Falaremos sobre Virtual DOM, Componentização e Props no React. Simbora! (compra mais um pente de memória RAM antes)","tags":["post","quarentena","react","virtualdom","props"],"cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCBgf/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAP/2gAMAwEAAhADEAAAAaeybSdlAvFn/8QAGhAAAgMBAQAAAAAAAAAAAAAAAwQBAgUGI//aAAgBAQABBQKNJqwmniwN/ddC2ogubIoqGY6nw1f/xAAYEQACAwAAAAAAAAAAAAAAAAABAhARIf/aAAgBAwEBPwF9AqP/xAAXEQADAQAAAAAAAAAAAAAAAAAAAREC/9oACAECAQE/AcOadIf/xAAfEAACAgICAwEAAAAAAAAAAAABAgADERIhYQQTQlH/2gAIAQEABj8Ce2zyLAoOq6vqBKmFrAsOVliiywjP7FV6EYb4wV6gX1JgKPnqFa8Iuo4Wf//EABwQAQEBAQACAwAAAAAAAAAAAAERACExQVGBsf/aAAgBAQABPyGKWp9th31uVUMvPG6umEnBa5lJOv3Nh2AR8s4yqhC13//aAAwDAQACAAMAAAAQ/N//xAAYEQACAwAAAAAAAAAAAAAAAAAAETFhwf/aAAgBAwEBPxBIfR0f/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAERITFBof/aAAgBAgEBPxByt8QRe+H/xAAcEAEAAgIDAQAAAAAAAAAAAAABESEAMVFhgeH/2gAIAQEAAT8QFRMI+mqRZEXRG3EKqAiYQMl/MCJgvEIVXFnmF45UA3Et2lvFL/Nwszro9JwmcNKykYDdF9Z//9k=","aspectRatio":1.7772151898734176,"src":"/static/c0aafc96f5e52e850f3cc7b42c10d392/e90d3/image.jpg","srcSet":"/static/c0aafc96f5e52e850f3cc7b42c10d392/bc111/image.jpg 192w,\n/static/c0aafc96f5e52e850f3cc7b42c10d392/809c8/image.jpg 384w,\n/static/c0aafc96f5e52e850f3cc7b42c10d392/e90d3/image.jpg 702w","srcWebp":"/static/c0aafc96f5e52e850f3cc7b42c10d392/bb2d1/image.webp","srcSetWebp":"/static/c0aafc96f5e52e850f3cc7b42c10d392/ae504/image.webp 192w,\n/static/c0aafc96f5e52e850f3cc7b42c10d392/fef30/image.webp 384w,\n/static/c0aafc96f5e52e850f3cc7b42c10d392/bb2d1/image.webp 702w","sizes":"(max-width: 702px) 100vw, 702px","presentationWidth":702,"presentationHeight":395},"resize":{"src":"/static/c0aafc96f5e52e850f3cc7b42c10d392/0c065/image.jpg"}}}},"fields":{"slug":"/react-part-2/"},"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 - Virtual DOM, componentização e props!\",\n  \"date\": \"2020-06-008\",\n  \"cover\": \"./img/image.jpg\",\n  \"description\": \"Parte 2 da série de React! Falaremos sobre Virtual DOM, Componentização e Props no React. Simbora! (compra mais um pente de memória RAM antes)\",\n  \"tags\": [\"post\", \"quarentena\", \"react\", \"virtualdom\", \"props\"]\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, \"~ passadinha de \\xE1lcool em gel na m\\xE3o ~\"), mdx(\"p\", null, \"Fala a\\xED, internet! Tudo bem? Hoje trago a segunda parte dessa s\\xE9rie de postagens introdut\\xF3rias sobre o React, e as coisinhas que voc\\xEA precisa saber antes de entrar de cabe\\xE7a no desenvolvimento de projetos mais complexos com ele.\"), mdx(\"p\", null, \"Na primeira postagem, n\\xF3s falamos um pouco sobre os conceitos de JSX e fizemos algumas altera\\xE7\\xF5es no c\\xF3digo. Al\\xE9m disso, olhamos cada diret\\xF3rio que o comando \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"create-react-app\"), \" cria para n\\xF3s e a estrutura da configura\\xE7\\xE3o do React.\"), mdx(\"p\", null, \"Nossa miss\\xE3o hoje \\xE9 entender o Virtual DOM, o processo de componentiza\\xE7\\xE3o e o conceito de \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"props\"), \".\"), mdx(\"p\", null, \"Tenho uns slides que utilizei para uma pequena talk no Ita\\xFA em 2019.\\nS\\xE3o slides de consulta para n\\xE3o usar papel com colinha, ent\\xE3o n\\xE3o possuem alto n\\xEDvel de explica\\xE7\\xE3o ou detalhes, mas o link para acessar eles t\\xE1 \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://slides.com/pedromello/horizontata-react\"\n  }), \"aqui\"), \".\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"virtual-dom\"\n  }, \"./virtual-dom\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.75000000000001%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMECP/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAHTTHNmpikZ/8QAGhABAAEFAAAAAAAAAAAAAAAAAgABAxASE//aAAgBAQABBQJJbV6S00iQSsf/xAAXEQEAAwAAAAAAAAAAAAAAAAABAhAR/9oACAEDAQE/AZGNf//EABcRAAMBAAAAAAAAAAAAAAAAAAECECL/2gAIAQIBAT8BXQn/xAAeEAEAAAYDAQAAAAAAAAAAAAABAAIREiExEFFhcf/aAAgBAQAGPwKtudfCG6jL51GSJkAXfvP/xAAcEAACAgIDAAAAAAAAAAAAAAABEQAhUXEQMWH/2gAIAQEAAT8hwZKIuG4JrYw9MY0l9GoQSLIC9uf/2gAMAwEAAgADAAAAED/P/8QAGREAAwADAAAAAAAAAAAAAAAAAAEhETHw/9oACAEDAQE/EEYOqHuH/8QAGBEBAQEBAQAAAAAAAAAAAAAAAREAUaH/2gAIAQIBAT8QTS98ZgQi7//EABwQAQACAwADAAAAAAAAAAAAAAERIQAxQRBRYf/aAAgBAQABPxCZMm9IWtdAY3fzCglisgALluxkjQReT6ihlR2LCadmEXYPECBRtj35/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\": \"virtual-dom-representation\",\n    \"title\": \"virtual-dom-representation\",\n    \"src\": \"/static/398fae9b50b537d7af3889588f300366/224d9/virtual-dom.jpg\",\n    \"srcSet\": [\"/static/398fae9b50b537d7af3889588f300366/68731/virtual-dom.jpg 205w\", \"/static/398fae9b50b537d7af3889588f300366/a7bf1/virtual-dom.jpg 410w\", \"/static/398fae9b50b537d7af3889588f300366/224d9/virtual-dom.jpg 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\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(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\\"Por qu\\xEA o React \\xE9 t\\xE3o r\\xE1pido??\"), mdx(\"blockquote\", {\n    parentName: \"blockquote\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Ser\\xE1 que o \\\"React \\xE9 t\\xE3o r\\xE1pido\\\" mesmo?\"))), mdx(\"p\", null, \"A pergunta deveria ser: o que TORNA o \\\"React r\\xE1pido\\\"?\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"225px\"\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/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAMEBgf/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAd5recaie3py2pihiC4D/8QAHRAAAgICAwEAAAAAAAAAAAAAAwQCBQEGAAcRFf/aAAgBAQABBQJzcEbBiscVucYw15HrgSTdPrAKe3EaB4yTBKfzlODFAMf/xAAdEQACAgEFAAAAAAAAAAAAAAABAhEhBBBRgZHw/9oACAEDAQE/AXGOWYoYEVvNce71/8QAGBEAAgMAAAAAAAAAAAAAAAAAARESIDH/2gAIAQIBAT8BEkHtP//EACsQAAIBAgMDDQAAAAAAAAAAAAECAwAEERIhBVGBExUiIzEyNEJSgpGTof/aAAgBAQAGPwLqhcsuGVtVABB00Jom1uWt7jzQk9JQNOzh+134h7SaTkdshI1Qh1lUEk/IpL/nWJ8FZWjyhQceNZo3V13qcazmCMv6ioxrw0P1issaKg3KMK//xAAgEAEBAAIABgMAAAAAAAAAAAABEQAhMUFRYYGhcZHw/9oACAEBAAE/IWoL1UAYgW3fjnhMcaSgChnyMKFSE3T34mKVcPxow5HXphEOVGATdyZsoUiHrE7txS+2W/T6zfg7AL4z/9oADAMBAAIAAwAAABBvzwD/xAAZEQEBAQADAAAAAAAAAAAAAAABESEgMUH/2gAIAQMBAT8QdIIhquy5i2aIHrOD/8QAGxEAAgEFAAAAAAAAAAAAAAAAAREhEFFxgfD/2gAIAQIBAT8QIBA2mynb7Ff/xAAaEAEBAAMBAQAAAAAAAAAAAAABEQAhMUFR/9oACAEBAAE/EKDYJNABAS6SRRB3D9FcSGK6Ii7w7CCoI7QZeya+uVHWdYUBCR66u9a3R2lhRWPtIZunTak6VJd4vo6qGTaLzFFXZK8MOUlO8OsAXRn/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\": \"katiau\",\n    \"title\": \"katiau\",\n    \"src\": \"/static/4044a8f76b1199a858947a202ebcbc3b/2241b/katiau.jpg\",\n    \"srcSet\": [\"/static/4044a8f76b1199a858947a202ebcbc3b/68731/katiau.jpg 205w\", \"/static/4044a8f76b1199a858947a202ebcbc3b/2241b/katiau.jpg 225w\"],\n    \"sizes\": \"(max-width: 225px) 100vw, 225px\",\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    \"), \"\\n*\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Representa\\xE7\\xE3o do React ganhando a Copa Pist\\xE3o\")), mdx(\"p\", null, \"MEOA MIGO, n\\xE3o existe \\\"framework mais r\\xE1pido\\\". Passou da hora de tirar essa camiseta da empresa X e Y a\\xED e encarar a realidade: o desenvolvedor que torna as coisas boas e ruins, r\\xE1pidas e lentas, \\xFAteis e engessadas.\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"290px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"98.27586206896551%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAQGCAIF/8QAFQEBAQAAAAAAAAAAAAAAAAAABAP/2gAMAwEAAhADEAAAAYEfxoYbaJZ2PDa+wSLgLx//xAAbEAADAAIDAAAAAAAAAAAAAAACAwQBBhETFf/aAAgBAQABBQLaIsndrM8sN6zU0abvWtbHySZrQAcjixtPU2Sonw//xAAbEQABBAMAAAAAAAAAAAAAAAABAAIRIQMQEv/aAAgBAwEBPwEDrEYapKNCtf/EABkRAQACAwAAAAAAAAAAAAAAABEAAxBBgf/aAAgBAgEBPwFLFnZsx//EACQQAAIBBAAFBQAAAAAAAAAAAAECAwAREiEEEyMxUSJBQmGx/9oACAEBAAY/AopZOtAwxEbbVTUshnHDpjblM1lY1dCrr5U3q7ySKMrrEvxp80Mjg4m/cfddBZQh36b7qeERIsSNgFHgDX6aEiooaTTd9+9cNIbAtGNDtX//xAAeEAACAgMAAwEAAAAAAAAAAAABEQAhQVFhMXGRsf/aAAgBAQABPyFkiNkPmujMN11ZMZXioK6ygfYZBaJYfj7DCMcA9CDkx1cidVCwpBiqWWB9DCgGiQEMttkwchztT1P/2gAMAwEAAgADAAAAENAfvv/EABkRAQACAwAAAAAAAAAAAAAAAAEAIRARQf/aAAgBAwEBPxBxbk7EqSJBo4//xAAbEQADAAIDAAAAAAAAAAAAAAAAAREhMUFx8P/aAAgBAgEBPxByti/dCT4Qttoh/8QAHBABAQEBAQEBAQEAAAAAAAAAAREhAEExYVFx/9oACAEBAAE/EIdYNUa9/p6xLOBcSqtW0WUJEvN0GCz/AIFObv8AIEpAExBWvX6HfMW59cA36EPd8nDqlY7fIiOBv500YYRGqmgW6E04QITICuBCqZ/XnzqTGKQKsz1Xv//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"analise\",\n    \"title\": \"analise\",\n    \"src\": \"/static/4348384fd32d4d12c9361a2573f64a5c/b8be9/analise.jpg\",\n    \"srcSet\": [\"/static/4348384fd32d4d12c9361a2573f64a5c/68731/analise.jpg 205w\", \"/static/4348384fd32d4d12c9361a2573f64a5c/b8be9/analise.jpg 290w\"],\n    \"sizes\": \"(max-width: 290px) 100vw, 290px\",\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 Virtual DOM n\\xE3o \\xE9 um n\\xE9ctar dos deuses, concedido somente ao React, d\\xE1 uma ligada nesse t\\xF3pico \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pt.stackoverflow.com/questions/43169/qual-%C3%A9-a-diferen%C3%A7a-entre-dom-e-virtual-dom\"\n  }), \"aqui\"), \" do stackoverflow (mais precisamente no final da primeira resposta). Tem uma listinha de frameworks e libs que utilizam o dito-cujo. \"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"MAS O QUE QUE \\xC9 ESSE CARA A\\xCD, MEU?? Para de enrolar!\")), mdx(\"p\", null, \"O Virtual DOM \\xE9 uma \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"representa\\xE7\\xE3o virtual\"), \" da nossa UI mantida em mem\\xF3ria e sincronizada em tempo real com o DOM (que j\\xE1 discutimos no meu post sobre DOM, link \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pedro-mello.netlify.app/dom-not-doom/\"\n  }), \"aqui\"), \").\"), mdx(\"p\", null, \"Esse camarada, mantido em mem\\xF3ria virtual, tr\\xE1s algumas melhorias significativas que tornam a experi\\xEAncia mais r\\xE1pida. \"), mdx(\"p\", null, \"Ao fazer uma modifica\\xE7\\xE3o no DOM real, ele vai percorrer toda a \\xE1rvore do DOM antes de gerar uma c\\xF3pia atualizada. Utilizando o Virtual DOM, ele possui uma identifica\\xE7\\xE3o \\xFAnica de cada n\\xF3 do DOM real e, ao ser modificado, ele sabe exatamente onde ir e n\\xE3o precisa percorrer todo o DOM para gerar a c\\xF3pia atualizada.\"), mdx(\"p\", null, \"Ou seja, n\\xE3o \\xE9 o React que \\xE9 mais r\\xE1pido, \\xE9 a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"forma que DOM \\xE9 manipulado\"), \" que torna a \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"experi\\xEAncia mais r\\xE1pida\"), \".\"), mdx(\"p\", null, \"A aplica\\xE7\\xE3o do Virtual DOM \\xE9 muito mais complexa que seu conceito, e vamos ver isso na pr\\xE1tica no decorrer dos nossos estudos e enquanto estivermos codando. Por hora, fique com o conceito acima.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"components\"\n  }, \"./components\"), mdx(\"p\", null, \"J\\xE1 sabemos como funciona a manipula\\xE7\\xE3o do Virtual DOM no DOM real, mas ainda n\\xE3o sabemos como manipular os dados do React e \\xE9 isso que vamos ver agora.\"), 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\": \"56.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAPoAAAD6AG1e1JrAAABaklEQVQoz4WSzUoCURTHLYhAx/t9ryPj+NGMhqjzkQ2h4CLLMFooQSIRJC2KFhVBiwjXPUGLWrSpN2nVG/Q6nRlbSA54Fodzzj2/e+7/3pugMyOEMc44hyDKQs8YC2PKIMUYz4rzlqBRF0olG4ORN57gtAYFIYRlWfV6vVyumJtV3chJKbkQsEUMTFDarDl5d4sSbNt2s9l0HcdxwTzf9z0v9FAwTXMBDnkKM7GWgqMqpWZzJKeCpjkjYco5eFiKgyOFfyIjbRgjI7/hbneMUoWA8Ej5P9kJGmeMC219NTi6uPn42Z88SalxwRfb4mFQnlcsEx49q4QsSAaVhcuOgzFCB1fP12/fbneA0Yrtdy5fvoYPr7qppOLzW8TAIKzcCBrtw2zRxkjTcwW33S85LfgHlCydjHHQHfTO7os1eLmkaVX7p7d+byQynAu2BCYYtU7ujqef1Z09jNaKtWD4+L57PlW6nIMJV8YvtJVG+bKpz9oAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"data-flow\",\n    \"title\": \"data-flow\",\n    \"src\": \"/static/4790031a9fdf1b36ed9de92ee41551bd/12131/data-flow.png\",\n    \"srcSet\": [\"/static/4790031a9fdf1b36ed9de92ee41551bd/13e7c/data-flow.png 205w\", \"/static/4790031a9fdf1b36ed9de92ee41551bd/34aa6/data-flow.png 410w\", \"/static/4790031a9fdf1b36ed9de92ee41551bd/12131/data-flow.png 820w\", \"/static/4790031a9fdf1b36ed9de92ee41551bd/dfb24/data-flow.png 1230w\", \"/static/4790031a9fdf1b36ed9de92ee41551bd/99bb6/data-flow.png 1280w\"],\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, \"Essa imagem eu tirei dos slides que disponibilizei o link l\\xE1 em cima. Ela descreve o \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\"Data Flow\\\"\"), \" do React, com indica\\xE7\\xF5es do que seriam as props e do que seriam o states.\"), mdx(\"p\", null, \"A partir desse momento, outro conceito precisa ficar bem claro para n\\xF3s: o de \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"em\", {\n    parentName: \"strong\"\n  }, \"componentiza\\xE7\\xE3o\")), \".\"), mdx(\"p\", null, \"Componentiza\\xE7\\xE3o \\xE9 abstrair o conceito de um todo em pequenas partes que o comp\\xF5em. Em outras palavras: \\xE9 dividir em pequenas partes \\xFAnicas o contexto total.\"), mdx(\"p\", null, \"Confuso, n\\xE9? Vamos exemplificar:\"), mdx(\"span\", {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"510px\"\n    }\n  }, \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"82.3529411764706%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAAQABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAYDB//EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAHsTCYG+3XxoP/EABwQAAICAgMAAAAAAAAAAAAAAAMEAQUABgITFP/aAAgBAQABBQInuhiRN8RqVtp07utcnBRJ7Cm7n//EABoRAAICAwAAAAAAAAAAAAAAAAEDAgQQE1H/2gAIAQMBAT8BXWgxJZsAPDj/xAAXEQADAQAAAAAAAAAAAAAAAAABAhEQ/9oACAECAQE/AS5DSZ//xAAlEAACAQQBAQkAAAAAAAAAAAABAgMABBIhETEQExUiUWGRobH/2gAIAQEABj8CbCCZx12TwKQm4eBzpYyzE/HP3XLXfdlt4Ny2Pt1q38JBIXMyhJMS2tD9q1la3YxOQJ45WHlHqDkT2f/EABwQAQEBAAMAAwAAAAAAAAAAAAERIQAxQRBRwf/aAAgBAQABPyF3A2ih4S67xXB5RtN6NKJ94MEY3NX24ZCmOaIbt/HEbWx37Rg7hOpPj//aAAwDAQACAAMAAAAQ3w//xAAZEQEBAQADAAAAAAAAAAAAAAABESEAQVH/2gAIAQMBAT8QiHBaRysPVmTvFKXn/8QAFxEBAAMAAAAAAAAAAAAAAAAAARARQf/aAAgBAgEBPxA1ejpH/8QAGhABAQADAQEAAAAAAAAAAAAAAREAIUExYf/aAAgBAQABPxB4PaUVQQIg0gSPy4ebGJbhVQwVbIxk6G1pXGENQwK2pIiZHJPR4wPpMLWt2W51ouGf/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\": \"marquinhoskkk\",\n    \"title\": \"marquinhoskkk\",\n    \"src\": \"/static/efda84084e5950e015bbe9558d337f86/abb15/relampago-marquinhos.jpg\",\n    \"srcSet\": [\"/static/efda84084e5950e015bbe9558d337f86/68731/relampago-marquinhos.jpg 205w\", \"/static/efda84084e5950e015bbe9558d337f86/a7bf1/relampago-marquinhos.jpg 410w\", \"/static/efda84084e5950e015bbe9558d337f86/abb15/relampago-marquinhos.jpg 510w\"],\n    \"sizes\": \"(max-width: 510px) 100vw, 510px\",\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, \"Utilizando o rel\\xE2mpago marquinhos para o exemplo, notamos que ele \\xE9 um carro. O carro \\xE9 a representa\\xE7\\xE3o final da jun\\xE7\\xE3o de v\\xE1rias \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"pe\\xE7as\"), \" e \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"componentes\"), \" que ele possui. Volantes, pneus, bancos, motor e vidros, s\\xE3o exemplos dos \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"COMPONENTES\"), \" do carro.\"), mdx(\"p\", null, \"No React, nossos componentes s\\xE3o representados por meio de uma fun\\xE7\\xE3o em JavaScript.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"function Pneu() {\\n  return <p> Eu sou um Pneu! </p>\\n}\\n\\nfunction Volante() {\\n  return <p> Eu sou um volante! </p>\\n}\\n\\n// demais componentes do carro\\n// ..\\n\\nfunction Carro() {\\n  return (\\n    <div>\\n      <Pneu />\\n      <Pneu />\\n      <Pneu />\\n      <Pneu />\\n      <Volante />\\n      <DEMAIS_COMPONENTES />\\n    </div>   \\n  )\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"com* ES6 nossas \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"functions\"), \" podem ser substitu\\xEDdas por \"), \"fun\\xE7\\xF5es an\\xF4nimas**, ficando algo parecido com:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const Pneu = () => <p> Eu sou um Pneu </p>\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"T\\xE1, mas como vou saber qual pneu \\xE9 do lado direito, esquerdo, etc?\")), mdx(\"p\", null, \"E a\\xED que entram as props, meu amigo!\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"props\"\n  }, \"./props\"), mdx(\"p\", null, \"Props: s\\xE3o os par\\xE2metros que seu componente recebe. No React, com o JSX, j\\xE1 temos alguns par\\xE2metros como o \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"className\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onClick\"), \" e muitas outras que herdamos da biblioteca. S\\xE3o as props \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"nativas\"), \", se \\xE9 que posso chamar assim (me perdoa, comunidade). Mas temos liberdade de criarmos nossas pr\\xF3prias props, e \\xE9 isso que nos interessa agora.\"), mdx(\"p\", null, \"Vamos modificar o mesmo trecho de c\\xF3digo acima, utilizando ES6 e o conceito de props.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const Pneu = (props) => {\\n  return <p> Eu sou o pneu {props.parte} do lado {props.lado} </p>\\n}\\n\\nconst Volante = () => <p> Eu sou um volante! </p>\\n\\n// demais componentes do carro\\n// ..\\n\\nconst Carro = () => {\\n  return (\\n    <div>\\n      <Pneu \\n        parte=\\\"frontal\\\"\\n        lado=\\\"direito\\\"\\n      />\\n      <Pneu \\n        parte=\\\"frontal\\\"\\n        lado=\\\"esquerdo\\\"\\n      />\\n      <Pneu \\n        parte=\\\"traseiro\\\"\\n        lado=\\\"direito\\\"\\n      />\\n      <Pneu \\n        parte=\\\"traseiro\\\"\\n        lado=\\\"esquerdo\\\"\\n      />\\n      <Volante />\\n    </div>   \\n  )\\n}\\n\")), mdx(\"p\", null, \"Link do JSFiddle com o exemplo \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://jsfiddle.net/cicatrzwp/9t4msbna/\"\n  }), \"aqui\"), \".\"), mdx(\"p\", null, \"Todos os componentes React tem que agir como fun\\xE7\\xF5es puras em rela\\xE7\\xE3o ao seus props. Ou seja, independente de quantas props voc\\xEA passe, elas devem seguir a boa pr\\xE1tica de serem SOMENTE para leitura, sem sofrer altera\\xE7\\xF5es no seu valor inicial. \"), mdx(\"p\", null, \"Se voc\\xEA deseja passar dados que s\\xE3o din\\xE2micos e mudam com o tempo, na pr\\xF3xima postagem vamos abordar o conceito de \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"states\"), \" e o ciclo de vida de um componente.\"), mdx(\"hr\", null), 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\": \"56.25%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAALABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUDBAYH/8QAFgEBAQEAAAAAAAAAAAAAAAAABQQG/9oADAMBAAIQAxAAAAHjV/NsTNokIyg//8QAGxAAAwEAAwEAAAAAAAAAAAAAAQIDBAAFEjL/2gAIAQEAAQUC63AbSkmWw0KErnc8s58t9f/EABgRAQEBAQEAAAAAAAAAAAAAAAIBABFR/9oACAEDAQE/AQWjLFyeZWd3/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERAjH/2gAIAQIBAT8B1LwTP//EAB0QAAICAgMBAAAAAAAAAAAAAAECABEDMRIhUVL/2gAIAQEABj8COTkiqPo1KfOOgLZFNX5CFax7B3rU3DP/xAAdEAACAgEFAAAAAAAAAAAAAAABEQAhUTFBYXGh/9oACAEBAAE/ISI7BodDCxAbMKtV7EzLZoYqDpkxCz4OXdmf/9oADAMBAAIAAwAAABC0P//EABkRAAMBAQEAAAAAAAAAAAAAAAERIQAxUf/aAAgBAwEBPxA60DYAViU+d5ms3//EABgRAQADAQAAAAAAAAAAAAAAAAEAESGB/9oACAECAQE/EEGaWqbc5AAGf//EABsQAQEBAQEBAQEAAAAAAAAAAAERITEAQVGB/9oACAEBAAE/EB+DqCxcvRcy9M8t+5iTceQ29XBCkxZJIoyl2Z1l9tadjTfw+dfWpsf9eB2pBfz3/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\": \"thats-all\",\n    \"title\": \"thats-all\",\n    \"src\": \"/static/3f853cb98b5f11dfd443836c5a9ffa84/18d18/thatsall.jpg\",\n    \"srcSet\": [\"/static/3f853cb98b5f11dfd443836c5a9ffa84/68731/thatsall.jpg 205w\", \"/static/3f853cb98b5f11dfd443836c5a9ffa84/a7bf1/thatsall.jpg 410w\", \"/static/3f853cb98b5f11dfd443836c5a9ffa84/18d18/thatsall.jpg 820w\", \"/static/3f853cb98b5f11dfd443836c5a9ffa84/04d0e/thatsall.jpg 1230w\", \"/static/3f853cb98b5f11dfd443836c5a9ffa84/7f2a6/thatsall.jpg 1640w\", \"/static/3f853cb98b5f11dfd443836c5a9ffa84/0d01f/thatsall.jpg 1920w\"],\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, \"Qualquer d\\xFAvida ou coment\\xE1rios adicionais, me chamem em uma das minhas redes.\"), mdx(\"p\", null, \"Quem me acompanha, sabe um pouco do que rolou nesse tempo, desde a \\xFAltima postagem at\\xE9 essa semana. Prometi que seria mais ativo, mas infelizmente n\\xE3o deu. As coisas est\\xE3o se acertando e aos poucos estou voltando com as atividades normais.\"), mdx(\"p\", null, \"Um grande abra\\xE7o para todos, devs e !devs.\"), mdx(\"p\", null, \"Nos vemos em breve!\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"49541b22-a56a-563f-8c2b-51ab9193049c"}}}