Adakah anda perlu tahu React sebagai pemaju WordPress?

mata teras

WordPress New Editor Gutenberg dibina di React, sebuah perpustakaan UI sumber terbuka Facebook. Tetapi melainkan jika anda merancang untuk membuat blok tersuai, anda tidak perlu belajar bertindak balas menggunakan Gutenberg.
React adalah perpustakaan yang kuat dan boleh diguna semula yang membolehkan pemaju membina antara muka pengguna yang sangat interaktif. DOM maya mengoptimumkan rendering dan meningkatkan prestasi aplikasi, meningkatkan pengalaman pengguna dengan menjadikan laman web lebih dinamik dan responsif.
Walaupun pembelajaran React tidak diperlukan untuk pemaju WordPress, ia boleh menjadi kemahiran yang berharga. Kemahiran dalam React dapat membantu lebih memahami konsep Gutenberg yang lebih maju dan meningkatkan daya saing pasaran anda.

Artikel ini pada asalnya diterbitkan oleh Majalah Torque dan diterbitkan semula di sini dengan kebenaran.

WordPress Version 5.0 akan menggunakan sistem penyuntingan kandungan baru Gutenberg untuk memacu editor artikel WordPress. Gutenberg adalah editor "berasaskan blok". Apabila membuat kandungan, semua kandungan adalah blok. Jika anda mempunyai artikel dengan satu perenggan, satu tajuk, dan dua perenggan, ia adalah empat blok.

Gutenberg dilengkapi dengan set lalai blok "teras" - perenggan, tajuk, artikel terkini, gambar, petikan, dan banyak lagi. Jika anda menggunakan Gutenberg untuk membuat kandungan, anda boleh menggunakan blok ini atau blok tersuai yang disediakan oleh plugin WordPress yang anda pasang di laman web anda.

Gutenberg adalah antara muka yang didorong oleh JavaScript. Khususnya, ia dibina menggunakan Perpustakaan Antara Muka Pengguna Sumber Terbuka Facebook "React". Artikel ini menerangkan beberapa kandungan menggunakan JavaScript untuk membuat blok tersuai yang boleh digunakan dalam editor Gutenberg. Anda tidak perlu menggunakan JavaScript untuk membuat blok. Advanced Custom Fields (ACF) baru -baru ini mengumumkan sistem yang kelihatan cukup baik untuk membuat blok tersuai menggunakan PHP.

Apa itu bertindak balas?

Dalam pembangunan front-end, operasi prestasi terendah adalah membaca dan menulis ke DOM. Sangat sukar untuk merujuk dan mengemas kini DOMS di seluruh pelayar. React menyediakan sistem yang lebih baik dengan melaksanakan model pengaturcaraan reaktif dan abstraksi DOM maya.

Contohnya, tanpa secara langsung berinteraksi dengan DOM (contohnya, menggunakan jQuery.html () atau jQuery.val ()), React mewujudkan perwakilan maya DOM. Kami menyebutnya sebagai dom maya atau vdom. VDOM adalah objek JavaScript yang mewakili struktur DOM. VDOM mengira semula apabila kod React anda menyampaikan apa -apa perubahan untuk bertindak balas. Selepas itu, React mengira perbezaan dalam DOM sebelum dan selepas perubahan. Kemudian, React (Actdom atau React Native sebenarnya) hanya mengemas kini bahagian DOM yang perlu diubah. Bagaimana ia tidak penting.

Bagaimana menggunakan React in Gutenberg?

React adalah perpustakaan untuk membuat komponen yang boleh diguna semula. Oleh kerana ia boleh diguna semula, kita boleh menggabungkan antara muka dengan komponen. Ia adalah projek sumber terbuka yang dibuat oleh Facebook.

semuanya adalah blok. Teks, imej, galeri, widget, kod pendek, dan juga coretan HTML tersuai, sama ada ia ditambah melalui plugin atau sebaliknya. Anda hanya perlu menguasai satu antara muka: antara muka blok, dan kemudian anda tahu bagaimana untuk melakukan segala -galanya. - Gutenberg Manual

Blok adalah unit asas Gutenberg. Kami menggabungkan kandungan dengan satu atau lebih blok.

Komponen adalah unit atom bertindak balas, dan kami menggunakan komponen untuk menggabungkan aplikasi bertindak balas. Gutenberg dicipta menggunakan React supaya setiap blok terdiri daripada satu atau lebih komponen.

Adalah penting untuk diperhatikan bahawa saya akan memperkenalkan ini lebih lanjut dalam siri ini, tetapi Gutenberg telah menambah lapisan abstraksi nipis di atas React. Dalam kod Gutenberg kami, kami akan menggunakan WP.Createelement dan bukannya React.Createelement. Ia berfungsi dengan cara yang sama, tetapi apabila perubahan API React, WordPress boleh menentukan kapan untuk menyokong perubahan ini dan menyediakan pembalut serasi ke belakang, atau memutuskan untuk tidak menyokong mereka.

Ini adalah rancangan yang baik untuk masa depan, tetapi buat masa ini, ia hanya bertindak balas.

Adakah saya perlu tahu bertindak balas dengan menggunakan Gutenberg?

Jadi ini menimbulkan persoalan penting, adakah anda perlu belajar bertindak balas? tidak perlu. Kecuali anda mahu membuat blok anda sendiri, tidak ada perkara ini. Jika anda ingin menggunakan hanya blok yang disediakan oleh teras atau plugin, anda tidak perlu membuat jenis blok anda sendiri.

tidak diperlukan. Tetapi ...

Anda boleh membuat blok asas tanpa perlu belajar terlalu banyak tentang JavaScript. Semak blok contoh asas ini, yang dipermudahkan dari contoh Gutenberg rasmi:

( 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
) );

Satu -satunya perkara yang mungkin lebih baru ialah menggunakan WP.CreateElement (dalam contoh ini, ia adalah dalam pembolehubah "EL") untuk membuat HTML. Ini adalah cara mewah untuk mencipta unsur -unsur HTML jenis "P". Saya akan menutupnya dalam jawatan seterusnya dalam siri ini.

WordPress mempunyai lapisan abstraksi di atas bertindak balas, jadi semua yang anda perlu tahu adalah beberapa fungsi: WP.Createelement, untuk membuat HTML, dan setAttribute (), untuk mengemas kini sifat blok.

Saya cadangkan anda membaca bahagian Buat Blok manual Gutenberg dan kemudian lihat repositori sampel dan kod sampel untuk bengkel Wordcamp Miami 2018 Gutenberg. Semua kod ini yang boleh anda gunakan tanpa membincangkan reaksi.

perlu, jika ...

Jika anda hanya perlu membuat blok mudah, mungkin hanya satu atau dua kawalan, anda tidak perlu memahami kandungan React melebihi dua konsep yang saya sebutkan tadi. Walau bagaimanapun, jika anda ingin membuat blok yang lebih kompleks, kongsi komponen antara Gutenberg dan aplikasi React lain, contohnya, skrin tetapan WP-Admin plug-in atau aplikasi mudah alih anda.

React adalah perpustakaan yang sangat menarik untuk dimainkan, dan menguasai React adalah kemahiran yang sangat baik. Lebih penting lagi, sebaik sahaja anda belajar bertindak balas, anda dapat lebih mudah memahami konsep Gutenberg yang lebih maju -pengurusan negeri, ujian unit, dan banyak lagi.

bagaimana untuk belajar bertindak balas untuk wordpress dan gutenberg

Ini adalah permulaan siri artikel mengenai perkembangan React Gutenberg. Kali seterusnya saya akan merangkumi asas -asas yang bertindak balas dan kemudian menggunakannya di blok Gutenberg. Dari sana, kami akan membuat blok dinamik dan kemudian melihat pengurusan dan ujian negeri.

Di laman web saya, saya menyenaraikan ucapan pemaju Gutenberg yang mungkin anda dapati berguna. Dalam siri ini, saya akan menerangkan konsep React, tetapi jika anda ingin menggali JavaScript dan React, Wes Bos dan Zac Gordon menyediakan kursus yang sangat baik mengenai React dan JavaScript untuk memulakan anda.

Soalan Lazim (Soalan Lazim) Mengenai React dan WordPress Development

Apakah faedah menggunakan React untuk pembangunan WordPress?

React adalah perpustakaan JavaScript yang kuat yang membolehkan pemaju membina antara muka pengguna yang sangat interaktif. Senibina berasaskan komponennya membolehkan penggunaan semula kod, menjadikan pembangunan lebih cepat dan lebih cekap. Di samping itu, DOM maya React mengoptimumkan rendering dan meningkatkan prestasi aplikasi. Apabila digunakan dalam pembangunan WordPress, ia dapat meningkatkan pengalaman pengguna dengan menjadikan laman web lebih dinamik dan responsif.

Bagaimana untuk mengintegrasikan React dengan WordPress?

React boleh diintegrasikan dengan WordPress melalui API REST WordPress. Ini membolehkan anda mendapatkan data dari laman WordPress anda dan menggunakannya dalam aplikasi React anda. Anda boleh membuat titik akhir tersuai dalam tema WordPress atau plug-in dan kemudian gunakan permintaan HTTP untuk mengambil atau menghantar data dari aplikasi React.

Apakah CMS WordPress tanpa kepala dan bagaimana ia berkaitan dengan React?

WordPress CMS tanpa kepala adalah persediaan WordPress di mana bahagian depan (bahagian interaksi pengguna) dipisahkan dari belakang (bahagian pengurusan kandungan). Ini membolehkan pemaju membina front-ends menggunakan teknologi yang mereka suka, termasuk React. Persediaan ini dapat memberikan fleksibiliti dan peningkatan prestasi yang lebih besar, kerana hujung depan dapat diuruskan secara berasingan dan dioptimumkan secara bebas dari hujung belakang.

Bolehkah saya menggunakan React dengan tema WordPress saya yang ada?

Ya, anda boleh menggunakan React dengan tema WordPress anda yang sedia ada. Walau bagaimanapun, ini memerlukan pemahaman tentang WordPress dan bertindak balas, kerana anda perlu mengubah suai kod tema untuk mengintegrasikan komponen React. Sebagai alternatif, anda boleh menggunakan tema yang direka khusus untuk bertindak balas, seperti tema WordPress tanpa kepala.

Apa itu Frontity, dan bagaimana ia berkaitan dengan WordPress dan React?

Frontity adalah rangka kerja sumber percuma dan terbuka untuk membina tema WordPress menggunakan React. Ia menyediakan cara untuk memudahkan sambungan WordPress dan React, mengendalikan banyak konfigurasi kompleks untuk anda. Frontity juga mengoptimumkan tema React anda untuk rendering sisi pelayan, yang meningkatkan prestasi dan SEO.

Apakah kelemahan menggunakan React With WordPress?

Walaupun React dapat meningkatkan interaktiviti dan pengalaman pengguna laman web WordPress, lengkung pembelajarannya lebih curam daripada pembangunan WordPress tradisional. Ia juga memerlukan tetapan hosting yang berbeza, terutamanya untuk laman web WordPress tanpa kepala, yang boleh menambah kerumitan.

Adakah saya perlu tahu bertindak balas untuk menjadi pemaju WordPress?

Walaupun Memahami React bukanlah keperluan yang perlu untuk menjadi pemaju WordPress, ia boleh menjadi kemahiran yang berharga. Apabila WordPress terus berkembang, semakin banyak bahagian dibina menggunakan React. Belajar tentang React boleh membuka lebih banyak peluang untuk anda sebagai pemaju WordPress.

Bagaimana untuk belajar bertindak balas untuk pembangunan WordPress?

Terdapat banyak sumber untuk belajar bertindak balas, termasuk tutorial, kursus, dan dokumentasi dalam talian. Untuk memohon React secara khusus untuk pembangunan WordPress, anda boleh meneroka dokumentasi API REST rasmi atau tutorial mengenai mengintegrasikan React dengan WordPress.

Bolehkah saya menggunakan perpustakaan atau kerangka JavaScript lain dengan WordPress?

Ya, sementara React biasanya digunakan dengan WordPress, terutama selepas pengenalan Editor Gutenberg, anda boleh menggunakan mana -mana perpustakaan atau rangka kerja JavaScript yang anda suka. Ini termasuk vue.js, sudut dan banyak rangka kerja lain.

Apakah masa depan React dan WordPress?

Masa depan React dan WordPress kelihatan menjanjikan. Dengan pengenalan editor Gutenberg yang dibina dengan React dan peningkatan populariti tetapan WordPress tanpa kepala, penggunaan React dalam pembangunan WordPress mungkin akan terus meningkat.

Atas ialah kandungan terperinci Adakah anda perlu tahu React sebagai pemaju WordPress?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!