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 #86

Merged
merged 7 commits into from
Apr 7, 2019
Merged
Changes from 2 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
27 changes: 13 additions & 14 deletions content/docs/react-without-jsx.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
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.
React를 사용할 때 JSX는 필수사항이 아닙니다. 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하면 편리합니다.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"필수사항이 아닙니다." -> "필수가 아닙니다." 로 제안드려요~

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"사용하면 편리합니다." -> "사용하는 것은 특히 편리합니다." 로 제안 드려요.


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에서도 할 수 있습니다.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"JavaScript에서도" -> "JavaScript로도" 로 제안드려요.


For example, this code written with JSX:
예를 들어 다음의 JSX로 작성된 코드는

```js
```JavaScript
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
Expand All @@ -23,9 +23,9 @@ ReactDOM.render(
);
```

can be compiled to this code that does not use JSX:
아래처럼 JSX를 사용하지 않은 코드로 컴파일될 수 있습니다.

```js
```JavaScript
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
Expand All @@ -38,13 +38,13 @@ 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로 변환되는 예시를 더 보고 싶다면 [the online Babel compiler](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.
컴포넌트는 문자열, `React.Component`의 하위 클래스 또는 무상태 컴포넌트를 위한 순수 함수로 제공됩니다.

If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
`React.createElement`를 너무 많이 입력하는 것이 피곤하다면 단축 폼으로 할당하는 방법이 있습니다.

```js
```JavaScript
const e = React.createElement;

ReactDOM.render(
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를 사용할 수 있습니다.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"단축 폼으로" -> "짧은 변수에" 는 어떨까요?


더 간결한 구문을 제공하는 [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript)나 [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) 같은 커뮤니티 프로젝트를 참고해도 좋습니다.