絶対的な初級は反応する

学習はゼロから反応して、私は自分の道を通ってReactJS.org's tutorial . 私はコードをコピーして貼ることによって私の最初のアプリを構築しました.しかし、それは働いた!今日、私は私が走ったコードのビットを理解することを望みます.始めましょう.

このビット私は理解していると思う.React.Component は基本的なコンポーネントクラスで、ShoppingList 拡張するクラス.私は、コンポーネントがArender() いくつかのHTML要素を返します.これは<div> とclassName 属性-- HTMLに似ていますかclass 属性?には<h1> ) と順序なしリスト<ul> ) すべての会社のマークの購入したい.this.props.name , 私は推測するprops 変数this , 私が仮定しているのはShoppingList クラス.アクセスname , この例ではXMLのようなタグで定義されます.そのようなプロパティを任意に定義できるなら、この構文はとてもクールです.どうすればname to ShoppingList , でも?このコードはエラーをスローしますか?またはちょうどどこにもレンダリング{this.props.name} でしょうか?

"When our data changes, React will efficiently update and re-render our components."

それで、私が考えたように、それは反応プログラミング・フレームワークです.それはその名前によって意味をなす.

"Here, ShoppingList is a React component class, or React component type. A component takes in parameters, called props (short for “properties”), and returns a hierarchy of views to display via the render method."

それは多かれ少なかれ私が思ったことですが、「見解の階層」とは何かを理解していません.このチュートリアルでは、上記のコードのブロックはHTMLのように見えます.

React.createElement("div", { className: "shopping-list" },
  React.createElement("h1", null, "Shopping List for ", props.name),
  React.createElement("ul", null,
    React.createElement("li", null, "Instagram"),
    React.createElement("li", null, "WhatsApp"),
    React.createElement("li", null, "Oculus")
  )
 );

この種の違いを思い出すJavaFX with and without FXML . FXMLでJava GUIを構築するとき、マークアップはよりXMLのようです.それがなければ、それはちょうど上記のコードのブロックのように見えます、そこで、機能と特性は点を使ってアクセスされます. ) 演算子.
"createElement は、API reference 「チュートリアルでは、そのリンクをクリックして、いくつかのきちんと文書化されたコードを見つけたいと思います.

ドキュメントは本当にいいですね.かなり簡単に従うと理解.アイトク[props] プロパティのリストですか?上記のコードブロックで使用した場合、2番目の引数をcreateElement 固い括弧で{className: 'shopping-list'} ). の一覧表[...children] 我々がそれを渡すとき、括弧で囲まれませんcreateElement , …でも私はここで少し混乱している.たぶんリストの2種類がありますか?多分、1つのリストと辞書ですか?

それはかなりきれいです.だから、小さなコンポーネントからピースによってアプリのピースを構築することができます、大きなものの中でそれらを使用して.次のステップは、私が最後のエントリにコピーしペーストしたJavaScriptコードを検査することです.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
      ...

それはかなり自明に見えます.チュートリアルのノートとして、我々はSquare クラスとBoard チックタックトーゲームの9つの正方形をレンダリングするクラス.いくつかのことは私のためにコードには、私は推測して残して残っている.
...そうです.次のステップは2つの小さなものを埋めることです

  renderSquare(i) {
    return <Square />;
  }

to

  renderSquare(i) {
    return <Square value={i} />
  }

変化

        {/* TO-DO */}

to

        {this.props.value}

これは、ボタンに表示される四角形の“値”を渡します.このコードを変更して実行npm start 再び.そしてまた、それはレンダリングするために非常に長い時間がかかります.しかし、それは働きます.

...それで、それは何かです.

Congratulations! You’ve just “passed a prop” from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.

次のことを加えることですonClick メソッドbutton インSquare , JavaScriptを開くalert() ボックス.私は、私が数年前に持っていたJavaScript経験で以前にこれらの種類を見ました.
次のことを置き換えることですonClick 関数は"矢印関数"として機能します.他のほとんどのプログラミング言語は「ラムダ関数」として参照しています.

onClick={function() { alert('click'); }}

...…になる.

onClick={() => alert('click')}

それは入力のビットを節約できます.チュートリアルでは、我々は機能を渡す必要があることに注意してくださいonClick . 我々が書くだけであるならば..

onClick={alert('click')}

...その後、アラートは、コンポーネントが再レンダリングするたびに発生します.どちらが私たちの欲しいものではないでしょう.
次に、追加state にSquare Classので、それがクリックされるかどうか「覚えていることができます」.これはほとんどのOOP言語のインスタンス/メンバー変数と似ています.我々は反応オブジェクトを設定できるように見えるstate インconstructor クラス定義内の関数

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    };
  }
}

ここで二つ

このSquare クラスは、親クラスのコンストラクターを明示的に呼び出しますReact.Component ) with super() , 通過props を返します.

チュートリアルは、実際にはnull , 私が想定しているのはタイポです

In JavaScript classes, you need to always call super when defining the constructor of a subclass. All React component classes that have a constructor should start it with a super(props) call.

どうもsuper(props) は必須ですconstructor 任意のサブクラスです.Javaのようにコンストラクタの最初の行でなければならないのでしょうか?上の抜粋はそれについてあいまいである.
私たちはonClick のbutton ボタンの状態を変更するにはsetState() , それは十分に簡単です.

onClick={() => alert('click')}

変更点

onClick={() => this.setState({value: 'X'})}

When you call setState in a component, React automatically updates the child components inside of it too.

これは反応性依存性のようです.オブジェクト更新および他のオブジェクトがそれに依存する場合、それらの従属するオブジェクトは同様にアップデートされる.
私がする最後のことはReact Developer Tools Chrome拡張モジュールで、ブラウザで自分の反応コードを調べることができます.

いいね
まあ、私は間違いなく反応がどのように動作を理解し始めている.クラスやコンストラクタやラムダ関数のような身近なものを見ることは、これが私がかなり簡単に拾うことができる何かであることを確信しています.これまで、私は基本的にちょうど作っていましたonClick ステロイドについては、このフレームワークを行うことができます.私はクールなインタラクティブなWebページを作るのを楽しみにしています!