React & JavaScript in WordPress

Last Updated on April 3, 2025 by Neil Murray

Table of Contents #

Gutenberg Project #

Github: WordPress/gutenberg
Gutenberg Documentation
Gutenberg Storybook – view and work with the Gutenberg UI components
WordPress Components on Figma
Gutenberg Testing

Slack Channel

Make WordPress Core – JavaScript

WordPress Packages #

@wordpress Packages – WordPress JavaScript packages npm | GitHub
@wordpress/data – manage application state npm | GitHub
@wordpress/scripts – development & build tool npm | GitHub

back to top

Documentation

JSX in WordPress 6.6

Examples #

WordPress JS Plugin Starter – by Riad Benguella | Github
Gutenberg Custom Fields – by Riad Benguella | Github

Internationalization – I18n

@wordpress/i18n
i18n: Replace Jed with Tannin
gutenberg-i18n
Gutenberg I18N Block plugin
JavaScript Internationalization: The Missing Pieces
JavaScript Internationalization
i18n-calypso
React Mixin for i18n-calypso

Calypso #

Calypso Docs
Gutenberg Components in Calypso
Gutenberg Blocks in Calypso
The Technology Behind Calypso
Hello, World!
Coding Guidelines
React Components
React Component Unit Testing
CSS/Sass Coding Guidelines
Calypso Components (we can copy/use these)
Calypso I18n

back to top

WordPress React Frameworks

WordPress + React Starter Kit
WP Reactivate – WordPress React Boilerplate
wp-react-boilerplate

Human Made – React

react-wp-scripts – a wrapper for create-react-app’s react-scripts to suit WordPress environment

Yoast – React

GitHub – yoast-components
npm – yoast-components
YoastSEO.js

create-guten-block – a zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins

back to top

Articles #

How To Debug React Components Using React Developer Tools – TUTORIAL
How to work effectively with the useSelect hook
Advanced WordPress development with wp-scripts
Preparing for React 19: a guide for WordPress 6.6 users
React & JavaScript in WordPress
Hallway Hangout: Fool me once — Writing end-to-end tests against regressions
JavaScript Packages and Interoperability in 5.0 and Beyond
Fantastic hooks and where to use them
Introducing useDispatch and useSelect
What is WordPress Data?
Efficient client data management for WordPress Plugins – using @wordpress/data
Learning Gutenberg Series – good introduction to working with JS in WP
Going Gutenberg Series – from Modern tribe
Introducing Postlight’s WordPress + React Starter Kit
How to Develop a WordPress Plugin Using Webpack 3 & React
Introducing WP Reactivate, a WordPress React Boilerplate
YoastSEO.js design decisions
The All-New Jetpack: Let’s See How You React
React single-page WordPress REST API theme tutorial
A Simple Route to Writing a React.js App in a WordPress Plugin
How to make a React.js WordPress Plugin
Sharing React Components With Gutenberg
How to use the @wordpress/hooks package in JavaScript Apps
How to Convert a Shortcode to a Gutenberg Block

Videos & Podcasts #

Gutenberg with Tammie Lister and Matias Ventura
Matías Ventura and Gregory Cornelius: React + WordPress
Nikolay Bachiyski: React and Flux for WordPress Developers
Zack Tollman and Aaron Jorbin: The Future Stack: Running WordPress with Tomorrow’s Technologies

Q&A #

Using ReactJS in the WordPress admin for plugin development
Can you build a WordPress plugin with React.js?

Slides #

React for WordPress Developers
Advanced Topics of JavaScript: Exploring Functions

back to top

SUPERCEDED