Pragmatic Patterns For Maintainable React Apps

Is your React code messy? This session will help you tidy it up.

From ES6+ features that help readability to lessons I’ve learned packing my suitcase, we’ll cover several patterns for improving maintainability.

You’ll leave with a handful of ways to make your React code more manageable.

Are you building a React app, but struggling to navigate the existing code? Do you find yourself spending too much time trying to understand what you wrote barely a month ago? Do you lose sleep thinking about that nasty 400-line component that no one wants to touch?

This session will help you tidy up your codebase. We’ll cover a variety of simple patterns and practices for improving the maintainability of your React app. Some questions we’ll answer:

• What features from ES6+ help improve readability?
• How can packing a suitcase help us organize our code better?
• What is the “Ducks” pattern?
• What can we learn about React components from a puzzleball that I once got out of a 25 cent vending machine?

With the answers to these questions and more, you’ll leave with ideas on how to make your React codebase more manageable.

I have nearly 20 years of experience as a web developer, with an eye for readability and maintainability, and for the last couple years I’ve applied this to React apps. This talk aggregates a handful of ideas that I’ve been collecting.

I have given this talk at a Milwaukee React meetup in March, 2018, and at the Northeast Wisconsin Code Camp in March, 2018.

Slides: http://bit.ly/pragmatic-react-patterns

Notes about the slides: * The resolved URL contains identifying information * Two slides in the deck contain an obscured obscenity (“WHO F#$%#%$ING CARES?”). I do not swear in any of my talks - I let the audience read those slides on their own. I’m happy to remove them if you feel it is offensive.