{"id":27294629,"url":"https://github.com/vitaminvp/react-patterns","last_synced_at":"2025-04-11T22:53:36.705Z","repository":{"id":39022273,"uuid":"244934444","full_name":"Vitaminvp/react-patterns","owner":"Vitaminvp","description":"react patterns examples","archived":false,"fork":false,"pushed_at":"2023-01-05T12:31:51.000Z","size":2001,"stargazers_count":47,"open_issues_count":20,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T22:53:29.785Z","etag":null,"topics":["compound-components","context","control-props","hoc","kottans","patterns","props-collection","props-getter","provider-pattern","proxy-component","react","render-props"],"latest_commit_sha":null,"homepage":null,"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/Vitaminvp.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":"2020-03-04T15:23:42.000Z","updated_at":"2024-11-06T04:43:33.000Z","dependencies_parsed_at":"2023-02-04T04:49:06.569Z","dependency_job_id":null,"html_url":"https://github.com/Vitaminvp/react-patterns","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/Vitaminvp%2Freact-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vitaminvp%2Freact-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vitaminvp%2Freact-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vitaminvp%2Freact-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vitaminvp","download_url":"https://codeload.github.com/Vitaminvp/react-patterns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248492948,"owners_count":21113162,"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":["compound-components","context","control-props","hoc","kottans","patterns","props-collection","props-getter","provider-pattern","proxy-component","react","render-props"],"created_at":"2025-04-11T22:53:35.638Z","updated_at":"2025-04-11T22:53:36.692Z","avatar_url":"https://github.com/Vitaminvp.png","language":"JavaScript","readme":"# react-patterns 😺\n\n## Kottans report\n\n#### (still in the process of writing)\n\n[Preview link](https://react-pattern.herokuapp.com/)\n\n[Presentation](https://docs.google.com/presentation/d/1zlfsA-dRYnW2Zf4oP1IUG_Um3fwihq0fBRrD5BR4Dnc/edit?usp=sharing)\n\nВ репозитории собраны примеры некоторых паттернов для работы с библиотекой [React](https://reactjs.org/).\nВся информация взяты из просторов Интернета.\nНекоторые паттерны, на мой взляд, являются противоречивыми и приведены только с ознакомительной целью.\n\nДля примера взята кнопка `switch` которая последовательно реализуется с применением разных подходов и усложнением логики работы.\n\nПримеры кода находятся в папке\n`src\\examples` пронумерованны и предполагают последовательное ознакомление т.к. последующие примеры могут содержать предыдущие паттерны.\n\nCreate with [create-react-app](https://github.com/facebook/create-react-app)\n\nTo start:\n\n#### `npm install` or `yarn install`\n\n#### `npm start` or `yarn start`\n\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n### React Patterns\n\n- Default component\n- Compound components\n- React context\n- Render Props\n- Props Collections\n- Prop Getters\n- State Initializers\n- State Reducers\n- Control Props\n- Provider Pattern\n- Higher Order Components\n\n### Bonuses\n\n- Reusable Styles\n- State Reducers (with change types)\n- Proxy component\n- Controlled Components (submit form)\n- Uncontrolled Components (submit form)\n\n![screenShot](./public/21.12.11.png)\n\n#### Links:\n\n- [advanced-react-patterns-v2](https://github.com/kentcdodds/advanced-react-patterns-v2)\n- [advanced-react-patterns-ultrasimplified](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified)\n- [reactjs.org](https://reactjs.org/docs/forms.html#controlled-components)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitaminvp%2Freact-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitaminvp%2Freact-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitaminvp%2Freact-patterns/lists"}