{"id":13678893,"url":"https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified","last_synced_at":"2025-04-06T06:09:52.120Z","repository":{"id":39338300,"uuid":"216153625","full_name":"ohansemmanuel/advanced-react-patterns-ultrasimplified","owner":"ohansemmanuel","description":"👌🏿Simplified Advanced React Patterns for Everyone","archived":false,"fork":false,"pushed_at":"2023-01-21T05:06:22.000Z","size":2098,"stargazers_count":277,"open_issues_count":39,"forks_count":199,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T05:07:13.682Z","etag":null,"topics":["react","reactjs","reactjs-components","reactjs-demo","wip"],"latest_commit_sha":null,"homepage":"https://advanced-react-patterns-ultrasimplified.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ohansemmanuel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-19T05:22:08.000Z","updated_at":"2025-03-15T22:52:29.000Z","dependencies_parsed_at":"2023-01-26T22:00:58.208Z","dependency_job_id":null,"html_url":"https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohansemmanuel%2Fadvanced-react-patterns-ultrasimplified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohansemmanuel%2Fadvanced-react-patterns-ultrasimplified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohansemmanuel%2Fadvanced-react-patterns-ultrasimplified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ohansemmanuel%2Fadvanced-react-patterns-ultrasimplified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ohansemmanuel","download_url":"https://codeload.github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441053,"owners_count":20939239,"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","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":["react","reactjs","reactjs-components","reactjs-demo","wip"],"created_at":"2024-08-02T13:00:59.587Z","updated_at":"2025-04-06T06:09:52.102Z","avatar_url":"https://github.com/ohansemmanuel.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![Advanced React Patterns Ultrasimplified](assets/hero@3x.png)\n\n**Welcome to Advanced React Patterns Ultrasimplified!**\n\nHere, 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!\n\n## Helpful Links\n\n### 🖥 [The demo site](https://advanced-react-patterns-ultrasimplified.netlify.com/)\n\n### 👀 [The udemy course?](https://www.udemy.com/course/the-complete-guide-to-advanced-react-patterns/)\n\n---\n\n## What do you mean by 'Ultrasimplified'?\n\n### 1. Real World Demos 🚀\n\nYou won't find basic hello world demos here. The demos have been intentionally designed to be actually helpful and **relatable**.\n\n![GIF of Medium clap demo](assets/explainer-demo.gif)\n\n### 2. Mimics your day-to-day job as a developer 🖥\n\nEach pattern is implemented and discussed via **a pull request**. **View** the PRs. **Read** the descriptions. Read the **comments**. Like you do at work!\n\n## Coming from my [Udemy Course](https://www.udemy.com/course/the-complete-guide-to-advanced-react-patterns/)?\n\n- The branch we start off from is branch `clean-slate`. [See branch](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/tree/clean-slate)\n- Every lesson starts off in a new \"clean-slate\" branch e.g. \"clean-slate-01\", \"clean-slate-02\", \"clean-slate-03\" etc.\n\n* The development DEMO site lives here: https://dev-advanced-react-patterns-ultrasimplified.netlify.com/\n\n## But I'm just a beginner. Isn't this too advanced?\n\nIdeally, **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.\n\nSome 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.\n\n## How do I run the demos locally?\n\n1. Clone this repo\n\n```sh\ngit clone git@github.com:ohansemmanuel/advanced-react-patterns-ultrasimplified.git\n```\n\n2. Change directory\n\n```sh\ncd showcase\n```\n\n3. Install dependencies\n\n```sh\nnpm install\n```\n\nor\n\n```sh\nyarn install\n```\n\n4. Run the app\n\n```sh\nnpm run dev\n```\n\nor\n\n```sh\nyarn dev\n```\n\n## The Patterns implemented (PRs)\n\n### 1. The Medium Clap\n\n- [Initial implementation with class component](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/1)\n- [Refactor to custom hooks](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/16)\n\n### 2. Compound Components\n\n- [Initial implementation](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/17)\n- [With Callback](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/18/)\n\n### 3. [Reusable Styles](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/19)\n\n### 4. [Control Props](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/21)\n\n### 5. [Custom Hooks](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/7)\n\n### 6. [Props Collection](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/8)\n\n### 7. [Prop Getters](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/9)\n\n### 8. [State Initializers](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/10)\n\n### 9. [State Reducers](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/12)\n\n- [Initial refactor to useReducer](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/12)\n- [With user defined reducer](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/13)\n- [With type and reducer export](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified/pull/14)\n\n---\n\n[![cc-by-4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](http://creativecommons.org/licenses/by/4.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohansemmanuel%2Fadvanced-react-patterns-ultrasimplified","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fohansemmanuel%2Fadvanced-react-patterns-ultrasimplified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fohansemmanuel%2Fadvanced-react-patterns-ultrasimplified/lists"}