diff --git a/examples/astro-react-demo/.gitignore b/examples/astro-react-demo/.gitignore new file mode 100644 index 0000000..16d54bb --- /dev/null +++ b/examples/astro-react-demo/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/examples/astro-react-demo/README.md b/examples/astro-react-demo/README.md new file mode 100644 index 0000000..f036afa --- /dev/null +++ b/examples/astro-react-demo/README.md @@ -0,0 +1,13 @@ +# Astro + React Example + +```sh +npm create astro@latest -- --template framework-react +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react) +[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-react) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-react/devcontainer.json) + +This example showcases Astro working with [React](https://react.dev). + +Write your React components as `.jsx` or `.tsx` files in your project. diff --git a/examples/astro-react-demo/astro.config.mjs b/examples/astro-react-demo/astro.config.mjs new file mode 100644 index 0000000..4b5a68e --- /dev/null +++ b/examples/astro-react-demo/astro.config.mjs @@ -0,0 +1,8 @@ +import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; + +// https://astro.build/config +export default defineConfig({ + // Enable React to support React JSX components. + integrations: [react()], +}); diff --git a/examples/astro-react-demo/package.json b/examples/astro-react-demo/package.json new file mode 100644 index 0000000..3da40c9 --- /dev/null +++ b/examples/astro-react-demo/package.json @@ -0,0 +1,23 @@ +{ + "name": "astro-react-demo", + "version": "0.0.1", + "type": "module", + "scripts": { + "astro": "astro", + "build": "astro check && astro build", + "dev": "astro dev", + "preview": "astro preview", + "start": "astro dev" + }, + "dependencies": { + "@astrojs/check": "^0.9.3", + "@astrojs/react": "^3.6.2", + "@formspree/react": "*", + "@types/react": "^18.3.5", + "@types/react-dom": "^18.3.0", + "astro": "^4.15.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "typescript": "^5.5.4" + } +} diff --git a/examples/astro-react-demo/public/favicon.svg b/examples/astro-react-demo/public/favicon.svg new file mode 100644 index 0000000..f157bd1 --- /dev/null +++ b/examples/astro-react-demo/public/favicon.svg @@ -0,0 +1,9 @@ + + + + diff --git a/examples/astro-react-demo/src/components/ContactForm.css b/examples/astro-react-demo/src/components/ContactForm.css new file mode 100644 index 0000000..16f6a0a --- /dev/null +++ b/examples/astro-react-demo/src/components/ContactForm.css @@ -0,0 +1,59 @@ +.contact-form { + max-width: 500px; + margin: 0 auto; + padding: 20px; + background-color: #f8f9fa; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.contact-form h2 { + text-align: center; + color: #333; + margin-bottom: 20px; +} + +.contact-form label { + display: block; + margin-bottom: 5px; + color: #555; +} + +.contact-form input, +.contact-form textarea { + width: calc(100% - 20px); + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +.contact-form textarea { + height: 150px; + resize: vertical; +} + +.contact-form button { + display: block; + width: 100%; + padding: 12px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.contact-form button:hover { + background-color: #0056b3; +} + +.contact-form .error { + color: #dc3545; + font-size: 14px; + margin-top: -10px; + margin-bottom: 10px; +} diff --git a/examples/astro-react-demo/src/components/ContactForm.tsx b/examples/astro-react-demo/src/components/ContactForm.tsx new file mode 100644 index 0000000..a6dddf5 --- /dev/null +++ b/examples/astro-react-demo/src/components/ContactForm.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import './ContactForm.css'; + +import { useForm, ValidationError } from '@formspree/react'; + +function ContactForm() { + const [state, handleSubmit] = useForm("YOUR_FORM_ID"); + + if (state.succeeded) { + return

Thanks for your submission!

; + } + + return ( +
+ + + + +