Cara Bereaksi Cepat di Drupal

Diterbitkan: 2022-10-11

Sebelum kita sampai ke “Bagaimana”, mari kita bicara sedikit tentang “Mengapa” mengimplementasikan React di Drupal. React, seperti yang Anda tahu, adalah library JavaScript berbasis komponen yang sangat ramah pengembang yang memungkinkan pengembang membangun antarmuka front-end kompleks berkualitas tinggi. Drupal adalah kerangka kerja manajemen konten yang kuat dan kuat yang memungkinkan pengalaman web berbasis konten dan fleksibel. Menggabungkan kemampuan tema front-end yang unggul dari React dengan kerangka kerja back-end Drupal yang kuat dapat membuat Anda memberikan pengalaman digital yang berkinerja dan luar biasa. Mari kita lihat lebih dekat pembuatan komponen React di Drupal 9 .

Tapi pertama-tama, apa itu React?

Menurut definisi: “React adalah pustaka JavaScript deklaratif, efisien, dan fleksibel untuk membangun antarmuka pengguna frontend. Ini memungkinkan Anda membuat UI kompleks dari potongan kode kecil dan terisolasi yang disebut komponen .”

Jika Anda terbiasa dengan Lab Pola, Anda akan mudah memahami blok bangunan dasar React. Kami mulai dengan blok bangunan dasar atau atom halaman dan terus bekerja hingga membuat desain.

Banyak pengembang lebih suka menggunakan JSX untuk menulis kode HTML di React. Baca terus untuk mengetahui alasannya.

Mengapa JSX untuk React

Gaya pengkodean dan sintaksis React bisa menjadi rumit dan sangat tidak ramah pengembang. Seperti yang Anda lihat di bawah, ini adalah bagaimana elemen HTML dibuat di React.

 const element = React.createElement ( 'h1', {className: 'greeting'}, 'Hello, world!' );

Dan ini adalah bagaimana Anda menulis fungsi yang sama di React menggunakan JSX:

 const element = <h1 className="greeting">Hello World!</h1>

Menggunakan JSX Anda dapat menentukan nama kelas seperti yang disebutkan di bawah ini menggunakan sintaks XML "className" yang telah ditentukan sebelumnya. Seperti yang Anda lihat, jauh lebih mudah, intuitif, dan tidak terlalu bertele-tele untuk menulis kode yang sama di BEJ. Oleh karena itu, hampir seluruh komunitas React menggunakan JSX untuk menulis kode React.

Apa itu BEJ? JSX adalah singkatan dari JavaScript XML. XML adalah sintaks yang sangat user-friendly untuk pengembang. JSX membuatnya lebih mudah untuk menulis dan menambahkan HTML di React.

Lihatlah perbedaan antara membuat elemen di React vs Javascript. Anda akan melihat bagaimana React memberi Anda lebih banyak fleksibilitas untuk menulis dan mengakses kode, membuatnya mudah untuk dikembangkan dan di-debug.

Reaksi

Javascript

const Button = <button onClick={console.log('clicked!')}>Klik Saya</button>

FILE HTML

FILE JS

fungsi padaKlik() {
console.log('diklik!');
};
const button = document.getElementById('my-button');
button.addEventListener('klik', onClick);

Meskipun JSX memudahkan pengembang untuk menulis kode, itu bukan format terbaik untuk dipahami oleh browser. Untuk alasan ini, kami akan mengkompilasinya ke dalam format JavaScript biasa yang akan disajikan ke browser.

Formulir Data Bereaksi

Komponen React memiliki dua bentuk data:

• Alat peraga
Props adalah properti yang diterima dari ancestor dalam hierarki komponen. Mereka tidak dapat diubah, atau dimutasi. Misalnya, untuk meneruskan variabel dari induk ke komponen turunan, Anda dapat meneruskannya sebagai prop.
• Negara
Status bersifat lokal untuk komponen, dan dapat diubah oleh peristiwa. Misalnya, jika Anda memiliki variabel status (state.text), teks dapat diubah sesuai dengan tindakan yang berbeda.

CATATAN: Komponen turunan dapat menerima nilai status tersebut dan peristiwa untuk memperbarui status tersebut melalui props

Bagaimana Mengintegrasikan React dengan Drupal

Pertama-tama kita akan mulai dengan membuat modul khusus dan kemudian file JSX.
Sekarang mari kita buat modul kustom Drupal seperti yang ditunjukkan di bawah ini:
Buat modules/react/react.info.yml

 web > modules > react > ! react.info.yml 1 name: React 2 type: module 3 description: 'A module for basic React components.' 4 core_version_requirement: *8.7.7 || ^9

Selanjutnya, mari kita buat file React seperti gambar di bawah ini. Kami membuat markup HTML dengan tag H1 yang akan dicetak di id aplikasi reaksi .

Buat modules/react/js/src/index.jsx

 web > modules > react > js > src > # index.jsx 1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 4 ReactDOM. render( 5 <h1>Hello there - world!</h1>, 6 document. getElementById( ' react—app') 7 );

Mengakses file JSX oleh Drupal

Sekarang, agar Drupal dapat mengakses dan menggunakan file JSX yang baru saja kita buat, Anda perlu menyiapkan rantai alat JavaScript dengan Webpack.

Pada tingkat tinggi, kami mengonfigurasi proses yang akan mengambil file JavaScript sumber kami, seperti index.jsx , dan meneruskannya melalui langkah-langkah pembuatan yang berbeda yang pada akhirnya akan menghasilkan satu file .js yang dioptimalkan. Langkah build ini memungkinkan kita untuk memanfaatkan seluruh ekosistem React/JavaScript saat mengerjakan modul atau tema Drupal kita.

Langkah-langkah dasarnya adalah:

Siapkan rantai alat yang akan memproses aset JavaScript Anda menjadi satu atau beberapa file JavaScript "paket" dengan lokasi yang diketahui yang tidak berubah
Buat pustaka aset Drupal yang mengarah ke aset yang dibundel dari rantai alat build Anda

Langkah 1: Instal React, Webpack, dan Babel

Sebelum menginstal ini, Anda harus memastikan bahwa Anda memiliki node dan nmp yang siap di lingkungan pengembangan Anda. Bereaksi adalah perpustakaan Javascript. Babel dan webpack adalah kompiler yang Anda perlukan untuk mengonversi .jsx ke javascript untuk browser. Babel adalah salah satu kompiler komunitas terbaik untuk mengkompilasi file .jsx. Untuk menginstal React, Webpack dan Babel, jalankan perintah berikut dari direktori root modul tema Anda/react/ , di terminal Anda

 1 # Create a package.json if you don't have one already. 2 npm init -y 3 # Install the required dependencies 4 npm install —-save react react-dom prop—types 5 npm install —-save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

Langkah 2: Konfigurasikan Webpack dengan file webpack.config.js

Buat file webpack.config.js di root modul Anda: modules/react/webpack.config.js

 1 const path = require('path'); 2 3 const config = { 4 entry: { 5 main: ["./js/src/index.jsx"] 6 }, 7 devtool:'source-map', 8 mode:'development', 9 output: { 10 path: path.resolve(__dirname, "js/dist"), 11 filename: '[name].min.js' 12 }, 13 resolve: { 14 extensions: ['.js', '.jsx'], 15 }, 16 module: { 17 rules: [ 18 { 19 test: /\.jsx?$/, 20 loader: 'babel-loader', 21 exclude: /node_modules/, 22 include: path.join(__dirname, 'js/src'), 23 } 24 ], 25 }, 26 }; 27 28 module.exports = config;

Langkah 3: Konfigurasikan Babel dengan file .babelrc

Berikan beberapa konfigurasi untuk Babel dengan membuat file .babelrc dengan preset yang tersedia berikut ini (yang akan digunakan saat mengkompilasi kode React) di direktori root modul: modules/react/.babelrc

 web > modules > react > .babelrc >... 1 { 2 "presets": [ 3 "@babel/preset-env", 4 "@babel/preset-react" 5 ] 6 }

Langkah 4: Tambahkan beberapa skrip pembantu ke package.json

Ini diperlukan untuk menjalankan paket nmp Anda karena selalu merujuk ke file dasar package.json sebelum tindakan apa pun.

 > Debug "scripts": { "build": "webpack", "build:dev": "webpack", "start": “webpack —-watch" },

Langkah 5: Jalankan build untuk mengkompilasi file jsx ke file js tunggal

Sekarang kita siap untuk mengkompilasi file JSX.

npm run build (ATAU) npm run build:dev

Pada dasarnya ini mengkompilasi file sesuai konfigurasi di file webpack.config dan sekarang membuat file js yang dikompilasi ke repositori yang disebutkan js/src/dist .

Langkah 6: Tentukan perpustakaan aset Drupal

Anda sekarang dapat menambahkan file JavaScript yang dikompilasi sebagai aset Drupal di perpustakaan ( libraries.yml ).

 web > modules > react > ! react.libraries.yml 1 react_app: 2 version: 1.0 3 js: 4 js/dist/main.min.js: {minified: true}

Sekarang Anda sudah siap dan siap untuk membuat beberapa komponen React yang keren di situs web Drupal Anda.

Begini tampilan hasil akhir saya (di bawah). Anda dapat melihat blok React yang saya buat dengan tag H1 “Hello Specbee”.

Pikiran Akhir

Bukankah itu mudah? Saat membuat komponen React di Drupal, pastikan Anda memiliki elemen React dom yang dibuat di Drupal (' react-app ') dan selalu lampirkan file Javascript (yang kami kompilasi dari file React JSX) ke perpustakaan Drupal. Menyukai apa yang baru saja Anda baca? Kami berusaha untuk mempublikasikan konten yang berharga untuk Anda setiap minggu. Berlangganan buletin mingguan kami untuk tetap diperbarui dengan semua wawasan terbaru kami.