{"componentChunkName":"component---src-templates-docs-js","path":"/docs/react-without-jsx.html","result":{"data":{"markdownRemark":{"html":"

JSX não é obrigatório para utilizar o React. Utilizar o React sem JSX é especialmente conveniente quando você não quer configurar compilação no seu ambiente de build.

\n

Cada elemento JSX é apenas açúcar sintático (syntactic sugar) para a chamada da função React.createElement(component, props, ...children). Assim, quaisquer coisas que você pode fazer com JSX também podem ser feitas simplesmente com JavaScript.

\n

Por exemplo, esse código escrito com JSX:

\n

class Hello extends React.Component {\n  render() {\n    return <div>Hello {this.props.toWhat}</div>;\n  }\n}\n\nReactDOM.render(\n  <Hello toWhat=\"World\" />,\n  document.getElementById('root')\n);

\n

pode ser compilado para esse código que não usa JSX:

\n

class Hello extends React.Component {\n  render() {\n    return React.createElement('div', null, `Hello ${this.props.toWhat}`);\n  }\n}\n\nReactDOM.render(\n  React.createElement(Hello, {toWhat: 'World'}, null),\n  document.getElementById('root')\n);

\n

Se você estiver curioso para ver mais exemplos de como JSX é convertido para JavaScript, pode checar o compilador online do Babel.

\n

O componente pode ser fornecido como uma string, como uma subclasse de React.Component ou como uma função simples.

\n

Se você se cansar de ter que digitar sempre React.createElement, um padrão comum é atribuir a função à uma variável auxiliar:

\n

const e = React.createElement;\n\nReactDOM.render(\n  e('div', null, 'Hello World'),\n  document.getElementById('root')\n);

\n

Se você utilizar essa forma resumida de React.createElement, pode ser quase tão conveniente de utilizar o React sem JSX.

\n

Por outro lado, você pode buscar por projetos da comunidade como react-hyperscript e hyperscript-helpers que oferecem uma sintaxe mais amigável.

","frontmatter":{"title":"React sem JSX","next":null,"prev":null},"fields":{"path":"content/docs/react-without-jsx.md","slug":"docs/react-without-jsx.html"}}},"pageContext":{"slug":"docs/react-without-jsx.html"}},"staticQueryHashes":[]}