Skip to content

Translate react-without-jsx.md #175

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

Merged
merged 12 commits into from
Jan 21, 2020
31 changes: 15 additions & 16 deletions content/docs/react-without-jsx.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,58 @@
---
id: react-without-jsx
title: React Without JSX
title: React bez 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 nie jest wymagany do korzystania z Reacta. Korzystanie z Reacta bez JSX jest szczególnie wygodne, gdy nie chce się konfigurować kroku kompilacji w środowisku budowania.

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.
Każdy element JSX jest jedynie wygodniejszym odpowiednikiem wywołania metody `React.createElement(component, props, ...children)`. Wszystko więc, co da się zrobić korzystając z JSX, można również uzyskać za pomocą zwykłego JavaScriptu.

For example, this code written with JSX:
Na przykład, ten fragment kodu napisany z użyciem JSX:

```js
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
return <div>Witaj, {this.props.toWhat}</div>;
}
}

ReactDOM.render(
<Hello toWhat="World" />,
<Hello toWhat="Świecie" />,
document.getElementById('root')
);
```

can be compiled to this code that does not use JSX:
może być skompilowany do tego kodu, który nie korzysta z JSX:

```js
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
return React.createElement('div', null, `Witaj, ${this.props.toWhat}`);
}
}

ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
React.createElement(Hello, {toWhat: 'Świecie'}, null),
document.getElementById('root')
);
```

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).
Jeśli chcesz zobaczyć więcej przykładów konwersji składni JSX do kodu javascriptowego, wypróbuj [wersję online kompilatora 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.
Komponent może być ciągiem znaków, podklasą `React.Component` albo zwykłą funkcją.

If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
Aby uniknąć ciągłego pisania `React.createElement`, warto zastosować poniższy wzorzec:

```js
const e = React.createElement;

ReactDOM.render(
e('div', null, 'Hello World'),
e('div', null, 'Witaj, Świecie'),
document.getElementById('root')
);
```

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.
Jeśli używa się tej skróconej formy `React.createElement`, korzystanie z Reacta bez JSX może być równie wygodne.

Ewentualnie można zapoznać się z projektami społeczności, takimi jak [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) czy [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), które oferują bardziej zwięzłą składnię.