準備

パブリックフォルダー、.babelrc、webpack.config.js、package.jsonのコピー、vue関連モジュールの削除、依存関係のインストール
質問：要素の表現は何ですか？

React jsx

Reactは通常のjsの代わりにJSXを使用します
JSXは、XMLによく似たJavaScript拡張機能です
jsxを使用する必要がありますか？

JSXは、jsコードにコンパイルされた後に最適化されるため、効率的に実行されます
タイプセーフ、コンパイル中にエラーが見つかる
jsxを使用してテンプレートを作成する方が簡単で高速です

質問：HTMLタグの属性を何気なく追加できますか？
jsxは実際にはjsであるため、classやforなどの一部の識別子はxml属性名として推奨されません（classはクラスのキーワード、forはループのキーワードです）代わりに、classNameとhtmlForはReactDOMでクラスとforに対応するために使用されます

className和htmlFor

jsxのクラス
正しい文章
jsxの場合（フォームラベルなど）
正しい文章

js式

vue {{1 + 1}} // 2
反応{1 + 1} // 2

インラインスタイルの記述方法

ここに画像の説明を挿入

jsxコメント書き込み

コメントは{}で記述する必要があります
単一行コメント
複数行コメント

配列

ここに画像の説明を挿入

一意のキー値を書き込まないと警告が表示されます

反応成分

機能コンポーネント-使用されたjsの機能
クラスコンポーネント— es6を使用するクラス

機能部品

UIコンポーネント、ステートレスコンポーネントとも呼ばれます
データのレンダリングのみを担当

const HelloWorld = () => (<div>函数式组件</div>)

クラスコンポーネント

ユニバーサルコンポーネント
es6のクラスを使用してコンポーネントを実装する

使用ES6クラスの継承は、クラス構成要素が反応する通常のクラスに変換される
方法を使用して親クラスから継承されるレンダリングコードJSXの**、**リターン部を

コンポーネントのインポートとエクスポート

vue定義コンポーネントエクスポートコンポーネントインポートコンポーネントレジスタコンポーネント使用コンポーネント
反応定義コンポーネントエクスポートコンポーネントインポートコンポーネント使用コンポーネント
機能部品はどうですか？

コンポーネントのステータス

機能コンポーネント/クラスコンポーネント
機能コンポーネントは、ステートレスコンポーネント-クラスコンポーネントとも呼ばれます。

ES6クラスと継承を確認する

class Student {
  // 构造方法  this 代表当前的实例
  // constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
  constructor (age,username) {
    this.age = age
    this.username = username
  }

  run () {
    console.log(this.username + '跑步')
  }
}

// const stu = new Student(18, 'zywoo')
// stu.run()

// Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多
// Pupil 和 Student 类一模一样
// class Pupil extends Student {}
// const stu = new Pupil(18, 'zywoo')
// stu.run()

// 子类添加自己的属性和方法
class Pupil extends Student {
  constructor (age, username, hobby) {
    // super 表示父类的构造函数，用来新建父类的this对象
    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错
    // 因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
    // ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。 -- 我是李刚的爸爸
    // ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。 -- 我爸是李刚
    super(age, username)
    this.hobby = hobby
  }

  run () {
    console.log(this.username + '玩' + this.hobby)
  }
}

const stu = new Pupil(18, 'zywoo', '篮球')
stu.run()

コンポーネントのステータス

コンポーネントリストレンダリング-シングルレイヤートラバーサル

mapメソッドは配列を返し、reactはデフォルトで配列を展開します

import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
  constructor (props) {
    super(props) // 继承了父类的属性和方法
    // 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
    this.state = { // 添加当前组件的状态  ----  类似于vue的data
      message: 'hello world',
      list: [
        'html',
        'css',
        'js'
      ]
    }
  }
  render () {
    return (
      <div>
        <h1>{ this.state.message }</h1>
        <ul>
          {   // react 使用 map 遍历数据（通用）
            this.state.list.map((item, index) => {
              // item 代表的数据的每一个元素
              // index 代表索引值
              // 返回一段遍历之后的JSX语法代码
              // 遍历必写key，key具有唯一性 跟vue思想中保持一致
              return (
                <li key={index}>{ item }</li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

export default HelloWorld

コンポーネントリストレンダリング-マルチレイヤートラバーサル

import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
  constructor (props) {
    super(props) // 继承了父类的属性和方法
    // 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
    this.state = { // 添加当前组件的状态  ----  类似于vue的data
      message: 'hello world',
      list: [
        {
          a: 'html',
          arr: ['H5']
        },
        {
          a: 'css',
          arr: ['C3']
        },
        {
          a: 'js',
          arr: ['ES6','jQuery']
        },
      ]
    }
  }
  render () {
    return (
      <div>
        <h1>{ this.state.message }</h1>
        <ul>
          {   // react 使用 map 遍历数据（通用）
            this.state.list.map((item, index) => {
              // item 代表的数据的每一个元素
              // index 代表索引值
              // 返回一段遍历之后的JSX语法代码
              // 遍历必写key，key具有唯一性 跟vue思想中保持一致
              return (
                <li key={index}>web前端课程{ item.a }
                  <ol>
                    {
                      item.arr.map((itm, idx) => {
                        return (
                          <li key={idx}>{itm}</li>
                        )
                      })
                    }
                  </ol>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
export default HelloWorld