[react]Zeroch反応基礎課

6255 ワード
React テキストリンク
Zerochoの反応基礎レッスン(無料)を聞いて整理した内容
基本チュートリアル1
1. React.createClass->Class->Hooksに変更

  • Hooksは2018年10月に登場する.既存のジェネリック構成部品の関数構成部品を置き換えます.Facebookが発表した最新の標準技術.

  • 2019年上半期までに99%のアプリケーションがクラスコンポーネントだった.
    クラス構成部品と関数構成部品を同時に理解する必要があります.
    • 2.反応液使用の原因

  • 単一ページアプリケーション(SPA)を実装することで、ユーザー体験を向上させるため(リフレッシュ(画面点滅)を必要とせずにモバイルアプリケーションのように簡単にページをめくることができます).ネットよりアプリの方がユーザー体験が良いです.フィードバックを使用すると、Web上でアプリケーション・レベルのユーザー・エクスペリエンスを実現できます.

  • データ処理性:Facebookがなぜ応答-Facebookを作成したのかは、世界最大規模の単一サイトです.既存のフレームワーク(jQueryなど)では、大量のデータスクリーン連動(データとスクリーンの同期)をサポートすることは難しい.
    これらのデータ-フェイスブックによって作成されたライブラリ(フレームワーク)であり、画面連動やデータ処理が容易であるという利点があります.

  • Webサイトには、同じテンプレートと異なるコンテンツを持つ重複する要素がたくさんあります.重複するコードが多ければ多いほど、メンテナンスが難しくなり、コードの可読性が悪くなります.重複する要素をアセンブリ化して重複を回避します.
    • =>クリーンアップ:ユーザーエクスペリエンス、データとスクリーンの同期(同期)、冗長要素を組み合わせることで、保守性を向上
    基本チュートリアル2

  • 反応:JavaScript.jsファイルとして作成します.

  • Webパッケージ:以下に示すように、分割されたJavaScriptファイルをhtmlで認識できるように1つのファイルにマージします.
    <html>
    <head></head>
    <body>
        <script src=“like_button.js”></script>
    </body>
</html>

  • React.createElementメソッドを使用して、LikeButtonクラスのrender()メソッドの戻り値としてHTML Elementのコードを生成します.
    ```html
<div id=“root”></div>
<script>
    const e = React.createElement;

    class LikeButton extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            return e(‘button’, { onClick: () => { console.log(clicked); }, type: ‘submit’ }, ‘Like’);
        }
    }
```
    • 基本チュートリアル3

  • htmlプロパティ:javascriptアルパカタグを使用する
    (Ex: onclick -> onClick)

  • ステータス(state):変更可能な部分
    • 	class LikeButton extends React.Component {
		constructor(props) {
			super(props);
			this.state = {
				liked: false,
			};
		}

		render() {
			return e(
				‘button’,
				{{ onClick: () => { this.setState({ liked: true })}, 
				type: ‘submit’ },
				this.state.liked === true ? ‘Liked’ : ‘Like’,
			);
		}
	}

  • React.代替createElement->JSXの使用(Javascript+XML)

  • JSX:htmlではなくxmlです.右かっこを使用する必要があります.文法はhtmlより厳しいです.
    • 		render() {
			return <button type=“submit” onClick={() => { this.setState({ Liked: Tre })}>Like</button>;
		}
	}

	ReactDOM.render(<LikeButton />, document.querySelector(‘#root’));

  • Bebelを使用してJSX構文をcreateElementと同じ既存の構文に変換します.
    変換してあげる

  • Bebel:実験的構文、最新構文のJavaScriptをすべてのブラウザが返す標準構文に変換します.

  • 大文字で始まるタグ:反応素子
    小文字で始まるタグ:htmlタグ
    • QQ登録で出会った穴
    [python符号化練習]チュートリアル、ディクソン練習問題