Anybody can write code that "works." But what makes the best engineers stand out is their ability to create solutions that are clear, concise, testable and easy to understand and maintain. Join us as we explore some of React’s most powerful tools for well-architected solutions by starting with a suboptimal game codebase and refactoring it using industry best practices such as custom hooks, higher-order components (HOCs) and contexts.
git clone https://github.com/ModusCreateOrg/react-london-2022.git
cd react-london-2022
npm i
npm startWe've written a simple village game for your enjoyment, and we've written it BADLY. Follow along during our workshop at React Advanced London 2022 to see how we use React best practices to make the code oh-so-GOOD.
- Introduction of the initial implementation and description of its issues.
We glance over the initial state of the code and explain why the "but it works" approach is undesirable. - Presentation of the tools available to improve the code base.
List out custom hooks, HOC, context and a quick intro about them and what are the benefits of using them. - The mindset behind architecting clean solutions and refactoring.
How to think a few steps ahead and architect clean and maintainable solutions from the get-go. - High level passthrough of the code and creation of the plan.
We go over the actual code and create the plan of action. - Extraction of code into utility functions.
Find identical or similar code and create helper/utility functions, global or component-level. - Extraction of state and effects into custom hooks.
Find identical or similar states and effects and create global or component-level custom hooks. - Grouping behavior into HOC.
Extract common behaviors into HOCs. - Creation of root level context and child components cleanup.
Clean up communication between components by using a root level context. - Result overview and discussion of possible future improvements.
We take a step back and bask in the glory of our great work. - How to keep your code clean, rules to follow and limitations to impose.
A few notes on how to maintain control over your code.
Open the code in your favorite IDE. Run the setup script above to launch the app and keep it side-by-side on your screen with the code.
See Contribution Guidelines and Code of Conduct.
Principal Consultant / Software Engineer, Modus Create
Michael is a full-stack engineer and designer with over a decade of commercial experience in multiple web and mobile technologies. An advocate and frequent contributor to open source software, Michael is the author of the ionic/vue library which allows developers all over the world to write Ionic mobile apps using the Vue framework. In his free time, he enjoys game development, contributing to Open Source, hardware modding and creating projects in new languages.
Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.
This project is part of Modus Labs.
This project is MIT licensed.
Assets created by ARMM1998 and licensed under Creative Commons 0