diff options
author | 2021-04-26 16:54:20 -0500 | |
---|---|---|
committer | 2021-04-26 15:54:20 -0600 | |
commit | dea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch) | |
tree | 49569a511201b4defc23b6654b475e458452596a /examples/snowpack/src/pages/guides/react-loadable-components.md | |
parent | 0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff) | |
download | astro-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.md | 38 |
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 |