{"componentChunkName":"component---src-templates-docs-js","path":"/docs/hello-world.html","result":{"data":{"markdownRemark":{"html":"<p>O menor exemplo de React é algo assim:</p>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"gatsby-code-jsx\"><code class=\"gatsby-code-jsx\">ReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello, world!</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h1</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">,</span>\n  document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'root'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>Isso mostra um header dizendo “Hello, world!” na página.</p>\n<p><a href=\"/redirect-to-codepen/hello-world\" target=\"_blank\" rel=\"noreferrer\"><b>Try it on CodePen</b></a></p>\n<p>Clique no link acima para abrir um editor online. Sinta-se livre para fazer algumas mudanças e ver como elas afetam a saída. A maioria das páginas neste guia terão exemplos editáveis como esse.</p>\n<h2 id=\"how-to-read-this-guide\"><a href=\"#how-to-read-this-guide\" 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>Como Ler Esse Guia </h2>\n<p>Nesse guia, vamos examinar os fundamentos das aplicações React: elementos e componentes. Depois que você tiver o domínio, poderá criar aplicações complexas a partir de partes pequenas e reutilizáveis.</p>\n<blockquote>\n<p>Dica</p>\n<p>Esse guia é destinado a pessoas que preferem <strong>aprender conceitos passo a passo</strong>. Se você prefere aprender fazendo, confira nosso <a href=\"/tutorial/tutorial.html\">tutorial prático</a>. Você pode acabar descobrindo que esse guia e o tutorial se complementam.</p>\n</blockquote>\n<p>Esse é o primeiro capítulo de um guia passo-a-passo sobre os principais conceitos do React. Uma lista de todos os capítulos pode ser encontrada na barra de navegação lateral. Se você estiver lendo em um dispositivo móvel, pode acessar a navegação pressionando o botão no canto inferior direito da sua tela.</p>\n<p>Todo capítulo deste guia se desenvolve em cima do conhecimento introduzido em capítulos anteriores. <strong>Você pode aprender muito do React lendo os capítulos do guia de “Conceitos principais” na ordem em que eles aparecem na barra lateral.</strong> Por exemplo, <a href=\"/docs/introducing-jsx.html\">“Introduzindo JSX”</a> é o próximo capítulo após esse.</p>\n<h2 id=\"knowledge-level-assumptions\"><a href=\"#knowledge-level-assumptions\" 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>Suposições de nível de conhecimento </h2>\n<p>React é uma biblioteca JavaScript, então assumiremos que você possui um entendimento básico da linguagem. <strong>Se não se sentir confiante, nós recomendamos: <a href=\"https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">seguir um tutorial de javascript</a> para checar o seu nível de conhecimento</strong> e garantir que você poderá acompanhar esse guia sem se perder. Isso pode levar entre 30 minutos e uma hora, mas você não sentirá como se estivesse aprendendo React e JavaScript ao mesmo tempo.</p>\n<blockquote>\n<p>Nota</p>\n<p>Esse guia geralmente usa partes da nova sintaxe do JavaScript nos exemplos. Se você não tem trabalhado com JavaScript nos últimos anos, <a href=\"https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">esses três pontos</a> lhe ajudarão em boa parte do caminho.</p>\n</blockquote>\n<h2 id=\"lets-get-started\"><a href=\"#lets-get-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>Vamos Começar! </h2>\n<p>Continue rolando para baixo, e você encontrará o link para o <a href=\"/docs/introducing-jsx.html\">próximo capítulo desse guia</a> logo acima do rodapé.</p>","frontmatter":{"title":"Hello World","next":"introducing-jsx.html","prev":"cdn-links.html"},"fields":{"path":"content/docs/hello-world.md","slug":"docs/hello-world.html"}}},"pageContext":{"slug":"docs/hello-world.html"}},"staticQueryHashes":[]}