Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate React without JSX #56

Merged
merged 5 commits into from
Feb 10, 2019
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 10 additions & 11 deletions content/docs/react-without-jsx.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: react-without-jsx
title: React Without JSX
title: React sem JSX
permalink: docs/react-without-jsx.html
---

JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
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.
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved

Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript.
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.
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved

For example, this code written with JSX:
Por exemplo, esse código escrito com JSX:

```js
class Hello extends React.Component {
Expand All @@ -23,7 +23,7 @@ ReactDOM.render(
);
```

can be compiled to this code that does not use JSX:
pode ser compilado para esse código que não usa JSX:

```js
class Hello extends React.Component {
Expand All @@ -38,11 +38,11 @@ ReactDOM.render(
);
```

If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
Se você estiver curioso para ver mais exemplos de como JSX é convertido para JavaScript, pode checar [o compilador online do Babel](babel://jsx-simple-example).

The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
O componente pode ser fornecido como uma string, como uma subclasse de `React.Component`, ou ainda como uma função para componentes que não possuem estado (_state_).
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved

If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
Se você se cansar de ter que digitar sempre `React.createElement`, um padrão comum é atribuir a função à uma variável auxiliar:

```js
const e = React.createElement;
Expand All @@ -53,7 +53,6 @@ ReactDOM.render(
);
```

If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.

Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax.
Se você utilizar essa forma resumida de `React.createElement`, pode ser quase tão conveniente de utilizar o React sem JSX.
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved

Por outro lado, você pode buscar por projetos da comunidade como [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) e [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) que oferessem uma sintaxe mais amigável.
tibuurcio marked this conversation as resolved.
Show resolved Hide resolved