BrazilJS

Share this post

JSX

www.braziljs.org

Discover more from BrazilJS

Plataforma multicanal de produção e curadoria de conteúdo com foco nas Comunidades dev
Over 17,000 subscribers
Continue reading
Sign in

JSX

Isac Junior
May 22, 2018
Share this post

JSX

www.braziljs.org
Share

JSX

Quando surgiu como uma alternativa para escrevermos nosso template, o JSX logo foi mal visto e, realmente, ele pode parecer estranho no começo. Foi considerado um retrocesso no início por mesclar a estrutura do DOM com a lógica da aplicação, mas se mostrou poderoso posteriormente.

Como tudo que há de novo, inicialmente, temos um certo desconforto mesmo quando tal tecnologia, de certa forma, altera e nos retira da zona de conforto. Mas, após já ter amadurecido na comunidade, o JSX vem ganhando muita força e já mostrou o seu valor. Amado e odiado, ele é o mais popular template para criação da estrutura de uma interface.

Considerando o seguinte código abaixo, acredite, isso não é HTML! E neste artigo, iremos conhecer melhor sobre isto e sobre essa fantástica alternativa para templates.

const nav = (   <nav className="menu">     <ul>       <li><a href="#">Home</a></li>       <li><a href="#">About</a></li>     </ul>   </nav> )

O que é JSX?

Em resumo, JSX é uma sintaxe semelhante ao XML, na qual você consegue escrever e compreender de uma forma melhor como será montado o seu component na UI.

JSX não é uma proposta para EcmaScript, ele é apenas uma sintaxe!

É claro que JSX não é interpretado pelo browser. Por este motivo devemos utilizar um transpiler para realizar a mágica. Hoje existem vários transpiladores que transpilam JSX, entre eles, o mais conhecido, Babel.

Basicamente, usando o JSX você pode escrever estruturas concisas do tipo HTML e no mesmo arquivo que você escreve o código JavaScript, então, o Babel transformará isso em código JavaScript. Ao contrário do passado, em vez de colocar JavaScript em HTML, o JSX nos permite colocar HTML em JavaScript.

JSX providencia uma sintaxe familiar para definir a árvore estrutural. Isso não requer um novo conhecimento nem precisamos abandonar o Javascript.

Então, o código acima terá o seguinte resultado após ser transpilado:

var nav = React.createElement(   "nav",   { className: "menu" },   React.createElement(     "ul",     null,     React.createElement(       "li",       null,       React.createElement(         "a",         { href: "#" },         "Home"       )     ),     React.createElement(       "li",       null,       React.createElement(         "a",         { href: "#" },         "About"       )     )   ) );

Viu? Eu já havia citado que isso não é HTML.

Element

No exemplo acima, o transpiler englobou os nós com a função React.createElement. Isso se dá porque neste caso, utilizamos o preset babel-preset-react e nele está contido o plugin transform-react-jsx, que utiliza por padrão o Pragma React.createElement.

Esse assunto já foi citado no meu artigo sobre Preact, e você poderá verificar que, no exemplo do Preact, é necessário alterar o Pragma. No Preact, a função que manipula o nó é a função h.

Vamos entender melhor esta estrutura. Para isto, iremos analisar um pequeno caso, apenas um elemento h1.

<h1 className="title">Hello World</h1>

Isso irá ser transpilado para isto:

React.createElement(   "h1",   { className: "title" },   "Hello World" );

Parâmetros da função createElement:

  • Type

  • Propriedades

  • Children

O objetivo é tornar o resultado compreensível para ser renderizado. A função irá retornar um object com a estrutura abaixo.

 {   type: 'h1',   props: { className: 'title' },   children: ['Hello World'], }

Méritos do JSX

  • Por se parecer com HTML, pessoas menos técnicas ainda podem entender e modificar as partes necessárias.

  • Você pode aproveitar todo o poder do JavaScript em HTML e evitar aprender ou usar uma linguagem de modelos.

Quem usa?

Existe outras libs e frameworks além do React que utilizam JSX.

  • Preact

  • Inferno

  • React-Native

  • Vuejs(Opcional)

Share this post

JSX

www.braziljs.org
Share
Comments
Top
New
Community

No posts

Ready for more?

© 2023 BrazilJS
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing