ReactJs - 1.2 Hello world

모든 언어의 시작은 Hello world 라고 생각한다. 시작이 반이라니..

codepen 이라는 사이트를 통해서 Reactjs를 위한 환경 설치를 할 필요없이 테스트를 해볼 수 있다.

테스트 사이트 : http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

                                <codepen을 이용한 hello world 예제>

hello world의 코드는 아래와 같습니다.

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

<div id="root">   <!-- This div's content will be managed by React. --> </div>

간략하게 코드를 설명하면 ReactDom이라는 탑 레벨의 API를 이용하여 render()라는 함수를 호출한 것입니다. 

reder()함수는 아래와 구성되어있습니다.

ReactDOM.render(   element,   container,   [callback] }

container:  반영한 react요소( ex: hello world 코드의  html의 div)

element: react요소안에 적용할 값

hello wold 코드에서 보면 root 라는 div태그 블록 안에  ‘hello wold’라는 값을 적용하는 겁니다. 적용시 결과는 html의 아래코드와 같다고 볼 수 있습니다.

<div id="root">     <h1>Hello, world!</h1> </div>

위의 코드가 짧지만 이용하기 위해서는 어느정도 javascript에 대한 이해도가 필요합니다. 

참조

https://facebook.github.io/react/docs/hello-world.html

https://facebook.github.io/react/docs/react-dom.html