Cra-template-good-start NPM

Features

⚡ typescript
⚡ eslint
⚡ prettier
⚡ editor config
⚡ sass (Dart Sass package compiled to JS)
⚡ css reset
⚡ absolute imports

Usage

To use this template, add --template good-start when creating a new app with create-react-app.

Note: if you are using Windows make sure to add the equality symbol between --template and good-start. example: --template=good-start

npx create-react-app my-app --template good-start

# OR

yarn create react-app my-app --template good-start

Then:

cd my-app

Sneak-peek

Files and folders

.
├── .editorconfig
├── .gitignore
├── .prettierrc
├── README.md
├── package.json
├── node_modules
├── public
│   └── index.html
├── src
│   ├── App.tsx
│   ├── components
│   │   └── Hello
│   │       ├── index.tsx
│   │       └── styles.module.sass
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   └── styles
│       ├── colors.sass
│       ├── global.sass
│       └── reset.sass
├── tsconfig.json
└── yarn.lock

Tsx code style

import Hello from 'components/Hello'

function App() {
  return (
    <section className="containers">
      <Hello />
    </section>
  )
}

export default App

Sass style

@use 'reset' as *
@use 'colors' as *

.containers
  display: flex
  flex-flow: column wrap
  align-items: center
  justify-content: center
  padding: 0 2rem
  background-color: $black