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!“.
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.