Hello World

O menor exemplo de React é algo assim:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Isso mostra um header dizendo “Hello, world!” na página.

Experimente no CodePen

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.

Como Ler Esse Guia

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.

Dica

Esse guia é destinado a pessoas que preferem aprender conceitos passo a passo. Se você prefere aprender fazendo, confira nosso tutorial prático. Você pode acabar descobrindo que esse guia e o tutorial se complementam.

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.

Todo capítulo deste guia se desenvolve em cima do conhecimento introduzido em capítulos anteriores. Você pode aprender muito do React lendo os capítulos do guia de “Principais conceitos” na ordem em que eles aparecem na barra lateral. Por exemplo, “Introduzindo JSX” é o próximo capítulo após esse.

Suposições de nível de conhecimento

React é uma biblioteca JavaScript, então assumiremos que você possui um entendimento básico da linguagem. Se não se sentir confiante, nós recomendamos: seguir um tutorial de javascript para checar o seu nível de conhecimento 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.

Nota

Esse guia geralmente usa partes da nova sintaxe do JavaScript nos exemplos. Se você não tem trabalhado com JavaScript nos últimos anos, esses três pontos lhe ajudarão em boa parte do caminho.

Vamos Começar!

Continue rolando para baixo, e você encontrará o link para o próximo capítulo desse guia logo acima do rodapé.