diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-06-28 10:46:10 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-28 10:46:10 -0500 |
| commit | 7063c04dec48fcabcda104c42d61642a554f6044 (patch) | |
| tree | ccc57515b9609f9a211154e2a783ab324ee1b8ed /examples/framework-react | |
| parent | 13f50564cb8cfece7857c7b08be064d5e9e9853a (diff) | |
| download | astro-7063c04dec48fcabcda104c42d61642a554f6044.tar.gz astro-7063c04dec48fcabcda104c42d61642a554f6044.tar.zst astro-7063c04dec48fcabcda104c42d61642a554f6044.zip | |
Restructure examples (#568)
* rename kitchen sink, pull out react example
* split out the rest of the examples
* align versions
* chore: rename examples
* chore: normalize gitignore
* chore: update package versions
* chore: move framework examples to `framework` namespace
* docs: add README to examples
Co-authored-by: Austin Crim <crim.austin@principal.com>
Diffstat (limited to 'examples/framework-react')
| -rw-r--r-- | examples/framework-react/.gitignore | 18 | ||||
| -rw-r--r-- | examples/framework-react/.npmrc | 2 | ||||
| -rw-r--r-- | examples/framework-react/README.md | 7 | ||||
| -rw-r--r-- | examples/framework-react/package.json | 15 | ||||
| -rw-r--r-- | examples/framework-react/src/components/Counter.jsx | 18 | ||||
| -rw-r--r-- | examples/framework-react/src/pages/index.astro | 38 |
6 files changed, 98 insertions, 0 deletions
diff --git a/examples/framework-react/.gitignore b/examples/framework-react/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/framework-react/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/framework-react/.npmrc b/examples/framework-react/.npmrc new file mode 100644 index 000000000..0cc653b2c --- /dev/null +++ b/examples/framework-react/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true
\ No newline at end of file diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md new file mode 100644 index 000000000..016cf0f21 --- /dev/null +++ b/examples/framework-react/README.md @@ -0,0 +1,7 @@ +# Using React with Astro + +This example showcases Astro's built-in support for [React](https://reactjs.org/). + +No configuration is needed to enable React support—just start writing React components in `src/components`. + +> **Note**: If used, components _must_ include the JSX factory (ex. `import React from "react"`). Astro is unable to determine which framework is used without having the [JSX factory](https://mariusschulz.com/blog/per-file-jsx-factories-in-typescript#what-is-a-jsx-factory) in scope. diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json new file mode 100644 index 000000000..afe01f3af --- /dev/null +++ b/examples/framework-react/package.json @@ -0,0 +1,15 @@ +{ + "name": "@astrojs/example-framework-react", + "private": true, + "version": "0.0.1", + "scripts": { + "start": "astro dev", + "build": "astro build" + }, + "devDependencies": { + "astro": "^0.15.1" + }, + "snowpack": { + "workspaceRoot": "../.." + } +} diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.jsx new file mode 100644 index 000000000..3ab6728e7 --- /dev/null +++ b/examples/framework-react/src/components/Counter.jsx @@ -0,0 +1,18 @@ +import React, { useState } from 'react'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); +} diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro new file mode 100644 index 000000000..3bd650e02 --- /dev/null +++ b/examples/framework-react/src/pages/index.astro @@ -0,0 +1,38 @@ +--- +import Counter from '../components/Counter.jsx' +--- + +<html> + <head> + <meta charset="utf-8" /> + <meta + name="viewport" + content="width=device-width, initial-scale=1, viewport-fit=cover" + /> + <style> + :global(:root) { + font-family: system-ui; + padding: 2em 0; + } + :global(.counter) { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + place-items: center; + font-size: 2em; + margin-top: 2em; + } + :global(.children) { + display: grid; + place-items: center; + margin-bottom: 2em; + } + </style> + </head> + <body> + <main> + <Counter:visible> + <h1>Hello React!</h1> + </Counter:visible> + </main> + </body> +</html> |