Tag: React

The purpose and use case for the React Context API long eluded me. I was familiar with what it did in principle, but struggled to find a use case for it. The Context API can solve some unique problems such as: grouping localized text strings and creating a language provider. In this post I share how the Context API can help solve these problems, as well as some sample code. According to the React docs: Context provides a way to pass data through the component tree without having to pass props down manually at every level Passing Localized String Props Localized applications bring a host of various complexities, one of which being an increase in the amount of props for localized text. The removal of any hard coded text strings can quickly…

The attribute is an essential part of the HTML element. It identifies the main language of the document's content. This is used by screen readers to determine the pronunciation of words. Screen readers have a default language setting, but will respect the language specified in the element if they differ. However, if this attribute is missing, and the language of the document is different than the screen reader's settings, the user will receive a subpar experience with incorrect pronunciations. For more information on the accessibility of this attribute, check out Deque University's detail page. React Helmet and JSX In many React development scenarios, the shell HTML template is not immediately available to the developer. In other…

Last week I decided to install the React 16.8 alpha on a branch and experiment with React Hooks in preparation for their release on February 6, 2018. The site utilized a render prop based Slideshow component in several places as well as a handful of other class based components. Through this process, I was able to consolidate the application code and eliminate all class based components from the site's code base. The React team does not recommend refactoring your entire codebase to Hooks on their release. I did this primarily as a means to engage with the Hooks API in a relatively small codebase. You can find the code conversion to Hooks discussed in this post at the related PR. Converting to Hooks and lessons learned The Hooks…

I am so excited to announce that the redesign of my portfolio and blog is finally live after going back to to the conceptual drawing board and rebuilding it from the ground up. It has been an exciting journey to implement new development and design concepts that I have picked up since May 2017 when I built the first version of the site. At the time, it was the first full site that I had put together, and was substantially more involved than the relatively small projects I had done to that point. Since then I worked on more complex applications, built a full stack travel application with a team of two other developers, and dove headfirst into React. The previous version of the site was built using Jekyll as a static site generator. This was…