深みのあるreactとredux読書ノート1

一、Reactの新しい先端思考方式
第1章:主に簡単にcreate-react-appを通じて自分のreactコンポーネントを作成しましょう.create-react-appは、npmから配布されたインストールパッケージで、nodeとnpmがインストールされていることを確認した後、→npm install--global create-react-appを実行すればよい.create-react-appをインストールすると、実行→create-react-appに「フォルダ名」を付けることでデフォルトのreactコンポーネントを作成できます.
※1. importはes 6構文でファイルブロックをインポートする方法です.es 6文法は大きな集合です.ほとんどの構文機能は最新のブラウザでサポートされています.
※2.componentはコンポーネントのベースクラスとして、多くのコンポーネントが共有する機能を提供しています.例えば、class ClickCounter extends Component{}:clickcounterコンポーネントを作成し、componentはclickcounterの親です.

import React, { Component } from 'react';

class ClickCounter extends Component {

  constructor(props) {
    super(props);
    this.onClickButton = this.onClickButton.bind(this);
    this.state = {
      count: 0
    }
  }

  onClickButton() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    const counterStyle = {
      margin: '16px'
    }
    return (
      

        Click Me
        

          Click Count: {this.state.count}
        
      
    );
  }
}

export default ClickCounter;

※3.import React ,{Component} from "react"; jsxがある場合はReactをインポートする必要があることを知っておく必要があります.jsxは最終的にReactの式に翻訳されるからです.(jsxとはJavaScriptの文法拡張であり、JavaScriptでhtmlのようなコードを書くことができます.Reactは、1つの要素がHTMLなのかjsxなのかを判断する原則は、最初のアルファベットが大文字であるかどうかを見ることですので、コンポーネントは頭文字が大文字であることに注意してください.)
※4. つまりreactの奥義の理念は1つの公式(データ駆動レンダリング):UI=render(data);関数は純関数であり,純関数とは何か,まともな関数であり,他の余分な副作用はなく,出力は入力した関数に完全に依存する.
※5.Domツリーはhtmlの抽象であり、Virtual DomはDomツリーの抽象である.(virtual Domはブラウザの部分には触れず、JavaScript空間にのみ存在するツリー構造で、上から下へのReactコンポーネントをレンダリングするたびに、今回発生したVirtual Domと前回のVirtual Domを比較して、比較すると違いが発見され、本格的なDOMツリーを修正する際には違いの部分に触れるだけでよい)