{"id":21878868,"url":"https://github.com/moduscreateorg/react-london-2022","last_synced_at":"2025-08-25T06:34:54.679Z","repository":{"id":90321731,"uuid":"536683435","full_name":"ModusCreateOrg/react-london-2022","owner":"ModusCreateOrg","description":"React Advanced London 2022 Workshop","archived":false,"fork":false,"pushed_at":"2023-07-19T22:48:14.000Z","size":2359,"stargazers_count":9,"open_issues_count":12,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-22T04:46:08.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ModusCreateOrg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-09-14T17:10:34.000Z","updated_at":"2024-12-06T21:04:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"16aaaec8-990c-456a-991d-ee4a7ad2cb31","html_url":"https://github.com/ModusCreateOrg/react-london-2022","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ModusCreateOrg/template","purl":"pkg:github/ModusCreateOrg/react-london-2022","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-london-2022","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-london-2022/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-london-2022/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-london-2022/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ModusCreateOrg","download_url":"https://codeload.github.com/ModusCreateOrg/react-london-2022/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ModusCreateOrg%2Freact-london-2022/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272013592,"owners_count":24858480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-25T02:00:12.092Z","response_time":1107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T08:13:58.039Z","updated_at":"2025-08-25T06:34:54.672Z","avatar_url":"https://github.com/ModusCreateOrg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Advanced London 2022 | Workshop\n\n[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](./LICENSE)\n[![Powered by Modus_Create](https://img.shields.io/badge/powered_by-Modus_Create-blue.svg?longCache=true\u0026style=flat\u0026logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIwIDMwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNOTguODI0IDE0OS40OThjMCAxMi41Ny0yLjM1NiAyNC41ODItNi42MzcgMzUuNjM3LTQ5LjEtMjQuODEtODIuNzc1LTc1LjY5Mi04Mi43NzUtMTM0LjQ2IDAtMTcuNzgyIDMuMDkxLTM0LjgzOCA4Ljc0OS01MC42NzVhMTQ5LjUzNSAxNDkuNTM1IDAgMCAxIDQxLjEyNCAxMS4wNDYgMTA3Ljg3NyAxMDcuODc3IDAgMCAwLTcuNTIgMzkuNjI4YzAgMzYuODQyIDE4LjQyMyA2OS4zNiA0Ni41NDQgODguOTAzLjMyNiAzLjI2NS41MTUgNi41Ny41MTUgOS45MjF6TTY3LjgyIDE1LjAxOGM0OS4xIDI0LjgxMSA4Mi43NjggNzUuNzExIDgyLjc2OCAxMzQuNDggMCA4My4xNjgtNjcuNDIgMTUwLjU4OC0xNTAuNTg4IDE1MC41ODh2LTQyLjM1M2M1OS43NzggMCAxMDguMjM1LTQ4LjQ1OSAxMDguMjM1LTEwOC4yMzUgMC0zNi44NS0xOC40My02OS4zOC00Ni41NjItODguOTI3YTk5Ljk0OSA5OS45NDkgMCAwIDEtLjQ5Ny05Ljg5NyA5OC41MTIgOTguNTEyIDAgMCAxIDYuNjQ0LTM1LjY1NnptMTU1LjI5MiAxODIuNzE4YzE3LjczNyAzNS41NTggNTQuNDUgNTkuOTk3IDk2Ljg4OCA1OS45OTd2NDIuMzUzYy02MS45NTUgMC0xMTUuMTYyLTM3LjQyLTEzOC4yOC05MC44ODZhMTU4LjgxMSAxNTguODExIDAgMCAwIDQxLjM5Mi0xMS40NjR6bS0xMC4yNi02My41ODlhOTguMjMyIDk4LjIzMiAwIDAgMS00My40MjggMTQuODg5QzE2OS42NTQgNzIuMjI0IDIyNy4zOSA4Ljk1IDMwMS44NDUuMDAzYzQuNzAxIDEzLjE1MiA3LjU5MyAyNy4xNiA4LjQ1IDQxLjcxNC01MC4xMzMgNC40Ni05MC40MzMgNDMuMDgtOTcuNDQzIDkyLjQzem01NC4yNzgtNjguMTA1YzEyLjc5NC04LjEyNyAyNy41NjctMTMuNDA3IDQzLjQ1Mi0xNC45MTEtLjI0NyA4Mi45NTctNjcuNTY3IDE1MC4xMzItMTUwLjU4MiAxNTAuMTMyLTIuODQ2IDAtNS42NzMtLjA4OC04LjQ4LS4yNDNhMTU5LjM3OCAxNTkuMzc4IDAgMCAwIDguMTk4LTQyLjExOGMuMDk0IDAgLjE4Ny4wMDguMjgyLjAwOCA1NC41NTcgMCA5OS42NjUtNDAuMzczIDEwNy4xMy05Mi44Njh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+)](https://moduscreate.com)\n\n## A Tale of Two Codebases\n\n![Sample game - A Tale of Two Codebases](./assets/game-banner.png \"Sample game - A Tale of Two Codebases\")\n\n### Use the latest React features to clean up your code game… and our game code.\nAnybody 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](https://reactjs.org/)’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](https://reactjs.org/docs/hooks-custom.html), [higher-order components](https://reactjs.org/docs/higher-order-components.html) (HOCs) and [contexts](https://reactjs.org/docs/context.html).\n\n- [Getting Started](#getting-started)\n- [How it Works](#how-it-works)\n- [Developing](#developing)\n  - [Prerequisites](#prerequisites)\n  - [Testing](#testing)\n  - [Contributing](#contributing)\n- [Modus Create](#modus-create)\n- [Licensing](#licensing)\n\n# Getting Started\n\n```sh\ngit clone https://github.com/ModusCreateOrg/react-london-2022.git\ncd react-london-2022\nnpm i\nnpm start\n```\n\n# How it works\n\nWe've written a simple village game for your enjoyment, and we've written it BADLY.\nFollow along during our workshop at [React Advanced London 2022](https://reactadvanced.com/)\nto see how we use React best practices to make the code oh-so-GOOD.\n\n## Agenda\n\n1. **Introduction of the initial implementation and description of its issues.**\u003cbr\u003e\n   We glance over the initial state of the code and explain why the \"but it works\" approach is undesirable.\n1. **Presentation of the tools available to improve the code base.**\u003cbr\u003e\n   List out custom hooks, HOC, context and a quick intro about them and what are the benefits of using them.\n1. **The mindset behind architecting clean solutions and refactoring.**\u003cbr\u003e\n   How to think a few steps ahead and architect clean and maintainable solutions from the get-go.\n1. **High level passthrough of the code and creation of the plan.**\u003cbr\u003e\n   We go over the actual code and create the plan of action.\n1. **Extraction of code into utility functions.**\u003cbr\u003e\n   Find identical or similar code and create helper/utility functions, global or component-level.\n1. **Extraction of state and effects into custom hooks.**\u003cbr\u003e\n   Find identical or similar states and effects and create global or component-level custom hooks.\n1. **Grouping behavior into HOC.**\u003cbr\u003e\n   Extract common behaviors into HOCs.\n1. **Creation of root level context and child components cleanup.**\u003cbr\u003e\n   Clean up communication between components by using a root level context.\n1. **Result overview and discussion of possible future improvements.**\u003cbr\u003e\n   We take a step back and bask in the glory of our great work.\n1. **How to keep your code clean, rules to follow and limitations to impose.**\u003cbr\u003e\n   A few notes on how to maintain control over your code.\n\n# Developing\n\nOpen the code in your favorite IDE. Run the [setup script](#getting-started) above\nto launch the app and keep it side-by-side on your screen with the code.\n\n## Prerequisites\n\n- Git ([Windows](https://git-scm.com/download/win)/[Mac](https://git-scm.com/download/mac)/[Linux](https://git-scm.com/download/linux))\n- Node/NPM ([Windows](https://nodejs.org/en/download/)/[Mac](https://nodejs.org/en/download/)/[Linux](https://nodejs.org/en/download/package-manager/))\n\n## Contributing\n\nSee [Contribution Guidelines](.github/CONTRIBUTING.md) and [Code of Conduct](.github/CODE_OF_CONDUCT.md).\n\n# About the Presenter\n\n### [Michael Tintiuc](https://github.com/michaeltintiuc)\n*Principal Consultant / Software Engineer, Modus Create*\n\n\u003cimg src=\"./assets/mt-portrait.png\" alt=\"Michael Tintiuc\" title=\"Michael Tintiuc\" align=\"left\" /\u003e\n\nMichael 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`](https://github.com/ionic-team/ionic-framework/tree/main/packages/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.\n\n\u003cbr clear=\"both\" /\u003e\n\n# Modus Create\n\n[Modus Create](https://moduscreate.com) 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.\n\n\u003ca href=\"https://moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=REACT_LONDON_2022\"\u003e\u003cimg src=\"https://res.cloudinary.com/modus-labs/image/upload/h_80/v1533109874/modus/logo-long-black.svg\" height=\"80\" alt=\"Modus Create\"/\u003e\u003c/a\u003e\n\u003cbr /\u003e\n\nThis project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=REACT_LONDON_2022).\n\n\u003ca href=\"https://labs.moduscreate.com/?utm_source=labs\u0026utm_medium=github\u0026utm_campaign=REACT_LONDON_2022\"\u003e\u003cimg src=\"https://res.cloudinary.com/modus-labs/image/upload/h_80/v1531492623/labs/logo-black.svg\" height=\"80\" alt=\"Modus Labs\"/\u003e\u003c/a\u003e\n\n# Licensing\n\nThis project is [MIT licensed](./LICENSE).\n\n[Assets](https://opengameart.org/content/zelda-like-tilesets-and-sprites) created by [ARMM1998](https://opengameart.org/users/armm1998) and licensed under [Creative Commons 0](https://creativecommons.org/publicdomain/zero/1.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoduscreateorg%2Freact-london-2022","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoduscreateorg%2Freact-london-2022","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoduscreateorg%2Freact-london-2022/lists"}