{"componentChunkName":"component---src-templates-docs-js","path":"/docs/addons.html","result":{"data":{"markdownRemark":{"html":"<blockquote>\n<p>Notas:</p>\n<p>O ponto de entrada <code class=\"gatsby-code-text\">React.addons</code> é obsoleto a partir da versão v15.5 do React. Os add-ons foram movidos para módulos separados e alguns deles foram descontinuados.</p>\n</blockquote>\n<p>Os add-ons do React são uma coleção de módulos utilitários úteis para criar aplicativos React. <strong>Estes devem ser considerados experimentais</strong> e tendem a mudar com mais frequência do que a base.</p>\n<ul>\n<li><a href=\"/docs/create-fragment.html\"><code class=\"gatsby-code-text\">createFragment</code></a>, para criar um conjunto filhos de chaves externas.</li>\n</ul>\n<p>Os add-ons abaixo estão apenas na versão de desenvolvimento(não minificados) do React:</p>\n<ul>\n<li><a href=\"/docs/perf.html\"><code class=\"gatsby-code-text\">Perf</code></a>, uma ferramenta de perfil de desempenho para encontrar oportunidades de otimização.</li>\n<li><a href=\"/docs/test-utils.html\"><code class=\"gatsby-code-text\">ReactTestUtils</code></a>, ajudantes simples para escrever casos de teste.</li>\n</ul>\n<h3 id=\"legacy-add-ons\"><a href=\"#legacy-add-ons\" 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>Add-ons Legados </h3>\n<p>Os add-ons abaixo são considerados legados e seu uso é desencorajado. Eles continuarão trabalhando em um futuro observável, mas não há mais desenvolvimento.</p>\n<ul>\n<li><a href=\"/docs/pure-render-mixin.html\"><code class=\"gatsby-code-text\">PureRenderMixin</code></a>. Utilize <a href=\"/docs/react-api.html#reactpurecomponent\"><code class=\"gatsby-code-text\">React.PureComponent</code></a>.</li>\n<li><a href=\"/docs/shallow-compare.html\"><code class=\"gatsby-code-text\">shallowCompare</code></a>, uma função auxiliar que executa uma comparação superficial para props e state em um componente para decidir se um componente deve atualizar. Nós recomendamos utilizar <a href=\"/docs/react-api.html#reactpurecomponent\"><code class=\"gatsby-code-text\">React.PureComponent</code></a>.</li>\n<li><a href=\"/docs/update.html\"><code class=\"gatsby-code-text\">update</code></a>. Utilize <a href=\"https://github.com/kolodny/immutability-helper\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code class=\"gatsby-code-text\">kolodny/immutability-helper</code></a>.</li>\n<li><a href=\"https://www.npmjs.com/package/react-dom-factories\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><code class=\"gatsby-code-text\">ReactDOMFactories</code></a>, fábricas DOM pré-configuradas para fazer o React ser mais fácil de utilizar sem JSX.</li>\n</ul>\n<h3 id=\"deprecated-add-ons\"><a href=\"#deprecated-add-ons\" 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>Add-ons Descontinuados </h3>\n<ul>\n<li><a href=\"/docs/two-way-binding-helpers.html\"><code class=\"gatsby-code-text\">LinkedStateMixin</code></a> foi descontinuado.</li>\n<li><a href=\"/docs/animation.html\"><code class=\"gatsby-code-text\">TransitionGroup</code> and <code class=\"gatsby-code-text\">CSSTransitionGroup</code></a> foi descontinuado em favor de <a href=\"https://github.com/reactjs/react-transition-group/tree/v1-stable\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">suas substituições drop-in</a>.</li>\n</ul>\n<h2 id=\"using-react-with-add-ons\"><a href=\"#using-react-with-add-ons\" 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>Usando React com Add-ons </h2>\n<p>Você pode instalar os add-ons individualmente via npm (e.g. <code class=\"gatsby-code-text\">npm install react-addons-create-fragment</code>) e importá-lo:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\"><span class=\"token keyword\">import</span> createFragment <span class=\"token keyword\">from</span> <span class=\"token string\">'react-addons-create-fragment'</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// ES6</span>\n<span class=\"token keyword\">var</span> createFragment <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'react-addons-create-fragment'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// ES5 with npm</span></code></pre></div>\n<p>Quando utilizar React 15 ou anterior via CDN, você pode usar <code class=\"gatsby-code-text\">react-with-addons.js</code> ao invés de <code class=\"gatsby-code-text\">react.js</code>:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"gatsby-code-html\"><code class=\"gatsby-code-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://unpkg.com/react@15/dist/react-with-addons.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p>Os add-ons estarão disponíveis através do global <code class=\"gatsby-code-text\">React.addons</code> (e.g. <code class=\"gatsby-code-text\">React.addons.TestUtils</code>).</p>","frontmatter":{"title":"Add-Ons","next":null,"prev":null},"fields":{"path":"content/docs/addons.md","slug":"docs/addons.html"}}},"pageContext":{"slug":"docs/addons.html"}},"staticQueryHashes":[]}