https://github.com/vitaminvp/react-patterns
react patterns examples
https://github.com/vitaminvp/react-patterns
compound-components context control-props hoc kottans patterns props-collection props-getter provider-pattern proxy-component react render-props
Last synced: about 1 year ago
JSON representation
react patterns examples
- Host: GitHub
- URL: https://github.com/vitaminvp/react-patterns
- Owner: Vitaminvp
- Created: 2020-03-04T15:23:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T12:31:51.000Z (over 3 years ago)
- Last Synced: 2025-04-11T22:53:29.785Z (about 1 year ago)
- Topics: compound-components, context, control-props, hoc, kottans, patterns, props-collection, props-getter, provider-pattern, proxy-component, react, render-props
- Language: JavaScript
- Size: 1.91 MB
- Stars: 47
- Watchers: 2
- Forks: 7
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-patterns 😺
## Kottans report
#### (still in the process of writing)
[Preview link](https://react-pattern.herokuapp.com/)
[Presentation](https://docs.google.com/presentation/d/1zlfsA-dRYnW2Zf4oP1IUG_Um3fwihq0fBRrD5BR4Dnc/edit?usp=sharing)
В репозитории собраны примеры некоторых паттернов для работы с библиотекой [React](https://reactjs.org/).
Вся информация взяты из просторов Интернета.
Некоторые паттерны, на мой взляд, являются противоречивыми и приведены только с ознакомительной целью.
Для примера взята кнопка `switch` которая последовательно реализуется с применением разных подходов и усложнением логики работы.
Примеры кода находятся в папке
`src\examples` пронумерованны и предполагают последовательное ознакомление т.к. последующие примеры могут содержать предыдущие паттерны.
Create with [create-react-app](https://github.com/facebook/create-react-app)
To start:
#### `npm install` or `yarn install`
#### `npm start` or `yarn start`
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
### React Patterns
- Default component
- Compound components
- React context
- Render Props
- Props Collections
- Prop Getters
- State Initializers
- State Reducers
- Control Props
- Provider Pattern
- Higher Order Components
### Bonuses
- Reusable Styles
- State Reducers (with change types)
- Proxy component
- Controlled Components (submit form)
- Uncontrolled Components (submit form)
#### Links:
- [advanced-react-patterns-v2](https://github.com/kentcdodds/advanced-react-patterns-v2)
- [advanced-react-patterns-ultrasimplified](https://github.com/ohansemmanuel/advanced-react-patterns-ultrasimplified)
- [reactjs.org](https://reactjs.org/docs/forms.html#controlled-components)