Как быстро реагировать в Drupal

Прежде чем мы перейдем к «Как», давайте немного поговорим о «Зачем» реализации React в Drupal. React, как вы знаете, — это очень удобная для разработчиков библиотека JavaScript на основе компонентов, которая позволяет разработчикам создавать высококачественные сложные внешние интерфейсы. Drupal — это надежная и мощная среда управления контентом, которая обеспечивает гибкий и управляемый контентом веб-интерфейс. Сочетание превосходных возможностей внешнего интерфейса React с мощной внутренней структурой Drupal позволит вам обеспечить производительность и исключительный цифровой опыт. Давайте подробнее рассмотрим создание компонентов React в Drupal 9 .

Но сначала, что такое React?

По определению: «React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых компонентами ».

Если вы знакомы с лабораторией Pattern, вам должно быть легко понять основные строительные блоки React. Мы начинаем с основных строительных блоков или атомов страницы и работаем над созданием дизайна.

Многие разработчики предпочитают использовать JSX для написания HTML-кода в React. Читайте дальше, чтобы узнать, почему.

Почему JSX для React

Стиль кодирования и синтаксис React могут быть сложными и не очень удобными для разработчиков. Как вы видите ниже, именно так создается HTML-элемент в React.

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

А вот как вы пишете ту же функцию в React, используя JSX:

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

Используя JSX, вы можете указать имя класса, как указано ниже, используя предопределенный синтаксис XML «className». Как видите, гораздо проще, интуитивно и менее многословно написать тот же код на JSX. Следовательно, почти все сообщество React использует JSX для написания кода React.

Что такое JSX? JSX означает JavaScript XML. XML — это очень удобный синтаксис для разработчиков. JSX упрощает написание и добавление HTML в React.

Взгляните на разницу между созданием элементов в React и Javascript. Вы заметите, как React дает вам больше гибкости для написания кода и доступа к нему, упрощая разработку и отладку.

Хотя JSX упрощает для разработчиков написание кода, это не лучший формат для понимания браузерами. По этой причине мы будем компилировать его в обычный формат JavaScript, который будет отображаться в браузере.

Реагировать на формы данных

Компоненты React имеют две формы данных:

• Реквизит
◦ Реквизиты — это свойства, полученные от предков в иерархии компонентов. Их нельзя изменить или мутировать. Например, чтобы передать переменную от родительского к дочернему компоненту, вы можете передать ее как реквизит.
• Государство
◦ Состояние является локальным для компонента и может быть изменено событиями. Например, если у вас есть переменная состояния (state.text), текст можно изменить в соответствии с различными действиями.

ПРИМЕЧАНИЕ. Дочерние компоненты могут получать как значения этого состояния, так и события для обновления этого состояния через реквизиты.

Как интегрировать React с Drupal

Сначала мы начнем с создания пользовательского модуля, а затем файла JSX.
Теперь давайте создадим пользовательский модуль Drupal, как показано ниже:
Создать модули /реагировать/реагировать.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

Затем давайте создадим файл React, как показано ниже. Мы создаем разметку HTML с тегом H1, который будет напечатан в идентификаторе приложения реакции .

Создать модули/реагировать/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 );

Доступ к файлу JSX с помощью Drupal

Теперь, чтобы Drupal мог получить доступ и использовать JSX-файл, который мы только что создали, вам нужно настроить цепочку инструментов JavaScript с Webpack.

На высоком уровне мы настраиваем процесс, который возьмет наши исходные файлы JavaScript, такие как index.jsx , и пропустит их через различные этапы сборки, которые в конечном итоге выведут один оптимизированный файл .js . Этот шаг сборки позволяет нам использовать преимущества всей экосистемы React/JavaScript при работе над нашим модулем или темой Drupal.

Основные шаги:

• Настройте цепочку инструментов, которая будет обрабатывать ваши активы JavaScript в один или несколько «связанных» файлов JavaScript с известным расположением, которое не меняется.
• Создайте библиотеку ресурсов Drupal, которая указывает на связанные ресурсы из вашей цепочки инструментов сборки.

Шаг 1: Установите React, Webpack и Babel

Перед их установкой вам необходимо убедиться, что в вашей среде разработки есть готовые узлы и nmp. React — это библиотека Javascript. Babel и webpack — это компиляторы, необходимые для преобразования .jsx в javascript для браузера. Babel — один из лучших компиляторов сообщества для компиляции файлов .jsx. Чтобы установить React, Webpack и Babel, выполните следующие команды из корневого каталога модулей вашей темы /react/ в терминале.

 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

Шаг 2. Настройте Webpack с помощью файла webpack.config.js

Создайте файл webpack.config.js в корне вашего модуля: 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;

Шаг 3. Настройте Babel с помощью файла .babelrc

Настройте Babel, создав файл .babelrc со следующими готовыми пресетами (которые будут использоваться при компиляции кода React) в корневом каталоге модуля: modules/react/.babelrc

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

Шаг 4: Добавьте несколько вспомогательных скриптов в package.json

Это необходимо для запуска вашего пакета nmp, так как он всегда ссылается на базовый файл package.json перед любым действием.

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

Шаг 5: Запустите сборку, чтобы скомпилировать файлы jsx в один файл js .

Теперь мы готовы скомпилировать файл JSX.

npm run build (ИЛИ) npm run build:dev

По сути, это компилирует файл в соответствии с конфигурацией в файле webpack.config , и теперь он создает скомпилированный файл js в упомянутом репозитории js/src/dist .

Шаг 6: Определите библиотеку активов Drupal

Теперь вы можете добавить скомпилированный файл JavaScript в качестве ресурса Drupal в библиотеку ( 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}

Теперь у вас все готово, и вы готовы создать несколько крутых компонентов React на своем веб-сайте Drupal.

Вот как выглядел мой конечный результат (ниже). Вы можете увидеть блок React, который я создал с тегом H1 «Hello Specbee».

Последние мысли

Разве это не было легко? При создании компонентов React в Drupal убедитесь, что у вас есть элемент React dom , созданный в Drupal (‘ react-app ’), и всегда присоединяйте файл Javascript (который мы скомпилировали из файла React JSX) к библиотеке Drupal. Понравилось то, что вы только что прочитали? Мы стремимся публиковать ценный контент для вас каждую неделю. Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе всех наших последних идей.