|
1 | 1 | ---
|
2 | 2 | id: react-without-jsx
|
3 |
| -title: React Without JSX |
| 3 | +title: React bez JSX |
4 | 4 | permalink: docs/react-without-jsx.html
|
5 | 5 | ---
|
6 | 6 |
|
7 |
| -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. |
| 7 | +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. |
8 | 8 |
|
9 |
| -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. |
| 9 | +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. |
10 | 10 |
|
11 |
| -For example, this code written with JSX: |
| 11 | +Na przykład, ten fragment kodu napisany z użyciem JSX: |
12 | 12 |
|
13 | 13 | ```js
|
14 | 14 | class Hello extends React.Component {
|
15 | 15 | render() {
|
16 |
| - return <div>Hello {this.props.toWhat}</div>; |
| 16 | + return <div>Witaj, {this.props.toWhat}</div>; |
17 | 17 | }
|
18 | 18 | }
|
19 | 19 |
|
20 | 20 | ReactDOM.render(
|
21 |
| - <Hello toWhat="World" />, |
| 21 | + <Hello toWhat="Świecie" />, |
22 | 22 | document.getElementById('root')
|
23 | 23 | );
|
24 | 24 | ```
|
25 | 25 |
|
26 |
| -can be compiled to this code that does not use JSX: |
| 26 | +może być skompilowany do tego kodu, który nie korzysta z JSX: |
27 | 27 |
|
28 | 28 | ```js
|
29 | 29 | class Hello extends React.Component {
|
30 | 30 | render() {
|
31 |
| - return React.createElement('div', null, `Hello ${this.props.toWhat}`); |
| 31 | + return React.createElement('div', null, `Witaj, ${this.props.toWhat}`); |
32 | 32 | }
|
33 | 33 | }
|
34 | 34 |
|
35 | 35 | ReactDOM.render(
|
36 |
| - React.createElement(Hello, {toWhat: 'World'}, null), |
| 36 | + React.createElement(Hello, {toWhat: 'Świecie'}, null), |
37 | 37 | document.getElementById('root')
|
38 | 38 | );
|
39 | 39 | ```
|
40 | 40 |
|
41 |
| -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). |
| 41 | +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). |
42 | 42 |
|
43 |
| -The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components. |
| 43 | +Komponent może być ciągiem znaków, podklasą `React.Component` albo zwykłą funkcją. |
44 | 44 |
|
45 |
| -If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand: |
| 45 | +Aby uniknąć ciągłego pisania `React.createElement`, warto zastosować poniższy wzorzec: |
46 | 46 |
|
47 | 47 | ```js
|
48 | 48 | const e = React.createElement;
|
49 | 49 |
|
50 | 50 | ReactDOM.render(
|
51 |
| - e('div', null, 'Hello World'), |
| 51 | + e('div', null, 'Witaj, Świecie'), |
52 | 52 | document.getElementById('root')
|
53 | 53 | );
|
54 | 54 | ```
|
55 | 55 |
|
56 |
| -If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX. |
57 |
| - |
58 |
| -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. |
| 56 | +Jeśli używa się tej skróconej formy `React.createElement`, korzystanie z Reacta bez JSX może być równie wygodne. |
59 | 57 |
|
| 58 | +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ę. |
0 commit comments