Core points
This article was originally published by Torque Magazine and is reproduced here with permission.
WordPress version 5.0 will use the new content editing system Gutenberg to drive the WordPress article editor. Gutenberg is a "block-based" editor. When creating content, all content is a block. If you have an article with one paragraph, one title, and two paragraphs, it is four blocks.
Gutenberg comes with a default set of "core" blocks - paragraphs, titles, latest articles, pictures, citations, and more. If you use Gutenberg to create content, you can use these blocks or custom blocks provided by the WordPress plugin you installed on your site.
Gutenberg is a JavaScript-driven interface. Specifically, it was built using Facebook’s open source user interface library “React”. This article explains some of the contents of using JavaScript to create custom blocks that can be used in the Gutenberg editor. You don't have to use JavaScript to create blocks. Advanced Custom Fields (ACF) Recently announced a system that looks pretty good to create custom blocks using PHP.
In front-end development, the lowest performance operation is reading and writing to the DOM. It is very difficult to refer to and update DOMs across browsers. React provides a better system by implementing reactive programming models and virtual DOM abstractions.
For example, without directly interacting with the DOM (for example, using jQuery.html() or jQuery.val()), React creates a virtual representation of the DOM. We call it a virtual DOM or VDOM. VDOM is a JavaScript object representing a DOM structure. VDOM recalculates whenever your React code conveys any changes to React. After that, React calculates the differences in the DOM before and after the change. Then, React (actDOM or React Native actually) only updates the portion of the DOM that needs to be changed. How it does not matter.
React is a library for creating reusable components. Since they are reusable, we can combine interfaces with components. It is an open source project created by Facebook.
Everything is a block. Text, images, galleries, widgets, short codes, and even custom HTML snippets, whether it's added through plugins or otherwise. You just need to master one interface: the block interface, and then you know how to do everything. ——Gutenberg Manual
Blocks are the basic unit of Gutenberg. We combine content with one or more blocks.
Components are atomic units of React, and we use components to combine React applications. Gutenberg is created using React so that each block consists of one or more components.
It is important to note that I will introduce this further in this series, but Gutenberg has added a thin layer of abstraction on top of React. In our Gutenberg code, we will use wp.createElement instead of React.createElement. It works the same way, but when React's API changes, WordPress can decide when to support these changes and provide backward compatible wrappers, or decide not to support them.
This is a good plan for the future, but for now, it's just React.
So this raises an important question, do you need to learn React? unnecessary. Unless you want to create your own blocks, none of these matter. If you want to use only blocks provided by the core or plugin, you never need to create your own block type.
You can create a basic block without having to learn too much about JavaScript. Check out this basic example block, which is simplified from the official Gutenberg example:
( 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
) );The only thing that is likely to be newer is to use wp.createElement (in this example, it is in the variable "el") to create HTML. This is a fancy way to create html elements of type "p". I will cover this in the next post in this series.
WordPress has an abstraction layer above React, so all you really need to know is some functions: wp.createElement, for creating HTML, and setAttribute(), for updating block properties.
I suggest you read the Create Blocks section of the Gutenberg manual and then view the sample repository and the sample code for the WordCamp Miami 2018 Gutenberg workshop. All of this code you can use without delving into React.
If you just need to make simple blocks, maybe only one or two controls, you don't need to understand React's content beyond those two concepts I mentioned earlier. However, if you want to create a more complex block, share components between Gutenberg and other React apps, for example, your plug-in's wp-admin settings screen or mobile app.
React is a very interesting library to play with, and mastering React is a very market-worthy skill. More importantly, once you learn React, you can more easily understand more advanced Gutenberg concepts—state management, unit testing, and more.
This is the beginning of a series of articles about Gutenberg's React development. Next time I will cover React basics and then how to apply them in the Gutenberg block. From there, we will make dynamic blocks and then look at state management and testing.
On my website, I list Gutenberg developer speeches that you might find useful. In this series, I will explain the React concept, but if you want to dig into JavaScript and React, Wes Bos and Zac Gordon provide excellent courses on React and JavaScript to get you started.
React is a powerful JavaScript library that allows developers to build highly interactive user interfaces. Its component-based architecture allows code reuse, making development faster and more efficient. Additionally, React's virtual DOM optimizes rendering and improves application performance. When used in WordPress development, it can enhance the user experience by making the website more dynamic and responsive.
React can be integrated with WordPress through the WordPress REST API. This allows you to get data from your WordPress site and use it in your React application. You can create custom endpoints in a WordPress theme or plug-in and then use HTTP requests to retrieve or send data from the React application.
Headless WordPress CMS is a WordPress setup where the front-end (the part of user interaction) is separated from the back-end (the part of managing content). This allows developers to build front-ends using any technology they prefer, including React. This setup can provide greater flexibility and performance improvements, as the front end can be managed separately and optimized independently from the back end.
Yes, you can use React with your existing WordPress theme. However, this requires some understanding of WordPress and React, as you need to modify the code of the theme to integrate React components. Alternatively, you can use themes designed specifically for React, such as headless WordPress themes.
Frontity is a free and open source framework for building WordPress themes using React. It provides a way to simplify WordPress and React connections, handling many complex configurations for you. Frontity also optimizes your React theme for server-side rendering, which improves performance and SEO.
While React can greatly enhance the interactivity and user experience of WordPress websites, its learning curve is steeper than traditional WordPress development. It also requires different hosting settings, especially for headless WordPress sites, which can add complexity.
While understanding React is not a necessary requirement to become a WordPress developer, it can be a valuable skill. As WordPress continues to evolve, more and more parts are built using React. Learning about React can open up more opportunities for you as a WordPress developer.
There are many resources to learn React, including online tutorials, courses, and documentation. To apply React specifically to WordPress development, you can explore the official WordPress REST API documentation or tutorials on integrating React with WordPress.
Yes, while React is usually used with WordPress, especially after the introduction of the Gutenberg editor, you can use any JavaScript library or framework you prefer. This includes Vue.js, Angular and many other frameworks.
The future of React and WordPress looks promising. With the introduction of Gutenberg editors built with React and the increasing popularity of headless WordPress settings, the use of React in WordPress development is likely to continue to increase.
The above is the detailed content of Do You Need to Know React as a WordPress Developer?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
