The quickest way to test out or prototype something in Primer React without having to set up a new project.
- Click
Code
- Click
new codespace
- Pick any machine type and click
create codespace
- Wait until the container is built and
Running postCreateCommand...
is finished running in the bottomTERMINAL
panel. - Now in the
TERMINAL
panel write theyarn start
command and hit enter. - When it's finished building your project click
Open
to open a preview of it. If this doesn't happen clickPORTS
in the bottom window and open theLocal Address
from there. - Now you are in Mona's playground 🎉 and you can start editing the
src/Playground.js
file to play around with Primer React.
Instructions.mov
- Clone the project
- Run
yarn
- Run
yarn start
- Open http://localhost:3000 to view it in the browser.
- Go to
src/Playground.js
to start prototyping.
(For GitHub staff only) Check out this talk (9 minutes 30 seconds) from @heyamie for more tips on prototyping with Primer React.
- 🧑🏻💻 Get used to using Codespaces
- 🥺 You're a new Hubber, you have enough to learn already
- 👁 Color mode test your layout quickly
- 🧖♀️ Prototype layouts outside the main platform
- 🗑 No clutter on your local computer
- 🥴 No local problems
- 🪄 No linter or formatter issues
▶️ Send over a preview link while working live on your code, no waiting for deploy previews needed.- 🚀 No need to set up a new react project, just instantly start prototyping
- 🧪 You want to learn React