vike-react
The vike-react
package is a Vike extension that integrates React in a full-fledged manner, providing a DX like a regular frontend framework like Next.js and Remix.
Version history: CHANGELOG.md
Examples: Bati and examples/
Source code: GitHub > vikejs/vike-react
The documentation for using vike-react
can be found throughout this website (vike.dev
).
The guides, such as Guides > Data Fetching, assume you're using Vike with
vike-react
,vike-vue
, orvike-solid
. If you aren't then see the sectionsWithout vike-{react,vue,solid}
such as API >useData()
> Withoutvike-{react,vue,solid}
.
You can integrate React yourself instead of using
vike-react
, see React > Custom integration.
Notes about RSC:
Scaffold new vike-react
app
Use Bati for creating new apps.
If you select React then Bati scaffolds a Vike +
vike-react
app.
Add vike-react
to existing Vike app
To add vike-react
to an existing Vike app: install the vike-react
npm package (e.g. $ npm install vike-react
) then extend your existing +config.js
file (or create one) with vike-react
:
You can then use new settings introduced by vike-react
:
Under the hood
The vike-react
extension is only around 1k lines of code.
It's simple, readable, and highly polished.
Reading the source code of vike-react
is very much an option for understanding, debugging, and/or contributing.
Contributions are welcome! See CONTRIBUTING.md to get started.
Essentially vike-react
does this:
- Sets Vike hooks and Vike settings on your behalf.
Most notably:
- Creates new Vike settings and new Vike hooks. (By using API >
meta
.) - Implements React component hooks.
For example
useData()
andusePageContext()
. - Uses
react-streaming
for HTML Streaming.
It implements the following:
-
useData()
-
usePageContext()
-
<Layout>
-
<Wrapper>
-
ssr
-
stream
-
clientOnly()
-
reactStrictMode
-
onBeforeRenderClient()
hook -
onAfterRenderClient()
hook -
Head
-
title
-
description
-
image
-
favicon
-
viewport
-
lang
-
htmlAttributes
-
bodyAttributes
For a better overview, see the following lists instead. (They also include all settings and hooks created by
vike-react
.)