Primer React Template 🐱⚛️

The quickest way to test out or prototype something in Primer React without having to set up a new project.

Get Started (Codespaces)

1. Click Code
2. Click new codespace
3. Pick any machine type and click create codespace
4. Wait until the container is built and Running postCreateCommand... is finished running in the bottom TERMINAL panel.
5. Now in the TERMINAL panel write the yarn start command and hit enter.
6. When it's finished building your project click Open to open a preview of it. If this doesn't happen click PORTS in the bottom window and open the Local Address from there.
7. Now you are in Mona's playground 🎉 and you can start editing the src/Playground.js file to play around with Primer React.

https://user-images.githubusercontent.com/980622/135662854-946e5d2d-b6d1-4cbf-a769-318bf52858a8.mov

Get Started (Locally)

1. Clone the project
2. Run yarn
3. Run yarn start
4. Open http://localhost:3000 to view it in the browser.
5. 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.

10 reasons why this is great

• 🧑🏻‍💻 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

Useful Links

• 🧠 Primer React Documentation
• 🌈 Primer Primitives (Colors)