Skip to content

Merge pull request #122 from yunkii/yunkii #122

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.

Sign up for GitHub

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 11 commits into from
Jan 24, 2020
Merged

Merge pull request #122 from yunkii/yunkii #122

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a95de31
docs: react without jsx
yunkii Dec 29, 2019
f60a7c6
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
d23041d
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
ce1ee97
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
c7439ef
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
c7ca8ea
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
e8754cd
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
8a098e9
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
ed4b70f
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
28281dc
Update content/docs/react-without-jsx.md
yunkii Jan 6, 2020
eababb0
Update content/docs/react-without-jsx.md
yunkii Jan 24, 2020
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
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: react-without-jsx
title: React Without JSX
title: 沒有 JSX 的 React
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 對於使用 React 並不是不可或缺的。當你不想在開發環境中設置編譯時，使用沒有 JSX 的 React 格外方便。

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.
每個 JSX 元素都只是呼叫 `React.createElement(component, props, ...children)` 的語法糖。所有任何你能用 JSX 做的事，你都能用純 JavaScript 做到。

For example, this code written with JSX:
比如，這段用 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:
可以編譯成這段沒有 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).
如果你想看更多 JSX 是如何轉換成 JavaScript 的範例，你可以嘗試[線上 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.
Component 可以是一個字串，或 `React.Component` 的 subclass，或一個單純用於 stateless component 的 function。

If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
如果你已經疲於不斷重複寫 `React.createElement`，一個常見的方式是賦予一個縮寫：

```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.
如果你使用這個 `React.createElement` 縮寫的格式，他可以跟沒有 JSX 的 React 一樣方便。

此外，你也可以參考社群專案像是 [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) 和 [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers)，這些專案提供了更為簡潔的語法。