From bd18e14a2c05d473b9822ddaf9ebada48e2d75dd Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 21 Jul 2021 18:10:03 -0500 Subject: 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 * 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 Co-authored-by: Abdullah Mzaien * 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 Co-authored-by: Abdullah Mzaien --- examples/framework-react/README.md | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) (limited to 'examples/framework-react/README.md') diff --git a/examples/framework-react/README.md b/examples/framework-react/README.md index dd82a447f..3701554be 100644 --- a/examples/framework-react/README.md +++ b/examples/framework-react/README.md @@ -1,11 +1,38 @@ # Using React with Astro -``` +This example showcases Astro's built-in support for [React](https://reactjs.org/). + +## Installation + +### Automatic + +Bootstrap your Astro project with this template! + +```shell npm init astro -- --template framework-react ``` -This example showcases Astro's built-in support for [React](https://reactjs.org/). +### Manual + +To use React components in your Astro project: + +1. Install `@astrojs/renderer-react` + + ```shell + npm i @astrojs/renderer-react + ``` + +2. Add `"@astrojs/renderer-react"` to your `renderers` in `astro.config.mjs`. + + ```js + export default { + renderers: [ + "@astrojs/renderer-react", + // optionally, others... + ] + } + ``` -No configuration is needed to enable React support—just start writing React components in `src/components`. +## Usage -> **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. +Write your React components as `.jsx` or `.tsx` files in your project. -- cgit v1.2.3