reactフレームワーク学習(一)

3862 ワード
実習技術倉庫
React
https://react.docschina.org/
ユーザーインターフェースを構築するためのJavaScriptライブラリ
長所
宣言式
ReactはインタラクティブUIの作成を容易にした.あなたが適用する各状態のために簡潔なビューを設計し、データが変更されるとReactは効果的にコンポーネントを更新し、正確にレンダリングすることができます.
声明のようにUIを作成すると、コードがより確実になり、調整しやすくなります.
コンポーネント化
それぞれの状態を持つコンポーネントを作成し、さらに複雑なUIを構成する.
コンポーネント論理は、JavaScriptを使用して、モジュールではなく、簡単にアプリケーションでデータを転送し、DOMから状態を分離することができます.
一度の学習で,至るところで編集する.
今はどんな技術スタックを使っていても、既存のコードを書き換える必要がなく、いつでもReactを導入して新しい特性を開発することができます.
ReactはNodeを使ってサーバーのレンダリングを行ったり、使ったりすることもできます. React Native 原生移動アプリケーションを開発します.
簡単なコンポーネント
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));
Reactコンポーネントは名前を使います.  render() 入力されたデータを受信し、展示すべき内容を返す方法です.このようなXMLの書き方は、例ではJSXと呼ばれています.着信されたデータはコンポーネント内を通過することができる.  this.props はい、  render() アクセス
Reactを使う時はJSX文法を使わなくてもいいです.試しに使う Babel REPLは、JSXが元のJavaScriptコードにコンパイルされたステップを知る.
状態コンポーネント
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      

        Seconds: {this.state.seconds}
      

    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('timer-example')
);
外部データの使用以外(  this.props アクセス)以外にも、コンポーネントはその内部の状態データを維持することができます.  this.state アクセスコンポーネントの状態データが変更されると、コンポーネントは再び呼び出します.  render() メソッドに対応するマークを再レンダリングします.
適用
使用  props 和  state、簡単なTodoアプリケーションを作成できます.例では、使用します.  stateは、既存の処理待ち事項リストおよびユーザの入力を保存する.イベントプロセッサはインラインでレンダリングされているように見えるが、それらはイベントによって収集と呼び出しを依頼されるだけである.
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      

        
TODO

        
        

          
          
          
        

      

    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      
    
        {this.props.items.map(item => (
          
  • {item.text}
    • 
        ))}
      

    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('todos-example')
);
コンポーネントに外部プラグインを使う
Reactは他のフレームやライブラリと一緒に使うことができます.例では名前を使っています. remarkable の外部Markdownライブラリです.リアルタイムで変換できます. 
カスタムd 3時間軸