cra-template-good-start
v1.2.1
Published
A Create React App good starting point template to init a configured app with typescript, sass, eslint, prettier and more
Downloads
15
Maintainers
Readme
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:
- :beetle: Reporting a bug
- :electric_plug: Sending a Pull request (ask first, please)
- :page_facing_up: Improving this documentation
- :rotating_light: Sharing this project and recommending it to your friends
- :dollar: Supporting this project on Patreon
- :star2: Dropping a star on this repository