Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@wordpress/element
Advanced tools
@wordpress/element is a package that provides utilities for working with React elements in the context of WordPress. It is essentially a thin abstraction layer over React, tailored to integrate seamlessly with the WordPress ecosystem.
Creating Elements
This feature allows you to create React elements using the `createElement` function, which is similar to React's `React.createElement`.
const { createElement } = require('@wordpress/element');
const element = createElement('div', { className: 'my-class' }, 'Hello World');
Component Class
You can define class components using the `Component` class provided by @wordpress/element, similar to React's `React.Component`.
const { Component } = require('@wordpress/element');
class MyComponent extends Component {
render() {
return createElement('div', null, 'Hello from MyComponent');
}
}
Hooks
The package supports React hooks like `useState`, allowing you to manage state in functional components.
const { useState } = require('@wordpress/element');
function MyFunctionalComponent() {
const [count, setCount] = useState(0);
return createElement('button', { onClick: () => setCount(count + 1) }, `Count: ${count}`);
}
React is a JavaScript library for building user interfaces. It is the core library that @wordpress/element is built upon. While @wordpress/element provides a WordPress-specific abstraction, React is more general-purpose and widely used across various web applications.
Preact is a fast 3kB alternative to React with the same modern API. It is designed to be a lightweight replacement for React, offering similar functionalities but with a smaller footprint. Unlike @wordpress/element, Preact is not tailored specifically for WordPress.
Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. It aims to provide a similar API to React but with a focus on performance. Like Preact, it is not WordPress-specific.
Element is, quite simply, an abstraction layer atop React.
You may find yourself asking, "Why an abstraction layer?". For a few reasons:
createClass
, PropTypes
).On the wp.element
global object, you will find the following, ordered roughly by the likelihood you'll encounter it in your code:
Install the module
npm install @wordpress/element --save
Let's render a customized greeting into an empty element:
<div id="greeting"></div>
<script>
function Greeting( props ) {
return wp.element.createElement( 'span', null,
'Hello ' + props.toWhom + '!'
);
}
wp.element.render(
wp.element.createElement( Greeting, { toWhom: 'World' } ),
document.getElementById( 'greeting' )
);
</script>
Refer to the official React Quick Start guide for a more thorough walkthrough, in most cases substituting React
and ReactDOM
with wp.element
in code examples.
At the risk of igniting debate surrounding any single "best" front-end framework, the choice to use any tool should be motivated specifically to serve the requirements of the system. In modeling the concept of a block, we observe the following technical requirements:
At its most basic, React provides a simple input / output mechanism. Given a set of inputs ("props"), a developer describes the output to be shown on the page. This is most elegantly observed in its function components. React serves the role of reconciling the desired output with the current state of the page.
The offerings of any framework necessarily become more complex as these requirements increase; many front-end frameworks prescribe ideas around page routing, retrieving and updating data, and managing layout. React is not immune to this, but the introduced complexity is rarely caused by React itself, but instead managing an arrangement of supporting tools. By moving these concerns out of sight to the internals of the system (WordPress core code), we can minimize the responsibilities of plugin authors to a small, clear set of touch points.
While not at all a requirement to use React, JSX is a recommended syntax extension to compose elements more expressively. Through a build process, JSX is converted back to the createElement
syntax you see earlier in this document.
If you've configured Babel for your project, you can opt in to JSX syntax by specifying the pragma
option of the transform-react-jsx
plugin in your .babelrc
configuration.
{
"plugins": [
[ "transform-react-jsx", {
"pragma": "createElement"
} ]
]
}
This assumes that you will import the createElement
function in any file where you use JSX. Alternatively, consider using the @wordpress/babel-plugin-import-jsx-pragma
Babel plugin to automate the import of this function.
FAQs
Element React module for WordPress.
We found that @wordpress/element demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.