Reagir JSX

O que é JSX?

JSX significa JavaScript XML.

JSX nos permite escrever HTML em React.

JSX torna mais fácil escrever e adicionar HTML no React.

Codificando JSX

JSX nos permite escrever elementos HTML em JavaScript e colocá-los no DOM sem nenhum createElement()  e/ou appendChild()método.

JSX converte tags HTML em elementos react.

Aqui estão dois exemplos. O primeiro usa JSX e o segundo não:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Como você pode ver no primeiro exemplo, JSX nos permite escrever HTML diretamente dentro do código JavaScript.

JSX é uma extensão da linguagem JavaScript baseada em ES6 e é traduzida para JavaScript normal em tempo de execução.

Expressões em JSX

Com JSX você pode escrever expressões dentro de chaves { }.

A expressão pode ser uma variável ou propriedade React, ou qualquer outra expressão JavaScript válida. O JSX executará a expressão e retornará o resultado:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Inserindo um grande bloco de HTML

Para escrever HTML em várias linhas, coloque o HTML entre parênteses:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Um elemento de nível superior

O código HTML deve ser encapsulado em UM elemento de nível superior.

Portanto, se você gosta de escrever dois parágrafos, deve colocá-los dentro de um elemento pai, como um divelemento.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternativamente, você pode usar um "fragmento" para quebrar várias linhas. Isso evitará a adição desnecessária de nós extras ao DOM.

Um fragmento se parece com uma tag HTML vazia: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elementos devem ser fechados

O JSX segue as regras XML e, portanto, os elementos HTML devem ser fechados corretamente.

const myelement = <input type="text" />;

Atributo classe = className

O classatributo é um atributo muito usado em HTML, mas como JSX é renderizado como JavaScript e a classpalavra-chave é uma palavra reservada em JavaScript, você não tem permissão para usá-lo em JSX.

JSX resolveu isso usando classNameem vez disso. Quando o JSX é renderizado, ele converte className atributos em classatributos.

const myelement = <h1 className="myclass">Hello World</h1>;

Condições - declarações if

React suporta ifdeclarações, mas não dentro de JSX.

Para poder usar instruções condicionais no JSX, você deve colocar as if instruções fora do JSX ou usar uma expressão ternária:

Opção 1:

Escreva ifinstruções fora do código JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Opção 2:

Use expressões ternárias em vez disso:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));