react项目需要开发依赖_您是否需要知道React作为WordPress开发人员？

react项目需要开发依赖

This article on whether you need to know React as a WordPress developer was originally published by Torque Magazine, and is reproduced here with permission.

这篇关于您是否需要了解React作为WordPress开发人员的文章最初由Torque Magazine发行 ，并在获得许可的情况下在此处转载。

The new WordPress content editing system Gutenberg will be powering the WordPress post editor in WordPress 5.0. Gutenberg is a “block-based” editor. When creating content, everything is a block. If you have a post that is one paragraph, one header, and then two paragraphs, that’s four blocks.

新的WordPress内容编辑系统Gutenberg将为WordPress 5.0中的WordPress帖子编辑器提供支持。 Gutenberg是“基于块的”编辑器。 创建内容时，一切都是障碍。 如果您的帖子是一个段落，一个标题，然后是两个段落，则这是四个块。

Gutenberg comes with a set of default “core” blocks — paragraph, header, recent posts, image, blockquote, etc. If you’re using Gutenberg to create content, you use those blocks or custom blocks that are provided by WordPress plugins you install on your site.

Gutenberg带有一组默认的“核心”块-段落，标题，最新帖子，图像，块引用等。如果您使用Gutenberg创建内容，则可以使用安装的WordPress插件提供的那些块或自定义块在您的网站上。

Gutenberg is a JavaScript-driven interface. Specifically, it is built using Facebook’s open-source user interface library “React”. This post explains a little bit about creating your own custom blocks for use in the Gutenberg editor using JavaScript. You do not have to use JavaScript to create blocks. Advanced Custom Fields (ACF) recently announced a neat looking system for creating custom blocks with PHP.

古腾堡(Gutenberg)是JavaScript驱动的界面。 具体来说，它是使用Facebook的开源用户界面库“ React”构建的。 这篇文章解释了一些有关使用JavaScript创建自己的自定义块以在Gutenberg编辑器中使用的信息。 您不必使用JavaScript创建块。 高级自定义字段(ACF)最近宣布了一种外观简洁的系统，用于使用PHP创建自定义块。

什么是React？ (What Is React?)

In front-end development, the least performant things you do are reading and writing from the DOM. A very hard thing to do, consistently across browsers, is referencing and updating the DOM. React provides a better system for this, by implementing a reactive programming model and a virtual DOM abstraction.

在前端开发中，性能最低的是从DOM读取和写入。 在不同的浏览器中，要做的一件非常困难的事情是引用和更新DOM。 通过实现React性编程模型和虚拟DOM抽象，React为此提供了一个更好的系统。

Instead of interacting with the DOM directly, for example using jQuery.html() or jQuery.val(), React creates a virtual representation of the DOM. We call this a virtual DOM or VDOM. The VDOM is a JavaScript object that represents the structure of the DOM. Whenever your React code communicates to React a change in any of the data, the VDOM is recalculated. After that React calculates the difference between the DOM as it existed before the change and after the change. Then React (really ReactDOM or React Native) updates just the parts of the DOM that needs changed. How it does this doesn’t matter really.

React jQuery.html()直接与DOM交互jQuery.html()例如使用jQuery.html()或jQuery.val() ， jQuery.html()创建DOM的虚拟表示形式。 我们称其为虚拟DOM或VDOM。 VDOM是一个JavaScript对象，代表DOM的结构。 每当您的React代码与React进行通信以对任何数据进行更改时，都会重新计算VDOM。 之后，React计算在更改之前和更改之后存在的DOM之间的差异。 然后，React(实际上是ReactDOM或React Native)仅更新需要更改的DOM部分。 实际如何无关紧要。

古腾堡如何使用React？ (How Is React Being Used in Gutenberg?)

React is a library for creating reusable components. Because they are reusable, we can compose interfaces out of components. It is an open-source project created at Facebook.

React是用于创建可重用组件的库。 因为它们是可重用的，所以我们可以用组件组成接口。 这是在Facebook创建的一个开源项目。

Everything is a block. Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface: the block interface, and then you know how to do everything. – Gutenberg Handbook

一切都是障碍。 文本，图像，画廊，小部件，短代码，甚至大块自定义HTML，无论它是通过插件添加还是以其他方式添加。 您只需要学习掌握一个接口：块接口，然后就知道如何做所有事情。 – 古腾堡手册

Blocks are the basic unit of Gutenberg. We compose content out of one or more blocks.

积木是古腾堡的基本单位。 我们用一个或多个块组成内容。

Components are the atomic unit of React, we compose React apps out of components. Gutenberg is created with React, so each block is composed of one or more components.

组件是React的原子单位，我们由组件组成React应用。 古腾堡(Gutenberg)是使用React创建的，因此每个块都由一个或多个组件组成。

It’s important to note, and I’ll cover this more in this series of posts, but Gutenberg adds a thin abstraction layer over React. In our Gutenberg code, we’ll use wp.createElement instead of React.createElement. It works the same, but when React’s API changes, WordPress can decide when to support those changes and provide a backward-compatibility wrapper or decided not to.

需要注意的很重要，我将在本系列文章中详细介绍这一点，但是古腾堡在React之上添加了一个薄的抽象层。 在古腾堡代码中，我们将使用wp.createElement而不是React.createElement 。 它的工作原理相同，但是当React的API更改时，WordPress可以决定何时支持这些更改并提供向后兼容性包装器，或者决定不支持。

This is good planning for the future, but for now, it’s just React.

这是对未来的良好计划，但就目前而言，这只是React。

我需要知道用Gutenberg开发的React吗？ (Do I Need To Know React To Develop With Gutenberg?)

So, this brings us to the big question, do you need to learn React? No, you do not. None of this matters unless you want to make your own blocks. If you just want to use the blocks provided by core or plugins, you never need to make your own block types.

那么，这给我们带来了一个大问题，您需要学习React吗？ 你不可以。 除非您想自己构建块，否则所有这些都不重要。 如果您只想使用核心或插件提供的块，则无需创建自己的块类型。

不是，但… (No. But…)

You can create a basic block without knowing much JavaScript. Take a look at this basic example block, simplified from the official Gutenberg examples:

您可以在不了解太多JavaScript的情况下创建基本块。 看一下这个基本示例块，它是从Gutenberg官方示例简化而来的：

( 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 one thing that might be new is using wp.createElement — in this example, it is in the variable “el” — to create HTML. That’s a fancy way to create an html element of the type “p”. I’ll cover that in my next article in this series.

可能很新的一件事是使用wp.createElement(在此示例中，它在变量“ el”中)来创建HTML。 这是创建类型为“ p”的html元素的理想方法。 我将在本系列的下一篇文章中对此进行介绍。

WordPress has an abstraction layer over React, so all you really do need to know are a few functions: wp.createElement, which creates HTML and setAttribute(), which is used to update your block attributes.

WordPress在React上有一个抽象层，因此您真正需要知道的是几个函数： wp.createElement创建HTML和setAttribute() ，后者用于更新块属性 。

I recommend going through the Creating Blocks section of the Gutenberg handbook and then looking over the examples repo as well as the example code from the WordCamp Miami 2018 Gutenberg workshop. That’s all code you can use without digging into React at all.

我建议阅读古腾堡手册的``创建块''部分，然后查看示例存储库以及WordCamp Miami 2018古腾堡讲习班的示例代码。 这就是您可以使用而无需深入研究React的所有代码。

是的，如果... (Yes, If…)

If you need to make just simple blocks, maybe with one or two controls, then you do not need to know React more than those two concepts I mentioned before. But, if you want to create a more complex block, share components between Gutenberg and other React apps, for example, a wp-admin settings screen or mobile app for your plugin.

如果您只需要制作一个或两个控件的简单块，那么您对React的了解就不会超过我之前提到的两个概念。 但是，如果要创建更复杂的块，请在Gutenberg和其他React应用程序之间共享组件，例如，插件的wp-admin设置屏幕或移动应用程序。

React is a really fun library to play with and proficiency with React is a very marketable skill to have. More importantly, once you learn React, you can more easily understand the more advanced Gutenberg concepts — state management, unit tests, etc.

React是一个非常有趣的库，熟练使用React是一项非常有市场价值的技能。 更重要的是，一旦学习了React，就可以更轻松地理解更高级的Gutenberg概念-状态管理，单元测试等。

如何为WordPress和Gutenberg学习React (How To Learn React For WordPress and Gutenberg)

This is the start of series on React development for Gutenberg. Next time I’ll cover React basics, and then how to apply them in Gutenberg blocks. From there, we’ll make dynamic blocks then look at state management and testing.

这是针对古腾堡的React开发系列的开始。 下次，我将介绍React基础知识 ，然后介绍如何在Gutenberg块中应用它们。 从那里，我们将创建动态块，然后研究状态管理和测试。

I have a list of Gutenberg developer talks on my site that you might find useful. In this series, I’ll be explaining React concepts, but if you want to learn JavaScript and React deeply, Wes Bos and Zac Gordon have great courses on React and JavaScript to get you started.

我在我的网站上列出了古腾堡开发人员的演讲 ，您可能会觉得有用。 在本系列中，我将解释React概念，但是如果您想深入学习JavaScript和React， Wes Bos和Zac Gordon都提供了有关React和JavaScript的很棒的课程来帮助您入门。

翻译自: https://www.sitepoint.com/do-you-need-to-know-react-as-a-wordpress-developer/

react项目需要开发依赖