Reusable Components in React

04/10/23 • 29 min

Aurooba and Brian convert their simple React accordion into separate, reusable components and discuss the importance of components as foundational parts of the web. Next, they show how to use React devtools in Chrome to quickly examine and debug your components. Finally, they dig into the code with a focus on passing and destructuring the data you pass via props.

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!

Code from this episode
React Developer Tools
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
(00:00) - Introduction
(01:19) - Components as foundational parts of the web
(03:33) - Recap of our series so far
(04:15) - Using React devtools in Chrome
(08:31) - Our AccordionItem Component
(13:32) - Passing props and destructuring
(19:20) - How many components is too many?
(23:46) - Balancing and planning different approaches in React
(26:48) - What comes next? A preview on state and interactivity

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!

Code from this episode
React Developer Tools
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
(00:00) - Introduction
(01:19) - Components as foundational parts of the web
(03:33) - Recap of our series so far
(04:15) - Using React devtools in Chrome
(08:31) - Our AccordionItem Component
(13:32) - Passing props and destructuring
(19:20) - How many components is too many?
(23:46) - Balancing and planning different approaches in React
(26:48) - What comes next? A preview on state and interactivity

Previous 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

Next Episode

Tips on how to to debug your WordPress code

On today's episode, Aurooba manufactures a little bug in her code and then Brian helps debug what's going on. As they debug the code, they discuss the high level approach to debugging, some helpful WordPress tools to make finding problems easier, and discuss the role coding standards can have in helping you debug better.

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!

Query Monitor – https://en-ca.wordpress.org/plugins/query-monitor/
Using either option or options in ACF – https://www.advancedcustomfields.com/resources/get_field/#get-a-value-from-different-objects
The code from this episode – https://github.com/viewSourcePodcast/viewSource-blocks/blob/debug-episode/functions.php
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
viewSource Newsletter – https://viewsource.fm/subscribe