hub / github.com/krasimir/react-in-patterns
github.com/krasimir/react-in-patterns @main sqlite
10,764 symbols
31,401 edges
55 files
1,441 documented · 13%
README
React in patterns
:books: A free book that talks about design patterns/techniques used while developing with React.
Book
Translations
Content
Foundation
- Communication
- Input
- Output
- Event handlers
- Composition
- Using React's children API
- Passing a child as a prop
- Higher-order component
- Function as a children, render prop
- Controlled and uncontrolled inputs
- Presentational and container components
Data flow
- One direction data flow
- Flux
- Flux architecture and its main characteristics
- Implementing a Flux architecture
- Redux
- Redux architecture and its main characteristics
- Simple counter app using Redux
MISC
- Dependency injection
- Using React's context (prior to v. 16.3)
- Using React's context (v. 16.3 and above)
- Using the module system
- Styling
- The good old CSS class
- Inline styling
- CSS modules
- Styled-components
- Integration of third-party libraries
- React and separation of concerns
Source code
The code samples used in the book are available here.
Other resources
- React Design principles
- Airbnb React/JSX Style Guide
- React patterns at Planning Center Online
- React patterns by Michael Chan
- React patterns, techniques, tips and tricks
Building the book
yarn install && yarn build
To make the ebook generating possible install calibre and ln -s /Applications/calibre.app/Contents/MacOS/ebook-convert /usr/local/bin/.
Core symbols most depended-on inside this repo
warningcalled by 1817
code/redux/public/app.js
a
called by 279
_book/gitbook/theme.js
A
called by 239
_book/gitbook/theme.js
q
called by 132
_book/gitbook/theme.js
invariant
called by 104
code/dependency-injection-module-system/public/app.js
invariant
called by 104
code/composition/public/app.js
invariant
called by 104
code/higher-order-components/public/app.js
invariant
called by 104
code/redux/public/app.js
Shape
Languages
TypeScript100%
Modules by API surface
code/styling/public/app.js878 symbols
code/redux/public/app.js868 symbols
code/dependency-injection-module-system/public/app.js806 symbols
code/dependency-injection/public/app.js804 symbols
code/composition/public/app.js803 symbols
code/higher-order-components/public/app.js802 symbols
code/communication/public/app.js802 symbols
code/presentational-and-container/public/app.js801 symbols
code/one-direction-data-flow/public/app.js800 symbols
code/new-context-api/public/app.js779 symbols
code/third-party/public/app.js778 symbols
code/event-handlers/public/app.js778 symbols
Dependencies from manifests, versioned
babel-eslint4.1.8 · 1×
babel-preset-es20156.9.0 · 1×
babel-preset-react6.5.0 · 1×
babel-preset-stage-36.24.1 · 1×
babelify7.3.0 · 1×
browserify13.0.1 · 1×
eslint1.10.3 · 1×
eslint-plugin-react3.16.1 · 1×
gitbook3.2.3 · 1×
gitbook-cli2.3.2 · 1×
gulp3.9.1 · 1×
gulp-duration0.0.0 · 1×
For agents
$ claude mcp add react-in-patterns \
-- python -m otcore.mcp_server <graph>