cra-template-good-start

A Create React App good starting point template to init a configured app with typescript, sass, eslint, prettier and more 💅

Table of Contents

• Features
• Usage
• Sneak-peek
  • Files and folders
  • Tsx code style
  • Sass style
• Contributing
• License

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

Contributing

Contributions are always welcome.

There's a bunch of ways you can contribute to this project, like by:

• 🪲 Reporting a bug
• 🔌 Sending a Pull request (ask first, please)
• 📄 Improving this documentation
• 🚨 Sharing this project and recommending it to your friends
• 💵 Supporting this project on Patreon
• 🌟 Dropping a star on this repository

License

MIT © Dalton Menezes