Primer React Template ๐Ÿฑโš›๏ธ

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

preview

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.
Instructions.mov

Get Started (CodeSandbox)

Click this link to open in CodeSandbox

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.

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