Jack Franklin

Articles & Tutorials

Getting started with GraphQL: what client to use? (javascriptplayground.com)
Jul 29, 2019
Today we're looking into working with a GraphQL API and discussing if you need to reach for a 3rd party library or not.
Making impossible states impossible: data structures in React (javascriptplayground.com)
Jul 22, 2019
Today we're talking about avoiding bugs by structuring your data such that the bug can never occur.
Structuring React applications (javascriptplayground.com)
Jul 08, 2019
Today's post lays out my current thinking and approach to structuring React applications: the folder structure I use, my naming conventions, where I write tests, and so on.
Avoiding recursive useEffect hooks in React (javascriptplayground.com)
Jun 20, 2019
A short post today about an easy tactic to avoid your useEffect calls becoming recursive when setting state.
Making unit tests fail when PropTypes error (javascriptplayground.com)
Jun 03, 2019
Documenting components with React's PropTypes library is a great way to be notified when you've forgotten to pass a certain prop. Today we're going to see how we can leverage these to make our tests fail when our PropTypes are incorrect.
Hiding implementation details with React hooks (javascriptplayground.com)
May 28, 2019
Hooks are a great way to take some complex logic and hide it behind a nice facade. In this post we'll discuss the how, why and when of doing this.
Refactoring a component to use React hooks (javascriptplayground.com)
Feb 20, 2019
React 16.8 introduced hooks; a new way to work with effects and state in React. No longer do React components that have state need to be ES2015 classes that extend React.Component - hooks let us write components as functions and still have all the functionality of class based components.
Habits of Successful React components (javascriptplayground.com)
Mar 07, 2018
That said, over the last few years of writing React components I’ve come up with a set of guidelines that I tend to follow, and in this post I wanted to share those below.
Using React Fragments for the first time (javascriptplayground.com)
Dec 18, 2017
React v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it’s this feature that I want to talk about today.
Extracting Logic from React Components (javascriptplayground.com)
Jul 17, 2017
In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post.

Video Guides & Talks

Tip Top Testing in JavaScript (youtube.com)
Dec 17, 2018
In this talk we'll dive into the approaches and strategies needed to create a great unit test environment for your JavaScript and React applications. We'll examine what makes the perfect test, what to avoid, and how to use more complex features like mocks and spies to enable you to write tests more easily.
Testing React with Kent C. Dodds and Jack Franklin (youtube.com)
Aug 28, 2018
Test React components in complete isolation, in integration, or a mix of the two? Jack and Kent will discuss their differing opinions about Testing React applications and why they have come to their conclusions.
Refactoring React with Tests (youtube.com)
Jun 30, 2017
In this screencast we'll look at a React component that needs refactoring and splitting up, and refactor it whilst using and updating the tests to ensure all functionality is working.
Dealing with data from APIs in ReactJS (youtube.com)
Jan 18, 2017
In this video I'll show you how you can use React to fetch data from an API and render it in your components. We'll use the fetch API to make a request and make use of React's lifecycle hooks to start the request when our component is being mounted.
Jack Franklin: Testing React Applications (youtube.com)
May 24, 2016
We'll discuss the best tooling and approaches for building ReactJS applications in the NodeJS environment and in the browser using React TestUtils and other third party libraries that make it easy to test your components. We'll see how to build components in a way that makes them more maintainable, testable and easier to work with.

Courses & Video Series

React in Five (javascriptplayground.com)
Aug 14, 2018
A series of 5 minute videos to level up your React skillset
Testing React with Enzyme and Jest (javascriptplayground.com)
Feb 12, 2018
A video series to enable you to test React components thoroughly, refactor with confidence and abstract logic out of components