Skip to content

React + Typescript + Scss Starter Template. Prettier + Craco + Eslint + Stylelint are also configured.

Notifications You must be signed in to change notification settings

Graffino/Graffino-React-Starter-Template

Repository files navigation

React TypeScript Sass Starter Template

This is a React adaptation of Graffino Docker Ninja and 98% of the styling code is taken from there.

This is a starter template for building React projects with TypeScript and Sass, featuring alias paths, Webpack configurations via Craco, Prettier Eslint & Stylelint.

Project Features

  • Clean HTML file.
  • Restructured all the react-boiler-plate folders for best practices.
  • Added Sass starter code structure located in the src/styles folder.
  • Sass modules for each react component with examples (home and about).
  • The Sass modules object has types for each CSS class. That results in real-time autocompletion for any Sass classes written inside the module, keeping the code tidy using the typescript-plugin-css-modules library.
  • For styling rules, the project has .stylint configured for the best and most scalable code.
  • For JavaScript code (.ts, tsx) rules, the project has .eslint configured using Airbnb rules and some custom rules.
  • For code formatting, the project includes Prettier, and stylint & eslint are configured for using Prettier as the main formatter.
  • tsconfig, eslint, and CRACO config (Create React App Overrides) are configured for using alias paths (@components) for dynamic imports and easy future changes.
  • The PurgeCSS was added to package.json as a post-build operation. This will eliminate all the CSS code that is not used.

CRACO:

  • configured to enable the .stylint warnings after the build was done.
  • configured for using the source-map based on the environment mode.
  • configured to create @styles alias for Sass alias paths imports.
  • configured to include the SCSS module without adding the class name with the file name included (as it is by default).
  • configured to modify the scss module object property names as follow: any “--” will be transformed in “_modifier_” and “-” to “_”. This will allow to access any object property name without extra notation [""]. For example from: scss["bg-color"] to simply: scss.bg_color

JSX

  • The project includes a structured example of using React Router to create the routes and display them in the header navigation section with active link functionality implemented.
  • The project includes a common folder inside the /components folder that should include all shared components and has an example of a button component with multiple styles based on variant type.
  • In the /utils folder, the routes are structured as an array of objects. Also, the “classes” function helps the developer use a much cleaner way to combine string classes with scss module object classes by passing them as parameters. There are examples of this too.
  • The /assets folder is structured based on the asset type, and for fonts, for example, it is structured based on font file type ("wolff" and “woff2”).

Some Advice

  • Do not edit or delete the .vscode/ directory. It is used for changing the Typescript version for the typescript-plugin-css-modules library to work properly.
  • You will have a vs-code notification for changing the typescript version and you have to allow it. After that, if you don't see the scss module object properties, restart the vs-code
  • You should not edit the .eslint, tsconfig, craco config, or .stylint config files unless you really know what you are modifying.
  • The src/styles/common.scss file should not be replaced anywhere else. The Webpack from CRACO config is configured for that specific path.
  • The formatClassNamesTypes.ts file is used to modify all the scss module object types accordingly to the craco config.
  • You should keep the style structure as the components and all the structures as they are.
  • Do not remove the post-build script from package.json, it is used to purge all unused css after the build is completed.
  • If you need more alias paths, don't forget to update all the 3 files .eslitrrc.js file, tsconfig.js & CRACO file.
  • You should only use scss for styling and not simply CSS. The whole project was created for that.
  • Any @keyframe animation must be inside the _animations.scs file and start with the “key” keyword. This will prevent the css-loader to hash the animation name.
  • When you use an animation inside the scss module file, you will get that animation name as a property inside the scss module object. There is a bug in the css-loader plugin. Anyway this will not affect the project functionality.

Getting Started

You need to have the following extensions:

  • prettier
  • stylelit
  • eslint

Not needed, but will make your life much easier:

  • auto rename tag
  • auto import
  • all autocomplete
  • CSS peek
  • svg viewer
  • template string converter
  • remove unused imports

To use this starter template, clone the repository and run the following commands:

npm install
npm start

or

yarn
yarn start

Allow the project to change your typescript version for the typescript-plugin-css-modules to work. If needed, restart the vs-code. If you don't see the vs-code notification in the bottom-right corner, go to any .ts/.tsx file, this will trigger the vs-code typescript version notification.

For just building the project:

npm run build
yarn build

For buildings with additional information:

npm run build:verbose
yarn build:verbose

About

React + Typescript + Scss Starter Template. Prettier + Craco + Eslint + Stylelint are also configured.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published