astro/examples/framework-react/README.md

# 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.
update examples for stackblitz (#1379) 2021-09-16 10:06:22 -05:00			`# Astro + React Example`
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> 2021-06-28 10:46:10 -05:00
Fix: lang unspecified code blocks (#8461) 2023-09-11 06:45:21 -05:00			```sh
.md only: npm init astro --> npm create astro (#4760) * .md only: npm init astro --> npm create astro For consistency with https://github.com/withastro/docs/pull/360. Docs always use `npm create astro` (never `npm init astro`), README.md files in this repo should do the same. Search: `\b(npm\|yarn\|pnpm) init astro\b` Replace: `$1 create astro` Except for two instances: 1. `packages/create-astro/CHANGELOG.md` -- skipped because changelog. 2. `packages/create-astro/test/create-astro.test.js.skipped` -- skipped, old test disabled in https://github.com/withastro/astro/pull/3168. * docs: add `@latest` to `npm create astro` Co-authored-by: Bjorn Lu <bjorn@bjornlu.com> Co-authored-by: Michael Rienstra <michael@goodmoney.com> 2022-09-16 12:40:06 -05:00			`npm create astro@latest -- --template framework-react`
update example readmes (#591) * update example readmes * Update README.md 2021-07-01 07:43:25 -05:00			```

update repo URL (#1994) 2021-11-23 17:47:05 -05:00			`[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-react)`
Update open with codesandbox link to use synced sandboxes (#6105) 2023-02-03 12:52:11 -05:00			`[![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)`
Fixes example README links to open in codespaces (#6346) 2023-02-23 12:20:19 -05:00			`[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-react/devcontainer.json)`
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> 2021-06-28 10:46:10 -05:00
Link to new React docs (#6763) 2023-04-05 21:59:58 -05:00			`This example showcases Astro working with [React](https://react.dev).`
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> 2021-06-28 10:46:10 -05:00
Expose JSX compilation to renderers (#588) * feat: add support for `jsxImportSource`, new JSX transform * Renderer: add Solid renderer (#667) * feat: add support for `jsxImportSource`, new JSX transform * WIP: solid renderer * [Renderer] Solid (#656) * feat: add support for `jsxImportSource`, new JSX transform * WIP: solid renderer * Solid renderer: fix SSR of children, hydration (top level) Caveat: cannot hydrate children/descendants of hydrated parents * Fix hydration of fragments * fix: SyntaxError in React/Preact renderers * fix: errors in React/Preact renderers * feat: update react external * chore: update examples * chore: delete old changelog * chore: update astro config Co-authored-by: Nate Moore <nate@skypack.dev> * Changing the preact to Solid (#669) * chore: use new client:visible syntax * fix: dev script issue * chore: cleanup SolidJS example * docs: update framework example docs * chore: cleanup framework-multiple example * fix: remove SolidJS false-positives from Preact renderer * chore: add changeset Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com> Co-authored-by: Abdullah Mzaien <s201540830@kfupm.edu.sa> * feat(create-astro): add Solid support * docs: add JSX options to renderer reference * chore: add changeset for P/React renderers * fix: move react/server.js to external * chore: remove brewfile * Revert "feat: add support for `jsxImportSource`, new JSX transform" This reverts commit 077c4bfc135c58a85d4ebfca6012e90403694d8d. * fix: remove `react-dom/server` from `external` * chore: remove unused dependency * feat: improve JSX error messages * Revert "Revert "feat: add support for `jsxImportSource`, new JSX transform"" This reverts commit f6c2896b9ec6430611fc0abae7d586c42aca87e5. * docs: update jsxImportSource * feat: improve error message * feat: improve error logging for JSX renderers * tests: add jsx-runtime tests * chore: update snowpack Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com> Co-authored-by: Abdullah Mzaien <s201540830@kfupm.edu.sa> 2021-07-21 18:10:03 -05:00			Write your React components as `.jsx` or `.tsx` files in your project.