시작하세요. 리액트프로그래밍

리액트에 대해 설명한 책으로 중요내용을 정리해 보았다. 

---

가장 필수적인 것은,

ReactDOM.render (element,id);
여기서 rendering 된 element 가 해당장소에 들어간다.

React.DOM.hi() 과 같은 API가 다수 지원됨.
var Component = React.createClass()
React.createElement(Component) 를 사용하여 만들거나,
React.createFactory(Component) 도 가능하다.
이렇게 만들어진 클래스를 컴포넌트 라고 한다.

property 는 this.prop 를 이용하여 사용 가능 하다.
propTypes를 사용하면, 컴포넌트가 받을 프로퍼티를 미리 선언할 수 있고, 값의 유효성 검사를 할 수 있다.

아래 처럼 textarea 에 리스너를 등록 할 수 있다.
컴포넌트에 _textChange 를 정의해 놓으면 자연스럽게 이벤트 발생시 호출된다.
React.DOM.textarea({
    value: this.state.text,
    onChange: this._textChange,
}),

책의 예제는 https://github.com/stoyan/reactbook 의 github 에서 다운가능하다.

여기에서 빌드 에러가 수정된 버젼도 있으니 참고, 

https://github.com/ekonoval/reactBook7QA 

 

코드는 ./script/build.sh 의 스크립트에 의해 build 되어,
bundle.js , bundle.css 의 2개 파일이 생성되고, index.html 까지 3개의 파일이 나오면 개발 완료이다.

babel, 및 기타 부수적인 설정이 필요한데, 이 모든 툴의 버젼이 중요하다.
아래에서 확인된 버젼으로 빌드하면 동작 되는 것이 확인 가능 하다.

책의 프로젝트 whinepad 는 http://www.whinepad.com/
에서 동작확인이 가능하다.

마지막에서 소개된 플럭스는 컴포넌트간 통신을 간단히 정리해 준다고 한다. 즉, onDataChange 를 대신하여 저장소 역활을 하는 모듈을 만들었고, fbemitter 라는 작은 라이브러리가 사용되었다.
$npm i --save-dev fbemitter