WordPress開発者としてReactを知る必要がありますか？-＆＃＆プレス-php.cn

Do You Need to Know React as a WordPress Developer?

コアポイント

WordPress新しいエディターGutenbergは、FacebookのオープンソースUIライブラリであるReactに構築されています。ただし、カスタムブロックを作成する予定がない限り、Gutenbergを使用するためにReactを学ぶ必要はありません。
Reactは、開発者が非常にインタラクティブなユーザーインターフェイスを構築できるようにする強力で再利用可能なライブラリです。その仮想DOMは、レンダリングを最適化し、アプリケーションのパフォーマンスを向上させ、ウェブサイトをより動的で応答性の高いものにすることでユーザーエクスペリエンスを向上させます。
WordPress開発者にはReactの学習は必要ありませんが、貴重なスキルになる可能性があります。 Reactの習熟度は、高度なGutenbergの概念をよりよく理解し、市場の競争力を向上させるのに役立ちます。

この記事はもともとTorque Magazineによって公開され、許可を得てここで再現されています。

WordPressバージョン5.0は、新しいコンテンツ編集システムGutenbergを使用して、WordPressの記事エディターを駆動します。 Gutenbergは「ブロックベースの」エディターです。コンテンツを作成するとき、すべてのコンテンツはブロックです。 1つの段落、1つのタイトル、2つの段落を備えた記事がある場合、それは4つのブロックです。

Gutenbergには、パラグラフ、タイトル、最新の記事、写真、引用などの「コア」ブロックのデフォルトセットが付属しています。 Gutenbergを使用してコンテンツを作成する場合は、サイトにインストールしたWordPressプラグインによって提供されるこれらのブロックまたはカスタムブロックを使用できます。

GutenbergはJavaScript駆動型インターフェイスです。具体的には、Facebookのオープンソースユーザーインターフェイスライブラリ「React」を使用して構築されました。この記事では、JavaScriptを使用してGutenbergの編集者で使用できるカスタムブロックを作成する内容の一部について説明します。 JavaScriptを使用してブロックを作成する必要はありません。 Advanced Custom Fields（ACF）は最近、PHPを使用してカスタムブロックを作成するのにかなり見栄えの良いシステムを発表しました。

反応とは何ですか？

フロントエンド開発では、パフォーマンスの最低操作はDOMへの読み書きです。ブラウザ全体でDOMを参照して更新することは非常に困難です。 Reactは、リアクティブプログラミングモデルと仮想DOM抽象化を実装することにより、より良いシステムを提供します。

たとえば、

domと直接相互作用することなく（たとえば、jquery.html（）またはjquery.val（））、Reactはdomの仮想表現を作成します。それを仮想domまたはvdomと呼びます。 VDOMは、DOM構造を表すJavaScriptオブジェクトです。 VDOMは、ReactコードがReactの変更を伝えるたびに再計算します。その後、Reactは変更の前後にDOMの違いを計算します。次に、反応（実際にACTDODまたは反応ネイティブ）は、変更する必要があるDOMの部分のみを更新します。それが重要ではない方法。

グーテンベルクでReactを使用する方法は？

Reactは、再利用可能なコンポーネントを作成するためのライブラリです。それらは再利用可能であるため、インターフェイスとコンポーネントを組み合わせることができます。 Facebookが作成したオープンソースプロジェクトです。

すべてがブロックです。テキスト、画像、ギャラリー、ウィジェット、ショートコード、さらには、プラグインを介して追加されるかどうかにかかわらず、カスタムHTMLスニペット。ブロックインターフェイスという1つのインターフェイスをマスターするだけで、すべてを行う方法がわかります。 - Gutenbergマニュアル

ブロックはグーテンベルクの基本単位です。コンテンツを1つ以上のブロックと組み合わせます。

コンポーネントは反応の原子単位であり、コンポーネントを使用してReactアプリケーションを組み合わせます。 Gutenbergは、各ブロックが1つ以上のコンポーネントで構成されるようにReactを使用して作成されます。

このシリーズでこれをさらに紹介することに注意することが重要ですが、GutenbergはReactの上に抽象化の薄い層を追加しました。 Gutenbergコードでは、React.CreateElementの代わりにWP.CreateElementを使用します。同じように機能しますが、ReactのAPIが変更されると、WordPressはこれらの変更をサポートし、後方互換性のあるラッパーを提供するか、サポートしないことを決定します。

これは将来の良い計画ですが、今のところ、それはただ反応しています。

グーテンベルクを使用して発達するために反応を知る必要がありますか？

それで、これは重要な疑問を提起します、あなたは反応を学ぶ必要がありますか？不要。独自のブロックを作成したい場合を除き、これらのいずれも重要ではありません。コアまたはプラグインによって提供されるブロックのみを使用する場合は、独自のブロックタイプを作成する必要はありません。

不要です。しかし...

JavaScriptについてあまり学習することなく、基本的なブロックを作成できます。この基本的な例ブロックをご覧ください。これは、公式のグーテンベルクの例から簡素化されています。

( function( blocks, element ) {
    var el = element.createElement;
    blocks.registerBlockType( 'namespace/block-name', {
        title: __( 'Example: Basic', 'gutenberg-examples' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the editor).'
            );
        },
        save: function() {
            return el(
                'p',
                {},
                'Hello World, step 1 (from the frontend).'
            );
        },
    } );
}(
    window.wp.blocks,
    window.wp.element
) );

ログイン後にコピー

より新しいと思われる唯一のことは、wp.createelement（この例では、変数「el」）を使用してHTMLを作成することです。これは、タイプ「P」のHTML要素を作成する派手な方法です。このシリーズの次の投稿で説明します。

WordPressには反応上の抽象化レイヤーがあるため、本当に知る必要があるのは、HTMLを作成するためのWP.CreateElement、およびSetAttribute（）、Blockプロパティを更新するための機能だけです。

GutenbergマニュアルのCreate Blocksセクションを読んでから、WordCamp Miami 2018 Gutenbergワークショップのサンプルリポジトリとサンプルコードを表示することをお勧めします。このコードはすべて、反応を掘り下げることなく使用できます。

必要、if ...

単純なブロックを作成する必要がある場合、1つまたは2つのコントロールだけを作成する必要がある場合は、前述した2つの概念を超えてReactのコンテンツを理解する必要はありません。ただし、より複雑なブロックを作成する場合は、Gutenbergと他のReactアプリの間でコンポーネントを共有します。たとえば、プラグインのWP-Admin設定画面またはモバイルアプリなどです。

Reactはプレイするのに非常に興味深いライブラリであり、Mastering Reactは非常に市場に値するスキルです。さらに重要なことは、Reactを学んだら、より高度なGutenbergの概念、状態管理、単体テストなどをより簡単に理解できることです。

WordPressとGutenbergのReactを学ぶ方法これは、グーテンベルクの反応開発に関する一連の記事の始まりです。次回はReactの基本をカバーし、次にGutenbergブロックにそれらを適用する方法をカバーします。そこから、動的ブロックを作成し、州の管理とテストを調べます。

私のウェブサイトでは、あなたが役立つかもしれないGutenbergの開発者のスピーチをリストしています。このシリーズでは、Reactの概念を説明しますが、JavaScriptを掘り下げてReactを掘り下げたい場合は、Wes BosとZac GordonがReactとJavaScriptに関する優れたコースを提供して、開始します。

反応とWordPress開発に関するよくある質問（FAQ）

WordPress開発にReactを使用することの利点は何ですか？

Reactは、開発者が高度にインタラクティブなユーザーインターフェイスを構築できるようにする強力なJavaScriptライブラリです。コンポーネントベースのアーキテクチャにより、コードの再利用が可能になり、開発がより速く効率的になります。さらに、Reactの仮想DOMはレンダリングを最適化し、アプリケーションのパフォーマンスを向上させます。 WordPress開発で使用すると、Webサイトをよりダイナミックで応答性の高いものにすることで、ユーザーエクスペリエンスを向上させることができます。

WordPressとReactを統合する方法は？

WordPress REST APIを介してWordPressと統合できます。これにより、WordPressサイトからデータを取得し、Reactアプリケーションで使用できます。 WordPressテーマまたはプラグインでカスタムエンドポイントを作成し、HTTPリクエストを使用して、Reactアプリケーションからデータを取得または送信できます。

ヘッドレスのWordPress CMSとは何ですか？それはどのように反応するのですか？

Headless WordPress CMSは、フロントエンド（ユーザーインタラクションの一部）がバックエンド（コンテンツの管理の一部）から分離されているWordPressセットアップです。これにより、開発者は、Reactを含む、好みのテクノロジーを使用してフロントエンドを構築できます。このセットアップは、フロントエンドを個別に管理し、バックエンドから独立して最適化できるため、より柔軟性とパフォーマンスの改善を提供できます。

既存のWordPressテーマでReactを使用できますか？

はい、既存のWordPressテーマでReactを使用できます。ただし、これには、WordPressとReactのある程度の理解が必要です。テーマのコードを変更してReactコンポーネントを統合する必要があるためです。または、ヘッドレスのWordPressテーマなど、React専用に設計されたテーマを使用することもできます。

フロントとは何ですか、そしてそれはWordPressと反応にどのように関連していますか？

Frontityは、Reactを使用してWordPressテーマを構築するための無料のオープンソースフレームワークです。 WordPressを簡素化し、接続を反応させる方法を提供し、多くの複雑な構成を処理します。 Frontityは、パフォーマンスとSEOを改善するサーバー側のレンダリングのReactテーマも最適化します。

WordPressとのReactを使用することの欠点は何ですか？

ReactはWordPress Webサイトのインタラクティブ性とユーザーエクスペリエンスを大幅に向上させることができますが、その学習曲線は従来のWordPress開発よりも急です。また、特にヘッドレスのWordPressサイトでは、複雑さを追加できるさまざまなホスティング設定が必要です。

WordPress開発者になるためにReactを知る必要がありますか？

反応を理解することは、WordPress開発者になるために必要な要件ではありませんが、貴重なスキルになる可能性があります。 WordPressが進化し続けるにつれて、Reactを使用してますます多くの部品が構築されます。 Reactについて学ぶことは、WordPress開発者としてあなたにもっと多くの機会を開くことができます。

WordPress開発のためのReactを学ぶ方法は？

オンラインチュートリアル、コース、ドキュメントなど、Reactを学習するリソースはたくさんあります。 WordPress開発に特に反応を適用するには、WordPress Rest APIドキュメントまたはWordPressとの統合に関する公式のWordPress Rest APIドキュメントまたはチュートリアルを調べることができます。