ReactJS - JSX

React usa JSX para modelagem em vez de JavaScript normal. Não é necessário usá-lo, no entanto, a seguir estão alguns prós que vêm com ele.

• É mais rápido porque executa a otimização ao compilar o código em JavaScript.

• Também é seguro para tipos e a maioria dos erros pode ser detectada durante a compilação.

• Isso torna mais fácil e rápido escrever modelos, se você estiver familiarizado com HTML.

Usando JSX

JSX parece um HTML normal na maioria dos casos. Já o usamos no capítulo Configuração do ambiente. Olhe o código deApp.jsx para onde estamos voltando div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Embora seja semelhante ao HTML, há algumas coisas que precisamos ter em mente ao trabalhar com JSX.

Elementos Aninhados

Se quisermos retornar mais elementos, precisamos envolvê-lo com um elemento contêiner. Observe como estamos usandodiv como um invólucro para h1, h2 e p elementos

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Atributos

Podemos usar nossos próprios atributos personalizados, além de propriedades e atributos HTML regulares. Quando queremos adicionar um atributo personalizado, precisamos usardata-prefixo. No exemplo a seguir, adicionamosdata-myattribute como um atributo de p elemento.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Expressões JavaScript

Expressões JavaScript podem ser usadas dentro do JSX. Só precisamos envolvê-lo com chaves{}. O exemplo a seguir irá renderizar2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Não podemos usar if else declarações dentro do JSX, em vez disso, podemos usar conditional (ternary)expressões. No exemplo a seguir, variáveli igual a 1 então o navegador irá renderizar true, Se mudarmos para algum outro valor, ele irá renderizar false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Estilo

React recomenda o uso de estilos embutidos. Quando queremos definir estilos embutidos, precisamos usarcamelCasesintaxe. React também anexará automaticamentepxapós o valor numérico em elementos específicos. O exemplo a seguir mostra como adicionarmyStyle inline para h1 elemento.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Comentários

Ao escrever comentários, precisamos colocar chaves {}quando queremos escrever um comentário dentro da seção infantil de uma tag. É uma boa prática sempre usar{} ao escrever comentários, pois queremos ser consistentes ao escrever o aplicativo.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Convenção de nomes

Tags HTML sempre usam lowercase nomes de tag, enquanto os componentes React começam com Uppercase.

Note - Você deve usar className e htmlFor como nomes de atributos XML em vez de class e for.

Isso é explicado na página oficial do React como -

Como JSX é JavaScript, identificadores como class e forsão desencorajados como nomes de atributos XML. Em vez disso, os componentes React DOM esperam nomes de propriedade DOM, comoclassName e htmlFor, respectivamente.