summaryrefslogtreecommitdiff
path: root/examples/snowpack/src/pages/guides/react-loadable-components.md
diff options
context:
space:
mode:
authorGravatar Nate Moore <natemoo-re@users.noreply.github.com> 2021-04-26 16:54:20 -0500
committerGravatar GitHub <noreply@github.com> 2021-04-26 15:54:20 -0600
commitdea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch)
tree49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/pages/guides/react-loadable-components.md
parent0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff)
downloadastro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs * chore: update config defaults * test: update tests to config defaults * chore: update gitignore to new defaults * docs: update readme to new defaults * chore: update examples to new defaults * chore: update default exclude in lang server * chore: update tests * test: fix failing tests * chore: update www defaults
Diffstat (limited to 'examples/snowpack/src/pages/guides/react-loadable-components.md')
-rw-r--r--examples/snowpack/src/pages/guides/react-loadable-components.md38
1 files changed, 38 insertions, 0 deletions
diff --git a/examples/snowpack/src/pages/guides/react-loadable-components.md b/examples/snowpack/src/pages/guides/react-loadable-components.md
new file mode 100644
index 000000000..d22931b9b
--- /dev/null
+++ b/examples/snowpack/src/pages/guides/react-loadable-components.md
@@ -0,0 +1,38 @@
+---
+layout: ../../layouts/content.astro
+title: React + Loadable Components
+published: false
+---
+
+<div class="notification">
+ This guide has an example repo:
+ <a href="https://github.com/snowpackjs/snowpack/examples/react-loadable-components">examples/react-loadable-components</a>
+</div>
+
+_Based on [app-template-react][app-template-react]_
+
+You can lazy load React components in Snowpack when needed with React‘s builtin `React.lazy` ([docs][react-lazy]):
+
+```jsx
+import React, { useState, useEffect, Suspense } from 'react';
+
+const Async = React.lazy(() => import('./Async'));
+
+function Component() {
+ return (
+ <div>
+ <Suspense fallback={<div>Loading...</div>}>
+ <Async />
+ </Suspense>
+ </div>
+ );
+}
+```
+
+This works out-of-the-box in Snowpack, with no configuration needed!
+
+### Learn more
+
+- [`React.lazy` documentation on reactjs.org][react-lazy]
+
+[react-lazy]: https://reactjs.org/docs/code-splitting.html#reactlazy