JSX 코드에서 key1=value1 같은 속성과 값의 쌍은 createElement()에 전달하는 두 번째 인자와 동일하다. JSX에서 속성을 다루는 방법은 3장 뒷부분에서 좀 더 살펴볼 것이다. 일단은 속성이 없는 경우를 먼저 살펴보기로 한다. 다음은 우리의 오랜 친구인 Hello World를 자바스크립트로 작성한 예제다(ch03/helloworld/index.html).

 

예제 코드 3.1 자바스크립트로 작성한 Hello World

ReactDOM.render(
    React.createElement('h1', null, 'Hello world!'),
    document.getElementById('content')
)

---

 

JSX로 작성한 쪽이 훨씬 더 간단하다(ch03/hello-world-jsx/js/script.jsx).

 

예제 코드 3.2 JSX로 작성한 Hello World

ReactDOM.render(
    <h1>Hello world!</h1>,
    document.getElementById('content')
)

---