What is a React Component?

03/27/23 • 19 min

Building on our simple React app, Aurooba demonstrates a component and sets up state to track variables. While discussing return statements, Brian cringes about JSX and mixing HTML with JavaScript. They also discuss how a function can return more than one variable in modern JavaScript.

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/
@wordpress/element - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
(00:00) - Introduction
(01:10) - The Return in React Components
(07:39) - Setting up State with @wordpress/element
(10:25) - Destructuring and Getting Multiple Values from a Function
(14:05) - Calling Event Functions in JSX
(16:06) - Frontend Recap and Next Steps

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/
@wordpress/element - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
(00:00) - Introduction
(01:10) - The Return in React Components
(07:39) - Setting up State with @wordpress/element
(10:25) - Destructuring and Getting Multiple Values from a Function
(14:05) - Calling Event Functions in JSX
(16:06) - Frontend Recap and Next Steps

Previous Episode

Getting started with React inside WordPress

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

Next Episode

Building an accessible accordion

Aurooba and Brian dig into the semantics of not only what makes an accordion accessible, but also why a11y should be a first class consideration when you build anything on the web. They also explore how different ARIA tags work and what they indicate, taking a previously inaccessible accordion and transforming it into something navigable visually, with a keyboard, and with other assistive devices. Along the way, they also think out loud about the definition of an accordion and what that really means.

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!

Source code for this episode – https://github.com/viewSourcePodcast/viewSource-blocks/tree/add/accordion-block-a11y
Coding inclusive collapsible sections – https://inclusive-components.design/collapsible-sections/
ARIA Guide to Accordions – https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
Exploring what a React component is : https://youtu.be/eCKyI12JJsw
Using React on the WordPress frontend : https://youtu.be/TtmY2Ck_6i0
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
(00:00) - Introduction
(00:15) - The importance of accessibility
(03:25) - The different considerations of making something accessible
(05:35) - Recapping where are are in the Accordion Block series
(06:50) - Demo-ing an accessible accordion
(08:36) - Defining an accordion
(10:40) - Header versus heading
(12:21) - Keyboard accessibility
(15:32) - What does ARIA stand for?
(16:03) - Coding an accessible accordion
(16:43) - The components of an accordion section
(17:23) - Diving into the semantics of an accordion section header
(23:11) - Targetting ARIA tags in your CSS
(24:21) - Digging into the accordion section panel
(26:32) - Animating an accordion
(27:46) - Next Steps
(29:34) - Conclusion