Что лучше react или wordpress

CMS (WordPress, Bitrix) или Framework (Angular, React)

CMS (WordPress, Bitrix) VS Framework (Angular, React). Если вижу такой заголовок, то всегда возникает спор — на чем лучше делать проект.

CMS (WordPress, Bitrix) — это инструмент для бизнеса от малого до крупного.

Framework (Angular, React) — это инструмент для сервисов и рабочей среды. Это тоже бизнес, но более сложный (CRM, Доски объявления, соц. сети).

Если человеку нужен сайт по ремонту квартир, то делать проект на Framework — это самое странное, что можно сделать — если Вы, конечно не хотите добавить ему трудностей. Может он насолил Вам чем-то. Шутка. Но все же, делать проекты для малого и среднего бизнеса на Framework не нужно.

Живой пример

Я делаю свой start up и изначально я пытался делать его на WordPress. Первая сложность — разработка личного кабинета и я был вынужден делать проект на Angular. И вот что я Вам скажу — если бы я делал сайт по продаже кирпичей на React или Angular, то делал бы я его минимум пол года, потому-что делать его нужно абсолютно с нуля.

У тебя нет продуманной безопасности;
У тебя не продуманы сценарии, а их огромное количество — одни уведомления чего стоят;
У тебя нет админки.

И самое интересное, найти человека на доработку Angular и React это тот еще квест. А все это тестировать? Вы пробовали хоть раз тестировать сайт 10 часов, потом после очередных правок тебе нужно опять и опять его тестировать.

Все писать нужно с нуля. Абсолютно все.

CMS — это не конструктор. В CMS открыт код. И CMS годами доводят до ума огромное количество разработчиков.

Поймите цели разработки проекта и выберите, что нужно именно Вам.

WordPress vs React: Сравнение двух популярных платформ веб-разработки

Если вы заинтересованы в разработке веб-сайта, вы, вероятно, слышали о WordPress и React. Эти две платформы стали невероятно популярными в последние годы, но они сильно отличаются друг от друга. WordPress – это система управления контентом (CMS), которая позволяет вам создавать веб-сайты и управлять ими без знаний программирования. React, с другой стороны, – это библиотека JavaScript, которая позволяет создавать пользовательские интерфейсы для веб-приложений. В этой статье мы сравним эти две платформы и поможем вам решить, какая из них подходит именно вам.

содержание
Вступление
Что такое WordPress?
Что такое React?
Преимущества WordPress
Простота в использовании
Большое сообщество пользователей
Обширная библиотека плагинов и тем
Дружественная поисковая оптимизация (SEO)
Преимущества React
Быстрые и отзывчивые пользовательские интерфейсы
Лучшая производительность и масштабируемость
Модульная архитектура
Компоненты многократного использования
Различия между WordPress и React
Тип платформы
Технологический стек
Кривая обучения
Стоимость
Варианты использования
Вывод
Часто задаваемые вопросы

Что такое WordPress?
WordPress – это CMS, которая была впервые выпущена в 2003 году. Это бесплатное программное обеспечение с открытым исходным кодом, которое позволяет пользователям создавать веб-сайты и управлять их контентом без каких-либо знаний в области программирования. WordPress поддерживает около 40% всех веб-сайтов в Интернете и используется частными лицами, малым бизнесом и даже крупными корпорациями.

WordPress построен на языке программирования PHP и использует базу данных MySQL для хранения контента. Он имеет простой и интуитивно понятный пользовательский интерфейс, который позволяет любому пользователю легко создавать веб-сайт и управлять им. Существуют также тысячи доступных плагинов и тем, которые можно использовать для расширения функциональности WordPress и настройки дизайна веб-сайта.

Что такое React?
React – это библиотека JavaScript, которая была разработана Facebook в 2011 году. Он позволяет разработчикам создавать пользовательские интерфейсы для веб-приложений и становится все более популярным в последние годы. React известен своими быстрыми и отзывчивыми пользовательскими интерфейсами и модульной архитектурой.

React построен на языке программирования JavaScript и использует виртуальный DOM (объектную модель документа) для эффективного обновления пользовательского интерфейса. Это позволяет разработчикам создавать повторно используемые компоненты, которые могут использоваться в нескольких приложениях. React также можно использовать с другими библиотеками и фреймворками для создания сложных веб-приложений.

Преимущества WordPress
Простота в использовании
Одним из самых больших преимуществ WordPress является его простота в использовании. Он имеет простой и интуитивно понятный пользовательский интерфейс, который позволяет любому пользователю легко создавать веб-сайт и управлять им. WordPress не требует никаких знаний в области программирования, и в Интернете доступно множество ресурсов, которые могут помочь вам начать работу.

Большое сообщество пользователей
WordPress имеет большое сообщество пользователей, что означает, что есть много доступных ресурсов, если вам нужна помощь. Существуют также тысячи доступных плагинов и тем, которые можно использовать для расширения функциональности WordPress и настройки дизайна вашего веб-сайта.

Обширная библиотека плагинов и тем
WordPress имеет обширную библиотеку плагинов и тем, что означает, что вы можете легко добавлять новые функции и настраивать дизайн вашего веб-сайта. Существуют плагины, доступные для всего, от SEO до электронной коммерции, и доступны тысячи бесплатных и премиум-тем.

Оптимизированный для SEO
WordPress известен тем, что он удобен для SEO. Он имеет встроенные функции, которые облегчают поисковым системам сканирование и индексацию вашего веб-сайта. Также доступны плагины, которые могут помочь вам оптимизировать ваш контент для поисковых систем.

Преимущества React
Быстрые и отзывчивые пользовательские интерфейсы
Одним из самых больших преимуществ React является его быстрый и отзывчивый пользовательский интерфейс. React использует виртуальный DOM для эффективного обновления пользовательского интерфейса, что означает, что изменения могут быть внесены без необходимости обновления страницы.

Better performance and scalability

React is known for its better performance and scalability. It allows developers to build web applications that can handle a large amount of data and traffic. This makes it a good choice for building complex applications that require high performance and scalability.

Modular architecture

React has a modular architecture, which means that developers can easily break down their code into smaller, reusable components. This makes it easier to maintain and update code, and can save time and resources in the long run.

Reusable components

React allows developers to create reusable components that can be used across multiple applications. This makes it easier to maintain consistency across different parts of a website or application, and can save time and resources when building new features.

Differences between WordPress and React

Type of platform

WordPress is a content management system that is designed for creating and managing websites. React, on the other hand, is a JavaScript library that is designed for building user interfaces for web applications.

Technology stack

WordPress is built on the PHP programming language and uses a MySQL database to store content. React, on the other hand, is built on the JavaScript programming language and uses a virtual DOM to update the user interface.

Learning curve

WordPress is relatively easy to learn and use, even for people with no coding knowledge. React, on the other hand, has a steeper learning curve and requires a good understanding of JavaScript and web development principles.

Cost

WordPress is free and open-source software, but you may need to pay for hosting, plugins, and themes. React is also free and open-source, but you may need to pay for hosting and other web development tools.

Use cases

WordPress is a good choice for creating and managing websites, especially for people with no coding knowledge. React is a good choice for building complex web applications that require high performance and scalability.

Conclusion

In conclusion, WordPress and React are two very different platforms that serve different purposes. WordPress is a content management system that is easy to use and great for creating and managing websites. React is a JavaScript library that is great for building user interfaces for web applications that require high performance and scalability. The choice between WordPress and React ultimately depends on your specific needs and goals.

FAQs

Can I use WordPress and React together?
- Yes, you can use WordPress and React together by creating a custom theme that includes React components.
Is WordPress or React better for SEO?
- Both WordPress and React can be optimized for SEO, but WordPress has built-in SEO features that make it easier to optimize content for search engines.
How long does it take to learn WordPress?
- It can take anywhere from a few hours to a few weeks to learn the basics of WordPress, depending on your previous experience with web development.
Can React be used with other web development frameworks?
- Yes, React can be used with other web development frameworks such as Angular, Vue.js, and Ember.js.
Is WordPress a good choice for e-commerce websites?
- Yes, WordPress can be used for e-commerce websites by using plugins such as WooCommerce. However, if you need more advanced e-commerce features, a dedicated e-commerce platform may be a better choice.

Как создать безголовый сайт WordPress с помощью React.js

WordPress – одна из самых популярных систем управления контентом (CMS), которой пользуются 810 миллионов человек – это 41% всего интернета! Это лучший выбор для тех, кто хочет быстро создать сайт, потому что он прост, удобен в использовании, предлагает широкий спектр возможностей настройки, а также имеет сильную экосистему плагинов и других ресурсов. Один из способов максимально использовать возможности WordPress – это “безголовый” подход. Безголовая CMS, также известная как headless system, – это тип бэкенд CMS, который используется исключительно для управления контентом.

Это помогает интегрировать контент в любую систему или сайт, просто обращаясь к API безголовой CMS. Однако при этом фронтенд остается для отдельного управления. Именно здесь на помощь приходит API. API позволяют двум или более различным приложениям обмениваться данными. В данном случае API используется для передачи данных из CMS на внешний сайт, что обеспечивает большую гибкость и более высокую производительность. В этой статье мы рассмотрим, что такое безголовая CMS, почему вы можете захотеть ее создать и как настроить ее для WordPress.

Содержание скрыть

Что такое безголовый WordPress?

Безголовый сайт WordPress – это тип сайта, который в основном использует WordPress в качестве CMS, или системы управления контентом, и использует другие технологии фронтенда, такие как React или Vue для фронтенда. Библиотеки и фреймворки JavaScript используются для отображения содержимого сайта. Таким образом, безголовый WordPress имеет отдельный фронтенд и бэкенд, а для связи используется API. Проще говоря, безголовая архитектура означает, что CMS используется только для хранения и управления контентом, а фронтенд сайта ее не волнует.

С другой стороны, основной задачей фронтенда является отображение контента, а ему, в свою очередь, все равно, где хранится или управляется контент, лишь бы он мог до него добраться. Безголовый WordPress имеет более высокую производительность, поскольку запросы фронтенда обрабатываются более быстрыми технологиями, такими как React, и только бэкенд управляется WordPress. Разделение фронтенда и бэкенда позволяет масштабировать компоненты независимо друг от друга.

Плюсы и минусы безголового WordPress

Как и во всех других вариантах разработки, у безголового решения WordPress есть как преимущества, так и недостатки. Важно понять и то, и другое, прежде чем принимать решение.

Плюсы безголового WordPress

Среди основных преимуществ внедрения безголового WordPress можно выделить следующие:

Гибкость: Безголовый WordPress позволяет разработчикам создавать пользовательские фронтенды, не будучи ограниченными традиционной системой тем WordPress. Это означает, что вы можете создавать уникальные пользовательские интерфейсы и опыт для конкретных потребностей.
Производительность: Отделение фронтенда от бэкенда сайта WordPress может ускорить загрузку сайта и повысить его производительность, поскольку сервер предоставляет данные только через API, а не отрисовывает HTML для каждого запроса.
Безопасность: Разделяя фронтенд и бэкенд, безголовый WordPress может обеспечить дополнительный уровень безопасности, ограничивая доступ к основной кодовой базе WordPress и базе данных.

Читать:

Сколько стоит замена экрана на самсунг а 30

Недостатки безголового WordPress

К недостаткам безголового WordPress можно отнести:

Отсутствие тем: Поскольку безголовый WordPress не полагается на предварительно созданные темы, вам придется создавать свои собственные темы. Это может занять много времени и потребовать дополнительных ресурсов.
Стоимость: Создание безголового сайта WordPress может быть дороже, чем традиционного сайта WordPress, поскольку для его создания и поддержки требуется больше технических знаний и ресурсов.
Ограничения плагинов: Некоторые плагины WordPress могут не работать с безголовым WordPress, поскольку их правильное функционирование зависит от тем WordPress.

Что такое WordPress REST API?

WordPress REST API используется в качестве интерфейса между бэкендом и фронтендом. С помощью API можно легко отправлять или извлекать данные с сайта, поскольку API имеет контрольный доступ к данным сайта. Он также гарантирует, что только авторизованные пользователи могут взаимодействовать с ним. API может поддерживать широкий спектр форматов данных, включая JSON, что облегчает взаимодействие с системой. WordPress REST API – это мощный инструмент для разработчиков, позволяющий создавать, обновлять или удалять данные в дополнение к созданию пользовательской функциональности для сайтов или интеграции с другим сервисом. Более того, существуют плагины, которые расширяют функциональность API, например, интегрируют дополнительные методы аутентификации.

Что такое React?

React – это библиотека JavaScript для создания пользовательских интерфейсов. Это многократно используемая библиотека фронтенда с открытым исходным кодом, которая позволяет разработчикам создавать компоненты пользовательского интерфейса (UI) с помощью декларативного синтаксиса. React создает интерактивный пользовательский интерфейс и отображает компоненты при изменении данных. Эта библиотека пользуется большой популярностью среди разработчиков, желающих создавать сложные, многократно используемые компоненты, эффективно управлять состоянием и легко обновлять пользовательский интерфейс в режиме реального времени. Сильное сообщество разработчиков React создало набор инструментов, библиотек и ресурсов для расширения функциональности библиотеки. Многие организации и предприятия используют React в качестве технологии для создания сложных, динамичных и быстродействующих веб-приложений.

Почему стоит использовать React?

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

Декларативный синтаксис: React использует декларативный подход к созданию компонентов пользовательского интерфейса, что позволяет легко создавать многократно используемые и высокоэффективные компоненты.
Большое сообщество и экосистема: React имеет большое и активное сообщество разработчиков, что привело к созданию широкого спектра инструментов и библиотек для расширения его функциональности.
Виртуальный DOM: React использует виртуальный DOM для обновления пользовательского интерфейса в режиме реального времени. Это означает, что при изменении состояния он обновляет только те компоненты, которые должны быть изменены, а не перерисовывает всю страницу.
Возможность повторного использования:React.js предлагает многократно используемые компоненты, которые можно использовать в различных приложениях, что значительно сокращает время и усилия на разработку.

Как создать безголовый сайт WordPress с помощью React

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

Предварительные условия

Прежде чем приступить к этому руководству, убедитесь, что у вас есть:

Хорошее понимание React
Node.js v14 или выше установлен на вашей машине

Шаг 1. Настройка веб-сайта WordPress

Давайте начнем с настройки сайта WordPress, так как он будет служить источником данных для приложения React. Если у вас уже настроен сайт WordPress, вы можете пропустить этот раздел, в противном случае просто следуйте дальше. В этом руководстве мы будем использовать DevKinsta, широко используемую быструю и надежную локальную среду разработки для создания, развития и развертывания сайтов WordPress. Она совершенно бесплатна в использовании – просто скачайте ее с официального сайта и установите на свою систему. После завершения установки откройте приборную панель DevKinsta и нажмите New WordPress site, чтобы создать новый сайт WordPress. Заполните все необходимые данные и нажмите кнопку Создать сайт, чтобы продолжить.

Это может занять несколько минут, но как только ваш сайт будет создан, вы сможете получить доступ к нему и его админ-панели, нажав кнопку Открыть сайт” или опции WP Admin соответственно. Далее, чтобы включить JSON API, вам нужно будет обновить пермалинки вашего сайта. В панели администратора WordPress нажмите на Настройки, а затем на Permalinks. Выберите опцию Post name и нажмите Save Changes.

Вы также можете использовать такие инструменты, как Postman, чтобы легко тестировать и отправлять запросы к REST API WordPress.

Шаг 2: Настройка приложения React

Теперь, когда мы настроили наш сайт WordPress, мы можем начать работу над фронтендом. Как упоминалось выше, в этом учебнике мы будем использовать React для фронтенда нашего приложения. Чтобы начать работу, запустите приведенный ниже код в терминале, чтобы создать приложение React.

npm create vite@latest my-blog-app cd my-blog-app npm install

Приведенные выше команды создадут приложение React и установят необходимые зависимости. Нам также необходимо установить Axios, библиотеку JavaScript для выполнения HTTP-запросов. Выполните приведенную ниже команду для ее установки.

npm install axios

Теперь, чтобы запустить сервер разработки, вы можете запустить npm run dev в терминале. После этого сервер должен инициализировать ваше приложение по адресу http://127.0.0.1:5173.

Далее откройте проект в любимом редакторе кода и удалите все ненужные файлы, такие как папка assets, index.css и app.css.

Вы также можете заменить код внутри main.jsx и App.jsx следующим кодом:

// main.jsx import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' ReactDOM.createRoot(document.getElementById('root')).render(  , )

// App.jsx import React from 'react' export default function App() < return ( ) >

Шаг 3: Получение сообщений из WordPress

Теперь пришло время получить посты с нашего сайта WordPress.

Внутри App.jsx добавьте следующее состояние и импортируйте useState из React:

const [posts, setPosts] = useState([])

useState – это встроенный хук в React, который используется для добавления состояний в компонент, причем состояние относится к данным или свойству. posts используется для получения данных из состояния, а setPosts – для добавления новых данных в post. Мы также передали пустой массив в state по умолчанию.

Далее добавьте следующий код после state, чтобы получить посты из WordPress REST API:

const fetchPosts = () => < // Using axios to fetch the posts axios .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts") .then((res) =>< // Saving the data to state setPosts(res.data); >); > // Calling the function on page load useEffect(() => < fetchPosts() >, [])

Приведенный выше код запускает функцию fetchPosts() при загрузке страницы. Внутри функции fetchPosts() мы отправляем GET-запрос к API WordPress, используя Axios, чтобы получить посты, а затем сохранить их в состоянии, которое мы объявили ранее.

Шаг 4: Создание компонента блога

В корневом каталоге создайте новую папку с именем components, а в ней – два новых файла: blog.jsx и blog.css.

Сначала добавьте следующий код в файл blog.jsx:

import axios from "axios"; import React, < useEffect, useState >from "react"; import "./blog.css"; export default function Blog(< post >) < const [featuredImage, setFeaturedimage] = useState(); const getImage = () => < axios .get(post?._links["wp:featuredmedia"][0]?.href) .then((response) =>< setFeaturedimage(response.data.source_url); >); >; useEffect(() => < getImage(); >, []); return (   )>
 > /> />
 
 ); >

В приведенном выше коде мы создали компонент карточки, который принимает свойство posts, содержащее информацию о записи блога из WordPress API. В функции getImage() мы используем Axios для получения URL-адреса главного изображения, а затем сохраняем эту информацию в state. Затем мы добавили хук useEffect для вызова функции getImage() после установки компонента. Мы также добавили оператор return, в котором мы выводим данные поста, заголовок, отрывок и изображение.

Далее добавьте приведенные ниже стили в файл blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins"); .blog-container < width: 400px; height: 322px; background: white; border-radius: 10px; box-shadow: 0px 20px 50px #d9dbdf; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; >img < width: 400px; height: 210px; object-fit: cover; overflow: hidden; z-index: 999; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; >.blog-title < margin: auto; text-align: left; padding-left: 22px; font-family: "Poppins"; font-size: 22px; > .blog-date < text-align: justify; padding-left: 22px; padding-right: 22px; font-family: "Poppins"; font-size: 12px; color: #c8c8c8; line-height: 18px; padding-top: 10px; >.blog-excerpt

Затем, в файле App.jsx, добавьте следующий код в оператор возврата для рендеринга компонента блога:

Наконец, вот как должен выглядеть ваш App.jsx:

import React, < useEffect, useState >from 'react' import axios from "axios" import Blog from './components/Blog'; export default function App() < const [posts, setPosts] = useState([]); const fetchPosts = () => < axios .get("http://my-awesome-website.local/wp-json/wp/v2/posts") .then((res) =>< setPosts(res.data); >); > useEffect(() => < fetchPosts() >, []) return (  ( /> ))>
 ) >

Сохраните файл и обновите вкладку браузера. Теперь вы должны увидеть, как записи вашего блога отображаются на странице.

Заключение

Безголовый WordPress предлагает отличный способ создания быстродействующих веб-сайтов с масштабируемой архитектурой. Благодаря использованию React и WordPress REST API стало как никогда просто создавать динамичные и интерактивные веб-сайты с WordPress в качестве системы управления контентом. Не менее важным для скорости является то, где вы размещаете свой сайт WordPress.

WordPress + React и стоит ли?

Уважаемые старейшины и знатоки WordPress. В изысканиях силы и мощи пришёл к изучению REACT и дальнейшей цепочке мыслей как его совместить с WordPress. Много статей и видео поведал на англоязычных просторах интернета. Понял что да — прикольно, быстро, современно. НО одно большое НО которое упускалось во всех туториалах о котором с самого начала мне кричала чуйка. На сколько я понял, что если мы делаем приложение полностью отдельно чисто на Rest API то мы автоматически говорим до свидания всевозможным плагинам которые мы можем подключить как и SEO ибо как получить wp_head / wp_footer с REST человеческим образом без костылей я не нашёл а именно в них заключено как Seo так и подключение всех сторонних пресовских вещей. Аля мы просто получаем быстрый сайт с роутингом без перезагрузок но теряем возможность подключать всякие там Yoast SEO и тп. С другой стороны можно запарится и оставить php часть и подключить сторонне реакт но тогда такая конструкция будет максимально запутанной и на верх делать приславутый роутинг не выйдет ибо wp_head как то та должен обновляться, а совать его в отдельный API и получать при обновлении — костыль. Короче говоря, прошу мудрецов помочь советом, поправить где я наговорил ереси, и ответить стоит ли вообще запариватся с тепой на Реакте, наставьте невежду на путь истинный, так сказать.

Отслеживать

задан 17 мая 2021 в 18:12

Alexander Borysenko Alexander Borysenko

13 4 4 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

WordPress использует React уже несколько лет. Библиотека полностью интегрирована в ядро WordPress. Визуальный редактор Gutenberg (он же — редактор блоков — построен на React). Многие плагины уже используют React. Нет никаких проблем получить любые сведения из базы WordPress через REST.