JSX

JSX significa Javascript XML.

JSX é um código que permite gerar HTML em React.

JSX geram elementos de React (ReactElement) que são objetos de Javascript, a partir dos quais o React gerará HTML.

O React usa o compilador Babel para compilar o código JSX em código Javascript.

Esse código usa o método createElement() do React para transformar o JSX num elemento de React.

Por exemplo, o código de JSX seguinte

<h1>Ola mundo</h1>

Irá gerar o objeto de Javascript seguinte:

Object

1. $$typeof: Symbol(react.element)
   9
2. key: null
3. props: {children: “Ola Mundo”}
4. ref: null
5. type: “h1”
6. _owner: null
7. _store: {validated: false}
8. _self: null
9. _source: {fileName: “C:\react\firstcomponentapp\src\index.js”, lineNumber: 9,
   columnNumber: 17}
10. proto: Object

Podemos ver que é um ReactElement, o seu tipo é ‘h1’ e tem como elemento filho o texto ‘Ola Mundo’.

Internamente este objeto é criado quando o compilador Babel compila o JSX através de chamadas ao método React.createElement(). No caso do código de JSX acima, seria React.createElement(‘h1’, {}, ‘Ola Mundo’).

Expressões em JSX

Podemos usar expressões em JSX fechando-as em chavetas ( {} ).

Uma expressão pode ser uma variável de React, propriedade ou qualquer outra expressão válida de Javascript.

Exemplo 1:

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

Exemplo 3:

const name = 'Carlos Santana'; 
const element = <h1>Hello, {name}</h1>; 
 
ReactDOM.render( 
  element, 
  document.getElementById('root') 
);

Exemplo 3:

 function formatName(user) { 
    return user.firstName + ' ' + user.lastName; 
  } 
   
  const user = { 
    firstName: 'Carlos', 
    lastName: 'Santana' 
  }; 
   
  const element = ( 
    <h1> 
      Hello, {formatName(user)}! 
    </h1> 
  ); 
   
  ReactDOM.render( 
    element, 
    document.getElementById('root') 
  );

Blocos de código

Quando o código de JSX ocupa num bloco com várias linhas, estas devem ser envolvidas em parenteses:

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

Elemento de topo

Quando, num código JSX, temos vários elementos irmãos sem um elemento de topo ou pai deles, temos de os colocar num elemento pai ou um erro será produzido pelo Babel:

const element = ( 
   <div> 
      <h1>I am a Header.</h1> 
      <h1>I am a Header too.</h1> 
   </div> 
);