React - Exercício Final

É vantajoso utilizar uma Single Page Application (SPA) quando:

• Quero que toda a página reaja facilmente a interações, como uma aplicação

• Tenho muito conteúdo de marketing digital

• A minha página não precisa de interação por parte do utilizador

Como é transformado o meu código JSX em HTML?

• Não é transformado, o React apenas insere as variáveis necessárias no código, e este é utilizado na página

• Cada elemento é traduzido para uma representação intermédia (Virtual DOM), que por sua vez é traduzida para a linguagem pretendida (HTML) através do react-dom

• É transformado através da função "map"

Uma das formas que um componente-filho tem para comunicar com o seu componente-pai é:

• Enviando-lhe props

• Através do hook useRef

• Recebendo como prop uma função do componente-pai

O que posso incluir dentro de chavetas no meu JSX?

• Qualquer código JS válido

• Apenas operações matemáticas

• Qualquer código JS que retorne um valor

• É uma sintaxe especial utilizada apenas no style

• As chavetas exteriores são para inserir uma expressão no JSX, e as interiores são para declarar um object JS

• São utilizadas apenas quando quero executar uma função no interior da minha prop

• {showWarning + <Warning />}

• {showWarning && <Warning />}

• {showWarning || <Warning />}

Quando eu quero que dois componentes tenham acesso ao mesmo estado, sincronizado entre si:

• Tenho que definir esse estado em cada um deles

• Esta sincronização é impossível em React

• Defino o meu estado partilhado num componente-pai comum a ambos, ou num context em que ambos estejam inseridos

• Apenas um valor numérico

• Sempre gerada por nós

• Única entre elementos do mesmo nível

• <button onClick={handleSubmit}>

• <button onClick={handleSubmit()}>

• <button onChange={handleSubmit()}>