Getting started with React inside WordPress
Listen now
Description
Dig into what React is and how it works, especially inside WordPress, with Aurooba and Brian as they set up the basic environment and load up a little React component inside a WordPress post. Part one of a series of episodes where they'll transform their code into a working accordion block. A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter to hear about episodes (and more) first! The source code from the episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block @wordpress/scripts – https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/ Wes Bos' courses – https://wesbos.com/courses The "Learn JavaScript Deeply" moment in WordPress history – https://youtu.be/TX6dXRL-jPU?t=3536 Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - Introduction (00:26) - Learn JavaScript Deeply (02:59) - What is React? (06:37) - Comparing React to other familiar WordPress tech (08:36) - A React-ive "Hello World" (10:02) - @wordpress/scripts and the scary part of React (11:21) - Setting up a basic index.js in React (12:12) - React and @wordpress/element (14:09) - Outputting the React app with createRoot (18:27) - Exporting and importing functions in React (22:12) - Breaking your code up into smaller files (23:39) - Concluding Part 1! (24:21) - Outro
More Episodes
Aurooba and Brian dig deeper into the WordPress Interactivity API. This episode mostly focuses on the HTML directives they used in their custom blocks, how they work with block markup, and how the Interactivity API uses them to hydrate data. Along the way they also compare it to other templating...
Published 04/29/24
Published 04/29/24
So begins another project! This time back inside WordPress. Brian and Aurooba discuss the Interactivity API in WordPress. They explore how to use the API, the challenges they faced, and the benefits it provides. They also touch on JavaScript modules and how they are used in the context of the...
Published 04/15/24