[JavaScript] 저희가 가상 DOM을 제공하는'React'에 대해 조사를 해봤어요.

이른바 React

React 정보

튜토리얼과 API 문서 등 알찬 느낌

샘플 소스(Starter Kit)도 다운로드 가능

<script src="http://fb.me/react-0.11.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>

$ bower install --save react

Yeoman에서 프로젝트 템플릿을 찾았습니다.

① generator-react-webpack

$ npm install -g generator-react-webpack

부트 생성기

$ yo react-webpack

파일 확장은 다음과 같습니다.

동작 확인

$ grunt serve

$ grunt build

② generator-react-gulp-browserify

$ npm install -g generator-react-gulp-browserify

$ npm install -g gulp

$ gem install sass

부트 생성기

$ yo react-gulp-browserify

$ bower install

최종적으로 파일은 다음과 같이 전개된다

동작 확인

$ gulp watch

브라우저로 접근해 보십시오 http://localhost:9000.

역시 이 시대 사람들은 이해하기 쉬워요.

/** @jsx React.DOM */

var React = window.React = require('react'),
    Timer = require("./ui/Timer"),
    mountNode = document.getElementById("app");

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
        <Timer />
      </div>
    );
  }
});

React.renderComponent(<TodoApp />, mountNode);

끝말