Giter VIP home page Giter VIP logo

cra-template-good-start's Introduction

react logo

cra-template-good-start

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

patreon url npm version npm version

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

License

MIT Β© Dalton Menezes

cra-template-good-start's People

Contributors

daltonmenezes avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.