https://github.com/moduscreateorg/react-london-2022
React Advanced London 2022 Workshop
https://github.com/moduscreateorg/react-london-2022
Last synced: 9 months ago
JSON representation
React Advanced London 2022 Workshop
- Host: GitHub
- URL: https://github.com/moduscreateorg/react-london-2022
- Owner: ModusCreateOrg
- License: mit
- Created: 2022-09-14T17:10:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T22:48:14.000Z (almost 3 years ago)
- Last Synced: 2025-04-22T04:46:08.230Z (about 1 year ago)
- Language: TypeScript
- Size: 2.25 MB
- Stars: 9
- Watchers: 4
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Advanced London 2022 | Workshop
[](./LICENSE)
[](https://moduscreate.com)
## A Tale of Two Codebases
### Use the latest React features to clean up your code game… and our game code.
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](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).
- [Getting Started](#getting-started)
- [How it Works](#how-it-works)
- [Developing](#developing)
- [Prerequisites](#prerequisites)
- [Testing](#testing)
- [Contributing](#contributing)
- [Modus Create](#modus-create)
- [Licensing](#licensing)
# Getting Started
```sh
git clone https://github.com/ModusCreateOrg/react-london-2022.git
cd react-london-2022
npm i
npm start
```
# How it works
We'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](https://reactadvanced.com/)
to see how we use React best practices to make the code oh-so-GOOD.
## Agenda
1. **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.
1. **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.
1. **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.
1. **High level passthrough of the code and creation of the plan.**
We go over the actual code and create the plan of action.
1. **Extraction of code into utility functions.**
Find identical or similar code and create helper/utility functions, global or component-level.
1. **Extraction of state and effects into custom hooks.**
Find identical or similar states and effects and create global or component-level custom hooks.
1. **Grouping behavior into HOC.**
Extract common behaviors into HOCs.
1. **Creation of root level context and child components cleanup.**
Clean up communication between components by using a root level context.
1. **Result overview and discussion of possible future improvements.**
We take a step back and bask in the glory of our great work.
1. **How to keep your code clean, rules to follow and limitations to impose.**
A few notes on how to maintain control over your code.
# Developing
Open the code in your favorite IDE. Run the [setup script](#getting-started) above
to launch the app and keep it side-by-side on your screen with the code.
## Prerequisites
- Git ([Windows](https://git-scm.com/download/win)/[Mac](https://git-scm.com/download/mac)/[Linux](https://git-scm.com/download/linux))
- Node/NPM ([Windows](https://nodejs.org/en/download/)/[Mac](https://nodejs.org/en/download/)/[Linux](https://nodejs.org/en/download/package-manager/))
## Contributing
See [Contribution Guidelines](.github/CONTRIBUTING.md) and [Code of Conduct](.github/CODE_OF_CONDUCT.md).
# About the Presenter
### [Michael Tintiuc](https://github.com/michaeltintiuc)
*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`](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.
# Modus Create
[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.
This project is part of [Modus Labs](https://labs.moduscreate.com/?utm_source=labs&utm_medium=github&utm_campaign=REACT_LONDON_2022).
# Licensing
This project is [MIT licensed](./LICENSE).
[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/)