Olá Mundo

O exemplo mais simples em React:

ReactDOM.render(
  <h1>Olá, mundo!</h1>,
  document.getElementById('root')
);

Mostra na página um heading que diz “Olá, mundo!“.

Experimenta no CodePen!

Clica na hiperligação acima para abrir um editor online. Sente-te à vontade para fazer alterações, e ver como afectam o resultado. A maioria das páginas neste guia terão exemplos editáveis como este.

Como Ler Este Guia

Neste guia, iremos examinar a construção de blocos em aplicações React: elementos e componentes. Assim que os dominares, poderás criar aplicações complexas a partir de pequenos pedaços reutilizáveis.

Dica

Este guia foi pensado em pessoas que preferem aprender os conceitos passo a passo. Se preferes aprender escrevendo código, vê o nosso tutorial prático. Poderás também complementar este guia com o tutorial prático.

Este é o primeiro capítulo de um guia passo a passo sobre os principais conceitos de React. Poderás encontrar a lista com todos os capítulos no menu lateral. Se estiveres a ler isto num dispositivo móvel, poderás aceder ao menu pressionando o botão no fundo do ecrã, do lado direito.

Cada capítulo neste guia, complementa o conhecimento introduzido nos capítulos anteriores. Poderás aprender a maior parte sobre React lendo os capítulos em “Conceitos Principais” pela ordem em que aparecem no menu lateral. Por exemplo, “Introdução ao JSX” é o próximo capítulo a seguir a este.

Nível de Conhecimento Necessário

React é uma biblioteca de JavaScript, e portanto, iremos assumir que possuis conhecimentos básicos sobre a linguagem JavaScript. Se não te sentes muito confiante, recomendamos que leias um tutorial de JavaScript para saberes o teu nível de conhecimento e garantires que irás perceber este guia sem te perderes. Deverá tomar-te entre 30 minutos a 1 hora, mas como resultado não terás a sensação que estás a aprender React e JavaScript ao mesmo tempo.

Nota

Este guia usa nos exemplos, ocasionalmente, síntaxe das novas versões de JavaScript. Se não tiveres usado JavaScript nos últimos anos, estes três pontos deverão guiar-te no caminho certo.

Vamos começar!

Continua a descer, e irás encontrar o link para o próximo capítulo deste guia mesmo antes do footer.