Artwork

Player FM - Internet Radio Done Right
Checked 1y ago
Added two years ago
Content provided by Aurooba and Brian, Aurooba Ahmed, and Brian Coords. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Aurooba and Brian, Aurooba Ahmed, and Brian Coords or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.
Player FM - Podcast App
Go offline with the Player FM app!
icon Daily Deals

Getting started with React inside WordPress

24:36
 
Share
 

Manage episode 358613394 series 3440550
Content provided by Aurooba and Brian, Aurooba Ahmed, and Brian Coords. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Aurooba and Brian, Aurooba Ahmed, and Brian Coords or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.

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!

  • (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
  continue reading

36 episodes

Artwork
iconShare
 
Manage episode 358613394 series 3440550
Content provided by Aurooba and Brian, Aurooba Ahmed, and Brian Coords. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by Aurooba and Brian, Aurooba Ahmed, and Brian Coords or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://ppacc.player.fm/legal.

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!

  • (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
  continue reading

36 episodes

All 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 and logic tools like the ones in Laravel and Next.js from previous episodes. 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! https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api?discussions_q=is%3Aopen+category%3A%22Interactivity+API%22 https://twitter.com/SethRubenstein https://twitter.com/DevelopWoo https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/packages-interactivity-api-reference Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S03E14 Sequence (00:09) - Introduction (01:21) - Packages vs Feature Plugins (04:24) - Browsing the Documentation (08:24) - Preview of our frontend block (09:53) - HTML Directives (13:12) - Conventions for binding and events handlers (16:31) - Callbacks and Actions (18:37) - State, Context and Loops (20:04) - Using Attributes and Hydration (24:01) - Wrapping up and Next Steps…
 
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 Interactivity API. The conversation ends with a discussion about future topics to cover in the series as they build out the plugin using the API. 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! Quick Start Guide - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity/#quick-start-guide Interactivity API Proposal - https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/ WP Movies - https://wpmovies.dev/ Our demo repo - https://github.com/viewSourcePodcast/vs-reading-list Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - Introduction (01:12) - Introducing the next project! (03:23) - What is the Interactivity API? (06:00) - The WooCommerce usecase (07:18) - How Interactivity API fits into the larger picture (10:02) - The Alpine.js Comparison (11:57) - So what project are we building? (15:24) - Tracking the list with Local Storage (16:44) - Using a resource already being loaded on the site (19:55) - How do you get started with the Interactivity API? (21:45) - What are JavaScript Modules? (32:56) - What's next in the series?…
 
Aurooba and Brian dig into the Font Library - a flagship feature launching in WordPress 6.5. Along the way they discuss the long road getting it into core, some user interface issues, and the future of "composability" in WordPress. 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! Fonts in WP Tavern - https://wptavern.com/a-pared-back-web-fonts-api-may-land-in-wordpress-6-0-or-not-at-all Rich Tabor - Composability - https://rich.blog/theme-composition/ WordPress 6.5 - https://make.wordpress.org/core/6.5 Brian's Tavern Article - https://wptavern.com/synced-pattern-overrides-punted-font-library-approved-as-wordpress-6-5-nears-release Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S02E12 - Font Library (00:09) - Intro and WordPress 6.5 (03:08) - Font Library and Developers Naming Things (05:05) - Release Landing Page, Playground, and WP CLI (09:49) - Styles Panel in the Site Editor (13:23) - Typography Panel and Tech issues (18:05) - Variants and Variable Fonts (19:52) - Google Fonts and GDPR (21:43) - Saving changes in the site editor (24:58) - Font Library's Journey to Core (28:01) - Ongoing Discussion for the Font Library (32:25) - The Hosting Companies Responsibility (35:47) - Composability…
 
Let's discuss the process of deploying Next.js applications using Vercel and explore the benefits of exploring different platforms and paradigms. We dive into the process of getting a project live with Vercel but discuss comparisons in the WordPress world, the complicated nature of deployment in WordPress, how different platforms handle them, and the role continuous integration plays into all of it. 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! - Vercel – https://vercel.com/ - What is utility-first CSS – https://heydonworks.com/article/what-is-utility-first-css/ - Brian's website – https://www.briancoords.com - Aurooba's website – https://aurooba.com (00:00) - S02E11 - Next.js Part 5 (00:37) - Familar tools are easier to wrap your head around (03:22) - On Deployment in the WordPress space (09:02) - First Look at Vercel Deployment (10:38) - Environment Variables (12:56) - Errors on first Vercel Deployment (13:31) - Using Vercel CLI (16:16) - How Deployments work (17:18) - Thinking in PRs (17:57) - Exploring the Deployment UI in Vercel (18:40) - Deployment UIs around the web (19:15) - Comparing to Netlify (20:21) - Taking your Vercel Project live (22:56) - Comparing to WordPress Deployments (24:56) - Prebuilt Deployments with Vercel (25:26) - Can you get to this level of deployment in WordPress? (29:29) - Continuous Integration (32:19) - The Advantage of continuous integration tools (34:22) - The value of not committing built files to the repo (35:29) - Cross-pollination between WordPress and other spaces (36:31) - Web Development is more complicated now (37:13) - The slow modernization of WordPress (37:50) - Takeaways from the Next.js Series (41:09) - CSS in JavaScript: a tangent (44:09) - What's Next?…
 
Wrapping up the functionality of their Next.js application, Brian and Aurooba look at CRUD operations: how to create, read, update, and delete (ok, maybe not delete) data by using Supabase as a database. They talk about structuring your database, when to update state while saving data, dynamic pages in Next.js and more. 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! Supabase - https://supabase.com/ Next.js - https://nextjs.org/ WP Audit - https://wpaudit.site/ Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S02E10 - Nextjs 4 (00:10) - Intro - What is CRUD (04:52) - Supabase (08:47) - Frontend Preview (10:22) - Our Bug and Async Data Effects (14:46) - Architecting Databases and Structure (23:00) - File structure and dynamic routes (24:59) - Client and Server Components for Supabase (30:04) - When to visually show data (34:40) - Planning vs Building First (36:21) - Queries in Components (40:39) - Planning for Database Migrations (42:55) - Next Episode Preview…
 
Continuing the series on Next.js, Aurooba and Brian take a look at a Next.js version of https://wpaudit.site complete with a login set up and ability to save your own checklist. 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! - Next.js 14 App Router - https://nextjs.org/docs/app - Brian's website – https://www.briancoords.com - Aurooba's website – https://aurooba.com (00:00) - Introduction (00:18) - Next.js' relationship with React (04:25) - Really exploring Next.js (07:34) - The Next.js clone of WPAudit.site (09:08) - Styling the login page to match (12:30) - Creating Pages in Next.js (13:14) - Generating opengraph images in Next.js (14:47) - Folder based page routes (16:51) - Next.js 14 Server components (18:41) - Caching in Next.js (19:29) - Loading Experiences in React (21:20) - Using Middleware in Next.js (23:15) - Fetching data in Next.js 14 (24:51) - Server Actions in Next.js 14 (27:55) - Using Vanilla-Extract for styling (35:01) - Why use CSS-in-JS? (36:18) - How CoPilot helps you do grunt dev work (39:37) - Saving the Checklist for each user (41:16) - Looking at the Audit table in Supabase (42:14) - Balancing current project needs with future needs (43:53) - Conclusion…
 
Continue the journey of building a Next.js application as Aurooba explains how to use Supabase to handle all aspects of user authentication in your app, including user accounts, email notifications, and session data. They also dig into server vs client side differences. 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! Supabase - https://supabase.com/ Supabase SSR - https://supabase.com/docs/guides/auth/server-side/creating-a-client AuthUI - https://supabase.com/docs/guides/auth/auth-helpers/auth-ui Gravity Forms - https://www.gravityforms.com/ Next.js App Router - https://nextjs.org/docs/app Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S2 E08 (00:08) - Intro Rant (01:43) - Decisions and Planning (04:11) - Today's Topic - Authentication (07:06) - The Supabase Admin UI (09:54) - Authentication UI in Supabase (15:35) - UI versus Config Files or CLIs (17:30) - Frontend Preview - What are we building? (20:38) - AuthUI (23:58) - Our package.json and Cookies (26:32) - Folder Structure (29:17) - Setting up a Supabase Client (35:33) - Submitting Forms to Supabase (38:45) - Session Data and Server-side Console (41:24) - Scaffolds and Boilerplates (42:29) - Flexibility vs Effort (48:40) - Next episode…
 
In this conversation, Brian and Aurooba discuss various topics related to Next.js development. They explore the importance of deeper understanding, the decisions involved in styling and storage in JavaScript applications, the advantages of CSS-in-JS libraries, the choice of Supabase as the database solution, handling user authentication, and selecting an email service for communication. 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! - StyleX – https://stylexjs.com/ - Vanilla Extract – https://vanilla-extract.style/ - Supabase – https://supabase.com/ - Cassidy's post – https://blog.cassidoo.co/post/annoyed-at-react/ - Brian's website – https://www.briancoords.com - Aurooba's website – https://aurooba.com (00:00) - Introduction (02:09) - The Decisions You have to make in Next.js projects (04:11) - How should we style things? (06:50) - CSS-in-JS (09:35) - The problem with CSS-in-JS (11:31) - Styling Approach Options (19:15) - How will we store data? (19:35) - Say no to Firebase (20:56) - Choosing Supabase (24:35) - How will we authenticate users? (28:05) - Choosing an Email service (30:58) - Staging environments are becoming more important (31:41) - What's next?…
 
Aurooba and Brian kick of a new series all about Next.js. What is Next.js and when is the right time to use it for a project? Along the way they spin up a new application and talk about the build process, file structure, and where you might host your Next application. 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! Next.js Docs - https://nextjs.org/docs Next.js Templates - https://vercel.com/templates/next.js WPAudit.site - https://wpaudit.site/ Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S02 E06 (00:09) - Our Next Topic: Next.JS (01:20) - What exactly is Next.JS? (06:42) - What problems does Next.JS solve? (13:35) - Setup and hosting for Next.js (18:19) - Spinning up a project (23:41) - Typescript and Typed Languages (25:18) - The Directory Structure (26:28) - Scripts Styles and Optimization (30:17) - Next.js Default Frontend (31:54) - Documentation in Next.JS (35:20) - What are we building? (40:02) - Why Next.js…
 
Brian nicknamed the WordPress 6.4 release the "warm and fuzzy" release, and we explore our favourite features that landed in WordPress Core as part of it. We also found a bug, file it, and talk about how to file a bug well so that it'll get fixed. 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! - Release Page - https://wordpress.org/download/releases/6-4/ - 6.4 Field Guide - https://make.wordpress.org/core/2023/10/23/wordpress-6-4-field-guide/ - The lightbox bug we found - https://github.com/WordPress/gutenberg/issues/56049 - Seth explains the Interactivity API - https://twitter.com/SethRubenstein/status/1722653807505531343 - Brian's website – https://www.briancoords.com - Aurooba's website – https://aurooba.com (00:00) - Introduction (00:22) - How quickly do you update? (02:20) - Our general reaction to WordPress 6.4 (04:46) - Taking a closer look at the Twenty Twenty Four theme (07:47) - The Persona Approach to the Twenty Twenty Four theme (11:57) - Renaming Groups in the Block Editor (15:26) - The Media Panel (18:43) - Image Thumbnails in List View (20:10) - The Lightbox (21:00) - The Interactivty API (22:44) - Finding a Bug in the Lightbox feature (24:59) - Filing a bug in the Gutenberg Repository (28:07) - How to file a bug well (33:31) - Conclusion…
 
It's the fourth and final episode of our series exploring Laravel. Brian takes us through the deployment process using Laravel Forge and AWS. Aurooba discusses "modern" WordPress development and how WordPress solutions like SpinupWP compare to tools like Netlify and Forge. 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! Suggest an episode - https://suggest.viewsource.fm/ All the code - https://github.com/viewSourcePodcast/suggest-episode Tailcolor (Tailwind Color Generator) - https://tailcolor.com/ Laravel Forge - https://forge.laravel.com/ Spinup WP - https://spinupwp.com/ Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - S02E04 - Laravel pt 4 (00:07) - Our Completed Laravel App (02:34) - Tailwind and Colors (04:56) - AlpineJS and Package Bloat (07:57) - Single Page Apps on Laravel (09:43) - Brian's Three Open Terminals (11:52) - Scaffolds and CLIs in WordPress (15:03) - Handling Build Assets in your Deployment (18:36) - Deployment - Forge (and SpinupWP) (24:25) - Connecting AWS to Forge (27:44) - Automated Git Deployments (31:20) - Git vs SFTP in Managed WordPress Hosting (34:33) - Other cool things like queues (37:14) - Final Thoughts…
 
Continuing on in the Laravel series, Brian adds suggestion submission capabilities to the Suggest an Episode app and discussed routing, content relationships, and the ease of templating in Laravel versus WordPress. 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! Demo Project - https://suggest.viewsource.fm/ Project Repo - https://github.com/viewSourcePodcast/suggest-episode Laravel Debug Bar - https://github.com/barryvdh/laravel-debugbar BerlinDB - https://github.com/berlindb/core Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - Introduction (01:14) - Submitting a form in to create a new suggestion (04:17) - Blade Templating Conditionals (06:51) - User roles and permission conditions (08:08) - The basics of Laravel Routes (09:10) - Routes and CRUD (10:36) - Error Handling in Routes (11:51) - Passing information to Routes (12:36) - How to create a Laravel Route (15:09) - Looking at the Suggestion Controller (18:36) - Comparing Laravel Scaffolding to WordPress Features (19:21) - Creating the Destroy function (21:25) - Comparing Routes in WordPress (23:07) - When the Data Model needs to change (25:09) - Content Relationships in WordPress (28:40) - What are the next steps of the application? (29:42) - Conclusion…
 
Breaking down Laravel and the MVC framework by building our first model and view. Along the way, Aurooba and Brian talk about Breeze, Artisan, database migrations, and Query Builder - all fundamental components of Laravel- and how they work. 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! Laravel Breeze - https://laravel.com/docs/10.x/starter-kits#laravel-breeze Eloquent ORM - https://laravel.com/docs/10.x/eloquent Code from this episode - https://github.com/viewSourcePodcast/suggest-episode Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - Introduction (00:08) - What are we building with Laravel? (02:48) - Frontend Demo and Laravel Breeze (04:17) - MVC - The Model (07:20) - MVC - The View (09:22) - MVC - Controller (11:40) - Artisan Migrations to set up Database tables (16:52) - Our New Suggestions Model (18:01) - Strictness in a Framework (21:53) - Query Builder (25:16) - Views and Blade Templates (32:29) - Coding Standards in Laravel (35:13) - Next Steps and Outro…
 
What exactly can you use Laravel for? How does it differ from WordPress? When does it make sense to use Laravel versus WordPress, and what can we learn from the Laravel approach to open source work? Come on an adventure with us as we dive into Laravel and build a mini project over the course of the next few episodes and compare and contrast it with our experience in the WordPress world. 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! Demo Project - https://suggest.viewsource.fm/ Project Repo - https://github.com/viewSourcePodcast/suggest-episode Laravel Breeze - https://laravel.com/docs/10.x/starter-kits WordPress Performant Translations plugin - https://make.wordpress.org/core/2023/09/05/call-for-testing-performant-translations Canonical Plugins in WordPress - https://make.wordpress.org/core/2022/09/11/canonical-plugins-revisited/ Brian's website – https://www.briancoords.com Aurooba's website – https://aurooba.com (00:00) - Introduction (00:58) - Getting into Laravel (03:12) - How Laravel is Different from WordPress (04:38) - Introducing the viewSource Laravel mini project (07:18) - When should you and shouldn't you build with WordPress? (11:26) - The Laravel Ecosystem (15:44) - Documentation in the Laravel world (18:06) - Using Breeze to spin up a login system (20:22) - How Laravel gives you momentum (21:28) - Every framework has a learning curve (23:46) - How to get started with Laravel (26:44) - Conclusion…
 
Season 2 starts in October! Tune in to find out what we'll be chatting about in this second season of viewSource and when it begins. 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! - Brian's website – https://www.briancoords.com - Aurooba's website – https://aurooba.com (00:00) - Season 2 Trailer (01:49) - Next.js 13 and Browser APIs (03:18) - Laravel is like WordPress for Applications (05:23) - Learning JavaScript (more) Deeply (06:33) - GraphQL vs REST API (09:18) - What can we learn about WordPress from other frameworks? (10:45) - What is the future of bespoke WordPress? (13:44) - Preview of season two…
 
Loading …

Welcome to Player FM!

Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.

 

icon Daily Deals
icon Daily Deals
icon Daily Deals

Quick Reference Guide

Copyright 2025 | Privacy Policy | Terms of Service | | Copyright
Listen to this show while you explore
Play