├── .gitignore ├── .vscode └── settings.json ├── README.md ├── components ├── Callout.tsx ├── Features.tsx └── StackBlitz.tsx ├── custom.css ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages ├── .DS_Store ├── _app.tsx ├── _document.tsx ├── index.tsx ├── meta.json └── patterns │ ├── design-patterns │ ├── factory-pattern.mdx │ ├── introduction.mdx │ ├── meta.json │ ├── module-pattern.mdx │ ├── observer-pattern.mdx │ ├── prototype-pattern.mdx │ ├── proxy-pattern.mdx │ └── singleton-pattern.mdx │ ├── index.mdx │ ├── meta.json │ ├── performance-patterns │ ├── browser-hints.mdx │ ├── dynamic-import.mdx │ ├── import-on-visibility.mdx │ ├── introduction.mdx │ ├── meta.json │ ├── route-based-splitting.mdx │ └── static-import.mdx │ ├── react-patterns │ ├── compound-pattern.mdx │ ├── conpres.mdx │ ├── higher-order-component.mdx │ ├── hooks-pattern.mdx │ ├── meta.json │ ├── provider-pattern.mdx │ └── render-props.mdx │ └── rendering-patterns │ ├── client-side-rendering.mdx │ ├── incremental-static-regeneration.mdx │ ├── introduction.mdx │ ├── meta.json │ ├── server-side-rendering.mdx │ ├── static-rendering.mdx │ └── streaming-ssr.mdx ├── postcss.config.js ├── public ├── .DS_Store ├── design-patterns │ ├── .DS_Store │ ├── module-pattern │ │ └── 1.png │ ├── prototype-pattern │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── 4.png │ ├── proxy-pattern │ │ └── 001.png │ └── singleton-pattern │ │ └── 1.png ├── fm-logo.png ├── javascript.svg ├── js.png ├── logo.svg ├── og-image2.png ├── ogimage.png ├── ogimage1.png ├── performance-patterns │ ├── .DS_Store │ ├── browser-hints │ │ ├── prefetch.png │ │ └── preload.png │ └── introduction │ │ ├── 1.png │ │ ├── 2.png │ │ └── 3.png ├── react-state-patterns │ ├── .DS_Store │ ├── compound-pattern │ │ └── 1.png │ ├── hoc-pattern │ │ └── 1.png │ ├── hooks-pattern │ │ ├── prescon.png │ │ └── prescon2.png │ ├── provider-pattern │ │ └── 1.png │ └── render-props-pattern │ │ └── 1.png ├── react.svg └── rendering-patterns │ ├── .DS_Store │ ├── client-side-rendering │ └── 1.png │ ├── server-side-rendering │ └── 1.png │ ├── static-rendering │ ├── .DS_Store │ ├── 1.png │ └── 2.png │ └── streaming-ssr │ └── 1.png ├── robots.txt ├── styles.css ├── tailwind.config.js ├── theme.config.js ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .vercel 2 | .next 3 | node_modules -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/.vscode/settings.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/README.md -------------------------------------------------------------------------------- /components/Callout.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/components/Callout.tsx -------------------------------------------------------------------------------- /components/Features.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/components/Features.tsx -------------------------------------------------------------------------------- /components/StackBlitz.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/components/StackBlitz.tsx -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/custom.css -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/next-env.d.ts -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/next.config.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/package.json -------------------------------------------------------------------------------- /pages/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/.DS_Store -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/_app.tsx -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/_document.tsx -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/index.tsx -------------------------------------------------------------------------------- /pages/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/meta.json -------------------------------------------------------------------------------- /pages/patterns/design-patterns/factory-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/factory-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/introduction.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/introduction.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/meta.json -------------------------------------------------------------------------------- /pages/patterns/design-patterns/module-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/module-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/observer-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/observer-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/prototype-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/prototype-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/proxy-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/proxy-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/design-patterns/singleton-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/design-patterns/singleton-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/index.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/index.mdx -------------------------------------------------------------------------------- /pages/patterns/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/meta.json -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/browser-hints.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/browser-hints.mdx -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/dynamic-import.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/dynamic-import.mdx -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/import-on-visibility.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/import-on-visibility.mdx -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/introduction.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/introduction.mdx -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/meta.json -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/route-based-splitting.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/route-based-splitting.mdx -------------------------------------------------------------------------------- /pages/patterns/performance-patterns/static-import.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/performance-patterns/static-import.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/compound-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/compound-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/conpres.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/conpres.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/higher-order-component.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/higher-order-component.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/hooks-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/hooks-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/meta.json -------------------------------------------------------------------------------- /pages/patterns/react-patterns/provider-pattern.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/provider-pattern.mdx -------------------------------------------------------------------------------- /pages/patterns/react-patterns/render-props.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/react-patterns/render-props.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/client-side-rendering.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/client-side-rendering.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/incremental-static-regeneration.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/incremental-static-regeneration.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/introduction.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/introduction.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/meta.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/meta.json -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/server-side-rendering.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/server-side-rendering.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/static-rendering.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/static-rendering.mdx -------------------------------------------------------------------------------- /pages/patterns/rendering-patterns/streaming-ssr.mdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/pages/patterns/rendering-patterns/streaming-ssr.mdx -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/postcss.config.js -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/.DS_Store -------------------------------------------------------------------------------- /public/design-patterns/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/.DS_Store -------------------------------------------------------------------------------- /public/design-patterns/module-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/module-pattern/1.png -------------------------------------------------------------------------------- /public/design-patterns/prototype-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/prototype-pattern/1.png -------------------------------------------------------------------------------- /public/design-patterns/prototype-pattern/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/prototype-pattern/2.png -------------------------------------------------------------------------------- /public/design-patterns/prototype-pattern/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/prototype-pattern/3.png -------------------------------------------------------------------------------- /public/design-patterns/prototype-pattern/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/prototype-pattern/4.png -------------------------------------------------------------------------------- /public/design-patterns/proxy-pattern/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/proxy-pattern/001.png -------------------------------------------------------------------------------- /public/design-patterns/singleton-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/design-patterns/singleton-pattern/1.png -------------------------------------------------------------------------------- /public/fm-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/fm-logo.png -------------------------------------------------------------------------------- /public/javascript.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/javascript.svg -------------------------------------------------------------------------------- /public/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/js.png -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/logo.svg -------------------------------------------------------------------------------- /public/og-image2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/og-image2.png -------------------------------------------------------------------------------- /public/ogimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/ogimage.png -------------------------------------------------------------------------------- /public/ogimage1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/ogimage1.png -------------------------------------------------------------------------------- /public/performance-patterns/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/.DS_Store -------------------------------------------------------------------------------- /public/performance-patterns/browser-hints/prefetch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/browser-hints/prefetch.png -------------------------------------------------------------------------------- /public/performance-patterns/browser-hints/preload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/browser-hints/preload.png -------------------------------------------------------------------------------- /public/performance-patterns/introduction/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/introduction/1.png -------------------------------------------------------------------------------- /public/performance-patterns/introduction/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/introduction/2.png -------------------------------------------------------------------------------- /public/performance-patterns/introduction/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/performance-patterns/introduction/3.png -------------------------------------------------------------------------------- /public/react-state-patterns/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/.DS_Store -------------------------------------------------------------------------------- /public/react-state-patterns/compound-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/compound-pattern/1.png -------------------------------------------------------------------------------- /public/react-state-patterns/hoc-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/hoc-pattern/1.png -------------------------------------------------------------------------------- /public/react-state-patterns/hooks-pattern/prescon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/hooks-pattern/prescon.png -------------------------------------------------------------------------------- /public/react-state-patterns/hooks-pattern/prescon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/hooks-pattern/prescon2.png -------------------------------------------------------------------------------- /public/react-state-patterns/provider-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/provider-pattern/1.png -------------------------------------------------------------------------------- /public/react-state-patterns/render-props-pattern/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react-state-patterns/render-props-pattern/1.png -------------------------------------------------------------------------------- /public/react.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/react.svg -------------------------------------------------------------------------------- /public/rendering-patterns/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/.DS_Store -------------------------------------------------------------------------------- /public/rendering-patterns/client-side-rendering/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/client-side-rendering/1.png -------------------------------------------------------------------------------- /public/rendering-patterns/server-side-rendering/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/server-side-rendering/1.png -------------------------------------------------------------------------------- /public/rendering-patterns/static-rendering/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/static-rendering/.DS_Store -------------------------------------------------------------------------------- /public/rendering-patterns/static-rendering/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/static-rendering/1.png -------------------------------------------------------------------------------- /public/rendering-patterns/static-rendering/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/static-rendering/2.png -------------------------------------------------------------------------------- /public/rendering-patterns/streaming-ssr/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/public/rendering-patterns/streaming-ssr/1.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Disallow: -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/styles.css -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/tailwind.config.js -------------------------------------------------------------------------------- /theme.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/theme.config.js -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/tsconfig.json -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lydiahallie/javascript-react-patterns/HEAD/yarn.lock --------------------------------------------------------------------------------