https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified
👌🏿Simplified Advanced React Patterns for Everyone
https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified
react reactjs reactjs-components reactjs-demo wip
Last synced: 11 months ago
JSON representation
👌🏿Simplified Advanced React Patterns for Everyone
- Host: GitHub
- URL: https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified
- Owner: ohansemmanuel
- Created: 2019-10-19T05:22:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-21T05:06:22.000Z (about 3 years ago)
- Last Synced: 2025-03-30T05:07:13.682Z (12 months ago)
- Topics: react, reactjs, reactjs-components, reactjs-demo, wip
- Language: JavaScript
- Homepage: https://advanced-react-patterns-ultrasimplified.netlify.com
- Size: 2 MB
- Stars: 277
- Watchers: 9
- Forks: 199
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**Welcome to Advanced React Patterns Ultrasimplified!**
Here, you'll be walked through advanced React Component Patterns in an intuitive fashion that models your day-to-day job as a Software Engineer - Pull requests!
## Helpful Links
### 🖥 [The demo site](https://advanced-react-patterns-ultrasimplified.netlify.com/)
### 👀 [The udemy course?](https://www.udemy.com/course/the-complete-guide-to-advanced-react-patterns/)
---
## What do you mean by 'Ultrasimplified'?
### 1. Real World Demos 🚀
You won't find basic hello world demos here. The demos have been intentionally designed to be actually helpful and **relatable**.
### 2. Mimics your day-to-day job as a developer 🖥
Each pattern is implemented and discussed via **a pull request**. **View** the PRs. **Read** the descriptions. Read the **comments**. Like you do at work!
## Coming from my [Udemy Course](https://www.udemy.com/course/the-complete-guide-to-advanced-react-patterns/)?
- The branch we start off from is branch `clean-slate`. [See branch](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/tree/clean-slate)
- Every lesson starts off in a new "clean-slate" branch e.g. "clean-slate-01", "clean-slate-02", "clean-slate-03" etc.
* The development DEMO site lives here: https://dev-advanced-react-patterns-ultrasimplified.netlify.com/
## But I'm just a beginner. Isn't this too advanced?
Ideally, **you're not new to React**. This is targetted more towards intermediate React engineers, but I'm sure a diligent beginner may work through these PRs as well.
Some comforting words: working through these patterns in a set of PRs allows you to focus on a bit at a time, with only new changes considered. Give it a try. It might turn out easier than you think.
## How do I run the demos locally?
1. Clone this repo
```sh
git clone git@github.com:ohansemmanuel/advanced-react-patterns-ultrasimplified.git
```
2. Change directory
```sh
cd showcase
```
3. Install dependencies
```sh
npm install
```
or
```sh
yarn install
```
4. Run the app
```sh
npm run dev
```
or
```sh
yarn dev
```
## The Patterns implemented (PRs)
### 1. The Medium Clap
- [Initial implementation with class component](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/1)
- [Refactor to custom hooks](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/16)
### 2. Compound Components
- [Initial implementation](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/17)
- [With Callback](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/18/)
### 3. [Reusable Styles](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/19)
### 4. [Control Props](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/21)
### 5. [Custom Hooks](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/7)
### 6. [Props Collection](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/8)
### 7. [Prop Getters](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/9)
### 8. [State Initializers](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/10)
### 9. [State Reducers](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/12)
- [Initial refactor to useReducer](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/12)
- [With user defined reducer](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/13)
- [With type and reducer export](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/14)
---
[](http://creativecommons.org/licenses/by/4.0/)