Implementing a chess transcriber in React Paramjit Singh @busywhistling Lessons on component architecture & when to use external state management React Berlin Meetup

Paramjit Singh https://paramjit.org ● Been programming since age 10 ● Math background, with a BSc in math/CS ● Been working with React for a while ● Socials on website, feel free to connect! @busywhistling

Idea: Coding a chess transcriber in React Standard Algebraic Notation: a way of recording a chess game in writing ● Moving pawn from its initial position e2 to e4, recorded as e4 ● Name piece when you have ambiguity — moving knight to f3, recorded as Nf3 ● And so on We want an app to go back and forth between written notation and game board

The old way Demo time

Are we thinking in React?

On a quest to improve app architecture ● Make components based on features, not based on UI semantics Natural consequence of trying to minimize passing around of props / state Good testing involves testing the (input/output of) components, not how they are implemented. Implementation might change, but it’s the functionality which is important. — Jest. Now think of UI as the visual implementation of functionality. ● Do we need to use Redux? ○ External state management (Flux or not) is great for decoupling actions from the components. We don’t need this in our app. ○ Truly necessary only when one needs the actions (state changes) themselves (whether for bug reports, persistent storage or syncing UI across network).

The new way Demo time

Exercise time :) RANDOM GROUP FACEBUCH BERLIN facebuch

Talk slides up on website (https://paramjit.org)! Looking for new opportunities, please let me know. 👋