Purpose

The purpose of this project is to provide a dev-ready starting point for modern React apps that utilize the React Spectrum design system.

It includes support for Hot Module Replacement within the Webpack DevServer.

It also includes certain development best practices such as,

• Style guide enforcement with eslint and prettier
• Git hooks to lint, test, and format staged changes pre-commit and pre-push
• A number of helpful npm scripts to make development smooth

Getting Started

Run yarn install to download all the required dependencies, then use any of the available scripts below.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.

yarn start:https

Runs the app in the development mode in a secure environment.
Open https://localhost:1234 to view it in the browser.

Given that localhost wont have a valid certificate, Chrome might throw some errors when loading the page, visit chrome://flags and enable allow-insecure-localhost

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn storybook

This will start the storybook server listening on port 6006. Using storybook to build components is encouraged as it offers more flexibility in the states you start your components with, enforces isolation between components, and makes a more testable set of components.

Creating a component

yarn generate || yarn g

Leverages Plop to generate a new component, in addition to generating a new component it will create a .test.tsx, .story.tsx and index.tsx. Using this command is encouraged to enforce best development practices by always creating tests and stories for each component.

Testing  🧪

Jest Testing Framework and React Testing Library are included in this repo; using these two tools for testing is strongly recommended but they can be replaced with any other of your choosing.

Stories  📚

This repo supports .story.tsx stories!

• TSX stories allows you to create stories for different states of your component.

Styling 🎨

• Ideally use Spectrum components for layouts if that's not possible, use flex or grid for layout.

• Styled-Components is included in this repo, ideal for minor component customizations.

• Avoid deep customization on default Spectrum styling as this can potentially break the built-in accessibility features each component has. If you find yourself customizing the components too much, it might be worth to revisit your design.

Contributing 🙏

1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Squash all your commits
5. Push your work back up to your fork
6. Submit a Pull request so that your changes can be reviewed!

Questions ❓

Feel free to file an issue or send me an email