This example project shows Quokka configured for a create-react-app application created using v3.0.1 with all defaults.
To try Quokka with this project, you'll need to clone this repo and run
yarn install
. After installing the packages, you're ready to go.
- Open up
src/QuokkaExample.js
. - Start Quokka
- In the example, you will see that we import
src/App.js
and load it into the browser DOM. We then access the component from the DOM by its class name and are outputting its innerHTML, which displays both inline in your editor and within the Quokka console.
Because create-react-app has a few runtime dependencies, we needed to specify some additional Quokka configuration to run project files:
- Install
jsdom-quokka-plugin
package to provide browser-like environment. - Install
@babel/register
package to allow Quokka to run babel on imports.
yarn add jsdom-quokka-plugin @babel/register --dev
- Add a
.quokka
project file that tells Quokka to use thejsdom-quokka-plugin
and to transpile your files using thereact-app
babel preset.
Please note: you may install the jsdom-quokka-plugin
and @babel/register
packages to your global quokka folder
if you don't want to pollute your project's node modules. If you install
globally, you will not need to add them again for subsequent projects.
To install the packages in your global quokka folder:
cd ~/.quokka
npm install jsdom-quokka-plugin @babel/register