React Intro

7909 ワード
Version:15.01
Reactは、ユーザーインタフェースを構築するJSライブラリです.
  • はUIにのみ使用され、多くの人がReactをMVCのViewに使用しています.ReactはView以外のテクノロジースタックに制限を与えないため、既存のプロジェクトで小さな特性を使用するのは簡単です.
  • 仮想DOM ReactはDOMを抽象化し、プログラミングモデルがより簡単で、性能がより良い.Reactは、ノードを使用してサービス側でレンダリングすることもできます.また、React Nativeを使用してオリジナルアプリケーションをサポートすることもできます.
  • データストリームReactは、一方向応答型データストリームを実現し、これによりテンプレートが減少し、従来のデータバインディングよりも推論が容易になる.

    • **単純なコンポーネント**React構築は、データ入力を受け入れ、表示する内容を返すrender()メソッドを実現します.この例ではJSXというクラスXML構文を用いる.作成した入力データを入力し、render()はthis.propsで取得できます.Reactを使用する場合、JSXは必須ではなくオプションです.「Compiled JS」をクリックすると、JSXコンパイラによって生成されたオリジナルJSコードが表示されます.
    JSXコード:
    var HelloMessage = React.createClass({
  render: function() {
    return 
    Hello {this.props.name}
    ;
  }
});

ReactDOM.render(, mountNode);

    対応JSコード:
    "use strict";

var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

    **1つのステータスコンポーネント**入力データ(this.propsを介して)を受け入れるだけでなく、コンポーネントは内部ステータスデータ(this.stateを介して)を維持することができます.コンポーネントのステータスデータが変更されると、レンダリングされたラベルもrender()を再励起することによって更新されます.
    JSXコード:
    var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      
    Seconds Elapsed: {this.state.secondsElapsed}
    
    );
  }
});

ReactDOM.render(, mountNode);

    対応JSコード:
    "use strict";

var Timer = React.createClass({
  displayName: "Timer",

  getInitialState: function getInitialState() {
    return { secondsElapsed: 0 };
  },
  tick: function tick() {
    this.setState({ secondsElapsed: this.state.secondsElapsed + 1 });
  },
  componentDidMount: function componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function componentWillUnmount() {
    clearInterval(this.interval);
  },
  render: function render() {
    return React.createElement(
      "div",
      null,
      "Seconds Elapsed: ",
      this.state.secondsElapsed
    );
  }
});

ReactDOM.render(React.createElement(Timer, null), mountNode);

    **1つのアプリケーション**propsとstatesを使用して、小さなTodoアプリケーションを統合することができます.この例ではstateを使用して、現在のプロジェクトリストとユーザー入力テキストを追跡します.イベントプロセッサは、ライン内でレンダリングされているように見えますが、イベントエージェントを使用して収集され、実装されます.
    JSXコード:
    var TodoList = React.createClass({
  render: function() {
    var createItem = function(item) {
      return 
  • {item.text}
    • ;
    };
    return 
      {this.props.items.map(createItem)}
    ;
  }
});
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([{text: this.state.text, id: Date.now()}]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      
    
        
    TODO
    
        
        
    
          
          
        
    
      
    
    );
  }
});

ReactDOM.render(, mountNode);

    対応JSコード:
    'use strict';

var TodoList = React.createClass({
  displayName: 'TodoList',

  render: function render() {
    var createItem = function createItem(item) {
      return React.createElement(
        'li',
        { key: item.id },
        item.text
      );
    };
    return React.createElement(
      'ul',
      null,
      this.props.items.map(createItem)
    );
  }
});
var TodoApp = React.createClass({
  displayName: 'TodoApp',

  getInitialState: function getInitialState() {
    return { items: [], text: '' };
  },
  onChange: function onChange(e) {
    this.setState({ text: e.target.value });
  },
  handleSubmit: function handleSubmit(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([{ text: this.state.text, id: Date.now() }]);
    var nextText = '';
    this.setState({ items: nextItems, text: nextText });
  },
  render: function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(
        'h3',
        null,
        'TODO'
      ),
      React.createElement(TodoList, { items: this.state.items }),
      React.createElement(
        'form',
        { onSubmit: this.handleSubmit },
        React.createElement('input', { onChange: this.onChange, value: this.state.text }),
        React.createElement(
          'button',
          null,
          'Add #' + (this.state.items.length + 1)
        )
      )
    );
  }
});

ReactDOM.render(React.createElement(TodoApp, null), mountNode);

    外部プラグインを使用するコンポーネント
    Reactは非常に柔軟で、他のライブラリやフレームとインタラクティブなフックを提供しています.この例では、marked(外部Markdownライブラリ)を使用して、テキストドメイン内のコンテンツをリアルタイムで変換します.
    JSXコード:
    var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Type some *markdown* here!'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.value});
  },
  rawMarkup: function() {
    return { __html: marked(this.state.value, {sanitize: true}) };
  },
  render: function() {
    return (
      
    
        
    Input
    集約と継承--Maven in Action読書ノート
    SpringCloud-Alibaba-Nacos