1. プロジェクトを作成するための足場
1.node -v
2.npm install -g create-react-app 安装脚手架
3.create-react-app my-react
4.cd my-react
5.npm start正常に実行されました
2 カタログを見る
インデックスjsエントリファイル
3. app.jsコンポーネントの導入とページの記述場所
3. 値を動的に書き込む
4.コンポーネントの紹介
1.コンポーネントを作成し、その中に必要なコンポーネントを配置し、機能コンポーネントも使用します。
2.app.jsで導入
非常に簡単です。インポートして <Home/> を呼び出すだけです。
5.コンポーネントの値の受け渡し
app.js 親コンポーネント
サブアセンブリ
コンポーネントによって渡される値の型を制御し、型を検証します
7.コンポーネントスロット
8. 機能コンポーネントとクラスコンポーネント
上記はすべて機能コンポーネントで記述されていますが、これをクラスコンポーネントにするにはどうすればよいでしょうか。
まず、この 2 つの違いを見てみましょう。
1. 関数コンポーネントは props オブジェクトを受け取り、react 要素を返す純粋な関数ですが、クラス コンポーネントは React.Component を継承し、react 要素を返すレンダー関数を作成する必要があります。
2. 関数コンポーネントにはライフサイクルと状態がありませんが、クラスコンポーネントにはライフサイクルと状態があります。
Home コンポーネントを拡張するために、home コンポーネントをクラス コンポーネントに変更します。
書き込みの変更:
"であった"
9. イベントの追加
1. ボタンを追加します。今回はクラスを使用するので、オブジェクト指向を使用して、年齢 ➕ を操作するイベント メソッドを作成します。
10.ページ上で状態を導入し、値を応答的に変更します
11. サブコンポーネントは親コンポーネントと同様に値を渡します
例: 子コンポーネントの年齢を親コンポーネントに渡す
サブアセンブリ:
12. コンポーネント間で値を渡す
たとえば、ヘッダーの値は兄弟コンポーネントで定義されます。
アイデア: ヘッダーの値は親コンポーネントによって渡されます。
兄弟コンポーネントのホームは値を親コンポーネントに渡し、親コンポーネントはそれを受信して、子コンポーネントのヘッダーに渡します。
サブコンポーネント: header.js
13. データ双方向バインディング
入力ボックスに内容を入力すると、外側の値もそれに応じて変化します。
サブアセンブリ:
14.hooks
反応フック フックはフックと呼ばれます。フック関数はプログラミングのアイデアであり、アスペクト指向プログラミングと呼ばれます。
(AOP)
1. プロセス指向プログラミング（関数呼び出し）
2. オブジェクト指向プログラミング (オブジェクト (抽象化、カプセル化、継承、ポリモーフィズム) に基づく)
3. AOP アスペクト指向プログラミング (vue.js 反応) はライフサイクルを提供します。これらの関数はフック関数と呼ばれます。フック関数の機能は製品の機能を拡張することです。Vue はフック関数のオープン インターフェイスをユーザーに公開します。 、ユーザーは を使用して、特定の実行に進むことができます)
4. インターフェイス指向プログラミング (API プログラミング)。フロントエンドとバックエンドを分離するこの形式がインターフェイス指向プログラミングです。
5. 関数型プログラミング (数学は非常に要求が厳しく、フロントエンドで長い道のりを歩みたい場合には不可欠です)
では、反応フックとは何でしょうか?
React では、コンポーネントは大きく 2 つのカテゴリに分けられます。1 は機能コンポーネント、2 はクラス コンポーネント (state、setState)
最大の違いは、クラス コンポーネントは独自の状態を持ちますが、関数コンポーネントはステートレスであることです。
関数型コンポーネントの方が記述が簡単であることは誰もが認識しているため、誰もが関数型コンポーネントを使用してクラス コンポーネントを記述したいと考えています。
では、クラスコンポーネントの代わりに関数コンポーネントを使用できるのでしょうか?
可能であればフックのみを使用してください
1.ステータス変更
React 設定ルーティング
----全体的なアイデアは次のとおりです。ルーティング ファイルでルーティングを構成し、次にそのルーティング ファイルを App.js にインポートし、最後に App.js を src の下のindex.js にインポートします。
ルーティングの依存関係:
cnpm install [email protected] --save (一部の属性は 6.0 より上のバージョンで反復されているため、6.0 より前のバージョンをインストールします)
3. 2 つの新しいページを作成します
4. 新しいルーターフォルダーとindex.jsファイルを作成し、ルーティングを構成します
-- 必要なコンポーネントをインポートします。
--インポートルーティング:
--BrowserRouter パッケージを使用してレンダリング時のルーティングを構成します
7.使用
ブートストラップを使用してページを構築する (ブートストラップ構成ガイド http://t.csdn.cn/6ayKf)
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class login extends Component {
submin() {
this.props.history.replace('/Home')
}
render() {
return (
<div>
<Link to='/Home'>home</Link>
<form onSubmit={this.submin.bind(this)}>
<div className="form-group">
<label >账号：</label>
<input type="text" className="form-control" id="exampleInputEmail1" placeholder="输入账号"></input>
</div>
<div className="form-group">
<label >密码：</label>
<input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码"></input>
</div>
<button type="submit" className="btn btn-info">登录</button>
<button type="reset" className="btn btn-danger" onClick={this.rest}>重置</button>
</form>
</div>
)
}
}注: リンク ジャンプを直接使用することも、イベント ジャンプを使用することもできます。
例のフォームはBootstrapフレームワークを使用しているため、事前に依存関係を設定してください。