0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
astro/examples/framework-react
Nate Moore bd18e14a2c
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
..
src Update docs in compiler messages (#710) 2021-07-16 07:01:31 -04:00
.gitignore Restructure examples (#568) 2021-06-28 10:46:10 -05:00
.npmrc Restructure examples (#568) 2021-06-28 10:46:10 -05:00
astro.config.mjs [ci] yarn format 2021-07-20 04:07:49 +00:00
package.json Version Packages (next) (#794) 2021-07-21 08:18:13 -07:00
README.md Expose JSX compilation to renderers (#588) 2021-07-21 18:10:03 -05:00

Using React with Astro

This example showcases Astro's built-in support for React.

Installation

Automatic

Bootstrap your Astro project with this template!

npm init astro -- --template framework-react

Manual

To use React components in your Astro project:

  1. Install @astrojs/renderer-react

    npm i @astrojs/renderer-react
    
  2. Add "@astrojs/renderer-react" to your renderers in astro.config.mjs.

    export default {
      renderers: [
        "@astrojs/renderer-react",
        // optionally, others...
      ]
    }
    

Usage

Write your React components as .jsx or .tsx files in your project.