Realistic React Refactoring

Table of Contents

• Realistic React Refactoring
  • Table of Contents
  • Motivation
    • The App
      • Problem
      • Solution
        • Screenshot of finished app
    • Agenda

Motivation

I strongly agree with Kent Beck's recommendation of first making the change easy, and then making the easy change.

for each desired change, make the change easy (warning: this may be hard), then make the easy change

— Kent Beck (@KentBeck) September 25, 2012

I also strongly agree with Kent C. Dodd's thoughts about testing implementation details.

Testing implementation details is a recipe for disaster.

Do yourself a favor and give react-testing-library a solid try. Your future self will thank your present self https://t.co/iMU4gcj8aP 🐐

— Kent C. Dodds 🧑‍🚀 (@kentcdodds) September 7, 2018

Additionally, I try to make my code resemble documentation code as much as possible. However, documentation code is often updated and refactored much faster and more frequently than production code.

I hope this series of branches demonstrates my attempts to get an app working, add tests, and then incrementally improve the app without having to significantly change my tests.

The App

I don't want to build a cliche app, like a todo list. And I'd prefer if my app actually solves a real problem and/or answers a real question(s) I've had for a while.

Problem

As a developer who has fixed a handful of typos and grammatical errors in open source documentation, I want to see a list of all the repos that I've "contributed" to, along with how many stars all those repos have, so I can "measure" the reach of my impact.

Solution

I will build an app with the following features:

• A text input where the user can type a GitHub username
• A button that queries the GitHub GraphQL service for the repositoriescontributedto for the specified user
• A table of repos showing repo owner, name, and stargazers

Screenshot of finished app

Agenda

1. Configuration
   • Prettier
   • Format script
2. Get it working with no dependencies: basic-functionality branch
   • Regular HTML and native fetch
3. Add tests: add-tests branch
   • Testing library
4. Separate data and UI: extract-presentational-components branch
   • Extract presentational components
5. Reskin UI: reskin-ui branch
   • Replace regular HTML with Bootstrap
6. Update API client: update-api-client branch
   • Replace native fetch with Apollo Client
7. Refactor: replace-class-component-with-hooks branch
   • Replace class components with hooks