ここでは、コンポーネント システムをゼロから構築します。まず、前回の記事「フロントエンドのコンポーネント化の基礎」と「JSX を使用してコンポーネント パーサーを確立する」から、コンポーネントはマークアップと JavaScript を通じてアクセスできる環境であることがわかります。 したがって、最初のステップは、マークアップを使用できる環境を作成することです。ここでは、JSX を使用してマークアップのスタイルを設定する方法を学習します。ここでは、React と同じ JSX を使用してコンポーネントのスタイルを設定します。 JSX環境の構築一般的に、JSX は React の一部であると考えられています。実際、Facebook は JSX を純粋な言語拡張として定義しています。また、この JSX は他のコンポーネント システムでも使用できます。
プロジェクトの設定 それでは、基本から始めましょう。まず、新しいプロジェクト ディレクトリを作成する必要があります。 mkdir jsx コンポーネント NPMを初期化するもちろん、このプロジェクト フォルダーは任意のディレクトリに作成します。フォルダーを作成したら、そのディレクトリに入り、 npm 初期化 上記のコマンドを実行すると、いくつかのプロジェクト設定オプションが表示されます。必要に応じて入力してください。ただし、Enter キーを押し続けることもできます。その後、必要な学生が webpackをインストールする多くの学生は Wepack について知っているはずです。Wepack は、通常の JavaScript ファイルを、さまざまな import ファイルと require ファイルを一緒にパッケージ化できるファイルに変換するのに役立ちます。 そのため、 ここでは、webpack-cli のグローバル インストールを使用します。 npm インストール -g webpack webpack-cli インストールが完了したら、次のコマンドを入力して、インストールされている webpack のバージョンを確認できます。実行後にエラーがなく、バージョン番号が表示されれば、正常にインストールされたことが証明されます。 webpack --version BabelをインストールするJSX は babel プラグインなので、webpack、babel-loader、babel、babel プラグインを順番にインストールする必要があります。 ここでの Babel のもう 1 つの用途は、新しいバージョンの JavaScript を古いバージョンの JavaScript にコンパイルできるため、より古いバージョンのブラウザーでの実行をサポートできることです。 Babel をインストールするには、次のコマンドを実行するだけです。 npm インストール --save-dev webpack babel-loader ここで注意する必要があるのは、開発依存関係に babel を追加するために 実行後、上の画像のようなメッセージが表示されます。 正しくインストールされたことを確認するには、プロジェクト ディレクトリの { "名前": "jsx-コンポーネント", "バージョン": "1.0.0", "説明": ""、 "メイン": "index.js", 「スクリプト」: { "test": "echo \"エラー: テストが指定されていません\" && exit 1" }, "著者": ""、 「ライセンス」: 「ISC」、 「devDependencies」: { "バベルローダー": "^8.1.0", "ウェブパック": "^5.4.0" } } OK、 webpackを設定するこの時点で、webpack 構成を構成する必要があります。 webpack を構成するには、 プロジェクトのルート ディレクトリに まず、webpack config は nodejs モジュールなので、その設定を記述するには module.exports を使用する必要があります。これは、初期の Node.js ツールの一般的な構成方法です。JavaScript ファイルを使用して構成するため、構成にロジックを追加できます。 モジュール.エクスポート = {} Webpack の最も基本的なことは、エントリを設定する (エントリ ファイルを設定する) 必要があることです。ここでは モジュール.エクスポート = { エントリ: "./main.js" } この時点で、まずルート ディレクトリに // main.js ファイルの内容 for (let i of [1, 2, 3]) { コンソールにログ出力します。 } このようにして、webpack の基本構成が構成されました。ルート ディレクトリで webpack を実行して、 ウェブパック 実行が完了すると、コマンドライン インターフェイスに上記のようなプロンプトが表示されます。
この時点で、ルート ディレクトリに新しいフォルダー ここで、 次にそれを開くと、babel によってコンパイルされた後の JavaScript コードが表示されます。数行のコードに多くのものが追加されていることに気づくでしょうが、これらについては心配する必要はありません。これが Webpack の「ニャーパワー」です。 コードの最後には、先ほど書いた Babel-loaderをインストールする次に、babel-loader をインストールしましょう。実は、babel-loader は babel に直接依存していないので、 npm をインストール --save-dev @babel/core @babel/preset-env 最終結果は上記の通りであり、インストールが成功したことが証明されます。この時点で、パッケージ化時に babel-loader を使用できるように、 上記で設定した 次に、ビルド時に使用する
ローダー:
プリセット:
最終的に、構成ファイルは次のようになります。 モジュール.エクスポート = { エントリ: './main.js', モジュール: { ルール: { テスト: /\.js$/, 使用: { ローダー: 'babel-loader', オプション: プリセット: ['@babel/preset-env'], }, }, }, ]、 }, }; これを設定したら、babel を実行して試してみます。前と同じように、コマンドラインで 設定ファイルが正しく記述されていれば、上図のような結果が表示されるはずです。 次に、 コンパイル後、 この時点で、JSX に必要な環境がインストールおよび構築されました。 モード設定最後に、webpack.config.js に環境設定を追加する必要がありますが、これはオプションと言えますが、日常の開発の利便性のために行います。 そのため、webpack.config.js に 一般的に、コード リポジトリに記述する webpack 構成では、この モジュール.エクスポート = { エントリ: './main.js', モード: '開発'、 モジュール: { ルール: { テスト: /\.js$/, 使用: { ローダー: 'babel-loader', オプション: プリセット: ['@babel/preset-env'], }, }, }, ]、 }, }; 変更後、 明らかに、コンパイルされたコードは 1 行に圧縮されていないことがわかりました。この方法で、webpack によって生成されたコードをデバッグできます。ここで、 JSXのインポート東風を除いて、すべて準備が整いました。最後に、JSX をどのように導入するのでしょうか?インポートする前に、現在の構成で そこで、次のコードを
それでは、webpack を実行して確認してみましょう。 よくやった!案の定、エラーが報告されました。ここでのエラーは、「小なり記号」は では、Webpack コンパイル プロセスで JSX 構文をサポートするにはどうすればよいでしょうか?ここで実際に最も重要なパッケージを追加する必要がありますが、このパッケージの名前は npm をインストール --save-dev @babel/plugin-transform-react-jsx インストール後、webpack 構成にも追加する必要があります。 最終的に、webpack 構成ファイルは次のようになります。 モジュール.エクスポート = { エントリ: './main.js', モード: '開発'、 モジュール: { ルール: { テスト: /\.js$/, 使用: { ローダー: 'babel-loader', オプション: プリセット: ['@babel/preset-env'], プラグイン: ['@babel/plugin-transform-react-jsx'], }, }, }, ]、 }, }; 設定が完了したら、webpack を実行してみましょう。この時点で、エラーは発生していないことがわかりました。これは、コードが JSX 構文を使用した記述をサポートするようになったことを証明しています。 最後に、プログラミングの最終的な効果を見てみましょう。 それでは、 基本的な JSX の使用法まず、JSX を理解してみましょう。JSX は実際にはコード構文の単なるショートカットです。前のセクションの最後で、JSX 構文がコンパイルされた後、 JSXの基礎ここではまず、webpack の JSX プラグインを変更し、カスタム要素作成関数名を付けます。 webpack.config.js を開き、プラグイン セクションで変更します。 モジュール.エクスポート = { エントリ: './main.js', モード: '開発'、 モジュール: { ルール: { テスト: /\.js$/, 使用: { ローダー: 'babel-loader', オプション: プリセット: ['@babel/preset-env'], プラグイン: [ [ '@babel/plugin-transform-react-jsx', { プラグマ: 'createElement' } ] ]、 }, }, }, ]、 }, }; 上記では、元の この変更により、JSX は React フレームワークとは何の関係もなくなります。 webpack を実行して、最終的に生成された効果を確認してみましょう。React.createElement 次に、main.js を実行するための HTML ファイルを追加して試してみます。まず、ルート ディレクトリに <script src="./main.js"></script> 次に、この HTML ファイルを実行してブラウザで開きます。 この時点で、コンソールにエラーが表示され、 したがって、 関数createElement() { 戻る; } a = <div /> とします。 ここでは、空を返して、この関数を最初に呼び出し可能にします。 webpack で一度再コンパイルし、main.html ページを更新します。この時点ではエラーは発生せず、正常に実行できることがわかります。 createElement関数の実装 コンパイルされたコードでは、JSX 要素が createElement を呼び出すときに 2 つのパラメータを渡すことがわかります。最初の引数は ここで 2 番目のパラメータが 2 番目のパラメータは、Key-Value モードで保存された JavaScript オブジェクトになることがわかります。今考えてみると、JSX はそれほど神秘的なものではありません。これは、通常記述する HTML を JavaScript オブジェクトにコンパイルするだけです。一種の「構文糖」と考えることができます。
次に、より複雑な JSX を記述してみましょう。元の div にいくつかの子要素を追加します。 関数createElement() { 戻る; } a = (とする <div id="a"> <span></span> <span></span> <span></span> </div> ); 最後に、webpack パッケージ化を実行して効果を確認しましょう。 コンソールでは、最終的なコンパイル結果が 親は第 1 レベルの div 要素であり、子は最初の createElement 関数に渡されるパラメーターです。次に、スパンに属性がないため、後続のすべての createElements の 2 番目のパラメーターは ここで表示されるコンパイル結果に基づいて、createElement 関数のパラメータが何であるべきかを分析できます。
次に、 関数createElement(type, 属性, ...children) { 戻る; } 機能はありますが、この機能では何ができるのでしょうか?実はこの関数は何にでも使えます。DOM API のように見えるので、React とはまったく関係のないエンティティ DOM にすることもできます。 たとえば、この関数ではこの 要素を作成するには 関数createElement(type, 属性, ...children) { // 要素を作成します。let element = document.createElement(type); // 属性をハングする for (let attribute in attributes) { 要素.setAttribute(属性); } // すべての子要素をハングする for (let child of children) { 要素.appendChild(子); } //最終的に要素はノードなので、直接返すことができます return element; } ここでは // このコードをmain.jsの末尾に追加します。let a = ( <div id="a"> <span></span> <span></span> <span></span> </div> ); ドキュメント本体に子要素を追加します。 ここで、main.html に body タグがないことに留意してください。そうしないと、body にマウントできません。したがって、ここで main.html に body タグを追加する必要があります。 <本文></本文> <script src="dist/main.js"></script> さて、これで webpack でパッケージ化して効果を確認できます。 素晴らしい!ノードを生成し、ボディに取り付けることができました。しかし、 次に、テキスト ノードを処理するロジックを追加しますが、その前に div 内の span タグを削除し、テキスト「hello world」に置き換えます。 a = <div id="a">hello world</div> とします。 テキスト ノードのロジックを追加する前に、まずは webpack でパッケージ化しましょう。子ノードをハングアップする前に、具体的にどのようなエラーが報告されるかを確認しましょう。 まず、 このデバッグ方法により、関数を実装するためにロジックを追加する必要がある場所をすぐに見つけることができます。この方法は近道とも言えます。 それでは、 関数createElement(type, 属性, ...children) { // 要素を作成します。let element = document.createElement(type); // 属性をハングする for (let name in attribute) { 要素.setAttribute(名前、属性[名前]); } // すべての子要素をハングする for (let child of children) { if (typeof 子 === '文字列') 子 = document.createTextNode(子); 要素.appendChild(子); } //最終的に要素はノードなので、直接返すことができます return element; } a = <div id="a">hello world</div> とします。 ドキュメント本体に子要素を追加します。 この最新のコード webpack を使用してパッケージ化すると、テキストがブラウザーに表示されることがわかります。 この時点で、 ここで、前の 3 つのスパンを div に再度追加し、各スパンにテキストを追加したことを確認できます。 11 a = (とする <div id="a"> こんにちは世界: <span>あ</span> <span>b</span> <span>c</span> </div> ); その後、webpack を再パックすると、この DOM 操作が実際に完了できることがわかります。 現在のコードでは、すでに特定の基本的なコンポーネント機能を実現できます。 カスタムタグの実装以前は、HTML に付属するいくつかのタグを使用していました。 div の d を大文字の D に変更するとどうなるでしょうか? a = (とする <div id="a"> こんにちは世界: <span>あ</span> <span>b</span> <span>c</span> </Div> ); 予想どおり、エラーが報告されます。しかし、これが問題の根本原因を見つける鍵となります。ここで、div を Div に変更すると、 もちろん、Div クラスは JavaScript では定義されていないため、Div が定義されていないことを示すエラーが報告されます。問題がどこにあるのかがわかれば、それを解決できます。まず、未定義の問題を解決する必要があるため、まず Div クラスを作成します。 // createElment関数の後にクラスDiv {}を追加します 次に、 関数createElement(type, 属性, ...children) { // 要素を作成する let element; if (typeof type === 'string') { 要素 = document.createElement(タイプ); } それ以外 { 要素 = 新しいタイプ(); } // 属性をハングする for (let name in attribute) { 要素.setAttribute(名前、属性[名前]); } // すべての子要素をハングする for (let child of children) { 子の type が 'string' の場合、子 = document.createTextNode(child); 要素.appendChild(子); } //最終的に要素はノードなので、直接返すことができます return element; } ここで別の質問があります。カスタム タグを通常の HTML タグのように動作させる方法はあるでしょうか? DOM 標準の最新バージョンでは、これを行う方法があります。カスタム タグの名前とタイプを登録するだけです。 ただし、現在のより安全なブラウジング バージョンでは、そうすることはお勧めしません。したがって、カスタム要素を使用する場合は、インターフェースを自分で記述することをお勧めします。 まず、タグ クラスを作成する必要があります。これにより、以前の通常の HTML タグの要素と同様に、任意のタグを DOM ツリーにマウントできるようになります。 以下のメソッドが含まれます。
まず、 クラス Div { 属性を設定する() {} 子要素を追加します。 マウント先(親) { this.root = document.createElement('div'); 親.appendChild(this.root); } } これは実際には非常に簡単です。まず、クラスの 次に、元の body.appendChild コードを変更して、 // document.body.appendChild(a); ドキュメントの本文にマウントします。 現在のコードを webpack でパッケージ化して効果を確認します。 Div カスタム要素が body に正しくマウントされていることがわかります。しかし、Div 内の span タグはマウントされていません。通常の div のように動作させたい場合は、 次に、残りの実装ロジックを完成させてみましょう。 setAttribute と appendChild の記述を開始する前に、Div クラスに コンストラクタ() { this.root = document.createElement('div'); } クラス Div { // コンストラクタ // DOMノードを作成するconstructor() { this.root = document.createElement('div'); } // 要素の属性をマウントする setAttribute(name, attribute) { this.root.setAttribute(名前、属性); } // 要素の子要素をマウントする appendChild(child) { this.root.appendChild(子); } // 現在の要素をマウントする mountTo(parent) { 親.appendChild(this.root); } } 効果を確認するために、webpack でパッケージ化してみましょう。 div と span の両方が body に正常にマウントされていることがわかります。また、自作の div が正常に動作することも証明されます。 ここで別の問題が発生します。最終的に したがって、ここでは、通常の要素に Wrapper クラスを追加して、要素クラスの標準形式を維持できるようにする必要があります。標準インターフェースとも呼ばれます。 まず DOM ノードを作成するときに、現在の要素名の クラスElementWrapper { // コンストラクタ // DOMノードを作成するconstructor(type) { 要素を作成します。 } // 要素の属性をマウントする setAttribute(name, attribute) { this.root.setAttribute(名前、属性); } // 要素の子要素をマウントする appendChild(child) { 子をマウントします(this.root); } // 現在の要素をマウントする mountTo(parent) { 親.appendChild(this.root); } } クラス Div { // コンストラクタ // DOMノードを作成するconstructor() { this.root = document.createElement('div'); } // 要素の属性をマウントする setAttribute(name, attribute) { this.root.setAttribute(名前、属性); } // 要素の子要素をマウントする appendChild(child) { 子をマウントします(this.root); } // 現在の要素をマウントする mountTo(parent) { 親.appendChild(this.root); } } ここでまだ問題が残っています。つまり、テキスト ノードに遭遇しても、それがカスタム クラスに変換されないのです。したがって、 クラス TextWrapper { // コンストラクタ // DOMノードを作成するconstructor(content) { ルートディレクトリに document.createTextNode(content); } // 要素の属性をマウントする setAttribute(name, attribute) { this.root.setAttribute(名前、属性); } // 要素の子要素をマウントする appendChild(child) { 子をマウントします(this.root); } // 現在の要素をマウントする mountTo(parent) { 親.appendChild(this.root); } } これらの要素クラス インターフェースを使用すると、 関数createElement(type, 属性, ...children) { // 要素を作成する let element; if (typeof type === 'string') { 要素 = 新しい ElementWrapper(type); } それ以外 { 要素 = 新しいタイプ(); } // 属性をハングする for (let name in attribute) { 要素.setAttribute(名前、属性[名前]); } // すべての子要素をハングする for (let child of children) { if (typeof 子 === '文字列') 子 = 新しい TextWrapper(子); 要素.appendChild(子); } //最終的に要素はノードなので、直接返すことができます return element; } 次に、webpack でパッケージ化して確認します。 驚くことではないが、私たちの要素全体は、通常通りボディに取り付けられている。同様に、Div を div に戻しても、正常に動作します。 もちろん、通常は意味のない Div 要素は記述しません。ここでは、カルーセルのコンポーネントである 完全なコード - これが役に立った場合は ⭐️ をお願いします。ありがとうございます! JSX を使用したマークアップ コンポーネント スタイルの開発例 (フロントエンド コンポーネント化) の作成に関するこの記事はこれで終了です。関連する JSX スクリプト、JSX グループ コンポーネントの作成、JSX スタイルのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
最近の事例をお話ししましょう。オンライン Alibaba Cloud RDS 上のゲーム ログ ライ...
ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...
2つの目的のためのリソースの結合と圧縮httpリクエストの数を減らす要求されたリソースのサイズを縮小...
1. 複雑なSQLクエリ1.1. 単一テーブルクエリ(1)指定の列を選択する[例] 全生徒の生徒ID...
ほとんどの場合、MySQL はインストールしたばかりのときは中国語をサポートしません。これはエンコー...
前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...
1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプトが追加されている場...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
Shell で受信パラメータを受信する方法は 2 つあることがわかっています。 1 つはスクリプト...
序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...
1. レンダリング 2. ソースコードhtml < 本文 > < div クラス ...
目次1. 繰り返し宣言1.1 変数1.2 しましょう1.3 定数2. 可変プロモーション2.1 変数...
多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...