Реагировать Основы для WordPress разработчиков

В моем последнем посте для крутящего момента, я писал о том, как WordPress с новым редактором Гутенберг использует React. Я также дал свое мнение о том, если WordPress разработчики должны учиться React. Хотя вам не нужно знать React для создания блоков Гутенберга, я изложил несколько причин, почему это может иметь смысл для вас сделать это.

Если эти причины имеют смысл для вас, хорошие новости, это сообщение, чтобы вы начали с React и его начала новой серии сообщений об использовании React для развитияГутенберга .

Прежде чем мы начнем

В первых нескольких частях этой серии, я собираюсь придерживаться браузера безопасной JavaScript. Но я не собираюсь слишком беспокоиться об этом. Я не могу обещать IE8, но этот код будет работать в современном браузере.

Да, вы должны беспокоиться о совместимости кросс-браузера. Это то, что React и ваши инструменты сборки могут помочь с большим. Как только вы узнаете основы в этих первых нескольких должностей, вы сможете решить многие из этих проблем с гораздо меньше беспокоиться о том, что возможности Safari версия все, что имеет.

Но сейчас, давайте игнорировать это и держать вещи простыми. Мы находимся в Hello World, а не готовых к производству веб-приложений.

React/ ReactDOM Hello World

На данный момент, мы будем придерживаться только реагировать, и работать в CodePen. После того, как мы перейдем к нескольким основам React, я покажу вам, как использовать этот же код в блоке Гутенберга. У меня есть ссылки на каждый CodePen. Вы можете посмотреть на каждый из них, или вы можете начать с Hello World и построить каждый шаг я выложить.

Кстати, все эти CodePens основаны на первом CodePen в документации React. React документация очень хорошо и полный CodePens вы можете играть. Настоятельно рекомендуется. Моя цель состоит в том, чтобы применить это к WordPress концепции как можно быстрее, но я показываю аналогичные концепции, я рекомендую вам прочитать как мои сообщения и ходить через React интерактивные, введение React учебник на сайте React.

Самый основной привет мир

React — это супер-фантазийный способ отобрасыть содержимое на экран. Когда этот экран создается с помощью HTML-документа, например, если это веб-сайт, загруженный в браузере, мы используем ReactDOM для визуализации React на экране. Вот супер основной пример того, как это работает:

React.DOM.render () принимает два аргумента. Во-первых, это компоненты HTML или React для визуализации. Во-вторых, узла DOM, чтобы сделать его на. Этот код заменяет содержимое элемента идентификатором «root» с приложением React. Это основное приложение, только одна строка, но его приложение мы можем построить на.

ReactDOM отделен от React. Вы никогда не должны знать больше о ReactDOM, чем то, что я только что показал вам. Если вам никогда не нужно выходить за рамки этого уровня сложности, React может управлять всеми взаимодействиями с браузером для вас. Кроме того, вы можете использовать те же компоненты с React Native, который похож на ReactDOM, но для мобильных приложений, которые не используют HTML. Кроме того, при работе с блоками Гутенберга, вы, скорее всего, никогда не понадобится, WordPress обрабатывает это.

Позже в этой серии, когда я покрываю тестирование, я покажу, как сделать ваши компоненты в поддельной DOM. Это делает написание тестов, которые охватывают, как ваш интерфейс отображается довольно просто.

Привет с React.createElement

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

React имеет два основных способа создания HTML. Давайте посмотрим на первый, который использует функцию React.createElement для создания HTML элементов. Вот наш пример Hello World, переписано с помощью React.createElement.

Эта функция принимает три аргумента. Во-первых, это тип элемента. Я прошел «h2», чтобы сказать React, чтобы сделать содержимое внутри заголовка уровня два HTML элемента. Второй аргумент — объект HTML-атрибутов. Пропустить, что на данный момент. Следующим аргументом является содержание. Я прошел строку, но я мог бы пройти множество детей.

Например, для создания списка заказов мы передаем массив элементов li элементу ul элементу ul. Типа того:

HTML Атрибуты

Все предыдущие примеры перешли как пустой объект как второй аргумент для созданияЭлемента. Этот объект содержит HTML атрибуты для элемента. Давайте добавим класс иатрибут в наш список:

Атрибут идентификатора устанавливается путем добавления ключа к объекту «id». Атрибут класса устанавливается путем добавления ключа к объекту «ClassName». React следует HTML, когда это возможно. В «классе» JavaScript — это зарезервированное ключевое слово, которое относится к классам ES6, а не к HTML атрибуту «класса», поэтому React работает над этим.

Атрибуты также используются для обработок событий. В HTML мы можем передать атрибут onClick любому элементу. Это именно то, как React работает тоже. Например, давайте посмотрим на кнопку:

В этом случае мы добавили атрибут «onClick». Эта функция передается объектом события. Я предотвратил действие по умолчанию, а затем вызвал оповещение.

Что делает React.createElement Do?

Эта функция создает объект, похожий на HTML элемент. Но это проникнуто магией React. Всякий раз, когда данные, которые вы передаете в этот объект, React будет обновлять HTML наиболее выполнять способ. Мы вернемся к этому позже. На данный момент, не волнуйтесь слишком сильно, это просто магия HTML.

«Любая достаточно передовая технология неотличима от магии.» — Артур Кларк

А как же JSX?

Обычно React не написано с createElement, так как это было бы действительно большой болью. Вместо этого мы склонны использовать JSX, который является своего рода как нечто среднее между HTML и JavaScript. Давайте посмотрим, как мы будем использовать переменную в нашем примере привет мире. Использование переменных является первым шагом к использованию React для динамического обновления данных:

Я решил проблему, связавшись со строкой с оператором добавления. Это работает, но я предпочел бы использовать шаблонный язык. Например, JSX. Давайте посмотрим на это:

Что делает JSX?

JSX на самом деле просто другой синтаксис для React.createElement. Когда инструмент сборки, такой как webpack или Parcel, компилирует JSX с функциями, которые используют React.createElement. JSX является лишь кратчайшим ярлыком для React.createElemement. Без него, написание React было бы болью.

VueJS также имеет функции рендеринга. VueJS рекомендует использовать отдельные компоненты файлов,которые компилировать сядеев для визуализации Vue.

Создание базового компонента WordPress Post с react

Давайте создадим наш первый компонент. Компоненты react являются многоразовыми функциями JavaScript для визуализации части пользовательского интерфейса. Давайте начнем с компонента под названием «Почта», чтобы показать WordPress пост, как он возвращается WordPress REST API:

Просмотр кода на Gist.

Эта функция принимает один аргумент «реквизит». Реквизиты является важной концепцией React. Это текущее состояние данных, переданных компоненту. Реагировать это все о прохождении реквизит вниз, вы увидите, как мы идем.

Это начинается, глядя, как нормальная функция, но мы возвращаем JSX. JSX выглядит как HTML, большая разница в том, где мы выход испуг название поста. Вместо того, чтобы хардкодирования должности название, мы используем фигурные скобки приложить ссылку на часть объекта реквизит, в данном случае, props.post.title.rendered.

Вот новый компонент, добавленный в наш Hello World от раньше:

Наличие почтового реквизита в компоненте не масштабируется. Давайте перенесем его в переменную и добавим в публикацию содержимого.

Составление компонентов из компонентов с использованием итераторов

В последнем разделе я сказал, что мы создали компоненты в React, чтобы они были простыми в повторном использовании. Теперь, когда у нас есть один компонент, чтобы показать сообщение, давайте повторно использовать его внутри другого компонента, который предназначен показать список сообщений.

 

Это покажет нам, как гнездить компоненты и итерировать через коллекцию элементов в React. Я буду идти более подробно в итерации. На данный момент, давайте держать вещи как можно проще. Вот сообщения компонента:

Просмотр кода на Gist.

Когда мы сделали компонент Post, мы использовали фигурные скобки, чтобы приложить ссылку на объект реквизита. В этом случае мы используем фигурные скобки, чтобы приложить некоторые JavaScript код. Кудрявые скобки создают новое закрытие внутри шаблона.

Внутри этого замыкания мы цикл через массив в props.posts с помощью Array.map() функции.  Это вызывает функцию один раз на элемент в массиве. В этой функции мы используем компонент Post для визуализации текущего элемента в массиве.

Вот новый компонент, добавленный в Hello World:

Этого достаточно, чтобы начать с Гутенберга

Это еще не все, что вам нужно знать о React. Мы рассмотрели только, как передать данные в DOM, а не как обновить данные в DOM. Но этого достаточно, чтобы начать использовать React в блоках Гутенберга, что, на мне кажется, является отличным способом для начала обучения React. Это следующий пост.

Источник: torquemag.io

Добавить комментарий

%d такие блоггеры, как: