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
-
⚡ 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